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     liveFormData: any = {};
  63     formIsValid: boolean = false;
  64     formValidationErrors: any;
  65
  66     constructor() {}
  67
  68     ngOnInit(): void {}
  69
  70     public onChanges(formData: any) {
  71         this.liveFormData = formData;
  72     }
  73
  74     get prettyLiveFormData(): string {
  75         return JSON.stringify(this.liveFormData, null, 2);
  76     }
  77
  78     get schemaAsString(): string {
  79         return JSON.stringify(this.jsonSchemaObject, null, 2);
  80     }
  81
  82     get jsonAsString(): string {
  83         return JSON.stringify(this.jsonObject, null, 2);
  84     }
  85
  86     isValid(isValid: boolean): void {
  87         this.formIsValid = isValid;
  88     }
  89
  90     validationErrors(validationErrors: any): void {
  91         this.formValidationErrors = validationErrors;
  92     }
  93
  94     get prettyValidationErrors() {
  95         if (!this.formValidationErrors) { return null; }
  96         const errorArray = [];
  97         for (const error of this.formValidationErrors) {
  98             const message = error.message;
  99             const dataPathArray = JsonPointer.parse(error.dataPath);
 100             if (dataPathArray.length) {
 101                 let field = dataPathArray[0];
 102                 for (let i = 1; i < dataPathArray.length; i++) {
 103                     const key = dataPathArray[i];
 104                     field += /^\d+$/.test(key) ? `[${key}]` : `.${key}`;
 105                 }
 106                 errorArray.push(`${field}: ${message}`);
 107             } else {
 108                 errorArray.push(message);
 109             }
 110         }
 111         return errorArray.join('<br>');
 112     }
 113
 114     public toggleVisible(item: string) {
 115         this.isVisible[item] = !this.isVisible[item];
 116     }
 117 }