add domain namespace annotation editor

src/app/appmarket/domains/domain/domain.component.html

@@ -142,6 +142,8 @@
 			</div>
 		</div>
 
+		<app-domain-namespace-annotations [annotationRead]="domain.annotations"></app-domain-namespace-annotations>
+
 		<div class="panel panel-default">
 			<div class="panel-heading">{{ 'DOMAIN_DETAILS.APP_STATUS' | translate }}</div>
 			<div class="panel-body">

src/app/model/domain.ts

@@ -2,6 +2,7 @@ import {DomainDcnDetails} from './domaindcndetails';
 import {DomainTechDetails} from './domaintechdetails';
 import {DomainApplicationStatePerDomain} from './domainapplicationstateperdomain';
 import {DomainGroup} from './domaingroup';
+import {KeyValue} from './key-value';
 
 export class Domain {
   public id: number = undefined;
@@ -13,4 +14,5 @@ export class Domain {
   public applicationStatePerDomain: DomainApplicationStatePerDomain[] = [];
   public groups: DomainGroup[] = [];
   public deleted: boolean;
+  public annotations: KeyValue[] = [];
 }

src/app/model/key-value.ts

+export class KeyValue {
+    key;
+    value;
+}

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.css

+.border-red {
+    border: 1px solid red;
+}

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.html

+<div class="panel panel-default" >
+    <div class="panel-heading">
+        <div style="display: flex; justify-content: start; align-items: center">
+            <div>
+                {{"Domain namespace annotations creation"}}
+            </div>
+        </div>
+    </div>
+    <div class="panel-body">
+        <div  style="display: flex; justify-content: end">
+            <button  type="button" class="btn btn-success" (click)="addAnnotation()">{{"Add annotation"}}</button>
+        </div>
+        <div class="grid flex flex-grow-1">
+            <div class="col-4">
+                {{'KEY'}}
+<!--                <div *ngIf="isKeysUnique === false"><em class="pi pi-exclamation-circle" style="color: red"></em></div>-->
+            </div>
+            <div class="col-6">
+                {{'VALUE'}}
+            </div>
+        </div>
+        <div class="grid flex flex-grow-1 mt-4 mb-2" *ngFor="let kv of keyValue">
+            <div class="flex grid flex-grow-1">
+                <div class="col-4">
+                    <input pInputText type="text" (focusout)="emmitValue()" [(ngModel)]="kv.key" class="flex flex-grow-1" style="width: 100%" [ngClass]="{ 'border-red': isKeyNotUnique(kv.key)}">
+                </div>
+                <div class="col-6">
+                    <input pInputText type="text" (focusout)="emmitValue()" [(ngModel)]="kv.value" class="flex flex-grow-1" style="width: 100%">
+                </div>
+                <div class="col-2 flex justify-content-end">
+                    <button type="button" class="btn btn-danger" (click)="deleteAnnotation(kv.key)">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+<nmaas-modal>
+    <div class="nmaas-modal-header">{{'DOMAINS.LIST.GROUP' | translate}}</div>
+    <div class="nmaas-modal-body" style="height: 300px">
+
+    </div>
+    <div class="nmaas-modal-footer">
+
+    </div>
+</nmaas-modal>

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DomainNamespaceAnnotationsComponent } from './domain-namespace-annotations.component';
+
+describe('DomainNamespaceAnnotationsComponent', () => {
+  let component: DomainNamespaceAnnotationsComponent;
+  let fixture: ComponentFixture<DomainNamespaceAnnotationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DomainNamespaceAnnotationsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DomainNamespaceAnnotationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.ts

+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {KeyValue} from '../../model/key-value';
+
+@Component({
+    selector: 'app-domain-namespace-annotations',
+    templateUrl: './domain-namespace-annotations.component.html',
+    styleUrls: ['./domain-namespace-annotations.component.css']
+})
+export class DomainNamespaceAnnotationsComponent implements OnInit {
+
+    @Input()
+    public annotationRead: KeyValue[];
+
+    @Output()
+    public annotations: EventEmitter<KeyValue[]> = new EventEmitter<KeyValue[]>();
+
+    public keyValue: KeyValue[] = []
+
+    private keySetNotUnique: string[] = [];
+
+    public isKeysUnique = true;
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+    }
+
+    public emmitValue() {
+        this.checkDuplicate()
+        if ( this.isKeysUnique) {
+            this.annotations.emit(this.keyValue);
+        }
+    }
+
+    public checkDuplicate() {
+        const keySet = new Set<string>();
+        this.keyValue.forEach(kv => {
+            if (keySet.has(kv.key)) {
+                console.error("duplicated keys in annotations")
+                this.isKeysUnique = false;
+                this.keySetNotUnique.push(kv.key)
+            } else {
+                keySet.add(kv.key)
+            }
+        })
+        if (this.keyValue.length === keySet.size) {
+            this.isKeysUnique = true;
+            this.keySetNotUnique = [];
+        }
+        console.warn("after checking", this.isKeysUnique, keySet)
+    }
+
+    showModal() {
+
+    }
+
+    addAnnotation() {
+        this.keyValue.push(new KeyValue())
+    }
+
+    deleteAnnotation(key: any) {
+        this.keyValue = this.keyValue.filter(val => val.key !== key)
+    }
+
+   public isKeyNotUnique(key: string) {
+        return this.keySetNotUnique.some(val => val === key)
+    }
+
+}

src/app/shared/shared.module.ts

@@ -58,6 +58,7 @@ import {TooltipModule} from 'primeng/tooltip';
 import {DropdownModule} from 'primeng/dropdown';
 import {SortableHeaderDirective} from '../service/sort-domain.directive';
 import {InputTextModule} from 'primeng/inputtext';
+import { DomainNamespaceAnnotationsComponent } from './domain-namespace-annotations/domain-namespace-annotations.component';
 
 @NgModule({
     imports: [
@@ -118,7 +119,8 @@ import {InputTextModule} from 'primeng/inputtext';
         ModalProvideSshKeyComponent,
         ContactComponent,
         PreferencesComponent,
-        SortableHeaderDirective
+        SortableHeaderDirective,
+        DomainNamespaceAnnotationsComponent
     ],
     providers: [
         PasswordValidator,
@@ -168,7 +170,8 @@ import {InputTextModule} from 'primeng/inputtext';
         SshKeysComponent,
         ModalProvideSshKeyComponent,
         PreferencesComponent,
-        SortableHeaderDirective
+        SortableHeaderDirective,
+        DomainNamespaceAnnotationsComponent
     ]
 })
 export class SharedModule {