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-3997] - Add ngOnChange functionality for People/Group Demo Cloud… (#4244)

Browse Source 
* [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
This commit is contained in:
Silviu Popa
2019-02-06 17:28:35 +02:00
committed by Maurizio Vitale
parent 815f816f8e
commit b4c6a2252a
7 changed files with 69 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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",

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

@@ -4,19 +4,20 @@
</mat-card-title>
<mat-card-content>
<br>
<mat-radio-group (change)="onChangePeopleMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="people-control-options">
<mat-radio-group (change)="onChangePeopleMode($event)">
<mat-radio-button class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
<input matInput (input)="setPeopleRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
<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">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}</mat-label>
<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>
@@ -41,16 +42,21 @@
</mat-card-title>
<mat-card-content>
<br>
<mat-radio-group (change)="onChangeGroupsMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="groups-control-options">
<mat-radio-group (change)="onChangeGroupsMode($event)">
<mat-radio-button class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
<input matInput (input)="setGroupRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
<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-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
<input matInput (input)="setGroupsPreselectValue($event)" />
</mat-form-field>
</div>
<div>
@@ -58,9 +64,9 @@
(removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
</div>
<div class="adf-group-list">
<div class="adf-group-list" *ngIf="canShowGroupList()">
<mat-list role="list">
<mat-list-item *ngFor="let item of selectedGroupList" role="listitem">
<mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
<mat-icon mat-list-icon>group</mat-icon>
{{ item.name }}
</mat-list-item>

5
demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss
View File

@@ -16,6 +16,11 @@
.adf-preselect-value {
margin-right: 15px;
min-width: 330px;
&-full {
width:60%;
}
}
}
}

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

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