webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts

   1 // -
   2 //   ========================LICENSE_START=================================
   3 //   O-RAN-SC
   4 //   %%
   5 //   Copyright (C) 2021: Nordix Foundation
   6 //   %%
   7 //   Licensed under the Apache License, Version 2.0 (the "License");
   8 //   you may not use this file except in compliance with the License.
   9 //   You may obtain a copy of the License at
  10 //
  11 //        http://www.apache.org/licenses/LICENSE-2.0
  12 //
  13 //   Unless required by applicable law or agreed to in writing, software
  14 //   distributed under the License is distributed on an "AS IS" BASIS,
  15 //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16 //   See the License for the specific language governing permissions and
  17 //   limitations under the License.
  18 //   ========================LICENSE_END===================================
  19 //
  20
  21 import { animate, state, style, transition, trigger } from '@angular/animations';
  22 import { Component, Input, OnInit } from '@angular/core';
  23 import { JsonPointer } from 'angular6-json-schema-form';
  24
  25 @Component({
  26     selector: 'nrcp-typed-policy-editor',
  27     templateUrl: './typed-policy-editor.component.html',
  28     styleUrls: ['./typed-policy-editor.component.scss'],
  29     animations: [
  30         trigger('expandSection', [
  31             state('in', style({ height: '*' })),
  32             transition(':enter', [
  33                 style({ height: 0 }), animate(100),
  34             ]),
  35             transition(':leave', [
  36                 style({ height: '*' }),
  37                 animate(100, style({ height: 0 })),
  38             ]),
  39         ]),
  40     ],
  41
  42 })
  43 export class TypedPolicyEditorComponent implements OnInit {
  44     jsonFormOptions: any = {
  45         addSubmit: false, // Add a submit button if layout does not have one
  46         debug: false, // Don't show inline debugging information
  47         loadExternalAssets: false, // Load external css and JavaScript for frameworks
  48         returnEmptyFields: false, // Don't return values for empty input fields
  49         setSchemaDefaults: true, // Always use schema defaults for empty fields
  50         defautWidgetOptions: { feedback: true }, // Show inline feedback icons
  51     };
  52
  53     @Input() jsonSchemaObject: any = {};
  54     @Input() jsonObject: any = {};
  55     @Input() darkMode: boolean;
  56
  57     isVisible = {
  58         form: true,
  59         json: false,
  60         schema: false
  61     };
  62     formActive: boolean = false;
  63     jsonFormStatusMessage: string = 'Loading form...';
  64     liveFormData: any = {};
  65     formIsValid: boolean = false;
  66     formValidationErrors: any;
  67
  68     constructor() {
  69         this.formActive = false;
  70     }
  71
  72     ngOnInit(): void {
  73          this.formActive = true;
  74     }
  75
  76     public onChanges(formData: any) {
  77         this.liveFormData = formData;
  78     }
  79
  80     get prettyLiveFormData(): string {
  81         return JSON.stringify(this.liveFormData, null, 2);
  82     }
  83
  84     get schemaAsString(): string {
  85         return JSON.stringify(this.jsonSchemaObject, null, 2);
  86     }
  87
  88     get jsonAsString(): string {
  89         return JSON.stringify(this.jsonObject, null, 2);
  90     }
  91
  92     isValid(isValid: boolean): void {
  93         this.formIsValid = isValid;
  94     }
  95
  96     validationErrors(validationErrors: any): void {
  97         this.formValidationErrors = validationErrors;
  98     }
  99
 100     get prettyValidationErrors() {
 101         if (!this.formValidationErrors) { return null; }
 102         const errorArray = [];
 103         for (const error of this.formValidationErrors) {
 104             const message = error.message;
 105             const dataPathArray = JsonPointer.parse(error.dataPath);
 106             if (dataPathArray.length) {
 107                 let field = dataPathArray[0];
 108                 for (let i = 1; i < dataPathArray.length; i++) {
 109                     const key = dataPathArray[i];
 110                     field += /^\d+$/.test(key) ? `[${key}]` : `.${key}`;
 111                 }
 112                 errorArray.push(`${field}: ${message}`);
 113             } else {
 114                 errorArray.push(message);
 115             }
 116         }
 117         return errorArray.join('<br>');
 118     }
 119
 120     public toggleVisible(item: string) {
 121         this.isVisible[item] = !this.isVisible[item];
 122     }
 123 }