UI support for metadata when editing properties of VFCs

Issue-ID: SDC-4561
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: I642fa4ce09fe669e5722dbbf18dd23daa23761d3

5 files changed, 278 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.html
new file mode 100644
index 0000000000..420d7ebe8b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.html
@@ -0,0 +1,64 @@
+<!--
+  ~ -
+  ~  ============LICENSE_START=======================================================
+  ~  Copyright (C) 2023 Nordix Foundation.
+  ~  ================================================================================
+  ~  Licensed under the Apache License, Version 2.0 (the "License");
+  ~  you may not use this file except in compliance with the License.
+  ~  You may obtain a copy of the License at
+  ~
+  ~       http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~  Unless required by applicable law or agreed to in writing, software
+  ~  distributed under the License is distributed on an "AS IS" BASIS,
+  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~  See the License for the specific language governing permissions and
+  ~  limitations under the License.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+<div class="app-property-metadata">
+  <form novalidate class="w-sdc-form two-columns" [formGroup]="metadataForm">
+    <div formArrayName="metadataFormList">
+      <div *ngFor="let metadata of propertyMetadataArray; let idx = index">
+        <div class="w-sdc-form-columns-wrapper">
+            <div class="w-sdc-form-column">
+              <input type="text" 
+                     class="i-sdc-form-input myClass"
+                     placeholder="new metadata key"
+                     (input)="onChangePropertyMetadataKey(idx, $event.target.value)"
+                     [value]="metadata.key"
+                     [ngClass]="{'disabled': isViewOnly}"
+                     required/>
+            </div>
+            <div class="w-sdc-form-column">
+              <input type="text" 
+                     class="i-sdc-form-input myClass"
+                     placeholder="new metadata value"
+                     (input)="onChangePropertyMetadataValue(idx, $event.target.value)"
+                     [value]="metadata.value"
+                     [ngClass]="{'disabled': isViewOnly}"
+                     required/>
+            </div>
+            <div class="w-sdc-form-column">
+              <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(idx)"></span>
+            </div>
+        </div>
+        <div class="w-sdc-form-columns-wrapper">
+          <div class="validation-errors">
+            <ng-container *ngFor="let validation of validationMessages.metadata">
+              <div class="input-error" *ngIf="metadataFormArray.at(idx).hasError(validation.type);">
+                {{ validation.message }}
+              </div>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+      <div class="w-sdc-form-columns-wrapper" *ngIf="!isViewOnly">
+          <div class="add-btn add-list-item w-sdc-form-column" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
+          (click)="addMetadataField()"> Add Metadata Entry </div>
+      </div>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.less
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.spec.ts
new file mode 100644
index 0000000000..0a0b2c0914
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PropertyMetadataComponent } from './property-metadata.component';
+
+describe('PropertyMetadataComponent', () => {
+  let component: PropertyMetadataComponent;
+  let fixture: ComponentFixture<PropertyMetadataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PropertyMetadataComponent ],
+      imports: [FormsModule, ReactiveFormsModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PropertyMetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.ts
new file mode 100644
index 0000000000..dc4c283a5d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.ts
@@ -0,0 +1,132 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  AbstractControl, FormArray,
+  FormControl,
+  FormGroup, ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
+
+@Component({
+  selector: 'app-property-metadata',
+  templateUrl: './property-metadata.component.html',
+  styleUrls: ['./property-metadata.component.less']
+})
+export class PropertyMetadataComponent implements OnInit {
+
+  @Input() propertyMetadata: any;
+  @Input() isViewOnly: boolean = false;
+  @Output() onPropertyMetadataChange: EventEmitter<any> = new EventEmitter<any>();
+
+  propertyMetadataArray: Metadata[] = [];
+  metadataFormArray: FormArray = new FormArray([]);
+  metadataForm: FormGroup = new FormGroup (
+    {
+      'metadataFormList': this.metadataFormArray
+    }
+  );
+  validationMessages = {
+    metadata: [
+      { type: 'required', message: 'Metadata key and value is required'}
+    ]
+  };
+
+  ngOnInit() {
+    this.initForm();
+  }
+
+  private initForm(): void {
+    this.metadataForm.valueChanges.subscribe(() => {
+      this.emitOnPropertyMetadataChange();
+    });
+    if (this.propertyMetadata) {
+      for (const key in this.propertyMetadata) {
+        const value = this.propertyMetadata[key];
+        let metadata: Metadata = {
+          key: key,
+          value: value
+        }
+        this.propertyMetadataArray.push(metadata);
+        this.metadataFormArray.push(
+          new FormControl(metadata, [Validators.required, Validators.minLength(1)])
+        );
+      }
+    }
+  }
+
+  addMetadataField() {
+    let metadata: Metadata = {
+      key: null,
+      value: null,
+    }
+    this.propertyMetadataArray.push(metadata);
+    this.metadataFormArray.push(
+      new FormControl(metadata, [Validators.required, this.formControlValidator()])
+    );
+  }
+
+  private formControlValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const metadata = control.value;
+
+      if (!metadata || !metadata.key || !metadata.value) {
+        return {required:true};
+      }
+      return null;
+    }
+  }
+
+  removeFromList(index: number) {
+    this.propertyMetadataArray.splice(index, 1);;
+    this.metadataFormArray.removeAt(index);
+  }
+
+  private emitOnPropertyMetadataChange(): void {
+    let newMetadata = new Object;
+    for (const metadata of this.propertyMetadataArray) {
+      const key = metadata.key;
+      const value = metadata.value;
+      newMetadata[key] = value;
+    }
+
+    this.onPropertyMetadataChange.emit({
+      metadata: newMetadata,
+      valid: this.metadataForm.valid
+    });
+  }
+
+  onChangePropertyMetadataValue(index: number, newValue: any) {
+    let metadata = this.metadataFormArray.controls[index].value;
+    metadata.value = newValue;
+    this.metadataFormArray.controls[index].setValue(metadata);
+  }
+
+  onChangePropertyMetadataKey(index: number, newKey: any) {
+    let metadata = this.metadataFormArray.controls[index].value;
+    metadata.key = newKey;
+    this.metadataFormArray.controls[index].setValue(metadata);
+  }
+}
+
+export interface Metadata {
+  key: string,
+  value: string
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.module.ts
new file mode 100644
index 0000000000..00324e01ca
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.module.ts
@@ -0,0 +1,37 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PropertyMetadataComponent } from './property-metadata.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+    declarations: [PropertyMetadataComponent],
+    exports: [PropertyMetadataComponent],
+    entryComponents: [
+      PropertyMetadataComponent
+    ],
+})
+
+export class PropertyMetadataModule { }