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-4009] - People/GroupComponentDemoPage - add role input filter (#4260)

Browse Source 
* [ADF-4009] - add roles input for GroupCloudComponent

* [ADF-4009] - fix lint

* [ADF-4009] - change role variable name

* [ADF-4009] - fix PR changes and add people input filter

* [ADF-4009] - fix lint
This commit is contained in:
Silviu Popa
2019-02-05 18:25:42 +02:00
committed by Maurizio Vitale
parent 2badd81634
commit fc642bcb6a
4 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -292,7 +292,8 @@
"PEOPLE_GROUPS_CLOUD": { "PEOPLE_GROUPS_CLOUD": {
"SINGLE": "Single", "SINGLE": "Single",
"MULTI": "Multi", "MULTI": "Multi",
"PRESELECTED_VALUE": "Preselected value" "PRESELECTED_VALUE": "Preselect value",
"ROLE": "Preselect roles"
}, },
"ABOUT": { "ABOUT": {
"TITLE": "Plugins", "TITLE": "Plugins",

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

@@ -1,4 +1,4 @@
<mat-card class="adf-people-groups-section"> <mat-card class="adf-section">
<mat-card-title> <mat-card-title>
{{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}} {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
</mat-card-title> </mat-card-title>
@@ -6,16 +6,22 @@
<mat-card-content> <mat-card-content>
<div class="people-control-options"> <div class="people-control-options">
<mat-radio-group (change)="onChangePeopleMode($event)"> <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-single-mode" value="{{ peopleSingleMode }}">{{
<mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button> '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-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-form-field>
<mat-form-field class="adf-preselect-value"> <mat-form-field class="adf-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}</mat-label> <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}</mat-label>
<input matInput (input)="setPeoplePreselectValue($event.target.value)" /> <input matInput (input)="setPeoplePreselectValue($event)" />
</mat-form-field> </mat-form-field>
</div> </div>
<div> <div>
<adf-cloud-people [preSelectUsers]="preSelectUsers" [mode]="peopleMode"></adf-cloud-people> <adf-cloud-people [preSelectUsers]="preSelectUsers" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
</div> </div>
<div class="adf-people-list" *ngIf="canShowPeopleList()"> <div class="adf-people-list" *ngIf="canShowPeopleList()">
@@ -29,7 +35,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="adf-people-groups-section"> <mat-card class="adf-section">
<mat-card-title> <mat-card-title>
{{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}} {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
</mat-card-title> </mat-card-title>
@@ -37,12 +43,18 @@
<mat-card-content> <mat-card-content>
<div class="groups-control-options"> <div class="groups-control-options">
<mat-radio-group (change)="onChangeGroupsMode($event)"> <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-single-mode" value="{{ groupSingleMode }}">{{
<mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button> '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-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-form-field>
</div> </div>
<div> <div>
<adf-cloud-group [mode]="groupMode" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)" <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
(removeGroup)="onRemoveGroup($event)"></adf-cloud-group> (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
</div> </div>

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

@@ -1,5 +1,5 @@
.adf { .adf {
&-people-groups-section { &-section {
mat-card-title { mat-card-title {
font-size:18px; font-size:18px;
font-weight: bold; font-weight: bold;
@@ -12,8 +12,11 @@
} }
} }
mat-card-content .adf-preselect-value { mat-card-content {
width: calc(100% - 160px);
.adf-preselect-value {
margin-right: 15px;
}
} }
} }
} }

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

@@ -28,26 +28,28 @@ import { MatRadioChange } from '@angular/material';
export class PeopleGroupCloudDemoComponent { export class PeopleGroupCloudDemoComponent {
peopleMode: string = PeopleCloudComponent.MODE_SINGLE; peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
preSelectUsers: any = []; preSelectUsers: string[] = [];
peopleRoles: string[] = [];
groupMode: string = GroupCloudComponent.MODE_SINGLE; groupMode: string = GroupCloudComponent.MODE_SINGLE;
preSelectGroup: any = []; preSelectGroup: string[] = [];
selectedGroupList: any = []; selectedGroupList: GroupModel[] = [];
groupRoles: string[];
setPeoplePreselectValue(value: string) { setPeoplePreselectValue(event: any) {
if (this.isStringArray(value)) { this.preSelectUsers = this.getArrayFromString(event.target.value);
this.preSelectUsers = JSON.parse(value);
} else if (value.length === 0) {
this.preSelectUsers = [];
}
} }
setGroupsPreselectValue(value: string) { setGroupsPreselectValue(event: any) {
if (this.isStringArray(value)) { this.preSelectGroup = this.getArrayFromString(event.target.value);
this.preSelectGroup = JSON.parse(value); }
} else if (value.length === 0) {
this.preSelectGroup = []; setPeopleRoles(event: any) {
} this.peopleRoles = this.getArrayFromString(event.target.value);
}
setGroupRoles(event: any) {
this.groupRoles = this.getArrayFromString(event.target.value);
} }
onChangePeopleMode(event: MatRadioChange) { onChangePeopleMode(event: MatRadioChange) {
@@ -67,6 +69,15 @@ export class PeopleGroupCloudDemoComponent {
} }
} }
private getArrayFromString(value: string) {
if (this.isStringArray(value)) {
return JSON.parse(value);
} else {
return [];
}
}
canShowPeopleList() { canShowPeopleList() {
return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE; return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
} }