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

* variables item

* unit tests

* translations fix

* docs added

* change requests

* change requests

docs/core/card-view.component.md

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

lib/core/card-view/card-view.module.ts

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

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html

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

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss

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

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts

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

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts

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

lib/core/card-view/components/card-view.components.ts

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

lib/core/card-view/interfaces/card-view-keyvaluepairsitem-properties.interface.ts

@@ -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[];
+}

lib/core/card-view/interfaces/card-view.interfaces.ts

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

lib/core/card-view/models/card-view-keyvaluepairs.model.ts

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

lib/core/card-view/models/card-view.models.ts

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

lib/core/card-view/public-api.ts

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

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

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

lib/core/i18n/en.json

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