mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
* Add Edit icon
This commit is contained in:
sivakumar414ram
parent
2cc7fe7efe
commit
e3f7e3da09
@ -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
|
||||
})
|
||||
|
||||
@ -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">
|
||||
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
|
||||
<span>{{item}}</span>
|
||||
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
|
||||
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
|
||||
<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">
|
||||
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
|
||||
<span>{{item}}</span>
|
||||
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
|
||||
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
|
||||
<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">
|
||||
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
|
||||
<span>{{item}}</span>
|
||||
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
|
||||
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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[] = [];
|
||||
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) => <CardViewArrayItem> { icon: 'group', value: user });
|
||||
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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user