Fix bug in PolicyInstanceDialogComponent
[portal/nonrtric-controlpanel.git] / webapp-frontend / src / app / policy / policy-instance-dialog / policy-instance-dialog.component.ts
index 3c2ea2b..f47bbe2 100644 (file)
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * O-RAN-SC
  * %%
- * Copyright (C) 2019 Nordix Foundation
+ * Copyright (C) 2020 Nordix Foundation
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as uuid from 'uuid';
-import { CreatePolicyInstance, PolicyInstance, PolicyTypeSchema } from '../../interfaces/policy.types';
-import { PolicyService } from '../../services/policy/policy.service';
-import { ErrorDialogService } from '../../services/ui/error-dialog.service';
-import { NotificationService } from './../../services/ui/notification.service';
-import { UiService } from '../../services/ui/ui.service';
-import { HttpErrorResponse } from '@angular/common/http';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { ChangeDetectorRef } from '@angular/core';
-import { Ric, Rics } from '../../interfaces/ric';
-import { TypedPolicyEditorComponent } from '../typed-policy-editor/typed-policy-editor.component';
-
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit,
+} from "@angular/core";
+import {
+  MatDialogConfig,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { PolicyService } from "@services/policy/policy.service";
+import { NotificationService } from "@services/ui/notification.service";
+import { UiService } from "@services/ui/ui.service";
+import { HttpErrorResponse } from "@angular/common/http";
+import { ErrorDialogService } from "@services/ui/error-dialog.service";
+import * as uuid from "uuid";
+import {
+  CreatePolicyInstance,
+  PolicyInstance,
+  PolicyTypeSchema,
+} from "@interfaces/policy.types";
 
 @Component({
-    selector: 'nrcp-policy-instance-dialog',
-    templateUrl: './policy-instance-dialog.component.html',
-    styleUrls: ['./policy-instance-dialog.component.scss']
+  selector: "nrcp-policy-instance-dialog",
+  templateUrl: "./policy-instance-dialog.component.html",
+  styleUrls: ["./policy-instance-dialog.component.scss"],
 })
 export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit {
-    @ViewChild(TypedPolicyEditorComponent)
-    policyEditor: TypedPolicyEditorComponent;
-    instanceForm: FormGroup;
-
-
-    ric: string;
-    allRics: Ric[];
-    policyInstanceId: string; // null if not yet created
-    policyTypeName: string;
-    jsonSchemaObject: any = {};
-    darkMode: boolean;
+  policyInstance = {} as CreatePolicyInstance;
+  policyJson: string;
+  jsonSchemaObject: any;
+  darkMode: boolean;
+  allRicIds: string[] = [];
 
-    private fetchRics() {
-        console.log('fetchRics ' + this.policyTypeName);
-        const self: PolicyInstanceDialogComponent = this;
-        this.dataService.getRics(this.policyTypeName).subscribe(
-            {
-                next(value: Rics) {
-                    self.allRics = value.rics;
-                    console.log(value);
-                }
-            });
-    }
-
-    constructor(
-        private cdr: ChangeDetectorRef,
-        private dataService: PolicyService,
-        private errorService: ErrorDialogService,
-        private notificationService: NotificationService,
-        @Inject(MAT_DIALOG_DATA) public data,
-        private dialogRef: MatDialogRef<PolicyInstanceDialogComponent>,
-        private ui: UiService) {
-        this.policyInstanceId = data.instanceId;
-        this.policyTypeName = data.name;
-        this.jsonSchemaObject = data.createSchema;
-        this.ric = data.ric;
-    }
+  constructor(
+    private cdr: ChangeDetectorRef,
+    public dialogRef: MatDialogRef<PolicyInstanceDialogComponent>,
+    private policySvc: PolicyService,
+    private errorService: ErrorDialogService,
+    private notificationService: NotificationService,
+    @Inject(MAT_DIALOG_DATA) private data,
+    private ui: UiService
+  ) {
+    this.policyInstance.policy_id = data.instanceId;
+    this.policyInstance.policytype_id = data.name;
+    this.policyInstance.policy_data = data.instanceJson;
+    this.policyJson = data.instanceJson;
+    this.jsonSchemaObject = data.createSchema;
+    this.policyInstance.ric_id = data.ric;
+    this.policyInstance.service_id = "controlpanel";
+  }
 
-    ngOnInit() {
-        this.ui.darkModeState.subscribe((isDark) => {
-            this.darkMode = isDark;
-        });
-        this.instanceForm = new FormGroup({
-            'ricSelector': new FormControl(this.ric, [
-                Validators.required
-            ])
-        });
-        if (!this.policyInstanceId) {
-            this.fetchRics();
-        }
-    }
+  ngOnInit() {
+    this.ui.darkModeState.subscribe((isDark) => {
+      this.darkMode = isDark;
+    });
+  }
 
-    ngAfterViewInit() {
-        this.cdr.detectChanges();
-    }
+  // Do not remove! Needed to avoid "Expression has changed after it was checked" warning
+  ngAfterViewInit() {
+    this.cdr.detectChanges();
+  }
 
-    get ricSelector() { return this.instanceForm.get('ricSelector'); }
+  onSelectedRicChanged(newRic: string): void {
+    this.policyInstance.ric_id = newRic;
+  }
 
-    onSubmit() {
-        if (this.policyInstanceId == null) {
-            this.policyInstanceId = uuid.v4();
-        }
-        const policyJson: string = this.policyEditor.prettyLiveFormData;
-        const self: PolicyInstanceDialogComponent = this;
-        let createPolicyInstance: CreatePolicyInstance = this.createPolicyInstance(policyJson);
-        this.dataService.putPolicy(createPolicyInstance).subscribe(
-            {
-                next(_) {
-                    self.notificationService.success('Policy ' + self.policyTypeName + ':' + self.policyInstanceId +
-                        ' submitted');
-                    self.dialogRef.close();
-                },
-                error(error: HttpErrorResponse) {
-                    self.errorService.displayError('Submit failed: ' + error.error);
-                },
-                complete() { }
-            });
-    }
+  onJsonChanged(newJson: string): void {
+    this.policyInstance.policy_data = newJson ? JSON.parse(newJson) : null;
+  }
 
-    private createPolicyInstance(policyJson: string) {
-        let createPolicyInstance = {} as CreatePolicyInstance;
-        createPolicyInstance.policy_data = JSON.parse(policyJson);
-        createPolicyInstance.policy_id = this.policyInstanceId;
-        createPolicyInstance.policytype_id = this.policyTypeName;
-        createPolicyInstance.ric_id = (!this.ricSelector.value.ric_id) ? this.ric : this.ricSelector.value.ric_id;
-        createPolicyInstance.service_id = 'controlpanel';
-        return createPolicyInstance;
+  onSubmit() {
+    if (this.policyInstance.policy_id == null) {
+      this.policyInstance.policy_id = uuid.v4();
     }
+    const self: PolicyInstanceDialogComponent = this;
+    this.policySvc.putPolicy(this.policyInstance).subscribe({
+      next(_) {
+        self.notificationService.success(
+          "Policy " + self.policyInstance.policy_id + " submitted"
+        );
+        self.dialogRef.close();
+      },
+      error(error: HttpErrorResponse) {
+        self.errorService.displayError("Submit failed: " + error.error);
+      },
+      complete() {},
+    });
+  }
 
-    onClose() {
-        this.dialogRef.close();
-    }
+  typeHasSchema(): boolean {
+    return this.jsonSchemaObject !== "{}";
+  }
 
-    get isJsonFormValid(): boolean {
-        return this.policyEditor ? this.policyEditor.formIsValid : false;
-    }
+  isFormValid(): boolean {
+    return (
+      this.policyInstance.ric_id !== null &&
+      this.policyInstance.policy_data !== null
+    );
+  }
 }
 
-export function getPolicyDialogProperties(policyTypeSchema: PolicyTypeSchema, instance: PolicyInstance, darkMode: boolean): MatDialogConfig {
-    const createSchema = policyTypeSchema.schemaObject;
-    const instanceId = instance ? instance.policy_id : null;
-    const instanceJson = instance ? instance.policy_data : null;
-    const name = policyTypeSchema.name;
-    const ric = instance ? instance.ric_id : null;
-    return {
-        maxWidth: '1200px',
-        maxHeight: '900px',
-        width: '900px',
-        role: 'dialog',
-        disableClose: false,
-        panelClass: darkMode ? 'dark-theme' : '',
-        data: {
-            createSchema,
-            instanceId,
-            instanceJson,
-            name,
-            ric
-        }
-    };
+export function getPolicyDialogProperties(
+  policyTypeSchema: PolicyTypeSchema,
+  instance: PolicyInstance,
+  darkMode: boolean
+): MatDialogConfig {
+  const createSchema = policyTypeSchema.schemaObject;
+  const instanceId = instance ? instance.policy_id : null;
+  const instanceJson = instance ? instance.policy_data : null;
+  const name = policyTypeSchema.name;
+  const ric = instance ? instance.ric_id : null;
+  return {
+    maxWidth: "1200px",
+    maxHeight: "900px",
+    width: "900px",
+    role: "dialog",
+    disableClose: false,
+    panelClass: darkMode ? "dark-theme" : "",
+    data: {
+      createSchema,
+      instanceId,
+      instanceJson,
+      name,
+      ric,
+    },
+  };
 }
-