mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4900] Card View and Metadata Components refactoring (#5592)
* [ADF-4900] Card View and Metadata Components refactoring * CSS linting * Unit test excluded * Rebase branch * Fix unit tests * Fix linting * Fix e2e tests * Fix 2e2 tests * Fix process-services e2e tests * More fixes * Fix more e2e tests * Fix unit test * Improve flaky unit test * Fix process services e2e tests * Update Process Header Cloud Page * Fix linting * Fix timing issue * Lintintg * Fix selectors * Fix e2e tests * Fix timing issue * Fix C260328 * Fix spellcheck * save screenshot * performance issue * Fix unit tests and e2e tests * fix e2e * refactoring * fix lint * fix e2e * Fix C309698 * fix other e2e * fix lint * increase timeout Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
This commit is contained in:
davidcanonieto
GitHub
@@ -1,151 +1,124 @@
|
||||
<div [attr.data-automation-id]="'card-textitem-label-' + property.key"
|
||||
class="adf-property-label"
|
||||
*ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
|
||||
<div class="adf-property-value">
|
||||
<span *ngIf="!isEditable()">
|
||||
<span *ngIf="!isClickable(); else nonClickableTemplate"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||
<span *ngIf="!isChipViewEnabled; else chipListTemplate">
|
||||
<span *ngIf="showProperty() && !copyToClipboardAction"
|
||||
[ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
|
||||
class="adf-textitem-value">
|
||||
{{ property.displayValue }}
|
||||
</span>
|
||||
<span *ngIf="showProperty() && copyToClipboardAction"
|
||||
[ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
|
||||
(dblclick)="copyToClipboard(property.displayValue)"
|
||||
class="adf-textitem-value"
|
||||
matTooltipShowDelay="1000"
|
||||
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
|
||||
{{ property.displayValue }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<ng-template #nonClickableTemplate>
|
||||
<div role="button"
|
||||
class="adf-textitem-clickable"
|
||||
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
|
||||
(click)="clicked()"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<span class="adf-textitem-clickable-value"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||
<span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
|
||||
</span>
|
||||
<button mat-icon-button
|
||||
fxFlex="0 0 auto"
|
||||
*ngIf="showClickableIcon()"
|
||||
class="adf-textitem-action"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
|
||||
<mat-icon class="adf-textitem-icon">{{property?.icon}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</span>
|
||||
<span *ngIf="isEditable()">
|
||||
<div *ngIf="!inEdit"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
[attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
(click)="setEditMode(true)"
|
||||
(keydown.enter)="setEditMode(true)"
|
||||
class="adf-textitem-readonly"
|
||||
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<span *ngIf="!isChipViewEnabled; else chipListTemplate"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||
<span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
|
||||
</span>
|
||||
<div [ngSwitch]="templateType">
|
||||
<div class="adf-property-label"
|
||||
[attr.data-automation-id]="'card-textitem-label-' + property.key"
|
||||
*ngIf="showProperty || isEditable">
|
||||
{{ property.label | translate }}
|
||||
</div>
|
||||
|
||||
<button mat-icon-button
|
||||
fxFlex="0 0 auto"
|
||||
class="adf-textitem-action"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'card-textitem-edit-icon-' + property.key">
|
||||
|
||||
<mat-icon class="adf-textitem-icon"> create</mat-icon>
|
||||
<div *ngSwitchDefault>
|
||||
<mat-form-field class="adf-property-field adf-card-textitem-field"
|
||||
[ngClass]="{ 'adf-property-read-only': !isEditable }">
|
||||
<input matInput
|
||||
*ngIf="!property.multiline"
|
||||
class="adf-property-value"
|
||||
[placeholder]="property.default"
|
||||
[(ngModel)]="editedValue"
|
||||
(blur)="update()"
|
||||
(keydown.enter)="update()"
|
||||
[disabled]="!isEditable"
|
||||
(dblclick)="copyToClipboard(property.displayValue)"
|
||||
matTooltipShowDelay="1000"
|
||||
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
|
||||
[matTooltipDisabled]="isEditable"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||
<textarea matInput
|
||||
*ngIf="property.multiline"
|
||||
matTextareaAutosize
|
||||
matAutosizeMaxRows="1"
|
||||
matAutosizeMaxRows="5"
|
||||
class="adf-property-value"
|
||||
[placeholder]="property.default"
|
||||
[(ngModel)]="editedValue"
|
||||
(blur)="update()"
|
||||
(keydown.enter)="update()"
|
||||
[disabled]="!isEditable"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
|
||||
<button mat-button
|
||||
matSuffix
|
||||
class="adf-property-clear-value"
|
||||
*ngIf="isEditable"
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="editedValue=''">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="inEdit"
|
||||
class="adf-textitem-editable">
|
||||
<div class="adf-textitem-editable-controls">
|
||||
<mat-form-field floatPlaceholder="never"
|
||||
class="adf-input-container">
|
||||
<input *ngIf="!isChipViewEnabled && !property.multiline"
|
||||
#editorInput
|
||||
(keydown.escape)="reset($event)"
|
||||
(keydown.enter)="update($event)"
|
||||
matInput
|
||||
class="adf-input"
|
||||
[placeholder]="property.default | translate"
|
||||
[(ngModel)]="editedValue"
|
||||
[attr.data-automation-id]="'card-textitem-editinput-' + property.key">
|
||||
<textarea *ngIf="!isChipViewEnabled && property.multiline"
|
||||
#editorInput
|
||||
matInput
|
||||
matTextareaAutosize
|
||||
matAutosizeMaxRows="1"
|
||||
matAutosizeMaxRows="5"
|
||||
class="adf-textarea"
|
||||
[placeholder]="property.default | translate"
|
||||
[(ngModel)]="editedValue"
|
||||
(input)="onTextAreaInputChange()"
|
||||
[attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
|
||||
<div *ngIf="isChipViewEnabled">
|
||||
<mat-chip-list class="adf-input"
|
||||
#chipList>
|
||||
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
|
||||
[removable]="true"
|
||||
(removed)="removeValueFromList(idx)">
|
||||
{{ propertyValue }}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
<input #editorInput
|
||||
[placeholder]="property.default | translate"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
(matChipInputTokenEnd)="addValueToList($event)"
|
||||
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button
|
||||
class="adf-textitem-action"
|
||||
(click)="update($event)"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
|
||||
[attr.data-automation-id]="'card-textitem-update-' + property.key">
|
||||
<mat-icon class="adf-textitem-icon">done</mat-icon>
|
||||
</button>
|
||||
<mat-icon matSuffix
|
||||
*ngIf="isEditable"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
class="adf-textitem-edit-icon">mode_edit</mat-icon>
|
||||
|
||||
<button mat-icon-button
|
||||
(click)="reset($event)"
|
||||
class="adf-textitem-action"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
|
||||
[attr.data-automation-id]="'card-textitem-reset-' + property.key">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-icon>clear</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
|
||||
class="adf-textitem-editable-error"
|
||||
*ngIf="hasErrors()">
|
||||
<ul>
|
||||
<li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
|
||||
</ul>
|
||||
</mat-error>
|
||||
</div>
|
||||
</span>
|
||||
<ng-template #emptyValueTemplate>
|
||||
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
|
||||
</ng-template>
|
||||
<mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
|
||||
class="adf-textitem-editable-error"
|
||||
*ngIf="hasErrors">
|
||||
<ul>
|
||||
<li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
|
||||
</ul>
|
||||
</mat-error>
|
||||
|
||||
<ng-template #chipListTemplate>
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngFor="let propertyValue of editedValue">
|
||||
<div *ngSwitchCase="'chipsTemplate'"
|
||||
class="adf-property-field adf-textitem-chip-list-container">
|
||||
<mat-chip-list #chipList
|
||||
class="adf-textitem-chip-list">
|
||||
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
|
||||
[removable]="isEditable"
|
||||
(removed)="removeValueFromList(idx)">
|
||||
{{ propertyValue }}
|
||||
<mat-icon *ngIf="isEditable"
|
||||
matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</ng-template>
|
||||
|
||||
<mat-form-field *ngIf="isEditable"
|
||||
class="adf-property-field adf-textitem-chip-list-input"
|
||||
[ngClass]="{ 'adf-property-read-only': !isEditable }">
|
||||
<input matInput
|
||||
class="adf-property-value"
|
||||
[placeholder]="property.default | translate"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
(matChipInputTokenEnd)="addValueToList($event)"
|
||||
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
|
||||
<mat-icon matSuffix
|
||||
class="adf-textitem-edit-icon">mode_edit</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'clickableTemplate'"
|
||||
role="button"
|
||||
class="adf-textitem-clickable"
|
||||
[ngClass]="{ 'adf-property-read-only': !isEditable }"
|
||||
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
|
||||
(click)="clicked()"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<mat-form-field class="adf-property-field adf-card-textitem-field">
|
||||
<input matInput
|
||||
[type]=property.inputType
|
||||
class="adf-property-value"
|
||||
[ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
|
||||
[placeholder]="property.default"
|
||||
[(ngModel)]="editedValue"
|
||||
(blur)="update()"
|
||||
(keydown.enter)="update()"
|
||||
[disabled]="!isEditable"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||
<button mat-icon-button
|
||||
matSuffix
|
||||
fxFlex="0 0 auto"
|
||||
*ngIf="showClickableIcon"
|
||||
class="adf-textitem-action"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
|
||||
<mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'emptyTemplate'">
|
||||
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user