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, EventEmitter, Input, OnInit, Output } 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", [style({ height: 0 }), animate(100)]),
  33       transition(":leave", [
  34         style({ height: "*" }),
  35         animate(100, style({ height: 0 })),
  36       ]),
  37     ]),
  38   ],
  39 })
  40 export class TypedPolicyEditorComponent implements OnInit {
  41   jsonFormOptions: any = {
  42     addSubmit: false, // Add a submit button if layout does not have one
  43     debug: false, // Don't show inline debugging information
  44     loadExternalAssets: false, // Load external css and JavaScript for frameworks
  45     returnEmptyFields: false, // Don't return values for empty input fields
  46     setSchemaDefaults: true, // Always use schema defaults for empty fields
  47     defautWidgetOptions: { feedback: true }, // Show inline feedback icons
  48   };
  49
  50   @Input() jsonSchemaObject: any = {};
  51   @Input() jsonObject: any = {};
  52   @Input() darkMode: boolean;
  53   @Output() validJson: EventEmitter<string> = new EventEmitter<string>();
  54
  55   isVisible = {
  56     form: true,
  57     json: false,
  58     schema: false,
  59   };
  60   liveFormData: any = {};
  61   formIsValid: boolean = false;
  62   formValidationErrors: any;
  63
  64   constructor() {}
  65
  66   ngOnInit(): void {}
  67
  68   public onChanges(formData: any) {
  69     this.liveFormData = formData;
  70   }
  71
  72   get prettyLiveFormData(): string {
  73     return JSON.stringify(this.liveFormData, null, 2);
  74   }
  75
  76   get schemaAsString(): string {
  77     return JSON.stringify(this.jsonSchemaObject, null, 2);
  78   }
  79
  80   get jsonAsString(): string {
  81     return JSON.stringify(this.jsonObject, null, 2);
  82   }
  83
  84   isValid(isValid: boolean): void {
  85     this.formIsValid = isValid;
  86     let json = this.prettyLiveFormData;
  87     if (!this.formIsValid) {
  88       json = null;
  89     }
  90     this.validJson.emit(json);
  91   }
  92
  93   validationErrors(validationErrors: any): void {
  94     this.formValidationErrors = validationErrors;
  95   }
  96
  97   get prettyValidationErrors() {
  98     if (!this.formValidationErrors) {
  99       return null;
 100     }
 101     const errorArray = [];
 102     for (const error of this.formValidationErrors) {
 103       const message = error.message;
 104       const dataPathArray = JsonPointer.parse(error.dataPath);
 105       if (dataPathArray.length) {
 106         let field = dataPathArray[0];
 107         for (let i = 1; i < dataPathArray.length; i++) {
 108           const key = dataPathArray[i];
 109           field += /^\d+$/.test(key) ? `[${key}]` : `.${key}`;
 110         }
 111         errorArray.push(`${field}: ${message}`);
 112       } else {
 113         errorArray.push(message);
 114       }
 115     }
 116     return errorArray.join("<br>");
 117   }
 118
 119   public toggleVisible(item: string) {
 120     this.isVisible[item] = !this.isVisible[item];
 121   }
 122 }