+
- {{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.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();
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
}