[ADF-3607] JSON Upload File & Editor in Form Page (#3839)

* [ADF-3607] JSON Upload File & Editor in Form Page

* [ADF-3607] Removed unused variable

demo-shell/src/app/components/form/form.component.html

@@ -1,19 +1,55 @@
 <div class="main-content">
-    <h1>Form Component</h1>
 
-    <div class="form-container">
-        <adf-form
-            [showRefreshButton]="false"
-            [form]="form"
-            (formError)="logErrors($event)">
-        </adf-form>
-    </div>
+    <mat-tab-group>
+        <mat-tab label="Form">
+            <div class="form-container">
+                <adf-form
+                    [showRefreshButton]="false"
+                    [form]="form"
+                    (formError)="logErrors($event)">
+                </adf-form>
+            </div>
 
-    <div class="console" #console>
-        <h3>Error log:</h3>
-        <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message | translate}}</p>
-    </div>
+            <div class="console" #console>
+                <h3>Error log:</h3>
+                <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
+                    translate}}</p>
+            </div>
+        </mat-tab>
+        <mat-tab label="Editor">
+            <ngx-monaco-editor
+                id="adf-form-config-editor"
+                class="adf-form-config-editor"
+                [options]="editorOptions"
+                [(ngModel)]="formConfig"
+                (onInit)="onInitFormEditor($event)">
+            </ngx-monaco-editor>
+            <div class="form-editor-buttons">
+                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+                    form config
+                </button>
+                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                    form config
+                </button>
+            </div>
+            <div class="upload-config-button">
+                <a mat-raised-button color="primary" >
+                    <mat-icon>file_upload</mat-icon>
+                    <label for="upload-config-file">Upload JSON File</label>
+                    <input
+                        id="upload-config-file"
+                        data-automation-id="upload-single-file"
+                        type="file"
+                        name="uploadConfig"
+                        accept=".json"
+                        (change)="onConfigAdded($event)">
+                </a>
+            </div>
 
+        </mat-tab>
+
+    </mat-tab-group>
 </div>
 
 
+

demo-shell/src/app/components/form/form.component.scss

@@ -20,13 +20,38 @@
     overflow: scroll;
     padding-bottom: 30px;
 
-h3 {
-    margin-top: 0;
+    h3 {
+        margin-top: 0;
+    }
+
+    p {
+        display: block;
+        font-family: monospace, monospace;
+        margin: 0;
+    }
 }
 
-p {
-    display: block;
-    font-family: monospace, monospace;
-    margin: 0;
+.adf-form-config-editor {
+    height: 500px !important;
 }
+
+.form-editor-buttons {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.upload-config-button {
+    display: flex;
+    justify-content: center;
+
+    input {
+        cursor: pointer;
+        height: 100%;
+        right: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 300px;
+        z-index: 4;
+    }
 }

demo-shell/src/app/components/form/form.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormModel, FormFieldModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';
+import { FormModel, FormFieldModel, FormService, FormOutcomeEvent, NotificationService } from '@alfresco/adf-core';
 import { InMemoryFormService } from '../../services/in-memory-form.service';
 import { DemoForm } from './demo-form';
 import { Subscription } from 'rxjs';
@@ -26,7 +26,7 @@ import { Subscription } from 'rxjs';
     templateUrl: 'form.component.html',
     styleUrls: ['form.component.scss'],
     providers: [
-        { provide: FormService, useClass: InMemoryFormService }
+        {provide: FormService, useClass: InMemoryFormService}
     ],
     encapsulation: ViewEncapsulation.None
 })
@@ -34,9 +34,21 @@ export class FormComponent implements OnInit, OnDestroy {
 
     form: FormModel;
     errorFields: FormFieldModel[] = [];
+    formConfig: string;
+    editor: any;
     private subscriptions: Subscription[] = [];
 
-    constructor(@Inject(FormService) private formService: InMemoryFormService) {
+    editorOptions = {
+        theme: 'vs-dark',
+        language: 'json',
+        autoIndent: true,
+        formatOnPaste: true,
+        formatOnType: true,
+        automaticLayout: true
+    };
+
+    constructor(@Inject(FormService) private formService: InMemoryFormService,
+                private notificationService: NotificationService) {
 
         this.subscriptions.push(
             formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
@@ -51,7 +63,8 @@ export class FormComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         const formDefinitionJSON: any = DemoForm.getDefinition();
-        this.form = this.formService.parseForm(formDefinitionJSON);
+        this.formConfig = JSON.stringify(formDefinitionJSON);
+        this.parseForm();
     }
 
     ngOnDestroy() {
@@ -59,4 +72,43 @@ export class FormComponent implements OnInit, OnDestroy {
         this.subscriptions = [];
     }
 
+    onInitFormEditor(editor) {
+        this.editor = editor;
+        setTimeout(() => {
+            this.editor.getAction('editor.action.formatDocument').run();
+        }, 1000);
+    }
+
+    parseForm() {
+        this.form = this.formService.parseForm(JSON.parse(this.formConfig));
+    }
+
+    onSaveFormConfig() {
+        try {
+            this.parseForm();
+        } catch (error) {
+            this.notificationService.openSnackMessage(
+                'Wrong form configuration',
+                2000
+            );
+        }
+    }
+
+    onClearFormConfig() {
+        this.formConfig = '';
+    }
+
+    onConfigAdded($event: any): void {
+        let file = $event.currentTarget.files[0];
+
+        let fileReader = new FileReader();
+        fileReader.onload = () => {
+            this.formConfig = <string> fileReader.result;
+        };
+        fileReader.readAsText(file);
+
+        this.onInitFormEditor(this.editor);
+
+        $event.target.value = '';
+    }
 }