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 { ChangeDetectorRef, 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         private cdr: ChangeDetectorRef) {
  70         this.formActive = false;
  71     }
  72
  73     ngOnInit(): void {
  74          this.formActive = true;
  75     }
  76
  77     ngAfterViewInit() {
  78         this.cdr.detectChanges();
  79     }
  80
  81     public onChanges(formData: any) {
  82         this.liveFormData = formData;
  83     }
  84
  85     get prettyLiveFormData(): string {
  86         return JSON.stringify(this.liveFormData, null, 2);
  87     }
  88
  89     get schemaAsString(): string {
  90         return JSON.stringify(this.jsonSchemaObject, null, 2);
  91     }
  92
  93     get jsonAsString(): string {
  94         return JSON.stringify(this.jsonObject, null, 2);
  95     }
  96
  97     isValid(isValid: boolean): void {
  98         this.formIsValid = isValid;
  99     }
 100
 101     validationErrors(validationErrors: any): void {
 102         this.formValidationErrors = validationErrors;
 103     }
 104
 105     get prettyValidationErrors() {
 106         if (!this.formValidationErrors) { return null; }
 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 }