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-5065] people and group picker tests, clean code (#5442)

Browse Source 
* cleanup component types

* more readable tests

* clean code

* C291998: render preselected people

* clean code

* extra tests and clean code

* fix test after rebase
This commit is contained in:
Denys Vuika
2020-02-03 15:10:17 +00:00
committed by GitHub
parent d9e0847b18
commit bd3957dcee
9 changed files with 666 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,9 +6,9 @@
<mat-card-content>
<br>
<mat-radio-group (change)="onChangePeopleMode($event)">
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="{{ peopleSingleMode }}">{{
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="multiple">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="app-people-control-options">
@@ -20,15 +20,15 @@
</mat-radio-group>
<mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setPeopleRoles($event)" data-automation-id="app-people-roles-input" />
<input matInput (input)="setPeopleRoles($event.target?.value)" data-automation-id="app-people-roles-input" />
</mat-form-field>
<mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setPeopleAppName($event)" data-automation-id="app-people-app-input" />
<input matInput (input)="setPeopleAppName($event.target?.value)" data-automation-id="app-people-app-input" />
</mat-form-field>
<mat-form-field class="app-preselect-value-full">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
<input matInput (input)="setPeoplePreselectValue($event)" data-automation-id="app-people-preselect-input" />
<input matInput (input)="setPeoplePreselectValue($event.target?.value)" data-automation-id="app-people-preselect-input" />
</mat-form-field>
<mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
@@ -47,7 +47,7 @@
(warning)="onUsersWarning($event)"></adf-cloud-people>
</div>
<div class="app-people-list" *ngIf="canShowPeopleList()">
<div class="app-people-list" *ngIf="peopleMode === 'multiple'">
<h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_PRESELECTED_USERS' | translate }}</h4>
<mat-list role="list">
<mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
@@ -77,9 +77,9 @@
<mat-card-content>
<br>
<mat-radio-group (change)="onChangeGroupsMode($event)">
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="{{ groupSingleMode }}">{{
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="{{ groupMultipleMode }}">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="multiple">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="app-groups-control-options">
@@ -91,20 +91,31 @@
</mat-radio-group>
<mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setGroupRoles($event)" data-automation-id="app-group-roles-input"/>
<input matInput
(input)="setGroupRoles($event.target?.value)"
data-automation-id="app-group-roles-input"/>
</mat-form-field>
<mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setGroupAppName($event)" data-automation-id="app-group-app-input"/>
<input matInput
(input)="setGroupAppName($event.target?.value)"
data-automation-id="app-group-app-input"/>
</mat-form-field>
<mat-form-field class="app-preselect-value-full">
<mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
<input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="app-group-preselect-input" />
<input matInput
(input)="setGroupsPreselectValue($event.target?.value)"
data-automation-id="app-group-preselect-input" />
</mat-form-field>
<mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">{{
'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
<mat-checkbox data-automation-id="app-group-readonly" value="{{ groupReadonly }}" (change)="onChangeGroupReadonly($event)">{{
'PEOPLE_GROUPS_CLOUD.READONLY_MODE' | translate }}</mat-checkbox>
<mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">
{{ 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}
</mat-checkbox>
<mat-checkbox
data-automation-id="app-group-readonly"
value="{{ groupReadonly }}"
(change)="onChangeGroupReadonly($event)">
{{ 'PEOPLE_GROUPS_CLOUD.READONLY_MODE' | translate }}
</mat-checkbox>
</div>
<div>
<adf-cloud-group
@@ -117,7 +128,7 @@
(warning)="onGroupsWarning($event)"></adf-cloud-group>
</div>
<div class="app-group-list" *ngIf="canShowGroupList()">
<div class="app-group-list" *ngIf="groupMode === 'multiple'">
<h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_PRESELECTED_GROUPS' | translate }}</h4>
<mat-list role="list">
<mat-list-item *ngFor="let item of preSelectGroup" role="listitem">

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

@@ -16,7 +16,7 @@
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { PeopleCloudComponent, GroupCloudComponent } from '@alfresco/adf-process-services-cloud';
import { ComponentSelectionMode } from '@alfresco/adf-process-services-cloud';
import { MatRadioChange, MatCheckboxChange } from '@angular/material';
import { IdentityGroupModel, IdentityUserModel } from '@alfresco/adf-core';
@@ -32,83 +32,83 @@ export class PeopleGroupCloudDemoComponent {
DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"id": "1", email": "user@user.com", "firstName":"user", "lastName": "lastName", "username": "user"}]`;
peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
peopleMode: ComponentSelectionMode = 'single';
preSelectUsers: IdentityUserModel[] = [];
invalidUsers: IdentityUserModel[] = [];
peopleRoles: string[] = [];
peopleAppName: string;
peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
peoplePreselectValidation: Boolean = false;
peoplePreselectValidation = false;
groupPreselectValidation = false;
peopleReadonly = false;
groupReadonly = false;
groupMode: string = GroupCloudComponent.MODE_SINGLE;
groupMode: ComponentSelectionMode = 'single';
preSelectGroup: IdentityGroupModel[] = [];
invalidGroups: IdentityGroupModel[] = [];
groupRoles: string[];
groupAppName: string;
groupFilterMode: string = this.DEFAULT_FILTER_MODE;
setPeoplePreselectValue(event: any) {
this.preSelectUsers = this.getArrayFromString(event.target.value);
setPeoplePreselectValue(value: string): void {
this.preSelectUsers = this.getArrayFromString(value);
}
setGroupsPreselectValue(event: any) {
this.preSelectGroup = this.getArrayFromString(event.target.value);
setGroupsPreselectValue(value: string): void {
this.preSelectGroup = this.getArrayFromString(value);
}
setPeopleRoles(event: any) {
this.peopleRoles = this.getArrayFromString(event.target.value);
setPeopleRoles(value: string): void {
this.peopleRoles = this.getArrayFromString(value);
}
setGroupRoles(event: any) {
this.groupRoles = this.getArrayFromString(event.target.value);
setGroupRoles(value: string): void {
this.groupRoles = this.getArrayFromString(value);
}
setPeopleAppName(event: any) {
this.peopleAppName = event.target.value;
setPeopleAppName(value: string): void {
this.peopleAppName = value;
}
setGroupAppName(event: any) {
this.groupAppName = event.target.value;
setGroupAppName(value: string): void {
this.groupAppName = value;
}
onChangePeopleMode(event: MatRadioChange) {
onChangePeopleMode(event: MatRadioChange): void {
this.peopleMode = event.value;
}
onChangePeopleReadonly(event: MatCheckboxChange) {
onChangePeopleReadonly(event: MatCheckboxChange): void {
this.peopleReadonly = event.checked;
}
onChangeGroupReadonly(event: MatCheckboxChange) {
onChangeGroupReadonly(event: MatCheckboxChange): void {
this.groupReadonly = event.checked;
}
onChangeGroupsMode(event: MatRadioChange) {
onChangeGroupsMode(event: MatRadioChange): void {
this.groupMode = event.value;
}
onChangePeopleFilterMode(event: MatRadioChange) {
onChangePeopleFilterMode(event: MatRadioChange): void {
this.peopleFilterMode = event.value;
this.resetPeopleFilter();
}
onChangeGroupsFilterMode(event: MatRadioChange) {
onChangeGroupsFilterMode(event: MatRadioChange): void {
this.groupFilterMode = event.value;
this.restGroupFilter();
}
isPeopleAppNameSelected() {
isPeopleAppNameSelected(): boolean {
return this.peopleFilterMode === 'appName';
}
isGroupAppNameSelected() {
isGroupAppNameSelected(): boolean {
return this.groupFilterMode === 'appName';
}
resetPeopleFilter() {
resetPeopleFilter(): void {
if (this.isPeopleAppNameSelected()) {
this.peopleRoles = [];
} else {
@@ -116,7 +116,7 @@ export class PeopleGroupCloudDemoComponent {
}
}
restGroupFilter() {
restGroupFilter(): void {
if (this.isGroupAppNameSelected()) {
this.groupRoles = [];
} else {
@@ -124,23 +124,23 @@ export class PeopleGroupCloudDemoComponent {
}
}
onChangePeopleValidation(event: MatCheckboxChange) {
onChangePeopleValidation(event: MatCheckboxChange): void {
this.peoplePreselectValidation = event.checked;
}
onChangeGroupValidation(event: MatCheckboxChange) {
onChangeGroupValidation(event: MatCheckboxChange): void {
this.groupPreselectValidation = event.checked;
}
onGroupsWarning(warning: any) {
onGroupsWarning(warning: any): void {
this.invalidGroups = warning.groups;
}
onUsersWarning(warning: any) {
onUsersWarning(warning: any): void {
this.invalidUsers = warning.users;
}
isStringArray(str: string) {
isStringArray(str: string): boolean {
try {
const result = JSON.parse(str);
return Array.isArray(result);
@@ -149,36 +149,11 @@ export class PeopleGroupCloudDemoComponent {
}
}
private getArrayFromString(value: string) {
private getArrayFromString<T = any>(value: string): T[] {
if (this.isStringArray(value)) {
return JSON.parse(value);
} else {
return [];
}
}
canShowPeopleList() {
return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
}
canShowGroupList() {
return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
}
get peopleSingleMode() {
return PeopleCloudComponent.MODE_SINGLE;
}
get peopleMultipleMode() {
return PeopleCloudComponent.MODE_MULTIPLE;
}
get groupSingleMode() {
return GroupCloudComponent.MODE_SINGLE;
}
get groupMultipleMode() {
return GroupCloudComponent.MODE_MULTIPLE;
}
}