[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

docs/core/components/data-column.component.md

@@ -49,7 +49,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
 | srTitle | `string` |  | Title to be used for screen readers. |
 | title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
-| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
+| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location' and 'json'. |
 
 ## Details
 

docs/core/components/json-cell.component.md

@@ -0,0 +1,54 @@
+---
+Title: JsonCell component
+Added: v2.0.0
+Status: Active
+---
+
+# [JsonCellComponent](../../../lib/core/datatable/components/datatable/json-cell.component.ts "Defined in empty-list.component.ts")
+
+Show Json formated value inside datatable component.
+
+## Basic Usage
+
+```html
+<adf-datatable ...>
+   <data-columns>
+        <data-column key="entry.json" type="json" title="Json Column"></data-column>
+    </data-columns>
+</adf-datatable>
+```
+
+You can specify the cell inside configuration file
+
+```javascript
+  "adf-cloud-process-list": {
+        "presets": {
+            "default": [
+                {
+                    "key": "entry.json",
+                    "type": "json",
+                    "title": "Json cell value"
+                }
+            ]
+        }
+    },
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | `null` | Data adapter instance. |
+| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | `null` | Data that defines the column |
+| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) |  | Data that defines the row |
+
+
+## Details
+
+This component provides a custom display to show a [Datatable component](datatable.component.md) cell
+
+## See also
+
+-   [Datatable component](datatable.component.md)

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

lib/core/datatable/datatable.module.ts

@@ -40,6 +40,7 @@ import { NoPermissionTemplateDirective } from './directives/no-permission-templa
 import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-content-template.directive';
 import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
 import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
+import { JsonCellComponent } from './components/datatable/json-cell.component';
 
 @NgModule({
     imports: [
@@ -61,6 +62,7 @@ import { CustomNoPermissionTemplateDirective } from './directives/custom-no-perm
         DateCellComponent,
         FileSizeCellComponent,
         LocationCellComponent,
+        JsonCellComponent,
         NoContentTemplateDirective,
         NoPermissionTemplateDirective,
         LoadingContentTemplateDirective,
@@ -78,6 +80,7 @@ import { CustomNoPermissionTemplateDirective } from './directives/custom-no-perm
         DateCellComponent,
         FileSizeCellComponent,
         LocationCellComponent,
+        JsonCellComponent,
         NoContentTemplateDirective,
         NoPermissionTemplateDirective,
         LoadingContentTemplateDirective,

lib/process-services-cloud/src/lib/i18n/en.json

@@ -76,7 +76,8 @@
       "PRIORITY": "Priority",
       "CREATED_DATE": "Created Date",
       "LAST_MODIFIED": "Last Modified",
-      "CREATED": "Created"
+      "CREATED": "Created",
+      "JSON_CELL": "Json"
     },
     "LIST": {
       "MESSAGES": {