diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html index af8bb1f59f..19cf3c3799 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html @@ -4,10 +4,15 @@ *ngIf="isRequired()">* + + diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts index d07736a0d0..ad62f6a801 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts @@ -17,6 +17,9 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { baseHost, WidgetComponent, IdentityGroupModel } from '@alfresco/adf-core'; +import { FormControl } from '@angular/forms'; +import { filter, takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; /* tslint:disable:component-selector */ @@ -28,10 +31,13 @@ import { baseHost, WidgetComponent, IdentityGroupModel } from '@alfresco/adf-cor }) export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit { + private onDestroy$ = new Subject(); + roles: string[]; mode: string; title: string; preSelectGroup: IdentityGroupModel[]; + search: FormControl; ngOnInit() { if (this.field) { @@ -40,17 +46,57 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit this.title = this.field.placeholder; this.preSelectGroup = this.field.value ? this.field.value : []; } + this.search = new FormControl({value: '', disabled: this.field.readOnly}, []), + + this.search.statusChanges + .pipe( + filter((value: string) => { + return value === 'INVALID'; + }), + takeUntil(this.onDestroy$) + ) + .subscribe(() => { + this.field.markAsInvalid(); + this.field.form.markAsInvalid(); + }); + + this.search.statusChanges + .pipe( + filter((value: string) => { + return value === 'VALID'; + }), + takeUntil(this.onDestroy$) + ) + .subscribe(() => { + this.field.validate(); + this.field.form.validateForm(); + }); + } + + ngOnDestroy() { + this.onDestroy$.next(true); + this.onDestroy$.complete(); } onSelectGroup(group: IdentityGroupModel) { - this.field.value = [...this.field.value, group]; + this.field.value = [...this.preSelectGroup, group]; this.onFieldChanged(this.field); } onRemoveGroup(group: IdentityGroupModel) { - const indexToRemove = this.field.value.findIndex((selected) => { return selected.id === group.id; }); - this.field.value.splice(indexToRemove, 1); - this.field.value = [...this.field.value]; + if (this.isMultipleMode()) { + const indexToRemove = this.preSelectGroup.findIndex((selectedUser) => { return selectedUser.id === group.id; }); + if (indexToRemove > -1) { + this.preSelectGroup.splice(indexToRemove, 1); + } + } else { + this.preSelectGroup = []; + } + this.field.value = [...this.preSelectGroup]; this.onFieldChanged(this.field); } + + isMultipleMode(): boolean { + return this.mode === 'multiple'; + } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html index a106006784..e3f0baf406 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html @@ -6,13 +6,13 @@ [validate]="true" [appName]="appName" [title]="title" + [readOnly]="field.readOnly" + [searchUserCtrl]="search" (selectUser)="onSelectUser($event)" (removeUser)="onRemoveUser($event)" [roles]="roles" [mode]="mode"> - diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts index a79549e48e..6b59ad2ca3 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts @@ -17,6 +17,9 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { baseHost, WidgetComponent, IdentityUserModel } from '@alfresco/adf-core'; +import { FormControl } from '@angular/forms'; +import { filter, takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; /* tslint:disable:component-selector */ @@ -28,11 +31,14 @@ import { baseHost, WidgetComponent, IdentityUserModel } from '@alfresco/adf-core }) export class PeopleCloudWidgetComponent extends WidgetComponent implements OnInit { + private onDestroy$ = new Subject(); + appName: string; roles: string[]; mode: string; title: string; preSelectUsers: IdentityUserModel[]; + search: FormControl; ngOnInit() { if (this.field) { @@ -41,17 +47,57 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni this.title = this.field.placeholder; this.preSelectUsers = this.field.value ? this.field.value : []; } + this.search = new FormControl({value: '', disabled: this.field.readOnly}, []), + + this.search.statusChanges + .pipe( + filter((value: string) => { + return value === 'INVALID'; + }), + takeUntil(this.onDestroy$) + ) + .subscribe(() => { + this.field.markAsInvalid(); + this.field.form.markAsInvalid(); + }); + + this.search.statusChanges + .pipe( + filter((value: string) => { + return value === 'VALID'; + }), + takeUntil(this.onDestroy$) + ) + .subscribe(() => { + this.field.validate(); + this.field.form.validateForm(); + }); + } + + ngOnDestroy() { + this.onDestroy$.next(true); + this.onDestroy$.complete(); } onSelectUser(user: IdentityUserModel) { - this.field.value = [...this.field.value, user]; + this.field.value = [...this.preSelectUsers, user]; this.onFieldChanged(this.field); } onRemoveUser(user: IdentityUserModel) { - const indexToRemove = this.field.value.findIndex((selectedUser) => { return selectedUser.id === user.id; }); - this.field.value.splice(indexToRemove, 1); - this.field.value = [...this.field.value]; + if (this.isMultipleMode()) { + const indexToRemove = this.preSelectUsers.findIndex((selectedUser) => { return selectedUser.id === user.id; }); + if (indexToRemove > -1) { + this.preSelectUsers.splice(indexToRemove, 1); + } + } else { + this.preSelectUsers = []; + } + this.field.value = [...this.preSelectUsers]; this.onFieldChanged(this.field); } + + isMultipleMode(): boolean { + return this.mode === 'multiple'; + } } 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 f7b3863925..7c1306bad5 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 @@ -10,7 +10,7 @@ [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"> {{group.name}} cancel 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 5bd460df85..d42d58e4ce 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 @@ -71,6 +71,11 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy { @Input() preSelectGroups: IdentityGroupModel[] = []; + /** Show the info in readonly mode + */ + @Input() + readOnly: boolean = false; + /** FormControl to search the group */ @Input() searchGroupsControl: FormControl = new FormControl(); diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html index 16c6b5887f..b18d1939ff 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html @@ -11,7 +11,7 @@ {{user | fullName}} cancel diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts index a640050cf0..fded3f2598 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts @@ -16,7 +16,7 @@ */ import { PeopleCloudComponent } from './people-cloud.component'; -import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing'; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { IdentityUserService, AlfrescoApiService, CoreModule, setupTestBed } from '@alfresco/adf-core'; import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module'; import { of } from 'rxjs'; @@ -392,8 +392,6 @@ describe('PeopleCloudComponent', () => { describe('Single Mode and Pre-selected users with validate flag', () => { - const change = new SimpleChange(null, mockPreselectedUsers, false); - beforeEach(async(() => { component.mode = 'single'; component.validate = true; @@ -410,17 +408,6 @@ describe('PeopleCloudComponent', () => { done(); }); }); - - it('should pre-select preSelectUsers[0] when mode=single', fakeAsync(() => { - component.mode = 'single'; - fixture.detectChanges(); - spyOn(component, 'filterPreselectUsers').and.returnValue(Promise.resolve(mockPreselectedUsers)); - component.ngOnChanges({ 'preSelectUsers': change }); - fixture.detectChanges(); - tick(); - const selectedUser = component.searchUserCtrl.value; - expect(selectedUser.id).toBe(mockUsers[1].id); - })); }); describe('Multiple Mode and Pre-selected users with no validate flag', () => { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index 470d026396..0134287d0b 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts @@ -63,6 +63,11 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { @Input() validate: Boolean = false; + /** Show the info in readonly mode + */ + @Input() + readOnly: boolean = false; + /** Array of users to be pre-selected. All users in the * array are pre-selected in multi selection mode, but only the first user * is pre-selected in single selection mode. @@ -73,7 +78,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { /** FormControl to search the user */ @Input() - searchUserCtrl = new FormControl(); + searchUserCtrl: FormControl = new FormControl(); /** Placeholder translation key */ @@ -256,6 +261,8 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { private initSearch() { this.searchUserCtrl.valueChanges.pipe( + debounceTime(500), + distinctUntilChanged(), filter((value) => { return typeof value === 'string'; }), @@ -268,8 +275,6 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } } }), - debounceTime(500), - distinctUntilChanged(), tap(() => { this.resetSearchUsers(); }), @@ -418,10 +423,10 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } onRemove(user: IdentityUserModel) { - this.removeUser.emit(user); const indexToRemove = this.preSelectUsers.findIndex((selectedUser) => { return selectedUser.id === user.id; }); this.preSelectUsers.splice(indexToRemove, 1); this.selectedUsersSubject.next(this.preSelectUsers); + this.removeUser.emit(user); } getDisplayName(user): string {