inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3193] CardView Variables Item (#3485)

Browse Source 
* variables item

* unit tests

* translations fix

* docs added

* change requests

* change requests
This commit is contained in:
Alex Bolboșenco 2018-06-25 19:04:46 +03:00 committed by Eugenio Romano
parent c7e3319e4c
commit cb23103c83
14 changed files with 435 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/core/card-view.component.md
View File

@ -74,6 +74,11 @@ Defining properties from Typescript:
key: 'mental-stability',
default: 0.0
}),
new CardViewKeyValuePairsItemModel({
label: 'Variables',
value: [],
key: 'key-value-pairs'
}),
...
]
```
@ -99,6 +104,7 @@ You define the property list, the [`CardViewComponent`](../core/card-view.compon
- [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
- [**CardViewIntItemModel**](#card-int-item) - _for integer items_
- [**CardViewFloatItemModel**](#card-float-item) - _for float items_
- [**CardViewKeyValuePairsItemModel**](#card-key-values-pairs-item) - _for key-value-pairs items_
Each of these types implements the [Card View Item interface](card-view-item.interface.md):
@ -287,6 +293,23 @@ const floatItemProperty = new CardViewFloatItemModel(options);
| displayValue\* | float | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
#### Card Key Value Pairs Item
[`CardViewKeyValuePairsItemModel`](../../lib/core/card-view/models/card-view-keyvaluepairs.model.ts) is a property type for key-value properties.
```ts
const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| key\* | string | | Identifying key (important when editing the item) |
| editable | boolean | false | Toggles whether the item is editable |
| value\* | `[{ name: '', value: '' }, ...]` | | The original data value for the item |
## See also
- [Card View Update service](card-view-update.service.md)

10
lib/core/card-view/card-view.module.ts
View File

@ -21,6 +21,7 @@ import { FormsModule } from '@angular/forms';
import {
MatButtonModule,
MatDatepickerModule,
MatTableModule,
MatIconModule,
MatInputModule,
MatCheckboxModule,
@ -37,6 +38,7 @@ import { CardViewDateItemComponent } from './components/card-view-dateitem/card-
import { CardViewItemDispatcherComponent } from './components/card-view-item-dispatcher/card-view-item-dispatcher.component';
import { CardViewMapItemComponent } from './components/card-view-mapitem/card-view-mapitem.component';
import { CardViewTextItemComponent } from './components/card-view-textitem/card-view-textitem.component';
import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
@NgModule({
imports: [
@ -48,6 +50,7 @@ import { CardViewTextItemComponent } from './components/card-view-textitem/card-
MatNativeDateModule,
MatCheckboxModule,
MatInputModule,
MatTableModule,
MatIconModule,
MatButtonModule,
MatDatetimepickerModule,
@ -59,6 +62,7 @@ import { CardViewTextItemComponent } from './components/card-view-textitem/card-
CardViewDateItemComponent,
CardViewMapItemComponent,
CardViewTextItemComponent,
CardViewKeyValuePairsItemComponent,
CardViewItemDispatcherComponent,
CardViewContentProxyDirective
],
@ -66,14 +70,16 @@ import { CardViewTextItemComponent } from './components/card-view-textitem/card-
CardViewBoolItemComponent,
CardViewDateItemComponent,
CardViewMapItemComponent,
CardViewTextItemComponent
CardViewTextItemComponent,
CardViewKeyValuePairsItemComponent
],
exports: [
CardViewComponent,
CardViewBoolItemComponent,
CardViewDateItemComponent,
CardViewMapItemComponent,
CardViewTextItemComponent
CardViewTextItemComponent,
CardViewKeyValuePairsItemComponent
]
})
export class CardViewModule {}

58
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html Normal file
View File

@ -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>

22
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss Normal file
View File

@ -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;
}
}
}
}

176
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts Normal file
View File

@ -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();
});
}));
});
});

75
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts Normal file
View File

