[ACS-5551] updated checks for non -editable field

This commit is contained in:
Anukriti Singh
2023-10-13 16:29:16 +05:30
parent a294880506
commit 515ae12a23
10 changed files with 35 additions and 23 deletions
@@ -30,12 +30,6 @@
margin: 24px;
}
.mat-expansion-panel-body {
align-items: center;
justify-content: center;
font-size: 15px;
}
.adf-mat-divider {
margin-left: -24px;
margin-right: -24px;
@@ -88,6 +88,7 @@ adf-tags-creator {
overflow-wrap: anywhere;
display: inline-block;
padding-right: 12px;
overflow: auto;
max-height: 7vh;
}
@@ -1,12 +1,12 @@
<label class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
[ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
[ngClass]="{'adf-property-label-not-editable' : nonEditableField}"
*ngIf="showProperty() || isEditable()"
[attr.for]="'card-view-dateitem-' + property.key">
{{ property.label | translate }}
</label>
<div class="adf-property-value adf-property-value-padding-top"
[ngClass]="{'adf-property-dateitem-edit-mode' : editable, 'adf-property-label-not-editable' : !isEditable() && editable}">
[ngClass]="{'adf-property-dateitem-edit-mode' : editable, 'adf-property-label-not-editable' : nonEditableField}">
<span *ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span *ngIf="showProperty()"
@@ -100,4 +100,4 @@
</mat-form-field>
</div>
</div>
<mat-divider *ngIf="showProperty() && !editable"></mat-divider>
<mat-divider *ngIf="showDivider"></mat-divider>
@@ -154,4 +154,12 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
update() {
this.cardViewUpdateService.update({ ...this.property } as CardViewDateItemModel, this.property.value);
}
get showDivider(): boolean {
return !this.editable && this.showProperty();
}
get nonEditableField(): boolean {
return this.editable && !this.property.editable;
}
}
@@ -2,7 +2,7 @@
<div
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
[ngClass]="{'adf-property-label-not-editable' : nonEditableField}"
>{{ property.label | translate }}</div>
<div class="adf-property-field">
<div
@@ -16,7 +16,7 @@
<mat-select
[(value)]="value"
panelClass="adf-select-filter"
[ngClass]="{'adf-property-select-edit-mode' : isEditable(),'adf-property-normal-mode':!isEditable(),'adf-property-label-not-editable' : !isEditable() && editable}"
[ngClass]="{'adf-property-select-edit-mode' : isEditable(),'adf-property-normal-mode':!isEditable(),'adf-property-label-not-editable' : nonEditableField}"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"
@@ -109,4 +109,8 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
private get optionsLimit(): number {
return this.appConfig.get<number>('content-metadata.selectFilterLimit', CardViewSelectItemComponent.HIDE_FILTER_LIMIT);
}
get nonEditableField(): boolean {
return this.editable && !this.property.editable;
}
}
@@ -5,13 +5,13 @@
[floatLabel]="'always'"
appearance="standard">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
[ngClass]="{'adf-property-label-not-editable' : nonEditableField}">
{{ property.label | translate }}
</mat-label>
<input matInput
*ngIf="!property.multiline"
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : nonEditableField}"
title="{{property.label | translate }}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
@@ -29,7 +29,7 @@
[cdkAutosizeMaxRows]="1"
[cdkAutosizeMaxRows]="5"
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : nonEditableField}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
@@ -43,7 +43,7 @@
<div *ngSwitchCase="'chipsTemplate'"
class="adf-property-field adf-textitem-chip-list-container">
<mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
[ngClass]="{'adf-property-label-not-editable' : nonEditableField}">
{{ property.label | translate }}
</mat-label>
<mat-chip-list #chipList
@@ -63,7 +63,7 @@
[floatLabel]="'never'">
<input matInput
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : nonEditableField}"
title="{{property.label | translate }}"
[placeholder]="editedValue ? '' : property.default | translate"
[attr.aria-label]="property.label | translate"
@@ -72,7 +72,7 @@
(matChipInputTokenEnd)="addValueToList($event)"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
</mat-form-field>
<mat-divider *ngIf="showProperty && !editable"></mat-divider>
<mat-divider *ngIf="showDivider"></mat-divider>
</div>
<div *ngSwitchCase="'clickableTemplate'"
@@ -84,14 +84,14 @@
<mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
[floatLabel]="'never'">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
[ngClass]="{'adf-property-label-not-editable' : nonEditableField}">
{{ property.label | translate }}
</mat-label>
<input matInput
[type]=property.inputType
class="adf-property-value"
title="{{property.label | translate }}"
[ngClass]="{ 'adf-textitem-clickable-value': !isEditable,'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable }"
[ngClass]="{'adf-textitem-clickable-value': !isEditable,'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : nonEditableField}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[(ngModel)]="editedValue"
@@ -232,4 +232,12 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
get showLabelForChips(): boolean {
return this.displayLabelForChips;
}
get showDivider(): boolean {
return !this.editable && this.showProperty;
}
get nonEditableField(): boolean {
return this.editable && !this.property.editable;
}
}
-3
View File
@@ -569,8 +569,5 @@
"ADF_DROPDOWN": {
"LOADING": "Loading...",
"SELECTION_ARIA_LABEL": "{{placeholder}} combobox {{selectedOption}}"
},
"INFO_DRAWER": {
"ICON": "Node Icon"
}
}
@@ -1,5 +1,5 @@
<adf-info-drawer-layout [showHeader]="showHeader">
<img class="adf-info-drawer-icon" *ngIf="nodeIcon" alt="{{ 'INFO_DRAWER.ICON' | translate }}" src="{{ nodeIcon }}" info-drawer-node-icon>
<img class="adf-info-drawer-icon" *ngIf="nodeIcon" src="{{ nodeIcon }}" info-drawer-node-icon>
<div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
<ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>