[ADF-5390] [ADF-5391] Add multivalue cardview for Date, Datetime, Integers and Decimal properties. (#6980)

* [ADF-5390] Addd multivalue cardview for Date, Datetime, Integers and Decimal properties

* Fix unit test

* Fix linting

* Fix e2e tests

* fix e2e

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
This commit is contained in:
davidcanonieto
2021-05-09 04:05:26 +01:00
committed by GitHub
parent 71cad4c287
commit bd805cb34b
23 changed files with 280 additions and 54 deletions

View File

@@ -5,23 +5,23 @@
</div>
<div class="adf-property-value adf-property-value-padding-top">
<span *ngIf="!isEditable()"
<span *ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span [attr.data-automation-id]="'card-dateitem-' + property.key">
<span *ngIf="showProperty()"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue }}</span>
</span>
<span *ngIf="showProperty()"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span>
</span>
<div *ngIf="isEditable()"
<div *ngIf="isEditable() && !property.multivalued"
class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls">
<span class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()">
<span *ngIf="showProperty(); else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">{{ property.displayValue }}</span>
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span>
</span>
<mat-icon *ngIf="showClearAction()"
@@ -55,4 +55,42 @@
<ng-template #elseEmptyValueBlock>
{{ property.default | translate }}
</ng-template>
<div *ngIf="property.multivalued"
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<mat-chip-list #chipList
class="adf-textitem-chip-list">
<mat-chip *ngFor="let propertyValue of property.displayValue let idx = index"
[removable]="isEditable"
(removed)="removeValueFromList(idx)">
{{ propertyValue }}
<mat-icon *ngIf="isEditable()"
matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<mat-form-field *ngIf="isEditable()"
class="adf-property-field adf-dateitem-editable-controls"
[floatLabel]="'never'"
(click)="showDatePicker()">
<input matInput
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
(dateChange)="addDateToList($event)">
<mat-datetimepicker-toggle [attr.tabindex]="-1"
matSuffix
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker">
</mat-datetimepicker-toggle>
<mat-datetimepicker #datetimePicker
[type]="property.type"
timeInterval="5"
[attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate">
</mat-datetimepicker>
</mat-form-field>
</div>
</div>