From b4c6a2252a48ab8b8c4a67e5a2f5858878fbe1d4 Mon Sep 17 00:00:00 2001 From: Silviu Popa Date: Wed, 6 Feb 2019 17:28:35 +0200 Subject: [PATCH] =?UTF-8?q?[ADF-3997]=20-=20Add=20ngOnChange=20functionali?= =?UTF-8?q?ty=20for=20People/Group=20Demo=20Cloud=E2=80=A6=20(#4244)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ADF-3997] - Add ngOnChange functionality for People/Group Demo Cloud Component * [ADF-3997] - change radio label value * [ADF-3997] - css fix * rebase branch and fix issues * [ADF-3997] - change labels and fix preselected users issues * [ADF-3997] fix package-lock.json * [ADF-3997] - change people preselect placeholder --- demo-shell/resources/i18n/en.json | 8 ++-- .../people-groups-cloud-demo.component.html | 46 +++++++++++-------- .../people-groups-cloud-demo.component.scss | 5 ++ .../people-groups-cloud-demo.component.ts | 15 ++++-- .../components/group-cloud.component.html | 2 +- .../group/components/group-cloud.component.ts | 19 ++++---- .../people-cloud/people-cloud.component.ts | 17 ++++--- 7 files changed, 69 insertions(+), 43 deletions(-) diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index a725c10ed6..750c165e43 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -290,10 +290,10 @@ "CUSTOMIZE_FILTERS": "Customise your filter" }, "PEOPLE_GROUPS_CLOUD": { - "SINGLE": "Single", - "MULTI": "Multi", - "PRESELECTED_VALUE": "Preselect value", - "ROLE": "Preselect roles" + "SINGLE": "Single Selection", + "MULTI": "Multiple Selection", + "PRESELECTED_VALUE": "Preselect: ", + "ROLE": "Roles: " }, "ABOUT": { "TITLE": "Plugins", diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html index d3d0854560..c7bcf39771 100644 --- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html +++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html @@ -4,19 +4,20 @@ +
+ + {{ + 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }} + {{ + 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }} +
- - {{ - 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }} - {{ - 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }} - - {{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} - + {{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"] + - - {{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} + + {{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}
@@ -41,16 +42,21 @@ +
+ + {{ + 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }} + {{ + 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }} +
- - {{ - 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }} - {{ - 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }} - - {{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} - + {{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"] + + + + Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }} +
@@ -58,9 +64,9 @@ (removeGroup)="onRemoveGroup($event)">
-
+
- + group {{ item.name }} diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss index 935416075e..539d1c9b00 100644 --- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss +++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss @@ -16,6 +16,11 @@ .adf-preselect-value { margin-right: 15px; + min-width: 330px; + + &-full { + width:60%; + } } } } diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts index 524ab507cb..f670c9b282 100644 --- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts +++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts @@ -27,12 +27,15 @@ import { MatRadioChange } from '@angular/material'; }) export class PeopleGroupCloudDemoComponent { + 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[] = []; groupMode: string = GroupCloudComponent.MODE_SINGLE; - preSelectGroup: string[] = []; + preSelectGroup: GroupModel[] = []; selectedGroupList: GroupModel[] = []; groupRoles: string[]; @@ -54,10 +57,12 @@ export class PeopleGroupCloudDemoComponent { onChangePeopleMode(event: MatRadioChange) { this.peopleMode = event.value; + this.preSelectUsers = [...this.preSelectUsers]; } onChangeGroupsMode(event: MatRadioChange) { this.groupMode = event.value; + this.preSelectGroup = [...this.preSelectGroup]; } isStringArray(str: string) { @@ -82,13 +87,17 @@ export class PeopleGroupCloudDemoComponent { return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE; } + canShowGroupList() { + return this.groupMode === GroupCloudComponent.MODE_MULTIPLE; + } + onRemoveGroup(group: GroupModel) { - this.selectedGroupList = this.selectedGroupList.filter((value: any) => value.id !== group.id); + this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id); } onSelectGroup(group: GroupModel) { if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) { - this.selectedGroupList.push(group); + this.preSelectGroup.push(group); } } diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html index a7a386ecb0..5941c3d6dc 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html @@ -13,7 +13,7 @@ [formControl]="searchGroupsControl" class="adf-group-input" id="group-name" - [disabled]="isDisabled" + [attr.disabled]="isDisabled" data-automation-id="adf-cloud-group-search-input" (focus)="setFocus(true)" (blur)="setFocus(false)" diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts index b88b9dd007..b899624485 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ElementRef, OnInit, Output, EventEmitter, ViewChild, ViewEncapsulation, Input } from '@angular/core'; +import { Component, ElementRef, OnInit, Output, EventEmitter, ViewChild, ViewEncapsulation, Input, SimpleChanges, OnChanges } from '@angular/core'; import { FormControl } from '@angular/forms'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { Observable, of, BehaviorSubject } from 'rxjs'; @@ -39,7 +39,7 @@ import { distinctUntilChanged, switchMap, mergeMap, filter, tap } from 'rxjs/ope ], encapsulation: ViewEncapsulation.None }) -export class GroupCloudComponent implements OnInit { +export class GroupCloudComponent implements OnInit, OnChanges { static MODE_SINGLE = 'single'; static MODE_MULTIPLE = 'multiple'; @@ -107,9 +107,6 @@ export class GroupCloudComponent implements OnInit { } ngOnInit() { - if (this.hasPreSelectGroups()) { - this.loadPreSelectGroups(); - } this.initSearch(); @@ -119,13 +116,18 @@ export class GroupCloudComponent implements OnInit { } } + ngOnChanges(changes: SimpleChanges) { + if (changes.preSelectGroups && this.hasPreSelectGroups()) { + this.loadPreSelectGroups(); + } + } + private async loadClientId() { this.clientId = await this.groupService.getClientIdByApplicationName(this.appName).toPromise(); if (this.clientId) { this.enableSearch(); } } - initSearch() { this.searchGroupsControl.valueChanges.pipe( filter((value) => { @@ -191,9 +193,11 @@ export class GroupCloudComponent implements OnInit { private loadPreSelectGroups() { if (this.isMultipleMode()) { + this.selectedGroups = []; this.preSelectGroups.forEach((group: GroupModel) => { this.selectedGroups.push(group); }); + this.selectedGroupsSubject.next(this.selectedGroups); } else { this.searchGroupsControl.setValue(this.preSelectGroups[0]); this.onSelect(this.preSelectGroups[0]); @@ -204,8 +208,7 @@ export class GroupCloudComponent implements OnInit { return this.groupService.checkGroupHasRole(group.id, this.roles).pipe( mergeMap((hasRole) => { return hasRole ? of(group) : of(); - }) - ); + })); } onSelect(selectedGroup: GroupModel) { diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts index 89b68c4e9b..381aec84ef 100644 --- a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts @@ -16,7 +16,7 @@ */ import { FormControl } from '@angular/forms'; -import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ViewChild, ElementRef, SimpleChanges, OnChanges } from '@angular/core'; import { Observable, of, BehaviorSubject } from 'rxjs'; import { switchMap, debounceTime, distinctUntilChanged, mergeMap, tap, filter } from 'rxjs/operators'; import { FullNamePipe, IdentityUserModel, IdentityUserService } from '@alfresco/adf-core'; @@ -39,7 +39,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations' encapsulation: ViewEncapsulation.None }) -export class PeopleCloudComponent implements OnInit { +export class PeopleCloudComponent implements OnInit, OnChanges { static MODE_SINGLE = 'single'; static MODE_MULTIPLE = 'multiple'; @@ -101,11 +101,6 @@ export class PeopleCloudComponent implements OnInit { ngOnInit() { this.selectedUsersSubject = new BehaviorSubject(this.preSelectUsers); this.selectedUsers$ = this.selectedUsersSubject.asObservable(); - - if (this.hasPreSelectUsers()) { - this.loadPreSelectUsers(); - } - this.initSearch(); if (this.appName) { @@ -114,6 +109,12 @@ export class PeopleCloudComponent implements OnInit { } } + ngOnChanges(changes: SimpleChanges) { + if (changes.preSelectUsers && this.hasPreSelectUsers()) { + this.loadPreSelectUsers(); + } + } + private initSearch() { this.searchUserCtrl.valueChanges.pipe( filter((value) => { @@ -195,6 +196,8 @@ export class PeopleCloudComponent implements OnInit { if (!this.isMultipleMode()) { this.searchUserCtrl.setValue(this.preSelectUsers[0]); this.preSelectUsers = []; + } else { + this.selectedUsersSubject.next(this.preSelectUsers); } }