mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3499] Make Card View Text Item reactive to user input (#5953)
* [ADF-3499] Make Card View Text Item reactive to user input * Improve code and fix APS2 tests * Fix tests * Improve tests * Add missing async
This commit is contained in:
davidcanonieto
GitHub
@@ -17,7 +17,7 @@
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
@@ -51,6 +51,7 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
FlexLayoutModule,
|
||||
TranslateModule,
|
||||
MatDatepickerModule,
|
||||
|
||||
@@ -13,10 +13,8 @@
|
||||
*ngIf="!property.multiline"
|
||||
class="adf-property-value"
|
||||
[placeholder]="property.default"
|
||||
[(ngModel)]="editedValue"
|
||||
(blur)="update()"
|
||||
(keydown.enter)="update()"
|
||||
[disabled]="!isEditable"
|
||||
[value]="editedValue"
|
||||
[formControl]="textInput"
|
||||
(dblclick)="copyToClipboard(property.displayValue)"
|
||||
matTooltipShowDelay="1000"
|
||||
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
|
||||
@@ -29,10 +27,7 @@
|
||||
matAutosizeMaxRows="5"
|
||||
class="adf-property-value"
|
||||
[placeholder]="property.default"
|
||||
[(ngModel)]="editedValue"
|
||||
(blur)="update()"
|
||||
(keydown.enter)="update()"
|
||||
[disabled]="!isEditable"
|
||||
[formControl]="textInput"
|
||||
[attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
|
||||
<button mat-button
|
||||
matSuffix
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed, tick, fakeAsync, async, discardPeriodicTasks } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
|
||||
import { CardViewUpdateService } from '../../services/card-view-update.service';
|
||||
@@ -25,7 +25,7 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
|
||||
import { CardViewItemFloatValidator, CardViewItemIntValidator, CardViewIntItemModel, CardViewFloatItemModel } from '@alfresco/adf-core';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { ClipboardService } from '../../../clipboard/clipboard.service';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { DebugElement, SimpleChange } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
|
||||
|
||||
@@ -61,10 +61,10 @@ describe('CardViewTextItemComponent', () => {
|
||||
default: 'FAKE-DEFAULT-KEY',
|
||||
editable: false
|
||||
});
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
});
|
||||
|
||||
it('should render the label and value', async () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -82,10 +82,9 @@ describe('CardViewTextItemComponent', () => {
|
||||
value: { id: 123, displayName: 'User Name' },
|
||||
key: 'namekey'
|
||||
});
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('User Name');
|
||||
});
|
||||
@@ -99,10 +98,9 @@ describe('CardViewTextItemComponent', () => {
|
||||
editable: false
|
||||
});
|
||||
component.displayEmpty = true;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('FAKE-DEFAULT-KEY');
|
||||
});
|
||||
@@ -116,10 +114,9 @@ describe('CardViewTextItemComponent', () => {
|
||||
editable: true
|
||||
});
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('FAKE-DEFAULT-KEY');
|
||||
});
|
||||
@@ -127,18 +124,17 @@ describe('CardViewTextItemComponent', () => {
|
||||
it('should render value when editable:true', async () => {
|
||||
component.editable = true;
|
||||
component.property.editable = true;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('Lorem ipsum');
|
||||
|
||||
});
|
||||
|
||||
it('should render the edit icon in case of editable:true', () => {
|
||||
component.editable = true;
|
||||
component.property.editable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
|
||||
@@ -147,10 +143,8 @@ describe('CardViewTextItemComponent', () => {
|
||||
|
||||
it('should NOT render the edit icon in case of editable:false', async () => {
|
||||
component.editable = false;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
|
||||
expect(editIcon).toBeNull('Edit icon should NOT be shown');
|
||||
});
|
||||
@@ -158,12 +152,12 @@ describe('CardViewTextItemComponent', () => {
|
||||
it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => {
|
||||
component.editable = false;
|
||||
component.property.editable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
|
||||
expect(editIcon).toBeNull('Edit icon should NOT be shown');
|
||||
|
||||
});
|
||||
|
||||
it('should render chips for multivalue properties when chips are enabled', async () => {
|
||||
@@ -176,16 +170,17 @@ describe('CardViewTextItemComponent', () => {
|
||||
multivalued: true
|
||||
});
|
||||
component.useChipsForMultiValueProperty = true;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
|
||||
expect(valueChips).not.toBeNull();
|
||||
expect(valueChips.length).toBe(3);
|
||||
expect(valueChips[0].nativeElement.innerText.trim()).toBe('item1');
|
||||
expect(valueChips[1].nativeElement.innerText.trim()).toBe('item2');
|
||||
expect(valueChips[2].nativeElement.innerText.trim()).toBe('item3');
|
||||
|
||||
});
|
||||
|
||||
it('should render string for multivalue properties when chips are disabled', async () => {
|
||||
@@ -199,10 +194,10 @@ describe('CardViewTextItemComponent', () => {
|
||||
});
|
||||
|
||||
component.useChipsForMultiValueProperty = false;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const valueChips = fixture.debugElement.query(By.css(`mat-chip-list`));
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('item1,item2,item3');
|
||||
@@ -219,60 +214,64 @@ describe('CardViewTextItemComponent', () => {
|
||||
default: 'FAKE-DEFAULT-KEY',
|
||||
editable: false
|
||||
});
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
});
|
||||
|
||||
it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', async () => {
|
||||
it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', (done) => {
|
||||
component.property.clickable = false;
|
||||
component.displayEmpty = true;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('FAKE-DEFAULT-KEY');
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('FAKE-DEFAULT-KEY');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render the default as value if the value is empty and clickable true', async () => {
|
||||
component.property.clickable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = getTextFieldValue(component.property.key);
|
||||
expect(value).toBe('FAKE-DEFAULT-KEY');
|
||||
});
|
||||
|
||||
it('should not render the edit icon in case of clickable true but edit false', async () => {
|
||||
component.property.clickable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
|
||||
expect(value).toBeNull();
|
||||
|
||||
});
|
||||
|
||||
it('should not render the clickable icon in case editable set to false', async () => {
|
||||
component.property.clickable = true;
|
||||
component.property.icon = 'create';
|
||||
component.editable = false;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
|
||||
expect(value).toBeNull('icon should NOT be shown');
|
||||
|
||||
});
|
||||
|
||||
it('should render the defined clickable icon in case of clickable true and editable input set to true', async () => {
|
||||
component.property.clickable = true;
|
||||
component.property.icon = 'FAKE_ICON';
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
@@ -280,12 +279,13 @@ describe('CardViewTextItemComponent', () => {
|
||||
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
|
||||
expect(value).not.toBeNull();
|
||||
expect(value.nativeElement.innerText).toBe('FAKE_ICON');
|
||||
|
||||
});
|
||||
|
||||
it('should not render clickable icon in case of clickable true and icon undefined', async () => {
|
||||
component.property.clickable = true;
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
@@ -297,13 +297,14 @@ describe('CardViewTextItemComponent', () => {
|
||||
it('should not render the edit icon in case of clickable false and icon defined', async () => {
|
||||
component.property.clickable = false;
|
||||
component.property.icon = 'FAKE_ICON';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
|
||||
expect(value).toBeNull('Edit icon should NOT be shown');
|
||||
|
||||
});
|
||||
|
||||
it('should call back function when clickable property enabled', async () => {
|
||||
@@ -312,7 +313,8 @@ describe('CardViewTextItemComponent', () => {
|
||||
component.property.icon = 'FAKE_ICON';
|
||||
component.property.clickCallBack = callBackSpy;
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({});
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
@@ -320,6 +322,7 @@ describe('CardViewTextItemComponent', () => {
|
||||
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
|
||||
expect(value.nativeElement.innerText).toBe('FAKE_ICON');
|
||||
value.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(callBackSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -330,17 +333,19 @@ describe('CardViewTextItemComponent', () => {
|
||||
component.property.clickable = true;
|
||||
component.property.icon = 'FAKE_ICON';
|
||||
component.editable = false;
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({});
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
|
||||
value.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(cardViewUpdateService.clicked).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update input the value on input updated', async (done) => {
|
||||
it('should update input the value on input updated', fakeAsync((done) => {
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
|
||||
component.property.clickable = true;
|
||||
@@ -348,26 +353,27 @@ describe('CardViewTextItemComponent', () => {
|
||||
component.editable = true;
|
||||
component.property.isValid = () => true;
|
||||
const expectedText = 'changed text';
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
component.ngOnChanges({});
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedText);
|
||||
tick(1000);
|
||||
|
||||
fixture.detectChanges();
|
||||
discardPeriodicTasks();
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedText);
|
||||
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
|
||||
expect(component.property.value).toBe(expectedText);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should copy value to clipboard on double click', async () => {
|
||||
const clipboardService = TestBed.inject(ClipboardService);
|
||||
@@ -377,7 +383,6 @@ describe('CardViewTextItemComponent', () => {
|
||||
component.property.icon = 'FAKE_ICON';
|
||||
component.editable = false;
|
||||
component.copyToClipboardAction = true;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
@@ -388,7 +393,6 @@ describe('CardViewTextItemComponent', () => {
|
||||
fixture.detectChanges();
|
||||
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Update', () => {
|
||||
@@ -401,103 +405,138 @@ describe('CardViewTextItemComponent', () => {
|
||||
default: 'FAKE-DEFAULT-KEY',
|
||||
editable: true
|
||||
});
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
});
|
||||
|
||||
it('should call the isValid method with the edited value', async () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
it('should call the isValid method with the edited value', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
spyOn(component.property, 'isValid');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
|
||||
});
|
||||
spyOn(component.property, 'isValid');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should trigger the update event if the editedValue is valid', async () => {
|
||||
it('should trigger the update event if the editedValue is valid', fakeAsync((done) => {
|
||||
component.property.isValid = () => true;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
const property = { ...component.property };
|
||||
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
|
||||
});
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
const property = { ...component.property };
|
||||
|
||||
it('should NOT trigger the update event if the editedValue is invalid', async () => {
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should NOT trigger the update event if the editedValue is invalid', fakeAsync((done) => {
|
||||
component.property.isValid = () => false;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
expect(cardViewUpdateService.update).not.toHaveBeenCalled();
|
||||
});
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
|
||||
it('should set the errorMessages properly if the editedValue is invalid', async () => {
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(cardViewUpdateService.update).not.toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should set the errorMessages properly if the editedValue is invalid', fakeAsync((done) => {
|
||||
const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
|
||||
component.property.isValid = () => false;
|
||||
component.property.getValidationErrors = () => expectedErrorMessages;
|
||||
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
expect(component.errors).toBe(expectedErrorMessages);
|
||||
});
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.errors).toBe(expectedErrorMessages);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should render the error when the editedValue is invalid', async () => {
|
||||
it('should render the error when the editedValue is invalid', fakeAsync((done) => {
|
||||
const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
|
||||
component.property.isValid = () => false;
|
||||
component.property.getValidationErrors = () => expectedErrorMessages;
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
|
||||
expect(errorMessage).toBe('Something went wrong');
|
||||
});
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
|
||||
expect(errorMessage).toBe('Something went wrong');
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should reset erros when exiting editable mode', async () => {
|
||||
it('should reset erros when exiting editable mode', fakeAsync((done) => {
|
||||
let errorMessage: string;
|
||||
const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
|
||||
component.property.isValid = () => false;
|
||||
component.property.getValidationErrors = () => expectedErrorMessages;
|
||||
component.editable = true;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
|
||||
component.editable = false;
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
|
||||
expect(errorMessage).toBe(null);
|
||||
expect(component.errors).toEqual([]);
|
||||
});
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 'updated-value');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
component.editable = false;
|
||||
|
||||
fixture.detectChanges();
|
||||
errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
|
||||
expect(errorMessage).toBe(null);
|
||||
expect(component.errors).toEqual([]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should update the property value after a successful update attempt', async () => {
|
||||
component.property.isValid = () => true;
|
||||
component.update();
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
expect(component.property.value).toBe(component.editedValue);
|
||||
});
|
||||
|
||||
it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', async(async (done) => {
|
||||
it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', async(async (done) => {
|
||||
const functionTestClick = () => done();
|
||||
|
||||
component.property = new CardViewTextItemModel({
|
||||
@@ -511,7 +550,7 @@ describe('CardViewTextItemComponent', () => {
|
||||
}
|
||||
});
|
||||
component.displayEmpty = true;
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -519,31 +558,32 @@ describe('CardViewTextItemComponent', () => {
|
||||
inputField.nativeElement.click();
|
||||
}));
|
||||
|
||||
it('should trigger an update event on the CardViewUpdateService [integration]', async (done) => {
|
||||
it('should trigger an update event on the CardViewUpdateService [integration]', fakeAsync((done) => {
|
||||
component.property.isValid = () => true;
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
const expectedText = 'changed text';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
|
||||
(updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
}
|
||||
);
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
|
||||
(updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
}
|
||||
);
|
||||
|
||||
updateTextField(component.property.key, expectedText);
|
||||
});
|
||||
updateTextField(component.property.key, expectedText);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should update the value using the updateItem$ subject', async(async () => {
|
||||
it('should update the value using the updateItem$ subject', (async () => {
|
||||
component.property.isValid = () => true;
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
const expectedText = 'changed text';
|
||||
component.ngOnChanges();
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -552,40 +592,46 @@ describe('CardViewTextItemComponent', () => {
|
||||
expect(component.property.value).toBe('Lorem ipsum');
|
||||
|
||||
cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText } as any);
|
||||
component.ngOnChanges();
|
||||
component.ngOnChanges({ property: new SimpleChange(value, expectedText, false) });
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
value = getTextFieldValue(component.property.key);
|
||||
expect(value).toEqual(expectedText);
|
||||
expect(component.property.value).toBe(expectedText);
|
||||
|
||||
}));
|
||||
|
||||
it('should update multiline input the value on input updated', async (done) => {
|
||||
it('should update multiline input the value on input updated', fakeAsync((done) => {
|
||||
component.property.isValid = () => true;
|
||||
component.property.multiline = true;
|
||||
const expectedText = 'changed text';
|
||||
spyOn(component, 'update').and.callThrough();
|
||||
const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedText });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedText);
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
expect(component.update).toHaveBeenCalled();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
|
||||
expect(component.property.value).toBe(expectedText);
|
||||
});
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedText);
|
||||
|
||||
expect(component.update).toHaveBeenCalled();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
|
||||
expect(component.property.value).toBe(expectedText);
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('number', () => {
|
||||
@@ -602,101 +648,114 @@ describe('CardViewTextItemComponent', () => {
|
||||
});
|
||||
component.editable = true;
|
||||
component.property.validators.push(new CardViewItemIntValidator());
|
||||
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
});
|
||||
|
||||
it('should show validation error when string passed', async () => {
|
||||
component.ngOnChanges();
|
||||
it('should show validation error when string passed', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 'update number');
|
||||
updateTextField(component.property.key, 'update number');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show validation error for empty string', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
});
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
it('should show validation error for empty string', async () => {
|
||||
component.ngOnChanges();
|
||||
updateTextField(component.property.key, ' ');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show validation error for float number', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, ' ');
|
||||
updateTextField(component.property.key, 123.456);
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show validation error for exceed the number limit (2147483648)', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
expect(component.property.value).toBe(10);
|
||||
});
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
it('should show validation error for float number', async () => {
|
||||
component.ngOnChanges();
|
||||
updateTextField(component.property.key, 2147483648);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not show validation error for below the number limit (2147483647)', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 123.456);
|
||||
updateTextField(component.property.key, 2147483647);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
expect(component.property.value).toBe(10);
|
||||
});
|
||||
expect(component.property.value).toBe('2147483647');
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show validation error for exceed the number limit (2147483648)', async () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
updateTextField(component.property.key, 2147483648);
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(10);
|
||||
expect(component.property.value).toBe(10);
|
||||
});
|
||||
|
||||
it('should not show validation error for below the number limit (2147483647)', async () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
updateTextField(component.property.key, 2147483647);
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
expect(component.property.value).toBe('2147483647');
|
||||
});
|
||||
|
||||
it('should update input the value on input updated', async (done) => {
|
||||
it('should update input the value on input updated', fakeAsync((done) => {
|
||||
const expectedNumber = 2020;
|
||||
spyOn(component, 'update').and.callThrough();
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedNumber);
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
|
||||
expect(component.property.value).toBe(expectedNumber.toString());
|
||||
});
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedNumber);
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
|
||||
expect(component.property.value).toBe(expectedNumber.toString());
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('float', () => {
|
||||
@@ -714,64 +773,72 @@ describe('CardViewTextItemComponent', () => {
|
||||
});
|
||||
component.editable = true;
|
||||
component.property.validators.push(new CardViewItemFloatValidator());
|
||||
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
|
||||
});
|
||||
|
||||
it('should show validation error when string passed', async () => {
|
||||
component.ngOnChanges();
|
||||
it('should show validation error when string passed', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
updateTextField(component.property.key, 'hello there');
|
||||
updateTextField(component.property.key, 'hello there');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(floatValue);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show validation error for empty string', fakeAsync((done) => {
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(floatValue);
|
||||
});
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
it('should show validation error for empty string', async () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
updateTextField(component.property.key, ' ');
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(floatValue);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
updateTextField(component.property.key, ' ');
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = getTextFieldError(component.property.key);
|
||||
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
|
||||
expect(component.property.value).toBe(floatValue);
|
||||
});
|
||||
|
||||
it('should update input the value on input updated', async (done) => {
|
||||
it('should update input the value on input updated', fakeAsync((done) => {
|
||||
const expectedNumber = 88.44;
|
||||
spyOn(component, 'update').and.callThrough();
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.whenStable().then(() => {
|
||||
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
|
||||
expect(updateNotification.target).toEqual({ ...component.property });
|
||||
expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
|
||||
disposableUpdate.unsubscribe();
|
||||
done();
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedNumber);
|
||||
tick(600);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
|
||||
expect(component.property.value).toBe(expectedNumber.toString());
|
||||
});
|
||||
});
|
||||
|
||||
updateTextField(component.property.key, expectedNumber);
|
||||
|
||||
fixture.detectChanges();
|
||||
const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
|
||||
expect(error).toBeFalsy();
|
||||
|
||||
expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
|
||||
expect(component.property.value).toBe(expectedNumber.toString());
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
function updateTextField(key, value) {
|
||||
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
|
||||
editInput.nativeElement.value = value;
|
||||
editInput.nativeElement.dispatchEvent(new Event('input'));
|
||||
editInput.nativeElement.dispatchEvent(new Event('blur'));
|
||||
fixture.detectChanges();
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
|
||||
import { CardViewUpdateService } from '../../services/card-view-update.service';
|
||||
import { BaseCardView } from '../base-card-view';
|
||||
@@ -23,6 +23,9 @@ import { MatChipInputEvent } from '@angular/material/chips';
|
||||
import { ClipboardService } from '../../../clipboard/clipboard.service';
|
||||
import { TranslationService } from '../../../services/translation.service';
|
||||
import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { debounceTime, takeUntil, filter } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs/internal/Subject';
|
||||
|
||||
export const DEFAULT_SEPARATOR = ', ';
|
||||
const templateTypes = {
|
||||
@@ -59,15 +62,36 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
errors: CardViewItemValidator[];
|
||||
templateType: string;
|
||||
|
||||
textInput: FormControl = new FormControl();
|
||||
|
||||
private onDestroy$ = new Subject<boolean>();
|
||||
|
||||
constructor(cardViewUpdateService: CardViewUpdateService,
|
||||
private clipboardService: ClipboardService,
|
||||
private translateService: TranslationService) {
|
||||
super(cardViewUpdateService);
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.property && changes.property.firstChange) {
|
||||
this.textInput.valueChanges
|
||||
.pipe(
|
||||
filter(textInputValue => textInputValue !== this.editedValue),
|
||||
debounceTime(500),
|
||||
takeUntil(this.onDestroy$)
|
||||
)
|
||||
.subscribe(textInputValue => {
|
||||
this.editedValue = textInputValue;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
|
||||
this.resetValue();
|
||||
this.setTemplateType();
|
||||
|
||||
if (changes.editable) {
|
||||
this.isEditable ? this.textInput.enable() : this.textInput.disable();
|
||||
}
|
||||
}
|
||||
|
||||
private setTemplateType() {
|
||||
@@ -89,6 +113,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
this.editedValue = this.property.value ? Array.from(this.property.value) : [];
|
||||
} else {
|
||||
this.editedValue = this.property.displayValue;
|
||||
this.textInput.setValue(this.editedValue);
|
||||
}
|
||||
|
||||
this.resetErrorMessages();
|
||||
@@ -136,7 +161,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
|
||||
if (chipInput) {
|
||||
chipInput.value = '';
|
||||
} }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clicked(): void {
|
||||
@@ -158,6 +184,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
|
||||
get showProperty(): boolean {
|
||||
return this.displayEmpty || !this.property.isEmpty();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user