Fix readonly Fix add remove (#5324)

* Fix readonly Fix add remove

* Remove useless unit test

* Remove useless code
This commit is contained in:
Maurizio Vitale
2019-12-11 17:51:14 +00:00
committed by Eugenio Romano
parent 88d89b4ca8
commit 7519554ded
9 changed files with 124 additions and 30 deletions

View File

@@ -4,10 +4,15 @@
*ngIf="isRequired()">*</span></label>
<adf-cloud-group [mode]="mode"
[title]="title"
[readOnly]="field.readOnly"
[roles]="roles"
[searchGroupsControl]="search"
(selectGroup)="onSelectGroup($event)"
(removeGroup)="onRemoveGroup($event)"
[preSelectGroups]="preSelectGroup">
</adf-cloud-group>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

View File

@@ -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<boolean>();
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';
}
}

View File

@@ -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">
</adf-cloud-people>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

View File

@@ -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<boolean>();
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';
}
}

View File

@@ -10,7 +10,7 @@
[attr.data-automation-id]="'adf-cloud-group-chip-' + group.name">
{{group.name}}
<mat-icon
*ngIf=!(group.readonly)
*ngIf="!(group.readonly || readOnly)"
matChipRemove [attr.data-automation-id]="'adf-cloud-group-chip-remove-icon-' + group.name">
cancel
</mat-icon>

View File

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

View File

@@ -11,7 +11,7 @@
{{user | fullName}}
<mat-icon
matChipRemove
*ngIf=!(user.readonly)
*ngIf="!(user.readonly || readOnly)"
[attr.data-automation-id]="'adf-people-cloud-chip-remove-icon-' + user.username">
cancel
</mat-icon>

View File

@@ -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', () => {

View File

@@ -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 {