Merge pull request #200 from...

Merge pull request #200 from nmaas-platform/149-handle-namespace-creation-during-domain-provisioning-1

update Domain annotations

src/app/appmarket/domains/domain-annotations/domain-annotations.component.ts

@@ -21,18 +21,10 @@ export class DomainAnnotationsComponent implements OnInit {
 
   public handleAnnotationsUpdate(event: any ) {
     console.warn(event)
-    
-    this.domainService.addAnnotations(event).subscribe(_ => {
-      this.annotations = this.domainService.getAnnotations();
-    })
   }
 
   public handleDelete(key: string) {
     console.warn("trigger delete for", key);
-
-    this.domainService.deleteAnnotation(key).subscribe(_ => {
-      this.annotations = this.domainService.getAnnotations();
-    })
   }
 
 }

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

@@ -144,7 +144,7 @@
 
 
 		<div *ngIf="isInMode(ComponentMode.CREATE)" >
-		<app-domain-namespace-annotations [annotationRead]="annotations" (annotations)="handleAnnotationsChange($event)"></app-domain-namespace-annotations>
+		<app-domain-namespace-annotations [annotationRead]="annotations" (annotations)="handleAnnotationsChange($event)" (trigerDelete)="handleAnnotationDelete($event)"></app-domain-namespace-annotations>
 		</div>
 
 		<div *ngIf="isInMode(ComponentMode.VIEW)" class="panel panel-default">

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

@@ -16,6 +16,7 @@ import {CustomerNetwork} from '../../../model/customernetwork';
 import {MinLengthDirective} from '../../../directive/min-length.directive';
 import {MaxLengthDirective} from '../../../directive/max-length.directive';
 import { KeyValue } from '../../../model/key-value';
