aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages
diff options
context:
space:
mode:
authorJvD_Ericsson <jeff.van.dam@est.tech>2023-07-06 13:17:48 +0100
committerMichael Morris <michael.morris@est.tech>2023-07-13 15:05:06 +0000
commit825411a75557943e988d3601690cdf75c2bf0588 (patch)
tree76fcb694b9f224cb7138c4d25912b7ed8b406a1c /catalog-ui/src/app/ng2/pages
parent7b8acdf5b70fdcda448fa1ae871df0e0723f08db (diff)
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
Diffstat (limited to 'catalog-ui/src/app/ng2/pages')
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.html64
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.less0
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.spec.ts45
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.component.ts132
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/property-metadata/property-metadata.module.ts37
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 { }