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 }}"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-textitem-clickable-value': !isEditable,
'adf-textitem-clickable-value': isClickable,
'adf-property-readonly-value': isReadonlyProperty,
'adf-property-value-has-error': isEditable && hasErrors
}"
@@ -114,7 +114,7 @@
[(ngModel)]="editedValue"
(blur)="update()"
(keydown.enter)="update()"
[disabled]="!isEditable"
[readonly]="!isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key">
<button mat-icon-button
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 { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing';
import { MatInputHarness } from '@angular/material/input/testing';
describe('CardViewTextItemComponent', () => {
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', () => {
@@ -540,6 +552,7 @@ describe('CardViewTextItemComponent', () => {
default: 'FAKE-DEFAULT-KEY',
editable: true
});
component.editable = true;
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
fixture.detectChanges();
});
@@ -705,6 +718,18 @@ describe('CardViewTextItemComponent', () => {
expect(getTextFieldValue(component.property.key)).toEqual(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', () => {

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

@@ -122,6 +122,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
}
update(): void {
if (this.isEditable) {
this.resetErrorMessages();
if (this.property.isValid(this.editedValue)) {
this.property.value = this.prepareValueForUpload(this.property, this.editedValue);
@@ -131,6 +132,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.editedValue);
}
}
}
prepareValueForUpload(property: CardViewTextItemModel, value: string | string[]): string | string[] {
if (property.multivalued && typeof value === 'string') {