Merge pull request #5332 from Alfresco/dev-siva-AAE-1200-add-edit-icon

[AAE-1200] AAE - FE - Provide a way to define icon on CardViewArrayItemComponent

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -152,9 +152,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
             }),
             new CardViewArrayItemModel({
                 label: 'CardView Array of items',
-                value: of(['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo']),
+                value: of([
+                    { icon: 'directions_bike', value: 'Zlatan' },
+                    { icon: 'directions_bike', value: 'Lionel Messi'},
+                    { value: 'Mohamed', directions_bike: 'save'},
+                    { value: 'Ronaldo'}
+                ]),
                 key: 'array',
-                icon: 'directions_bike',
+                icon: 'edit',
                 default: 'Empty',
                 noOfItemsToDisplay: 2
             })

docs/core/components/card-view.component.md

@@ -90,7 +90,10 @@ Defining properties from Typescript:
     new CardViewArrayItemModel({
         label: 'Array of items',
         value: '',
-        items$: of(['One', 'Two', 'Three', 'Four']),
+        items$: of([
+            { icon: 'person', value: 'One' }, { icon: 'person', value: 'Two' },
+            { icon: 'person', value: 'Three' }, { icon: 'person', value: 'Four' }
+            ]),
         key: 'array',
         default: 'Empty',
         noOfItemsToDisplay: 2
@@ -358,7 +361,7 @@ const arrayItemProperty = new CardViewArrayItemModel(items);
 | label\* | string |  | Item label |
 | key\* | string |  | Identifying key (important when editing the item) |
 | editable | boolean | false | Toggles whether the item is editable |
-| value | [`Observable`](http://reactivex.io/documentation/observable.html)<`string`\[]> |  | The original data value for the item |
+| value | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewArrayItem`](../../../lib/core/card-view/models/card-view-arrayitem.model.ts)\[]> |  | The original data value for the item |
 
 ## See also
 

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -1,15 +1,14 @@
-
 <div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value" (click)="clicked()">
+<div class="adf-property-value adf-card-view-array-item-container" (click)="clicked()">
     <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
         <mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
             <ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
                 <mat-chip
                     *ngFor="let item of items.slice(0, displayCount())"
                     (click)="clicked()"
-                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item}}</span>
+                    <span>{{item?.value}}</span>
                 </mat-chip>
                 <mat-chip
                     *ngIf="items.length > displayCount()"
@@ -22,9 +21,9 @@
                 <mat-chip
                     *ngFor="let item of items"
                     (click)="clicked()"
-                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item}}</span>
+                    <span>{{item?.value}}</span>
                 </mat-chip>
             </ng-template>
         </mat-chip-list>
@@ -34,9 +33,9 @@
                     <mat-chip-list>
                         <mat-chip (click)="clicked()"
                             *ngFor="let item of items.slice(displayCount(), items.length)"
-                            [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                            [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                        <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                        <span>{{item}}</span>
+                        <span>{{item?.value}}</span>
                         </mat-chip>
                     </mat-chip-list>
                 </mat-card-content>
@@ -44,6 +43,13 @@
         </mat-menu>
     </ng-container>
     <ng-template #elseEmptyValueBlock>
-        <span  data-automation-id="card-arrayitem-default">{{ property.default | translate }}</span>
+        <span class="adf-card-array-item-default" data-automation-id="card-arrayitem-default">{{ property?.default | translate }}</span>
     </ng-template>
+    <button mat-icon-button *ngIf="showClickableIcon()"
+        class="adf-array-item-action"
+        [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        [attr.data-automation-id]="'card-array-item-clickable-icon-' + property.key">
+        <mat-icon class="adf-array-item-icon">{{property.icon}}</mat-icon>
+    </button>
 </div>

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,4 +1,5 @@
 @mixin adf-card-view-array-item-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
     .adf {
         &-array-item-icon {
@@ -6,6 +7,21 @@
             padding-top: 8px;
         }
 
+        &-array-item-action {
+            color: mat-color($foreground, text, 0.25);
+        }
+
+        &-array-item-action:hover, &-array-item-action:focus {
+            color: mat-color($foreground, text);
+        }
+
+        &-card-array-item-default {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+        }
+
         &-array-item-more-chip-container {
             &.mat-card {
                 box-shadow: none;
@@ -29,5 +45,13 @@
                 cursor: pointer;
             }
         }
+
+        &-card-view-array-item-container {
+            flex-direction: row;
+            box-sizing: border-box;
+            display: flex;
+            place-content: center space-between;
+            align-items: center;
+        }
     }
 }

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts

@@ -20,20 +20,26 @@ import { of } from 'rxjs';
 import { setupTestBed } from '../../../testing/setupTestBed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
-import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
+import { CardViewArrayItemModel, CardViewArrayItem } from '../../models/card-view-arrayitem.model';
 import { By } from '@angular/platform-browser';
 
 describe('CardViewArrayItemComponent', () => {
     let component: CardViewArrayItemComponent;
     let fixture: ComponentFixture<CardViewArrayItemComponent>;
 
-    const mockData = ['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo'];
+    const mockData = <CardViewArrayItem[]> [
+        { icon: 'person', value: 'Zlatan' },
+        { icon: 'group', value: 'Lionel Messi' },
+        { icon: 'person', value: 'Mohamed' },
+        { icon: 'person', value: 'Ronaldo' }];
+
     const mockDefaultProps = {
         label: 'Array of items',
         value: of(mockData),
         key: 'array',
-        icon: 'person'
+        icon: 'edit'
     };
+
     setupTestBed({
         imports: [CoreTestingModule]
     });
@@ -77,6 +83,47 @@ describe('CardViewArrayItemComponent', () => {
             expect(chip2.innerText).toEqual('Lionel Messi');
         });
 
+        it('should render chip with defined icon', () => {
+            component.property = new CardViewArrayItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+            fixture.detectChanges();
+
+            const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
+            const chip1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] span');
+            const chip1Icon = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] mat-icon');
+            const chip2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] span');
+            const chip2Icon = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] mat-icon');
+
+            expect(chiplistContainer).not.toBeNull();
+            expect(chip1.innerText).toEqual('Zlatan');
+            expect(chip1Icon.innerText).toEqual('person');
+            expect(chip2.innerText).toEqual('Lionel Messi');
+            expect(chip2Icon.innerText).toEqual('group');
+        });
+
+        it('should render defined icon if clickable set to true', () => {
+            component.property = new CardViewArrayItemModel({
+                ...mockDefaultProps,
+                clickable: true
+            });
+            fixture.detectChanges();
+            const editicon = fixture.nativeElement.querySelector('[data-automation-id="card-array-item-clickable-icon-array"]');
+            expect(editicon).toBeDefined();
+            expect(editicon.innerText).toBe('edit');
+        });
+
+        it('should not render defined icon if clickable set to false', () => {
+            component.property = new CardViewArrayItemModel({
+                ...mockDefaultProps,
+                clickable: false
+            });
+            fixture.detectChanges();
+            const editicon = fixture.nativeElement.querySelector('[data-automation-id="card-array-item-clickable-icon-array"]');
+            expect(editicon).toBeNull();
+        });
+
         it('should render all values if noOfItemsToDisplay is not defined', () => {
             fixture.detectChanges();
 

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -33,7 +33,13 @@ export class CardViewArrayItemComponent {
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
 
     clicked(): void {
-        this.cardViewUpdateService.clicked(this.property);
+        if (this.isClickable()) {
+            this.cardViewUpdateService.clicked(this.property);
+        }
+    }
+
+    showClickableIcon(): boolean {
+        return this.hasIcon() && this.isClickable();
     }
 
     hasIcon(): boolean {
@@ -43,4 +49,8 @@ export class CardViewArrayItemComponent {
     displayCount(): number {
         return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
     }
+
+    isClickable(): boolean {
+        return !!this.property.clickable;
+    }
 }

lib/core/card-view/models/card-view-arrayitem.model.ts

@@ -21,10 +21,15 @@ import { CardViewBaseItemModel } from './card-view-baseitem.model';
 import { Observable } from 'rxjs';
 import { CardViewArrayItemProperties } from '../interfaces/card-view-arrayitem-properties.interface';
 
+export interface CardViewArrayItem {
+    icon: string;
+    value: string;
+}
+
 export class CardViewArrayItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
 
     type: string = 'array';
-    value: Observable<string[]>;
+    value: Observable<CardViewArrayItem[]>;
     noOfItemsToDisplay: number;
 
     constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) {
@@ -32,7 +37,7 @@ export class CardViewArrayItemModel extends CardViewBaseItemModel implements Car
         this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay;
     }
 
-    get displayValue(): Observable<string[]> {
+    get displayValue(): Observable<CardViewArrayItem[]> {
         return this.value;
     }
 }

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -28,7 +28,8 @@ import {
     AppConfigService,
     UpdateNotification,
     CardViewUpdateService,
-    CardViewDatetimeItemModel
+    CardViewDatetimeItemModel,
+    CardViewArrayItem
 } from '@alfresco/adf-core';
 import { TaskDetailsCloudModel, TaskStatus } from '../../start-task/models/task-details-cloud.model';
 import { Router } from '@angular/router';
@@ -63,8 +64,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     error: EventEmitter<any> = new EventEmitter<any>();
 
     taskDetails: TaskDetailsCloudModel = {};
-    candidateUsers: string[] = [];
+    candidateUsers: CardViewArrayItem[] = [];
-    candidateGroups: string[] = [];
+    candidateGroups: CardViewArrayItem[] = [];
     properties: CardViewItem[];
     inEdit: boolean = false;
     parentTaskName: string;
@@ -120,8 +121,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
             )
         ).subscribe(([taskDetails, candidateUsers, candidateGroups]) => {
                 this.taskDetails = taskDetails;
-                this.candidateGroups = candidateGroups;
+                this.candidateGroups = candidateGroups.map((user) => <CardViewArrayItem> { icon: 'group', value: user });
-                this.candidateUsers = candidateUsers;
+                this.candidateUsers = candidateUsers.map((group) => <CardViewArrayItem> { icon: 'person', value: group });
                 if (this.taskDetails.parentTaskId) {
                     this.loadParentName(`${this.taskDetails.parentTaskId}`);
                 } else {
@@ -235,7 +236,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS',
                     value: of(this.candidateUsers),
                     key: 'candidateUsers',
-                    icon: 'person',
+                    icon: 'edit',
+                    clickable: false,
                     default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT'),
                     noOfItemsToDisplay: 2
                 }
@@ -245,7 +247,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS',
                     value: of(this.candidateGroups),
                     key: 'candidateGroups',
-                    icon: 'group',
+                    icon: 'edit',
+                    clickable: false,
                     default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT'),
                     noOfItemsToDisplay: 2
                 }