From e3f7e3da092bd4c4724d2c9186ee580acfeb7091 Mon Sep 17 00:00:00 2001 From: sivakumar414ram Date: Wed, 11 Dec 2019 19:47:19 +0530 Subject: [PATCH 1/3] * Add Edit icon --- .../card-view/card-view.component.ts | 9 ++++-- .../card-view-arrayitem.component.html | 30 +++++++++++-------- .../card-view-arrayitem.component.scss | 24 +++++++++++++++ .../card-view-arrayitem.component.ts | 12 +++++++- .../models/card-view-arrayitem.model.ts | 9 ++++-- .../components/task-header-cloud.component.ts | 17 ++++++----- 6 files changed, 77 insertions(+), 24 deletions(-) diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts index 8226601186..a7175a26f8 100644 --- a/demo-shell/src/app/components/card-view/card-view.component.ts +++ b/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 }) diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html index 0324e38fbc..44198b3e47 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html +++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html @@ -1,15 +1,14 @@ -
{{ property.label | translate }}
-
+
- {{property.icon}} - {{item}} + [attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> + {{item.icon}} + {{item.value}} - {{property.icon}} - {{item}} + [attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> + {{item.icon}} + {{item.value}} @@ -34,9 +33,9 @@ - {{property.icon}} - {{item}} + [attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> + {{item.icon}} + {{item.value}} @@ -44,6 +43,13 @@ - {{ property.default | translate }} + {{ property?.default | translate }} +
diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss index 108915b411..63c2ecb79b 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss +++ b/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; + } } } diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts index 81b07c3cc4..388f52adad 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts +++ b/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; + } } diff --git a/lib/core/card-view/models/card-view-arrayitem.model.ts b/lib/core/card-view/models/card-view-arrayitem.model.ts index 9a491ac227..c34e3b0a50 100644 --- a/lib/core/card-view/models/card-view-arrayitem.model.ts +++ b/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; + value: Observable; noOfItemsToDisplay: number; constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) { @@ -32,7 +37,7 @@ export class CardViewArrayItemModel extends CardViewBaseItemModel implements Car this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay; } - get displayValue(): Observable { + get displayValue(): Observable { return this.value; } } diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts index 7846da16d6..8c7e2245f2 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts +++ b/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 = new EventEmitter(); taskDetails: TaskDetailsCloudModel = {}; - candidateUsers: string[] = []; - candidateGroups: string[] = []; + candidateUsers: CardViewArrayItem[] = []; + 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.candidateUsers = candidateUsers; + this.candidateGroups = candidateGroups.map((user) => { icon: 'group', value: user }); + this.candidateUsers = candidateUsers.map((group) => { 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 } From 86bd37b1591f231b81ee980a5450d8b8b339cc5b Mon Sep 17 00:00:00 2001 From: sivakumar414ram Date: Fri, 13 Dec 2019 13:13:21 +0530 Subject: [PATCH 2/3] * Updated unit tests --- .../card-view-arrayitem.component.html | 6 +-- .../card-view-arrayitem.component.spec.ts | 53 +++++++++++++++++-- 2 files changed, 53 insertions(+), 6 deletions(-) diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html index 44198b3e47..257a562e49 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html +++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html @@ -8,7 +8,7 @@ (click)="clicked()" [attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> {{item.icon}} - {{item.value}} + {{item?.value}} {{item.icon}} - {{item.value}} + {{item?.value}} @@ -35,7 +35,7 @@ *ngFor="let item of items.slice(displayCount(), items.length)" [attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> {{item.icon}} - {{item.value}} + {{item?.value}} diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts index 00d81de837..08ee894ada 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts +++ b/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; - const mockData = ['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo']; + const mockData = [ + { 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(); From 1ea7efab8e93a6bc5e2aceb0849ff0a7a3fa747b Mon Sep 17 00:00:00 2001 From: sivakumar414ram Date: Fri, 13 Dec 2019 13:53:18 +0530 Subject: [PATCH 3/3] * Updated doc --- docs/core/components/card-view.component.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/core/components/card-view.component.md b/docs/core/components/card-view.component.md index 3ea61413fc..4ba5e20d7c 100644 --- a/docs/core/components/card-view.component.md +++ b/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