[ADF-4308] DatatableComponent - add Json cell type (#4518)

* [ADF-4308] DatatableComponent - add Json cell type

* [ADF-4308] - PR changes

* [ADF-4306] - remove unnecesary code and properties

* [ADF-4308] - PR changes

lib/core/datatable/components/datatable/datatable.component.html

@@ -154,6 +154,14 @@
                                     [tooltip]="getCellTooltip(row, col)">
                                 </adf-datatable-cell>
                             </div>
+                            <div *ngSwitchCase="'json'" class="adf-cell-value"
+                                 [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                                <adf-json-cell
+                                    [data]="data"
+                                    [column]="col"
+                                    [row]="row">
+                                </adf-json-cell>
+                            </div>
                             <span *ngSwitchDefault class="adf-cell-value">
                     <!-- empty cell for unknown column type -->
                     </span>

lib/core/datatable/components/datatable/json-cell.component.spec.ts

@@ -0,0 +1,90 @@
+/*!
+ * @license
+ * Copyright 2019 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ObjectDataTableAdapter } from './../../data/object-datatable-adapter';
+import { ObjectDataColumn } from './../../data/object-datacolumn.model';
+
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { JsonCellComponent } from './json-cell.component';
+
+describe('JsonCellComponent', () => {
+    let component: JsonCellComponent;
+    let fixture: ComponentFixture<JsonCellComponent>;
+    let dataTableAdapter: ObjectDataTableAdapter;
+    let rowData;
+    let columnData;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(JsonCellComponent);
+        component = fixture.componentInstance;
+    }));
+
+    beforeEach(() => {
+        rowData = {
+            name: '1',
+            entity: {
+                'name': 'test',
+                'description': 'this is a test',
+                'version': 1
+            }
+        };
+
+        columnData = { format: '/somewhere', type: 'json', key: 'entity'};
+
+        dataTableAdapter = new ObjectDataTableAdapter(
+            [rowData],
+            [new ObjectDataColumn(columnData)]
+        );
+
+        component.column = dataTableAdapter.getColumns()[0];
+        component.data = dataTableAdapter;
+        component.row = dataTableAdapter.getRows()[0];
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should set value', () => {
+        fixture.detectChanges();
+        component.value$.subscribe( (result) => {
+            expect(result).toBe(rowData.entity);
+        });
+    });
+
+    it('should render json object inside cell', () => {
+        fixture.detectChanges();
+        const spanElement: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable-cell-value');
+        const unFormatedContent: string = spanElement.textContent.replace(/\n/g, '').replace(/\s/g, '');
+        const rowDataStringify: string = JSON.stringify(rowData.entity).replace(/\s/g, '');
+        expect(unFormatedContent).toBe(rowDataStringify);
+    });
+
+    it('should not setup cell when has no data', () => {
+        rowData.entity = {};
+        fixture.detectChanges();
+        component.value$.subscribe( (result) => {
+            expect(result).toEqual({});
+        });
+    });
+});

lib/core/datatable/components/datatable/json-cell.component.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2019 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 { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from './datatable-cell.component';
+
+@Component({
+    selector: 'adf-json-cell',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <ng-container>
+            <span class="adf-datatable-cell-value">
+                <pre>{{ value$ | async | json }}</pre>
+            </span>
+        </ng-container>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-datatable-cell' }
+})
+export class JsonCellComponent extends DataTableCellComponent implements OnInit {
+
+    ngOnInit() {
+        if (this.column && this.column.key && this.row && this.data) {
+            this.value$.next(this.data.getValue(this.row, this.column));
+        }
+    }
+}