Added add and remove buttons to angular material table renderer (#2021)

* Added add and remove icons to angular material table renderer
* Added tests for adding and removing rows functionality

Fixes #1782

Co-authored-by: Adrian Jutrowski <[email protected]>

Author: Tarjei400

packages/angular-material/src/other/table.renderer.ts

@@ -30,12 +30,12 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
-  ControlElement,
+  ControlElement, createDefaultValue,
   deriveTypes,
   encode,
   isObjectArrayControl,
   isPrimitiveArrayControl,
-  JsonSchema,
+  JsonSchema, mapDispatchToArrayControlProps,
   or,
   OwnPropsOfRenderer,
   Paths,
@@ -54,6 +54,27 @@ import {
       class="mat-elevation-z8"
       [trackBy]="trackElement"
     >
+      <ng-container matColumnDef="action">
+        <tr>
+          <th mat-header-cell *matHeaderCellDef>
+            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" matTooltip="Add"><mat-icon>add</mat-icon></button>
+          </th>
+        </tr>
+        <tr>
+          <td mat-cell *matCellDef="let row; let i = index">
+            <button
+                mat-button
+                color="warn"
+                (click)="remove(i)"
+                [disabled]="!isEnabled()"
+                matTooltipPosition="right"
+                matTooltip="Delete"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </td>
+        <tr>
+      </ng-container>
       <ng-container
         *ngFor="let item of items"
         matColumnDef="{{ item.property }}"
@@ -70,13 +91,17 @@ import {
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   `,
-  styles: ['table {width: 100%;}']
+  styles: [
+      'table {width: 100%;}',
+      '.cdk-column-action { width: 5%}']
 })
 export class TableRenderer extends JsonFormsArrayControl {
   detailUiSchema: UISchemaElement;
   displayedColumns: string[];
   items: ColumnDescription[];
   readonly columnsToIgnore = ['array', 'object'];
+  addItem: (path: string, value: any) => () => void;
+  removeItems: (path: string, toDelete: number[]) => () => void;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
@@ -87,6 +112,9 @@ export class TableRenderer extends JsonFormsArrayControl {
   mapAdditionalProps(props: ArrayControlProps) {
     this.items = this.generateCells(props.schema, props.path);
     this.displayedColumns = this.items.map(item => item.property);
+    if (this.isEnabled()) {
+      this.displayedColumns.push('action');
+    }
   }
   getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
     const rowPath = Paths.compose(props.path, `${index}`);
@@ -96,6 +124,23 @@ export class TableRenderer extends JsonFormsArrayControl {
       path: rowPath
     };
   }
+
+  remove(index: number): void {
+    this.removeItems(this.propsPath, [index])();
+  }
+  add(): void {
+    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
+  }
+  ngOnInit() {
+    super.ngOnInit();
+
+    const { addItem, removeItems } = mapDispatchToArrayControlProps(
+        this.jsonFormsService.updateCore.bind(this.jsonFormsService)
+    );
+    this.addItem = addItem;
+    this.removeItems = removeItems;
+  }
+
   generateCells = (
     schema: JsonSchema,
     rowPath: string

packages/angular-material/test/table-control.spec.ts

@@ -28,6 +28,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -115,6 +116,7 @@ describe('Table', () => {
         MatCardModule,
         NoopAnimationsModule,
         MatFormFieldModule,
+        MatIconModule,
         MatInputModule,
         ReactiveFormsModule,
         FlexLayoutModule,
@@ -147,11 +149,11 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       // 2 columns
-      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(2);
+      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(3);
       // 1 head row and 2 data rows
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 2);
       // 4 data entries
-      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(4);
+      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(6);
     });
   }));
   it('renders object array on path', async(() => {
@@ -171,11 +173,11 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       // 2 columns
-      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(2);
+      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(3);
       // 1 head row and 2 data rows
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 2);
       // 4 data entries
-      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(4);
+      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(6);
     });
   }));
 
@@ -190,11 +192,11 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       // 1 column
-      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(1);
+      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(2);
       // 1 head row and 2 data rows
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 2);
       // 2 data entries
-      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(2);
+      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(4);
     });
   }));
   it('renders simple array on path', async(() => {
@@ -208,11 +210,11 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       // 1 columns
-      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(1);
+      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(2);
       // 1 head row and 2 data rows
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 2);
       // 2 data entries
-      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(2);
+      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(4);
     });
   }));
 
@@ -246,8 +248,83 @@ describe('Table', () => {
     fixture.detectChanges();
     component.ngOnInit();
     fixture.whenStable().then(() => {
+      component.add();
       expect(fixture.nativeElement.querySelectorAll('input').length).toBe(2);
       expect(fixture.nativeElement.querySelector('input').disabled).toBeFalsy();
     });
   }));
+
+  it('renderer handles removing of rows', async(() => {
+    setupMockStore(fixture, {
+      uischema: uischema1,
+      schema: schema_object1,
+      data: [
+        { foo: 'foo_1', bar: 'bar_1' },
+        { foo: 'foo_2', bar: 'bar_2' }
+      ],
+      renderers
+    });
+
+    fixture.detectChanges();
+    component.ngOnInit();
+    component.remove(0);
+    component.remove(0);
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+
+      // 1 row
+      expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 0);
+    });
+  }));
+
+  it('renderer handles adding of rows', async(() => {
+    setupMockStore(fixture, {
+      uischema: uischema1,
+      schema: schema_object1,
+      data: [
+        { foo: 'foo_1', bar: 'bar_1' },
+        { foo: 'foo_2', bar: 'bar_2' }
+      ],
+      renderers
+    });
+
+    fixture.detectChanges();
+    component.ngOnInit();
+
+    component.add();
+    component.add();
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+      // 3 row
+      expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 4);
+
+    });
+  }));
+
+  it('when disabled doesnt render `add` nor `remove` icons', async(() => {
+    setupMockStore(fixture, {
+      uischema: uischema1,
+      schema: schema_object1,
+      data: [
+        { foo: 'foo_1', bar: 'bar_1' },
+        { foo: 'foo_2', bar: 'bar_2' }
+      ],
+      renderers
+    });
+    component.disabled = true;
+    fixture.detectChanges();
+
+    component.ngOnInit();
+    fixture.whenStable().then(() => {
+      // 2 columns
+      expect(fixture.nativeElement.querySelectorAll('th').length).toBe(2);
+      // 2 rows
+      expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 2);
+      // 2 data entries
+      expect(fixture.nativeElement.querySelectorAll('td').length).toBe(4);
+    });
+  }));
+
 });