@ -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;
}
}
}

1
lib/core/card-view/components/card-view.components.ts
View File

@ -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';

27
lib/core/card-view/interfaces/card-view-keyvaluepairsitem-properties.interface.ts Normal file
View File

@ -0,0 +1,27 @@
/*!
* @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 { CardViewItemProperties } from './card-view-item-properties.interface';
export interface CardViewKeyValuePairsItemType {
name: string;
value: string;
}
export interface CardViewKeyValuePairsItemProperties extends CardViewItemProperties {
value: CardViewKeyValuePairsItemType[];
}

1
lib/core/card-view/interfaces/card-view.interfaces.ts
View File

@ -22,3 +22,4 @@ export * from './card-view-textitem-properties.interface';
export * from './card-view-dateitem-properties.interface';
export * from './card-view-boolitem-properties.interface';
export * from './card-view-textitem-pipe-property.interface';
export * from './card-view-keyvaluepairsitem-properties.interface';

33
lib/core/card-view/models/card-view-keyvaluepairs.model.ts Normal file
View File

@ -0,0 +1,33 @@
/*!
* @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 { CardViewItem } from '../interfaces/card-view-item.interface';
import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
import { CardViewBaseItemModel } from './card-view-baseitem.model';
import { CardViewKeyValuePairsItemProperties } from '../interfaces/card-view.interfaces';
export class CardViewKeyValuePairsItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
type: string = 'keyvaluepairs';
constructor(obj: CardViewKeyValuePairsItemProperties) {
super(obj);
}
get displayValue() {
return this.value;
}
}

1
lib/core/card-view/models/card-view.models.ts
View File

@ -23,3 +23,4 @@ export * from './card-view-floatitem.model';
export * from './card-view-intitem.model';
export * from './card-view-mapitem.model';
export * from './card-view-textitem.model';
export * from './card-view-keyvaluepairs.model';

3
lib/core/card-view/public-api.ts
View File

@ -20,7 +20,8 @@ export {
CardViewBoolItemComponent,
CardViewDateItemComponent,
CardViewMapItemComponent,
CardViewTextItemComponent
CardViewTextItemComponent,
CardViewKeyValuePairsItemComponent
} from './components/card-view.components';
export * from './interfaces/card-view.interfaces';

4
lib/core/card-view/services/card-item-types.service.ts
View File

@ -20,6 +20,7 @@ import { CardViewDateItemComponent } from '../components/card-view-dateitem/card
import { CardViewMapItemComponent } from '../components/card-view-mapitem/card-view-mapitem.component';
import { CardViewTextItemComponent } from '../components/card-view-textitem/card-view-textitem.component';
import { CardViewBoolItemComponent } from '../components/card-view-boolitem/card-view-boolitem.component';
import { CardViewKeyValuePairsItemComponent } from '../components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../services/dynamic-component-mapper.service';
@Injectable()
@ -34,6 +35,7 @@ export class CardItemTypeService extends DynamicComponentMapper {
'date': DynamicComponentResolver.fromType(CardViewDateItemComponent),
'datetime': DynamicComponentResolver.fromType(CardViewDateItemComponent),
'bool': DynamicComponentResolver.fromType(CardViewBoolItemComponent),
'map': DynamicComponentResolver.fromType(CardViewMapItemComponent)
'map': DynamicComponentResolver.fromType(CardViewMapItemComponent),
'keyvaluepairs': DynamicComponentResolver.fromType(CardViewKeyValuePairsItemComponent)
};
}

5
lib/core/i18n/en.json
View File

@ -138,6 +138,11 @@
"CLIENT": "ClientId"
},
"CARDVIEW": {
"KEYVALUEPAIRS": {
"ADD": "Add new",
"NAME": "Name",
"VALUE": "Value"
},
"VALIDATORS": {
"FLOAT_VALIDATION_ERROR": "Use a number format",
"INT_VALIDATION_ERROR": "Use an integer format"