inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4038] People/GroupCloudDemo - add appName filter (#4283)

Browse Source 
* [ADF-4038] - People/Group Cloud Component add app name filter

* [ADF-4038] add unit test, modify ngOnChange appName condition

* [ADF-4038] People/GroupCloudDemo - add radio button to filter application name or roles
This commit is contained in:
Silviu Popa
2019-02-26 11:41:42 +02:00
committed by Eugenio Romano
parent 8901261ec9
commit 898d62477e
8 changed files with 150 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
View File

@@ -12,17 +12,27 @@
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="people-control-options">
<mat-form-field class="adf-preselect-value">
<mat-radio-group (change)="onChangePeopleFilterMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="role">{{
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setPeopleRoles($event)" />
</mat-form-field>
<mat-form-field class="adf-preselect-value full">
<mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setPeopleAppName($event)" />
</mat-form-field>
<mat-form-field class="adf-preselect-value-full">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
<input matInput (input)="setPeoplePreselectValue($event)" />
</mat-form-field>
</div>
<div>
<adf-cloud-people [preSelectUsers]="preSelectUsers" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
<adf-cloud-people [preSelectUsers]="preSelectUsers" [appName]="peopleAppName" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
</div>
<div class="adf-people-list" *ngIf="canShowPeopleList()">
@@ -50,18 +60,28 @@
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="groups-control-options">
<mat-form-field class="adf-preselect-value">
<mat-radio-group (change)="onChangeGroupsFilterMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="role">{{
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setGroupRoles($event)" />
</mat-form-field>
<mat-form-field class="adf-preselect-value full">
<mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setGroupAppName($event)" />
</mat-form-field>
<mat-form-field class="adf-preselect-value-full">
<mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
<input matInput (input)="setGroupsPreselectValue($event)" />
</mat-form-field>
</div>
<div>
<adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
(removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
<adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [appName]="groupAppName" [preSelectGroups]="preSelectGroup"
(selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
</div>
<div class="adf-group-list" *ngIf="canShowGroupList()">

6
demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss
View File

@@ -18,9 +18,13 @@
margin-right: 15px;
min-width: 330px;
&-full {
&-big {
width:60%;
}
&-full {
width:100%;
}
}
}
}

47
demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
View File

@@ -27,17 +27,22 @@ import { MatRadioChange } from '@angular/material';
})
export class PeopleGroupCloudDemoComponent {
DEFAULT_FILTER_MODE: string = 'appName';
DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"email": "example@alfresco.com", "firstName":"Administrator", "lastName": "ADF"}]`;
peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
preSelectUsers: string[] = [];
peopleRoles: string[] = [];
peopleAppName: string;
peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
groupMode: string = GroupCloudComponent.MODE_SINGLE;
preSelectGroup: GroupModel[] = [];
selectedGroupList: GroupModel[] = [];
groupRoles: string[];
groupAppName: string;
groupFilterMode: string = this.DEFAULT_FILTER_MODE;
setPeoplePreselectValue(event: any) {
this.preSelectUsers = this.getArrayFromString(event.target.value);
@@ -55,6 +60,14 @@ export class PeopleGroupCloudDemoComponent {
this.groupRoles = this.getArrayFromString(event.target.value);
}
setPeopleAppName(event: any) {
this.peopleAppName = event.target.value;
}
setGroupAppName(event: any) {
this.groupAppName = event.target.value;
}
onChangePeopleMode(event: MatRadioChange) {
this.peopleMode = event.value;
this.preSelectUsers = [...this.preSelectUsers];
@@ -65,6 +78,40 @@ export class PeopleGroupCloudDemoComponent {
this.preSelectGroup = [...this.preSelectGroup];
}
onChangePeopleFilterMode(event: MatRadioChange) {
this.peopleFilterMode = event.value;
this.resetPeopleFilter();
}
onChangeGroupsFilterMode(event: MatRadioChange) {
this.groupFilterMode = event.value;
this.restGroupFilter();
}
isPeopleAppNameSelected() {
return this.peopleFilterMode === 'appName';
}
isGroupAppNameSelected() {
return this.groupFilterMode === 'appName';
}
resetPeopleFilter() {
if (this.isPeopleAppNameSelected()) {
this.peopleRoles = [];
} else {
this.peopleAppName = '';
}
}
restGroupFilter() {
if (this.isGroupAppNameSelected()) {
this.groupRoles = [];
} else {
this.groupAppName = '';
}
}
isStringArray(str: string) {
try {
const result = JSON.parse(str);