Also make the tooltips work again.
Change-Id: I34147ba88524a5ce90c6a32bb1678d2e861908f5
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
Issue-ID: NONRTRIC-463
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
MatTableModule,
MatTabsModule,
MatToolbarModule,
+ MatTooltipModule,
MaterialDesignFrameworkModule,
MDBBootstrapModule.forRoot(),
PolicyModule,
/
-->
-<mat-form-field style="width: 800px;" appearance="fill">
- <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
- cdkAutosizeMinRows="10" required [value]="this.policyJson" placeholder="Policy properties"
- matTooltip="The properties of the policy instance, in JSON format" matTooltipPosition="before">
+<h4>
+ Properties *
+</h4>
+<form [formGroup]="instanceForm">
+ <mat-form-field style="width: 800px;" appearance="fill">
+ <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
+ cdkAutosizeMinRows="10" required [value]="this.policyJson" placeholder="Policy properties"
+ matTooltip="The properties of the policy instance, in JSON format" matTooltipPosition="before">
</textarea>
- <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
- <div *ngIf="policyJsonTextArea.errors.required">
- <mat-error role="alert">
- This field is required.
- </mat-error>
+ <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
+ <div *ngIf="policyJsonTextArea.errors.required">
+ <mat-error role="alert">
+ This field is required.
+ </mat-error>
+ </div>
+ <div *ngIf="policyJsonTextArea.errors.invalidJson">
+ <mat-error role="alert">
+ The policy properties must be a valid JSON.
+ </mat-error>
+ </div>
</div>
- <div *ngIf="policyJsonTextArea.errors.invalidJson">
- <mat-error role="alert">
- The policy properties must be a valid JSON.
- </mat-error>
- </div>
- </div>
- <button id="formatButton" (click)="formatJsonInput();" mat-raised-button [disabled]="!policyJsonTextArea.valid">
- Format JSON
- </button>
-</mat-form-field>
+ <button id="formatButton" (click)="formatJsonInput();" mat-raised-button [disabled]="!policyJsonTextArea.valid">
+ Format JSON
+ </button>
+ </mat-form-field>
+</form>
\ No newline at end of file
expect(component).toBeTruthy();
});
- it("should be added to form group with required validator", async () => {
- let textArea: MatInputHarness = await loader.getHarness(
- MatInputHarness.with({ selector: "#policyJsonTextArea" })
- );
-
- expect(formGroup.get("policyJsonTextArea")).toBeTruthy();
- expect(await textArea.isRequired()).toBeTruthy();
- });
-
it("should contain provided policy json and enabled Format button", async () => {
let textArea: MatInputHarness = await loader.getHarness(
MatInputHarness.with({ selector: "#policyJsonTextArea" })
});
it("Format button should be disabled when json not valid", async () => {
- const ele = formGroup.get("policyJsonTextArea");
+ const ele = component.noTypePolicyEditorComponent.instanceForm.get("policyJsonTextArea");
ele.setValue("{");
let formatButton: MatButtonHarness = await loader.getHarness(
});
it("should format unformatted json", async () => {
- const textArea = formGroup.get("policyJsonTextArea");
+ const textArea = component.noTypePolicyEditorComponent.instanceForm.get("policyJsonTextArea");
textArea.setValue('{"A":"A"}');
component.noTypePolicyEditorComponent.formatJsonInput();
expect(component.noTypePolicyEditorComponent.policyJson).toEqual(
selector: `no-type-policy-editor-host-component`,
template: `<nrcp-no-type-policy-editor
[policyJson]="this.policyJson"
- [instanceForm]="instanceForm"
></nrcp-no-type-policy-editor>`,
})
class TestNoTypePolicyEditorComponentHostComponent {
@ViewChild(NoTypePolicyEditorComponent)
noTypePolicyEditorComponent: NoTypePolicyEditorComponent;
- instanceForm: FormGroup = formGroup;
policyJson: string = '{"A":"A"}';
}
});
// ========================LICENSE_END===================================
// /
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, ControlContainer, FormBuilder, FormControl, FormGroup, FormGroupDirective, ValidatorFn, Validators } from '@angular/forms';
+import { EventEmitter } from '@angular/core';
@Component({
selector: 'nrcp-no-type-policy-editor',
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class NoTypePolicyEditorComponent implements OnInit {
+ @Input() policyJson: string = null;
+ @Output() validJson: EventEmitter<string> = new EventEmitter<string>();
- @Input() instanceForm: FormGroup;
- @Input() policyJson: string;
+ instanceForm: FormGroup = new FormGroup({});
constructor(
private formBuilder: FormBuilder) { }
- ngOnInit(): void {
- this.instanceForm.addControl(
- 'policyJsonTextArea', new FormControl(this.policyJson, [
- Validators.required,
- jsonValidator()
- ])
- )
- }
+ ngOnInit(): void {
+ this.instanceForm.addControl(
+ 'policyJsonTextArea', new FormControl(this.policyJson, [
+ Validators.required,
+ this.jsonValidator()
+ ])
+ )
+ }
- get policyJsonTextArea(): AbstractControl {
+ get policyJsonTextArea(): AbstractControl {
return this.instanceForm ? this.instanceForm.get('policyJsonTextArea') : null;
}
formatJsonInput(): void {
this.policyJson = formatJsonString(JSON.parse(this.policyJsonTextArea.value));
}
-}
-export function formatJsonString(jsonToFormat: any): string {
- return JSON.stringify(jsonToFormat, null, 2);
-}
+ jsonValidator(): ValidatorFn {
+ return (control: AbstractControl): { [key: string]: any } | null => {
+ const notValid = !this.isJsonValid(control.value);
+ this.handleJsonChangeEvent(notValid, control.value);
+ return notValid ? { 'invalidJson': { value: control.value } } : null;
+ };
+ }
-export function jsonValidator(): ValidatorFn {
- return (control: AbstractControl): { [key: string]: any } | null => {
- const notValid = !isJsonValid(control.value);
- return notValid ? { 'invalidJson': { value: control.value } } : null;
- };
-}
+ handleJsonChangeEvent(notValid: boolean, newValue: string): void {
+ let json = newValue;
+ if (notValid) {
+ json = null;
+ }
+ this.validJson.emit(json);
+ }
-export function isJsonValid(json: string): boolean {
- try {
- if (json != null) {
- JSON.parse(json);
- return true;
- } else {
+ isJsonValid(json: string): boolean {
+ try {
+ if (json != null) {
+ JSON.parse(json);
+ return true;
+ } else {
+ return false;
+ }
+ } catch (jsonError) {
return false;
}
- } catch (jsonError) {
- return false;
}
}
+
+export function formatJsonString(jsonToFormat: any): string {
+ return JSON.stringify(jsonToFormat, null, 2);
+}
-->
<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
- <div id="instanceInfo" *ngIf="policyInstanceId">[{{this.ric}}] Instance ID: {{policyInstanceId}}</div>
+ <div id="instanceInfo" *ngIf="policyInstance.policy_id">[{{policyInstance.ric_id}}] Instance ID: {{policyInstance.policy_id}}</div>
</div>
<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
<svg class="logo__icon" viewBox="150.3 22.2 1000 50">
<text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
letter-spacing=".1em" transform="translate(149 56)">
- <tspan *ngIf="!this.policyInstanceId">Create new policy instance of type </tspan>
- <tspan *ngIf="policyTypeName">{{policyTypeName}}</tspan>
- <tspan *ngIf="!policyTypeName">< No Type ></tspan>
+ <tspan *ngIf="!this.policyInstance.policy_id">Create new policy instance of type </tspan>
+ <tspan *ngIf="policyInstance.policytype_id">{{policyInstance.policytype_id}}</tspan>
+ <tspan *ngIf="!policyInstance.policytype_id">< No Type ></tspan>
</text>
</svg>
</div>
<div class="text-muted" *ngIf="jsonSchemaObject.description">{{jsonSchemaObject.description}}</div>
-<form [formGroup]="instanceForm" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column"
- fxLayoutAlign.lt-sm="flex-start center">
-
- <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
- <nrcp-ric-selector *ngIf="!policyInstanceId" [instanceForm]="instanceForm" [policyTypeName]="policyTypeName"></nrcp-ric-selector>
- <h4 *ngIf="!typeHasSchema()">
- Properties
- </h4>
- <nrcp-no-type-policy-editor *ngIf="!typeHasSchema()" [instanceForm]="instanceForm" [policyJson]="policyJson"></nrcp-no-type-policy-editor>
- <nrcp-typed-policy-editor *ngIf="typeHasSchema()" [jsonSchemaObject]="jsonSchemaObject" [jsonObject]="policyJson" [darkMode]="darkMode"></nrcp-typed-policy-editor>
- <div mat-dialog-actions>
- <button id="closeButton" mat-raised-button [mat-dialog-close]="false">Close</button>
- <button id="submitButton" mat-raised-button (click)="onSubmit()" class="submitBtn" [disabled]="!isFormValid()">
- Submit
- </button>
- </div>
- </mat-card>
-</form>
\ No newline at end of file
+<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
+ <nrcp-ric-selector *ngIf="!policyInstance.policy_id" [policyTypeName]="policyInstance.policytype_id"
+ (selectedRic)="onSelectedRicChanged($event)"></nrcp-ric-selector>
+
+ <nrcp-no-type-policy-editor *ngIf="!typeHasSchema()" (validJson)="onJsonChanged($event)" [policyJson]="policyJson"></nrcp-no-type-policy-editor>
+
+ <nrcp-typed-policy-editor *ngIf="typeHasSchema()" (validJson)="onJsonChanged($event)" [jsonSchemaObject]="jsonSchemaObject" [jsonObject]="policyJson"
+ [darkMode]="darkMode"></nrcp-typed-policy-editor>
+
+ <div mat-dialog-actions>
+ <button id="closeButton" mat-raised-button [mat-dialog-close]="false">Close</button>
+ <button id="submitButton" mat-raised-button (click)="onSubmit()" class="submitBtn" [disabled]="!isFormValid()">
+ Submit
+ </button>
+ </div>
+</mat-card>
\ No newline at end of file
expect(ele).toBeFalsy();
});
- it("should contain ric select with instance form and no policy type", async () => {
+ it("should contain ric select with no policy type", async () => {
const ricSelector: RicSelectorComponent = fixture.debugElement.query(By.directive(RicSelectorComponent)).componentInstance;
expect(ricSelector).toBeTruthy();
- expect(ricSelector.instanceForm).toBeTruthy();
expect(ricSelector.policyTypeName).toBeFalsy();
});
- it("should contain json editor with instance form and empty JSON", async () => {
+ it("should contain json editor with empty JSON", async () => {
const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(By.directive(NoTypePolicyEditorComponent)).componentInstance;
expect(noTypePolicyEditor).toBeTruthy();
- expect(noTypePolicyEditor.instanceForm).toBeTruthy();
expect(noTypePolicyEditor.policyJson).toEqual("{}");
});
- it("should contain enabled Close button and disabled Submit button", async () => {
+ it("should contain enabled Close button and Submit button", async () => {
component.ngOnInit();
- // Add an empty value with required validator to set the dialog's instance form to be invalid.
- const value: any = null;
- component.instanceForm.addControl(
- "dummy",
- new FormControl(value, [Validators.required])
- );
- expect(component.instanceForm.valid).toBeFalsy();
let closeButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#closeButton" })
let submitButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#submitButton" })
);
- expect(await submitButton.isDisabled()).toBeTruthy();
expect(await submitButton.getText()).toEqual("Submit");
});
});
expect(ele).toBeFalsy();
});
- it("should contain ric select with instance form and provided policy type", async () => {
+ it("should contain ric select with provided policy type", async () => {
const ricSelector: RicSelectorComponent = fixture.debugElement.query(By.directive(RicSelectorComponent)).componentInstance;
expect(ricSelector).toBeTruthy();
- expect(ricSelector.instanceForm).toBeTruthy();
expect(ricSelector.policyTypeName).toEqual("Type 1");
});
expect(typedPolicyEditor.darkMode).toBeTruthy();
});
- it("should contain enabled Close button and disabled Submit button", async () => {
+ it("should contain enabled Close button and Submit button", async () => {
component.ngOnInit();
- // Add an empty value with required validator to set the dialog's instance form to be invalid.
- const value: any = null;
- component.instanceForm.addControl(
- "dummy",
- new FormControl(value, [Validators.required])
- );
- expect(component.instanceForm.valid).toBeFalsy();
let closeButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#closeButton" })
let submitButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#submitButton" })
);
- expect(await submitButton.isDisabled()).toBeTruthy();
expect(await submitButton.getText()).toEqual("Submit");
});
});
expect(ricSelector).toBeFalsy();
});
- it("should contain json editor with form and json data", async () => {
+ it("should contain json editor with json data", async () => {
const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(By.directive(NoTypePolicyEditorComponent)).componentInstance;
expect(noTypePolicyEditor).toBeTruthy();
- expect(noTypePolicyEditor.instanceForm).toBeTruthy();
expect(unescapeQuotes(noTypePolicyEditor.policyJson)).toEqual('"' + instanceJson + '"');
});
it("should contain enabled Close and Submit buttons when all inputs are valid", async () => {
- expect(component.instanceForm.valid).toBeTruthy();
-
let closeButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#closeButton" })
);
});
it("should contain enabled Close and Submit buttons when all inputs are valid", async () => {
- expect(component.instanceForm.valid).toBeTruthy();
-
let closeButton: MatButtonHarness = await loader.getHarness(
MatButtonHarness.with({ selector: "#closeButton" })
);
],
})
class RicSelectorStubComponent {
- @Input() instanceForm: FormGroup;
@Input() policyTypeName: string = "";
get selectedRic(): string {
],
})
class NoTypePolicyEditorStubComponent {
- @Input() instanceForm: FormGroup;
@Input() policyJson: string;
get policyJsonTextArea(): AbstractControl {
Component,
Inject,
OnInit,
- ViewChild,
} from "@angular/core";
-import { FormGroup } from "@angular/forms";
import {
MatDialogConfig,
MatDialogRef,
PolicyInstance,
PolicyTypeSchema,
} from "../../interfaces/policy.types";
-import { RicSelectorComponent } from "../ric-selector/ric-selector.component";
-import {
- formatJsonString,
- NoTypePolicyEditorComponent,
-} from "../no-type-policy-editor/no-type-policy-editor.component";
-import { TypedPolicyEditorComponent } from "../typed-policy-editor/typed-policy-editor.component";
+import { formatJsonString } from "../no-type-policy-editor/no-type-policy-editor.component";
@Component({
selector: "nrcp-policy-instance-dialog",
styleUrls: ["./policy-instance-dialog.component.scss"],
})
export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit {
- instanceForm: FormGroup;
- @ViewChild(RicSelectorComponent)
- ricSelector: RicSelectorComponent;
- @ViewChild(NoTypePolicyEditorComponent)
- noTypePolicyEditor: NoTypePolicyEditorComponent;
- @ViewChild(TypedPolicyEditorComponent)
- typedPolicyEditor: TypedPolicyEditorComponent;
- policyInstanceId: string; // null if not yet created
+ policyInstance = {} as CreatePolicyInstance;
policyJson: string;
- policyTypeName: string;
jsonSchemaObject: any;
darkMode: boolean;
- ric: string;
allRicIds: string[] = [];
constructor(
@Inject(MAT_DIALOG_DATA) private data,
private ui: UiService
) {
- this.policyInstanceId = data.instanceId;
- this.policyTypeName = data.name;
+ 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.ric = data.ric;
+ this.policyInstance.ric_id = data.ric;
}
ngOnInit() {
this.ui.darkModeState.subscribe((isDark) => {
this.darkMode = isDark;
});
- this.instanceForm = new FormGroup({});
this.formatNoTypePolicyJson();
}
private formatNoTypePolicyJson() {
if (!this.typeHasSchema()) {
- if (this.policyJson) {
- this.policyJson = formatJsonString(this.policyJson);
+ if (this.policyInstance.policy_data) {
+ this.policyJson = formatJsonString(this.policyInstance.policy_data);
} else {
this.policyJson = "{}";
}
}
}
+ onSelectedRicChanged(newRic: string): void {
+ this.policyInstance.ric_id = newRic;
+ }
+
+ onJsonChanged(newJson: string): void {
+ this.policyInstance.policy_data = newJson;
+ }
+
onSubmit() {
- if (this.policyInstanceId == null) {
- this.policyInstanceId = uuid.v4();
+ if (this.policyInstance.policy_id == null) {
+ this.policyInstance.policy_id = uuid.v4();
}
const self: PolicyInstanceDialogComponent = this;
- let policyData: string;
- if (this.typeHasSchema()) {
- policyData = this.typedPolicyEditor.prettyLiveFormData;
- } else {
- policyData = this.noTypePolicyEditor.policyJsonTextArea.value;
- }
- let createPolicyInstance: CreatePolicyInstance = this.createPolicyInstance(
- policyData
- );
- this.policySvc.putPolicy(createPolicyInstance).subscribe({
+ this.policySvc.putPolicy(this.policyInstance).subscribe({
next(_) {
self.notificationService.success(
- "Policy without type:" + self.policyInstanceId + " submitted"
+ "Policy " + self.policyInstance.policy_id + " submitted"
);
self.dialogRef.close();
},
}
isFormValid(): boolean {
- let isValid: boolean = this.instanceForm.valid;
- if (this.typeHasSchema()) {
- isValid =
- isValid && this.typedPolicyEditor
- ? this.typedPolicyEditor.formIsValid
- : false;
- }
- return isValid;
- }
-
- private createPolicyInstance(policyJson: string): CreatePolicyInstance {
- let createPolicyInstance = {} as CreatePolicyInstance;
- createPolicyInstance.policy_data = JSON.parse(policyJson);
- createPolicyInstance.policy_id = this.policyInstanceId;
- createPolicyInstance.policytype_id = "";
- createPolicyInstance.ric_id = this.ricSelector
- ? this.ricSelector.selectedRic
- : this.ric;
- createPolicyInstance.service_id = "controlpanel";
- return createPolicyInstance;
+ return (
+ this.policyInstance.ric_id !== null &&
+ this.policyInstance.policy_data !== null
+ );
}
}
// ========================LICENSE_END===================================
//
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
import { FlexLayoutModule } from '@angular/flex-layout';
import { Routes, RouterModule } from '@angular/router';
TypedPolicyEditorComponent,
],
imports: [
+ BrowserAnimationsModule,
CommonModule,
FlexLayoutModule,
FormsModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
+ MatTooltipModule,
MaterialDesignFrameworkModule,
ReactiveFormsModule,
RouterModule.forChild(routes)
========================LICENSE_END===================================
/
-->
-
-<mat-form-field appearance="fill">
- <mat-select id="ricSelector" formControlName="ricSelector" matInput required
- placeholder="Target" matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
- <mat-option *ngFor="let ric of this.allRics" [value]="ric">
- {{ric}}
- </mat-option>
- </mat-select>
- <div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)" class="alert mat-error"
- style="width: 300px;">
- <div id="ricSelectorError" *ngIf="ricSelector.errors.required">
- <mat-error role="alert">
- This field is required.
- </mat-error>
- </div>
-</div>
-</mat-form-field>
\ No newline at end of file
+<form [formGroup]="instanceForm">
+ <mat-form-field appearance="fill">
+ <mat-select id="ricSelector" formControlName="ricSelector" (selectionChange)="onRicChanged($event)" matInput
+ required placeholder="Target *"
+ matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
+ <mat-option *ngFor="let ric of this.allRics" [value]="ric">
+ {{ric}}
+ </mat-option>
+ </mat-select>
+ <div *ngIf="ricSelector.invalid" class="alert mat-error" style="width: 300px;">
+ <div id="ricSelectorError" *ngIf="ricSelector.errors.required">
+ <mat-error role="alert">
+ This field is required.
+ </mat-error>
+ </div>
+ </div>
+ </mat-form-field>
+</form>
\ No newline at end of file
expect(component).toBeTruthy();
});
- it('should be added to form group with required validator', async () => {
- let ricSelector: MatSelectHarness = await loader.getHarness(MatSelectHarness.with({ selector: '#ricSelector' }));
-
- expect(formGroup.get('ricSelector')).toBeTruthy();
- expect(await ricSelector.isRequired()).toBeTruthy();
- });
-
it('no ric selected', async () => {
let ricSelector: MatSelectHarness = await loader.getHarness(MatSelectHarness.with({ selector: '#ricSelector' }));
// ========================LICENSE_END===================================
// /
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit, Output } from "@angular/core";
import {
AbstractControl,
ControlContainer,
FormGroupDirective,
Validators,
} from "@angular/forms";
+import { EventEmitter } from "@angular/core";
import { Rics } from "src/app/interfaces/ric";
import { PolicyService } from "src/app/services/policy/policy.service";
+import { MatSelectChange } from "@angular/material/select";
@Component({
selector: "nrcp-ric-selector",
],
})
export class RicSelectorComponent implements OnInit {
- @Input() instanceForm: FormGroup;
@Input() policyTypeName: string = "";
- ric: string;
+ @Output() selectedRic: EventEmitter<string> = new EventEmitter<string>();
+
+ ric: string = null;
+ instanceForm: FormGroup = new FormGroup({
+ ricSelector: new FormControl(this.ric, [Validators.required]),
+ });
allRics: string[] = [];
constructor(
) {}
ngOnInit(): void {
- this.instanceForm.addControl(
- "ricSelector",
- new FormControl(this.ric, [Validators.required])
- );
-
console.log("Ric:", this.ric);
this.fetchRics();
}
- get selectedRic(): string {
- return this.ric;
+ onRicChanged(newvalue: MatSelectChange): void {
+ this.selectedRic.emit(newvalue.value);
}
get ricSelector(): AbstractControl {
<h4 id="propertiesHeading" class="default-cursor" (click)="toggleVisible('form')">
<mat-icon id="propertiesIcon" matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
- Properties
+ Properties *
</h4>
<div id="propertiesDiv" *ngIf="isVisible.form" class="json-schema-form" [@expandSection]="true">
<json-schema-form id="json-schema-form" [form]="jsonSchemaObject"
//
import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { JsonPointer } from 'angular6-json-schema-form';
@Component({
@Input() jsonSchemaObject: any = {};
@Input() jsonObject: any = {};
@Input() darkMode: boolean;
+ @Output() validJson: EventEmitter<string> = new EventEmitter<string>();
isVisible = {
form: true,
isValid(isValid: boolean): void {
this.formIsValid = isValid;
+ let json = this.prettyLiveFormData;
+ if (!this.formIsValid) {
+ json = null;
+ }
+ this.validJson.emit(json);
}
validationErrors(validationErrors: any): void {
Code Review / portal / nonrtric-controlpanel.git / commitdiff