[ADF-4894] Json editor dialog (#5082)

* move download-zip to its own folder

* json dialog

* update docs

* update test

* disable e2e test

* json widget for the Form

* remove deprecated test

* fix tests, update display text name

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

@@ -174,7 +174,7 @@
                             </div>
                             <div *ngSwitchCase="'json'" tabindex="0" class="adf-cell-value">
                                 <adf-json-cell
-                                    [copyContent]="col.copyContent"
+                                    [editable]="col.editable"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row">

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

@@ -72,12 +72,10 @@ describe('JsonCellComponent', () => {
         });
     });
 
-    it('should render json object inside cell', () => {
+    it('should render json button 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);
+        const button: HTMLElement = fixture.debugElement.nativeElement.querySelector('.mat-button');
+        expect(button).toBeDefined();
     });
 
     it('should not setup cell when has no data', () => {

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

@@ -17,23 +17,20 @@
 
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
+import { MatDialog } from '@angular/material';
+import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-json-cell',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <ng-container>
-            <span *ngIf="copyContent; else defaultJsonTemplate" class="adf-datatable-cell-value">
-                <pre
-                    class="adf-datatable-json-cell"
-                    [adf-clipboard]="'CLIPBOARD.CLICK_TO_COPY'"
-                    [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'">{{ value$ | async | json }}</pre>
-            </span>
+        <ng-container *ngIf="value$ | async as value; else editEmpty">
+            <button mat-button color="primary" (click)="view()">json</button>
         </ng-container>
-        <ng-template #defaultJsonTemplate>
-            <span class="adf-datatable-cell-value">
-                <pre class="adf-datatable-json-cell">{{ value$ | async | json }}</pre>
-            </span>
+
+        <ng-template #editEmpty>
+            <button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
         </ng-template>
     `,
     styleUrls: ['./json-cell.component.scss'],
@@ -42,13 +39,44 @@ import { DataTableCellComponent } from './datatable-cell.component';
 })
 export class JsonCellComponent extends DataTableCellComponent implements OnInit {
 
-     /** Enables/disables a Clipboard directive to allow copying of the cell's content. */
-     @Input()
-     copyContent: boolean;
+    @Input()
+    editable: boolean = false;
+
+    constructor(
+        private dialog: MatDialog,
+        alfrescoApiService: AlfrescoApiService
+    ) {
+        super(alfrescoApiService);
+    }
 
     ngOnInit() {
         if (this.column && this.column.key && this.row && this.data) {
             this.value$.next(this.data.getValue(this.row, this.column));
         }
     }
+
+    view() {
+        const rawValue: string | object = this.data.getValue(this.row, this.column);
+        const value = typeof rawValue === 'object'
+            ? JSON.stringify(rawValue || {}, null, 2)
+            : rawValue;
+
+        const settings: EditJsonDialogSettings = {
+            title: this.column.title,
+            editable: this.editable,
+            value
+        };
+
+        this.dialog.open(EditJsonDialogComponent, {
+            data: settings,
+            minWidth: '50%',
+            minHeight: '50%'
+        }).afterClosed().subscribe((/*result: string*/) => {
+            if (typeof rawValue === 'object') {
+                // todo: update cell value as object
+            } else {
+                // todo: update cell value as string
+            }
+        });
+    }
 }