+import { DomainAnnotation } from '../../../model/domain-annotation';
 
 
 @Component({
@@ -46,7 +47,7 @@ export class DomainComponent extends BaseComponent implements OnInit {
 
     public displayCustomerNetworksSection = false;
 
-    public annotations : Observable<KeyValue[]> = of([]);
+    public annotations : Observable<DomainAnnotation[]> = of([]);
 
     constructor(public domainService: DomainService,
                 protected userService: UserService,
@@ -171,10 +172,15 @@ export class DomainComponent extends BaseComponent implements OnInit {
         this.domain.domainDcnDetails.customerNetworks.push(new CustomerNetwork());
     }
 
-    public handleAnnotationsChange(event: KeyValue[]){
+    public handleAnnotationsChange(event: DomainAnnotation[]){
         this.domain.annotations = event;
         console.log("Updated domain annotations", this.domain.annotations)
 
     }
 
+    public handleAnnotationDelete(event : number) {
+        this.domain.annotations = this.domain.annotations.filter(val => val.id !== event)
+        console.log("Updated domain annotations", this.domain.annotations)
+    }
+
 }

src/app/model/domain-annotation.ts

+export class DomainAnnotation {
+    public id: number;
+    public key : string;
+    public value : string;
+}
\ No newline at end of file

src/app/model/domain.ts

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

src/app/service/domain.service.ts

@@ -10,6 +10,7 @@ import {Domain} from '../model/domain';
 import {User} from '../model';
 import {DomainGroup} from '../model/domaingroup';
 import { KeyValue } from '../model/key-value';
+import { DomainAnnotation } from '../model/domain-annotation';
 
 @Injectable({
   providedIn: 'root',
@@ -115,15 +116,19 @@ export class DomainService extends GenericDataService {
     return this.put(this.url + 'group/' + id, domainGroup);
   }
 
-  public getAnnotations(): Observable<KeyValue[]> {
-    return this.get<KeyValue[]>(this.url + 'annotations')
+  public getAnnotations(): Observable<DomainAnnotation[]> {
+    return this.get<DomainAnnotation[]>(this.url + 'annotations')
   }
 
-  public addAnnotations(annotations: KeyValue[]): Observable<void> {
-    return this.post(this.url + 'annotations', annotations)
+  public addAnnotations(annotation: KeyValue): Observable<void> {
+    return this.post(this.url + 'annotations', annotation)
   }
 
-  public deleteAnnotation(key: string) : Observable<void>{
-    return this.delete(`${this.url}annotations/${key}`,)
+  public deleteAnnotation(id: number) : Observable<void>{
+    return this.delete(`${this.url}annotations/${id}`)
+  }
+
+  public updateAnnotation(annotation: DomainAnnotation): Observable<void> {
+    return this.put(`${this.url}annotations/${annotation.id}`, annotation)
   }
 }

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

@@ -21,13 +21,13 @@
         <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" [disabled]="getReadOnlyValue(kv.key)"  (focusout)="emmitValue(kv.key)" [(ngModel)]="kv.key" class="flex flex-grow-1" style="width: 100%" [ngClass]="{ 'border-red': isKeyNotUnique(kv.key)}">
+                    <input pInputText type="text"  (focusout)="emmitValue(kv)" [(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%">
+                    <input pInputText type="text" (focusout)="emmitValue(kv)" [(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>
+                    <button type="button" class="btn btn-danger" (click)="deleteAnnotation(kv.id)">Delete</button>
                 </div>
             </div>
         </div>
@@ -37,11 +37,31 @@
 
 
 <nmaas-modal>
-    <div class="nmaas-modal-header">{{'DOMAINS.LIST.GROUP' | translate}}</div>
-    <div class="nmaas-modal-body" style="height: 300px">
+    <div class="nmaas-modal-header">{{'DOMAINS.ANNOTATIONS.ADD' | translate}}</div>
+    <div class="nmaas-modal-body" style="height: 200px">
+   
+        <div class="grid flex flex-grow-1">
+            <div class="col-4">
+                {{'DOMAINS.ANNOTATIONS.KEY' | translate}}
+            </div>
+            <div class="col-6">
+                {{'DOMAINS.ANNOTATIONS.VALUE' | translate}}
+            </div>
+        </div>
+
+            <div class="flex grid flex-grow-1">
+                <div class="col-4">
+                    <input pInputText type="text"  [(ngModel)]="newAnnotations.key" class="flex flex-grow-1" style="width: 100%" [ngClass]="{ 'border-red': isKeyNotUniqueAdd(newAnnotations.key)}">
+                </div>
+                <div class="col-6">
+                    <input pInputText type="text"  [(ngModel)]="newAnnotations.value" class="flex flex-grow-1" style="width: 100%">
+                </div>
+            </div>
+        
 
     </div>
     <div class="nmaas-modal-footer">
-
+        <button type="button" class="btn btn-default" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
+        <button type="button" class="btn btn-primary" (click)="closeModal()" [disabled]="isKeyNotUniqueAdd(newAnnotations.key)">{{'SHARED.ADD' | translate}}</button>
     </div>
 </nmaas-modal>

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

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DomainNamespaceAnnotationsComponent } from './domain-namespace-annotations.component';
 import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('DomainNamespaceAnnotationsComponent', () => {
   let component: DomainNamespaceAnnotationsComponent;
@@ -11,6 +12,7 @@ describe('DomainNamespaceAnnotationsComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [ DomainNamespaceAnnotationsComponent ],
       imports: [
+        HttpClientTestingModule,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,

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

-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {KeyValue} from '../../model/key-value';
 import { Observable, of } from 'rxjs';
+import { DomainAnnotation } from '../../model/domain-annotation';
+import { ModalComponent } from '../modal';
+import { DomainService } from '../../service';
 
 @Component({
     selector: 'app-domain-namespace-annotations',
@@ -9,27 +12,36 @@ import { Observable, of } from 'rxjs';
 })
 export class DomainNamespaceAnnotationsComponent implements OnInit {
 
+    @ViewChild(ModalComponent, {static: true})
+    public readonly modal: ModalComponent;
+
     @Input()
-    public annotationRead: Observable<KeyValue[]> = of([]);
+    public annotationRead: Observable<DomainAnnotation[]> = of([]);
 
     @Input()
     public globalSettings: boolean = false;
 
     @Output()
-    public annotations: EventEmitter<KeyValue[]> = new EventEmitter<KeyValue[]>();
+    public annotations: EventEmitter<DomainAnnotation[]> = new EventEmitter<DomainAnnotation[]>();
 
     @Output()
     public trigerDelete: EventEmitter<string> = new EventEmitter<string>();
 
-    public keyValue: KeyValue[] = []
+    public keyValue: DomainAnnotation[] = []
 
     private keySetNotUnique: string[] = [];
 
     public isKeysUnique = true;
     public isKeyValuePresent =true;
 
+    public newAnnotations : DomainAnnotation = new DomainAnnotation();
+
     public reaOnlyMap = new Map<string, boolean>();
 
+    public constructor(private readonly domainService: DomainService) {
+
+    }
+
     ngOnInit(): void {
         console.warn("annotations", this.annotationRead)
         this.annotationRead.subscribe(annotation =>{
@@ -40,14 +52,24 @@ export class DomainNamespaceAnnotationsComponent implements OnInit {
         })
     }
 
-    public emmitValue(key: string = "") {
+    public emmitValue(keyValue: DomainAnnotation) {
         this.checkDuplicate()
         if ( this.isKeysUnique && this.isKeyValuePresent) {
             this.annotations.emit(this.keyValue);
         }
-        if(key !== "") {
-            this.reaOnlyMap.set(key, true);
+
+        if(keyValue !== null) {
+            if(keyValue.key !== "") {
+                this.reaOnlyMap.set(keyValue.key, true);
+            }
+    
+            if(this.globalSettings) {
+                this.domainService.updateAnnotation(keyValue).subscribe(_=> {
+                    console.warn("Updated annotation", keyValue)
+                })
+            }
         }
+       
     }
 
     public checkDuplicate() {
@@ -74,13 +96,17 @@ export class DomainNamespaceAnnotationsComponent implements OnInit {
     }
 
     addAnnotation() {
-        this.keyValue.push(new KeyValue())
+        this.newAnnotations = new DomainAnnotation();
+        this.modal.show();
     }
 
-    deleteAnnotation(key: any) {
-        this.keyValue = this.keyValue.filter(val => val.key !== key)
-        if(this.globalSettings) {
-            this.trigerDelete.emit(key);
+    deleteAnnotation(id: any) {
+        this.keyValue = this.keyValue.filter(val => val.id !== id)
+        this.trigerDelete.emit(id);
+        if(this.globalSettings){
+            this.domainService.deleteAnnotation(id).subscribe(_=>{
+                this.annotationRead = this.domainService.getAnnotations();
+            })
         }
     }
 
@@ -88,10 +114,35 @@ export class DomainNamespaceAnnotationsComponent implements OnInit {
         return this.keySetNotUnique.some(val => val === key)
     }
 
+    public isKeyNotUniqueAdd(key: string) {
+        return this.keyValue.some(val => val.key === key)
+    }
+
     public getReadOnlyValue(key: string) {
         if(this.reaOnlyMap.has(key)){
             return this.reaOnlyMap.get(key);
         } else return false;
     }
 
+    public closeModal() {
+        if(this.globalSettings) {
+            this.domainService.addAnnotations(this.newAnnotations).subscribe(_ => {
+                console.log("Send request to create new annotations", this.newAnnotations)
+                this.newAnnotations = new DomainAnnotation();
+                this.annotationRead = this.domainService.getAnnotations();
+                this.triggerRefresh();
+            })
+        } else {
+            this.keyValue.push(this.newAnnotations)
+            this.newAnnotations = new DomainAnnotation();
+        }
+        this.emmitValue(null);
+        this.modal.hide();
+    }
+
+    public triggerRefresh() {
+        this.annotationRead.subscribe(annotation =>{
+            this.keyValue = annotation;
+    })
+    }
 }