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

5
demo-shell/resources/i18n/en.json
View File

@@ -293,7 +293,10 @@
"SINGLE": "Single Selection",
"MULTI": "Multiple Selection",
"PRESELECTED_VALUE": "Preselect: ",
"ROLE": "Roles: "
"ROLE": "Roles: ",
"APP_NAME": "Aplication Name",
"APP_FILTER_MODE": "Filter by application name",
"ROLE_FILTER_MODE": "Filter by role"
},
"ABOUT": {
"TITLE": "Plugins",

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);

22
lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
View File

@@ -26,6 +26,7 @@ import { GroupCloudService } from '../services/group-cloud.service';
import { setupTestBed, AlfrescoApiServiceMock } from '@alfresco/adf-core';
import { mockGroups } from '../mock/group-cloud.mock';
import { GroupModel } from '../models/group.model';
import { SimpleChange } from '@angular/core';
describe('GroupCloudComponent', () => {
let component: GroupCloudComponent;
@@ -59,6 +60,9 @@ describe('GroupCloudComponent', () => {
});
it('should be able to fetch client id', async(() => {
component.ngOnChanges( {
appName: new SimpleChange(null, component.appName, true)
});
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
@@ -291,4 +295,22 @@ describe('GroupCloudComponent', () => {
expect(checkGroupHasAccessSpy).not.toHaveBeenCalled();
});
}));
it('should load the clients if appName change', async( () => {
component.appName = 'ADF';
fixture.detectChanges();
fixture.whenStable().then( () => {
fixture.detectChanges();
expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
});
}));
it('should filter users if appName change', async(() => {
component.appName = 'ADF';
fixture.detectChanges();
fixture.whenStable().then( () => {
fixture.detectChanges();
expect(checkGroupHasAccessSpy).toHaveBeenCalled();
});
}));
});

17
lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts
View File

@@ -107,19 +107,24 @@ export class GroupCloudComponent implements OnInit, OnChanges {
}
ngOnInit() {
this.initSearch();
if (this.appName) {
this.disableSearch();
this.loadClientId();
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.preSelectGroups && this.hasPreSelectGroups()) {
this.loadPreSelectGroups();
}
if (changes.appName && this.isAppNameChanged(changes.appName)) {
this.disableSearch();
this.loadClientId();
} else {
this.enableSearch();
}
}
private isAppNameChanged(change) {
return change.previousValue !== change.currentValue && this.appName && this.appName.length > 0;
}
private async loadClientId() {

23
lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.spec.ts
View File

@@ -31,6 +31,7 @@ describe('PeopleCloudComponent', () => {
let identityService: IdentityUserService;
let findUsersSpy: jasmine.Spy;
let checkUserHasAccessSpy: jasmine.Spy;
let loadClientsByApplicationNameSpy: jasmine.Spy;
setupTestBed({
imports: [ProcessServiceCloudTestingModule, StartTaskCloudTestingModule],
@@ -44,7 +45,7 @@ describe('PeopleCloudComponent', () => {
identityService = TestBed.get(IdentityUserService);
findUsersSpy = spyOn(identityService, 'findUsersByName').and.returnValue(of(mockUsers));
checkUserHasAccessSpy = spyOn(identityService, 'checkUserHasClientApp').and.returnValue(of(true));
spyOn(identityService, 'getClientIdByApplicationName').and.returnValue(of('mock-client-id'));
loadClientsByApplicationNameSpy = spyOn(identityService, 'getClientIdByApplicationName').and.returnValue(of('mock-client-id'));
});
it('should create PeopleCloudComponent', () => {
@@ -294,4 +295,24 @@ describe('PeopleCloudComponent', () => {
expect(checkUserHasRoleSpy).not.toHaveBeenCalled();
});
}));
it('should load the clients if appName change', async( () => {
component.appName = 'ADF';
fixture.detectChanges();
fixture.whenStable().then( () => {
fixture.detectChanges();
expect(loadClientsByApplicationNameSpy).toHaveBeenCalled();
});
}));
it('should filter users if appName change', async(() => {
component.appName = '';
fixture.detectChanges();
component.appName = 'ADF';
fixture.detectChanges();
fixture.whenStable().then( () => {
fixture.detectChanges();
expect(checkUserHasAccessSpy).toHaveBeenCalled();
});
}));
});

17
lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts
View File

@@ -102,17 +102,23 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
this.selectedUsersSubject = new BehaviorSubject<IdentityUserModel[]>(this.preSelectUsers);
this.selectedUsers$ = this.selectedUsersSubject.asObservable();
this.initSearch();
if (this.appName) {
this.disableSearch();
this.loadClientId();
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.preSelectUsers && this.hasPreSelectUsers()) {
this.loadPreSelectUsers();
}
if (changes.appName && this.isAppNameChanged(changes.appName)) {
this.disableSearch();
this.loadClientId();
} else {
this.enableSearch();
}
}
private isAppNameChanged(change) {
return change.previousValue !== change.currentValue && this.appName && this.appName.length > 0;
}
private initSearch() {
@@ -202,6 +208,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
}
private async loadClientId() {
this.clientId = await this.identityUserService.getClientIdByApplicationName(this.appName).toPromise();
if (this.clientId) {