inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-19372 Fix clickable area on cardview textitem (#9361)

Browse Source 
* AAE-19372 Fix clickable area on cardview textitem

* AAE-19372 update test description
This commit is contained in:
Tomasz Gnyp
2024-03-04 19:39:49 +01:00
committed by GitHub
parent 9e4569d7ca
commit 513098aee7
3 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -105,7 +105,7 @@
title="{{ property.label | translate }}" title="{{ property.label | translate }}"
[ngClass]="{ [ngClass]="{
'adf-property-value-editable': editable, 'adf-property-value-editable': editable,
'adf-textitem-clickable-value': !isEditable, 'adf-textitem-clickable-value': isClickable,
'adf-property-readonly-value': isReadonlyProperty, 'adf-property-readonly-value': isReadonlyProperty,
'adf-property-value-has-error': isEditable && hasErrors 'adf-property-value-has-error': isEditable && hasErrors
}" }"
@@ -114,7 +114,7 @@
[(ngModel)]="editedValue" [(ngModel)]="editedValue"
(blur)="update()" (blur)="update()"
(keydown.enter)="update()" (keydown.enter)="update()"
[disabled]="!isEditable" [readonly]="!isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key"> [attr.data-automation-id]="'card-textitem-value-' + property.key">
<button mat-icon-button <button mat-icon-button
matSuffix matSuffix

25
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -33,6 +33,7 @@ import { CardViewItemValidator } from '../../interfaces/card-view-item-validator
import { HarnessLoader } from '@angular/cdk/testing'; import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing'; import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing';
import { MatInputHarness } from '@angular/material/input/testing';
describe('CardViewTextItemComponent', () => { describe('CardViewTextItemComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -529,6 +530,17 @@ describe('CardViewTextItemComponent', () => {
); );
}); });
it('should input be readonly if item it NOT editable', async () => {
component.editable = false;
component.property.clickable = true;
component.ngOnChanges({});
loader = TestbedHarnessEnvironment.loader(fixture);
const inputHarness = await loader.getHarness(MatInputHarness.with({selector: `[data-automation-id="card-textitem-value-${component.property.key}"]`}));
expect(component.isEditable).toBe(false);
expect(await inputHarness.isReadonly()).toBe(true);
});
}); });
describe('Update', () => { describe('Update', () => {
@@ -540,6 +552,7 @@ describe('CardViewTextItemComponent', () => {
default: 'FAKE-DEFAULT-KEY', default: 'FAKE-DEFAULT-KEY',
editable: true editable: true
}); });
component.editable = true;
component.ngOnChanges({ property: new SimpleChange(null, null, true) }); component.ngOnChanges({ property: new SimpleChange(null, null, true) });
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -705,6 +718,18 @@ describe('CardViewTextItemComponent', () => {
expect(getTextFieldValue(component.property.key)).toEqual(expectedText); expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
expect(component.property.value).toBe(expectedText); expect(component.property.value).toBe(expectedText);
}); });
it('should NOT propagate update if is NOT editable', () => {
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
component.editable = false;
fixture.detectChanges();
component.update();
expect(component.isEditable).toBe(false);
expect(itemUpdatedSpy).not.toHaveBeenCalled();
});
}); });
describe('number', () => { describe('number', () => {

16
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -122,13 +122,15 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
} }
update(): void { update(): void {
this.resetErrorMessages(); if (this.isEditable) {
if (this.property.isValid(this.editedValue)) { this.resetErrorMessages();
this.property.value = this.prepareValueForUpload(this.property, this.editedValue); if (this.property.isValid(this.editedValue)) {
this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.property.value); this.property.value = this.prepareValueForUpload(this.property, this.editedValue);
} else { this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.property.value);
this.errors = this.property.getValidationErrors(this.editedValue); } else {
this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.editedValue); this.errors = this.property.getValidationErrors(this.editedValue);
this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.editedValue);
}
} }
} }