[ADF-3968] - Create page to test Demo Shell People/Group components (#4229)

* [ADF-3962] - Create page to test Demo Shell components

* [ADF-3968] - fix ling

* [ADF-3968] - Remove unused properties

* [ADF-3968] - remove app name

* [ADF-3968] - fix PR changes requested

* [ADF-3968] - change style for preselect input value

demo-shell/resources/i18n/en.json

@@ -88,7 +88,10 @@
     "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
     "HEADER_DATA": "Header Data",
     "TREE_VIEW": "Tree View",
-    "ICONS": "Icons"
+    "ICONS": "Icons",
+    "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
+    "PEOPLE_CLOUD": "People Cloud Component",
+    "GROUPS_CLOUD": "Groups Cloud Component"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -281,6 +284,11 @@
   "TASK_LIST_CLOUD_DEMO": {
     "CUSTOMIZE_FILTERS": "Customise your filter"
   },
+  "PEOPLE_GROUPS_CLOUD": {
+    "SINGLE": "Single",
+    "MULTI": "Multi",
+    "PRESELECTED_VALUE": "Preselected value"
+  },
   "ABOUT": {
     "TITLE": "Plugins",
     "TABLE_HEADERS": {

demo-shell/src/app/app.module.ts

@@ -63,7 +63,7 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
 import { AuthBearerInterceptor } from './services';
-import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
+import { ProcessServicesCloudModule, GroupCloudModule } from '@alfresco/adf-process-services-cloud';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { AppExtensionsModule } from './extensions/extensions.module';
 import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component';
@@ -76,6 +76,7 @@ import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-clo
 import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component';
 import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
 import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
+import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
 
 @NgModule({
     imports: [
@@ -95,7 +96,8 @@ import { DocumentListDemoComponent } from './components/document-list/document-l
         ChartsModule,
         MonacoEditorModule.forRoot(),
         ProcessServicesCloudModule,
-        AppExtensionsModule.forRoot()
+        AppExtensionsModule.forRoot(),
+        GroupCloudModule
     ],
     declarations: [
         AppComponent,
@@ -135,7 +137,8 @@ import { DocumentListDemoComponent } from './components/document-list/document-l
         StartProcessCloudDemoComponent,
         CloudBreadcrumbsComponent,
         CloudFiltersDemoComponent,
-        DocumentListDemoComponent
+        DocumentListDemoComponent,
+        PeopleGroupCloudDemoComponent
     ],
     providers: [
         {

demo-shell/src/app/app.routes.ts

@@ -47,6 +47,7 @@ import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-clo
 import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
 import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
 import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
+import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -146,6 +147,10 @@ export const appRoutes: Routes = [
                         path: '',
                         component: AppsCloudDemoComponent
                     },
+                    {
+                        path: 'people-group-cloud',
+                        component: PeopleGroupCloudDemoComponent
+                    },
                     {
                         path: ':applicationName',
                         children: [

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -41,6 +41,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
         { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
         { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
+        { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
         { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },

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

@@ -0,0 +1,58 @@
+<mat-card class="adf-people-groups-section">
+    <mat-card-title>
+        {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
+    </mat-card-title>
+
+    <mat-card-content>
+        <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.PRESELECTED_VALUE' | translate }}</mat-label>
+                <input matInput (input)="setPeoplePreselectValue($event.target.value)" />
+            </mat-form-field>
+        </div>
+        <div>
+            <adf-cloud-people [preSelectUsers]="preSelectUsers" [mode]="peopleMode"></adf-cloud-people>
+        </div>
+
+        <div class="adf-people-list" *ngIf="canShowPeopleList()">
+            <mat-list role="list">
+                <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
+                    <mat-icon mat-list-icon>person</mat-icon>
+                    {{ item?.firstName }} {{ item?.lastName }}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </mat-card-content>
+</mat-card>
+
+<mat-card class="adf-people-groups-section">
+    <mat-card-title>
+        {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
+    </mat-card-title>
+
+    <mat-card-content>
+        <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>
+        </div>
+        <div>
+            <adf-cloud-group [mode]="groupMode" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
+                (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
+        </div>
+
+        <div class="adf-group-list">
+            <mat-list role="list">
+                <mat-list-item *ngFor="let item of selectedGroupList" role="listitem">
+                    <mat-icon mat-list-icon>group</mat-icon>
+                    {{ item.name }}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,19 @@
+.adf {
+    &-people-groups-section {
+        mat-card-title {
+            font-size:18px;
+            font-weight: bold;
+        }
+        mat-radio-group {
+            margin:7px 10px;
+
+            mat-radio-button {
+                margin: 0 3px;
+            }
+        }
+
+        mat-card-content .adf-preselect-value {
+            width: calc(100% - 160px);
+        }
+    }
+}

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

@@ -0,0 +1,99 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
+import { MatRadioChange } from '@angular/material';
+
+@Component({
+    selector: 'app-people-groups-cloud',
+    templateUrl: './people-groups-cloud-demo.component.html',
+    styleUrls: ['./people-groups-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class PeopleGroupCloudDemoComponent {
+
+    peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
+    preSelectUsers: any = [];
+
+    groupMode: string = GroupCloudComponent.MODE_SINGLE;
+    preSelectGroup: any = [];
+    selectedGroupList: any = [];
+
+    setPeoplePreselectValue(value: string) {
+        if (this.isStringArray(value)) {
+            this.preSelectUsers = JSON.parse(value);
+        } else if (value.length === 0) {
+            this.preSelectUsers = [];
+        }
+    }
+
+    setGroupsPreselectValue(value: string) {
+        if (this.isStringArray(value)) {
+            this.preSelectGroup = JSON.parse(value);
+        } else if (value.length === 0) {
+            this.preSelectGroup = [];
+        }
+    }
+
+    onChangePeopleMode(event: MatRadioChange) {
+       this.peopleMode = event.value;
+    }
+
+    onChangeGroupsMode(event: MatRadioChange) {
+        this.groupMode = event.value;
+    }
+
+    isStringArray(str: string) {
+        try {
+            const result = JSON.parse(str);
+            return Array.isArray(result);
+        } catch (e) {
+            return false;
+        }
+    }
+
+    canShowPeopleList() {
+        return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
+    }
+
+    onRemoveGroup(group: GroupModel) {
+        this.selectedGroupList = this.selectedGroupList.filter((value: any) => value.id !== group.id);
+    }
+
+    onSelectGroup(group: GroupModel) {
+        if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
+            this.selectedGroupList.push(group);
+        }
+    }
+
+    get peopleSingleMode() {
+        return PeopleCloudComponent.MODE_SINGLE;
+    }
+
+    get peopleMultipleMode() {
+        return PeopleCloudComponent.MODE_MULTIPLE;
+    }
+
+    get groupSingleMode() {
+        return GroupCloudComponent.MODE_SINGLE;
+    }
+
+    get groupMultipleMode() {
+        return GroupCloudComponent.MODE_MULTIPLE;
+    }
+}