[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
 
@@ -125,7 +125,7 @@ Every cell in the DataTable component is bound to the dynamic data context conta
 | row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | Current data row instance. |
 | col | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | Current data column instance. |
 
-You can use all three properties to gain full access to underlying data from within your custom templates. 
+You can use all three properties to gain full access to underlying data from within your custom templates.
 In order to wire HTML templates with the data context you will need to define a variable that is bound to `$implicit` as shown below:
 
 ```html
@@ -166,7 +166,7 @@ You may want to use the **row** API to get access to the raw values.
 
 Use the **data** API to get values with post-processing (eg, datetime or icon conversion).
 
-In the Example below we will prepend `Hi!` to each file and folder name in the list: 
+In the Example below we will prepend `Hi!` to each file and folder name in the list:
 
 <!-- {% raw %} -->
 
@@ -215,14 +215,14 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
 ```html
 <adf-document-list ...>
     <data-columns>
-        
+
         <data-column
             key="$thumbnail"
             type="image"
             [sortable]="false"
             class="adf-image-table-cell">
         </data-column>
-        
+
         ...
     </data-columns>
 </adf-document-list>
@@ -262,18 +262,18 @@ Now you can declare columns and assign the `desktop-only` class where needed:
 ```html
 <adf-document-list ...>
     <data-columns>
-        
+
         <!-- always visible columns -->
-        
+
         <data-column key="$thumbnail" type="image"></data-column>
-        <data-column 
-                title="Name" 
-                key="name" 
+        <data-column
+                title="Name"
+                key="name"
                 class="full-width ellipsis-cell">
         </data-column>
-        
+
         <!-- desktop-only columns -->
-        
+
         <data-column
                 title="Created by"
                 key="createdByUser.displayName"

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": {