mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3193] CardView Variables Item (#3485)
* variables item * unit tests * translations fix * docs added * change requests * change requests
This commit is contained in:
Alex Bolboșenco
committed by
Eugenio Romano
Eugenio Romano
parent
c7e3319e4c
commit
cb23103c83
@@ -0,0 +1,58 @@
|
||||
<div class="adf-property-label">{{ property.label | translate }}</div>
|
||||
<div class="adf-property-value">
|
||||
|
||||
<div *ngIf="isEditable()">
|
||||
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
|
||||
<button (click)="add()" mat-icon-button class="card-view__key-value-pairs__add-btn">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isEditable()" class="card-view__key-value-pairs__read-only">
|
||||
<mat-table #table [dataSource]="matTableValues" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="value">
|
||||
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.value}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="['name', 'value']"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: ['name', 'value'];"></mat-row>
|
||||
</mat-table>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-view__key-value-pairs" *ngIf="isEditable() && values && values.length">
|
||||
<div class="card-view__key-value-pairs__row">
|
||||
<div class="card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</div>
|
||||
<div class="card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-view__key-value-pairs__row" *ngFor="let item of values; let i = index">
|
||||
<div class="card-view__key-value-pairs__col">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input matInput
|
||||
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}"
|
||||
(blur)="onBlur(item.value)"
|
||||
[attr.data-automation-id]="'card-'+ property.key +'-name-input-' + i"
|
||||
[(ngModel)]="values[i].name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="card-view__key-value-pairs__col">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input matInput
|
||||
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}"
|
||||
(blur)="onBlur(item.value)"
|
||||
[attr.data-automation-id]="'card-'+ property.key +'-value-input-' + i"
|
||||
[(ngModel)]="values[i].value">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button mat-icon-button (click)="remove(i)" class="card-view__key-value-pairs__remove-btn">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
.card-view {
|
||||
&__key-value-pairs {
|
||||
&__col {
|
||||
display: inline-block;
|
||||
width: 39%;
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__read-only {
|
||||
.mat-table {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mat-header-row, .mat-row {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { CardViewKeyValuePairsItemModel } from '../../models/card-view-keyvaluepairs.model';
|
||||
import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
|
||||
import { setupTestBed } from '../../../testing/setupTestBed';
|
||||
import { CoreTestingModule } from '../../../testing/core.testing.module';
|
||||
import { CardViewUpdateService } from '../../services/card-view-update.service';
|
||||
|
||||
describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
|
||||
let fixture: ComponentFixture<CardViewKeyValuePairsItemComponent>;
|
||||
let component: CardViewKeyValuePairsItemComponent;
|
||||
let cardViewUpdateService;
|
||||
const mockEmptyData = [{ name: '', value: '' }];
|
||||
const mockData = [{ name: 'test-name', value: 'test-value' }];
|
||||
|
||||
setupTestBed({
|
||||
imports: [CoreTestingModule]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CardViewKeyValuePairsItemComponent);
|
||||
cardViewUpdateService = TestBed.get(CardViewUpdateService);
|
||||
component = fixture.componentInstance;
|
||||
component.property = new CardViewKeyValuePairsItemModel({
|
||||
label: 'Key Value Pairs',
|
||||
value: [],
|
||||
key: 'key-value-pairs',
|
||||
editable: true
|
||||
});
|
||||
component.editable = true;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should render the label', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
|
||||
expect(labelValue).not.toBeNull();
|
||||
expect(labelValue.nativeElement.innerText).toBe('Key Value Pairs');
|
||||
});
|
||||
|
||||
it('should render readOnly table is editable property is FALSE', () => {
|
||||
component.property = new CardViewKeyValuePairsItemModel({
|
||||
label: 'Key Value Pairs',
|
||||
value: mockData,
|
||||
key: 'key-value-pairs'
|
||||
});
|
||||
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const table = fixture.debugElement.query(By.css('.card-view__key-value-pairs__read-only'));
|
||||
const form = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
|
||||
expect(table).not.toBeNull();
|
||||
expect(form).toBeNull();
|
||||
});
|
||||
|
||||
it('should add new item on ADD button click', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(JSON.stringify(component.values)).toBe(JSON.stringify(mockEmptyData));
|
||||
|
||||
const content = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
expect(content).not.toBeNull();
|
||||
|
||||
let nameInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-name-input-0"]`));
|
||||
let valueInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-value-input-0"]`));
|
||||
expect(nameInput).not.toBeNull();
|
||||
expect(valueInput).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
it('should remove an item from list on REMOVE button click', () => {
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
const removeButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__remove-btn'));
|
||||
removeButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(component.values.length).toBe(0);
|
||||
const content = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
expect(content).toBeNull();
|
||||
|
||||
expect(cardViewUpdateService.update).toHaveBeenCalled();
|
||||
expect(component.property.value.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should update property on input blur', async(() => {
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
let nameInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-name-input-0"]`));
|
||||
let valueInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-value-input-0"]`));
|
||||
|
||||
nameInput.nativeElement.value = mockData[0].name;
|
||||
nameInput.nativeElement.dispatchEvent(new Event('input'));
|
||||
valueInput.nativeElement.value = mockData[0].value;
|
||||
valueInput.nativeElement.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
valueInput.triggerEventHandler('blur', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(cardViewUpdateService.update).toHaveBeenCalled();
|
||||
expect(JSON.stringify(component.property.value)).toBe(JSON.stringify(mockData));
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not update property if at least one input is empty on blur', async(() => {
|
||||
spyOn(cardViewUpdateService, 'update');
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
let valueInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-value-input-0"]`));
|
||||
|
||||
valueInput.nativeElement.value = mockData[0].value;
|
||||
valueInput.nativeElement.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
valueInput.triggerEventHandler('blur', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(cardViewUpdateService.update).not.toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { CardViewUpdateService } from '../../services/card-view-update.service';
|
||||
import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models';
|
||||
import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces';
|
||||
import { MatTableDataSource } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-card-view-boolitem',
|
||||
templateUrl: './card-view-keyvaluepairsitem.component.html',
|
||||
styleUrls: ['./card-view-keyvaluepairsitem.component.scss']
|
||||
})
|
||||
|
||||
export class CardViewKeyValuePairsItemComponent implements OnChanges {
|
||||
|
||||
@Input()
|
||||
property: CardViewKeyValuePairsItemModel;
|
||||
|
||||
@Input()
|
||||
editable: boolean = false;
|
||||
|
||||
values: CardViewKeyValuePairsItemType[];
|
||||
matTableValues: MatTableDataSource<CardViewKeyValuePairsItemType>;
|
||||
|
||||
constructor(private cardViewUpdateService: CardViewUpdateService) {}
|
||||
|
||||
ngOnChanges() {
|
||||
this.values = this.property.value || [];
|
||||
this.matTableValues = new MatTableDataSource(this.values);
|
||||
}
|
||||
|
||||
isEditable(): boolean {
|
||||
return this.editable && this.property.editable;
|
||||
}
|
||||
|
||||
add(): void {
|
||||
this.values.push({ name: '', value: '' });
|
||||
}
|
||||
|
||||
remove(index: number): void {
|
||||
this.values.splice(index, 1);
|
||||
this.save(true);
|
||||
}
|
||||
|
||||
onBlur(value): void {
|
||||
if (value.length) {
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
|
||||
save(remove?: boolean): void {
|
||||
const validValues = this.values.filter(i => i.name.length && i.value.length);
|
||||
|
||||
if (remove || validValues.length) {
|
||||
this.cardViewUpdateService.update(this.property, validValues);
|
||||
this.property.value = validValues;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,3 +21,4 @@ export * from './card-view-dateitem/card-view-dateitem.component';
|
||||
export * from './card-view-item-dispatcher/card-view-item-dispatcher.component';
|
||||
export * from './card-view-mapitem/card-view-mapitem.component';
|
||||
export * from './card-view-textitem/card-view-textitem.component';
|
||||
export * from './card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
|
||||
|
||||
Reference in New Issue
Block a user