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