Merge "Adding Edit catalog functionality"

9 files changed, 327 insertions, 33 deletions

diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
index 9f5e1400f..ea4a2dd19 100644
--- a/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/controller-catalog.module.ts
@@ -20,19 +20,20 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule, MatDialogModule} from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
+
+import { SharedModule } from '../../../app/common/shared/shared.module';
 import { ControllerCatalogRoutingModule } from './controller-catalog-routing.module';
 import { ControllerCatalogComponent } from './controller-catalog.component';
-import { SharedModule } from '../../../app/common/shared/shared.module';
-import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule} from '@angular/material';
-import { MatIconModule } from '@angular/material/icon';
 import { SelectTemplateComponent } from './select-template/select-template.component';
 import { TemplateOptionsComponent } from './select-template/template-options/template-options.component';
 import { SearchCatalogComponent } from './search-catalog/search-catalog.component';
 import { CreateCatalogComponent } from './create-catalog/create-catalog.component';
 import { CreateCatalogModule } from './create-catalog/create-catalog.module';
 import { SearchCatalogModule } from './search-catalog/search-catalog.module';
-import { FormsModule,ReactiveFormsModule } from '@angular/forms';
-import { NgJsonEditorModule } from 'ang-jsoneditor';
 
 @NgModule({
   declarations: [ ControllerCatalogComponent, SelectTemplateComponent, TemplateOptionsComponent, SearchCatalogComponent, CreateCatalogComponent ],
@@ -59,6 +60,7 @@ import { NgJsonEditorModule } from 'ang-jsoneditor';
     MatFormFieldModule, 
     MatStepperModule,
     MatAutocompleteModule,
+    MatDialogModule,
     FormsModule,
     ReactiveFormsModule,
     NgJsonEditorModule
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.html
new file mode 100644
index 000000000..ca4a679ed
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.html
@@ -0,0 +1,54 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 TechMahindra
+*=================================================================================
+* 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.
+* ============LICENSE_END=========================================================
+*/-->
+
+<div>
+  <h1 mat-dialog-title>Details</h1>
+  <mat-dialog-content [formGroup]="CatalogFormData">
+  <mat-form-field class="form-field">
+   <input matInput placeholder="Model Name" formControlName="Model_Name">
+  </mat-form-field>
+  <mat-form-field class="form-field" >
+  	<input matInput placeholder="User Id" formControlName="User_id">
+  </mat-form-field>
+  <mat-form-field class="form-field">
+   <input matInput placeholder="Tags" formControlName="_tags">
+  </mat-form-field>
+  <mat-form-field class="form-field">
+   <!-- <mat-select matInput placeholder="Definition Type" formControlName="_type">
+     <mat-option [value]="item" *ngFor="let item of definitionType">{{item.definitionType}}</mat-option>
+   </mat-select> -->
+   <input matInput placeholder="Definition Type" formControlName="_type">
+  </mat-form-field>
+  <mat-form-field class="form-field" >
+   <!-- <mat-select matInput placeholder="Derived From" formControlName="Derived_From">
+    <mat-option [value]="item" *ngFor="let item of derivedFrom">{{item.derivedFrom}}</mat-option>
+   </mat-select> -->
+   <input matInput placeholder="Derived From" formControlName="Derived_From">
+  </mat-form-field>
+  <br>
+  </mat-dialog-content>
+  <mat-dialog-actions *ngIf="!isDisabled">
+    <button mat-button (click)="onNoClick()">Cancel</button>
+    <button mat-button (click)="onClickSave()">Save</button>
+  </mat-dialog-actions>
+  <mat-dialog-actions *ngIf="isDisabled">
+    <button mat-button (click)="onNoClick()">Close</button>
+  </mat-dialog-actions>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.scss
new file mode 100644
index 000000000..9afb1da1b
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.scss
@@ -0,0 +1,35 @@
+/*

+* ============LICENSE_START=======================================================

+* ONAP : CDS

+* ================================================================================

+* Copyright (C) 2019 TechMahindra

+*=================================================================================

+* 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.

+* ============LICENSE_END=========================================================

+*/

+

+.form-field {

+  width: 40%;

+  padding:10px;

+}

+.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after, .mat-input-element:disabled {

+  color: rgba(0,0,0,.87);

+}

+.mat-button{

+  float: center;

+  color:white;

+  background-color:#3f51b5;

+  margin-top: 10px;

+  margin: 5px;

+  border-radius: 6px;

+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.spec.ts
new file mode 100644
index 000000000..a1f62d1fc
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 TechMahindra
+*=================================================================================
+* 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.
+* ============LICENSE_END=========================================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CatalogDataDialogComponent } from './catalog-data-dialog.component';
+
+describe('CatalogDataDialogComponent', () => {
+  let component: CatalogDataDialogComponent;
+  let fixture: ComponentFixture<CatalogDataDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CatalogDataDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CatalogDataDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.ts
new file mode 100644
index 000000000..215f311e9
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/catalog-data-dialog/catalog-data-dialog.component.ts
@@ -0,0 +1,84 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2019 TechMahindra
+*=================================================================================
+* 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.
+* ============LICENSE_END=========================================================
+*/
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; 
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { ICatalog } from 'src/app/common/core/store/models/catalog.model'; 
+import { ICatalogState } from 'src/app/common/core/store/models/catalogState.model';
+import { IAppState } from 'src/app/common/core/store/state/app.state';
+
+@Component({
+  selector: 'app-catalog-data-dialog',
+  templateUrl: './catalog-data-dialog.component.html',
+  styleUrls: ['./catalog-data-dialog.component.scss']
+})
+export class CatalogDataDialogComponent implements OnInit{
+
+  catalog:any=[];
+  
+  CatalogFormData: FormGroup;
+  ccState: Observable<ICatalogState>;
+  isDisabled: boolean=true;
+  optionSelected:string;
+  // derivedFrom: any[] = [{derivedFrom: 'tosca.nodes.Component'},{derivedFrom:'tosca.nodes.VNF'},{derivedFrom:'tosca.nodes.Artifact'},{derivedFrom:'tosca.nodes.ResourceSource'}, {derivedFrom:'tosca.nodes.Workflow'},{derivedFrom:'tosca.nodes.Root'}];
+  // definitionType: any[] = [{definitionType: 'node_type'}];
+  property:any=[];
+  constructor(public dialogRef: MatDialogRef<CatalogDataDialogComponent>, @Inject(MAT_DIALOG_DATA) public item: any,private formBuilder: FormBuilder, private store: Store<IAppState> ) {
+    console.log(item);
+    this.optionSelected=item['option'];
+    for (let key in item['item']) {
+      this.catalog.push(item['item'][key]);
+    }
+    console.log(this.catalog);
+    for (let key in this.catalog) {
+      this.property.push(this.catalog[key]);  
+    }
+    if(this.optionSelected == 'Info'){
+      this.isDisabled = true;
+    }
+    else{
+      this.isDisabled = false;
+    }
+
+    this.ccState = this.store.select('catalog');
+    this.CatalogFormData = this.formBuilder.group({
+      Model_Name: [{value:this.property[0], disabled: this.isDisabled}, Validators.required],
+      User_id: [{value:this.property[8], disabled: this.isDisabled}, Validators.required],
+      _tags: [{value:this.property[6], disabled: this.isDisabled}, Validators.required],
+      _type: [{value:this.property[2], disabled: this.isDisabled}, Validators.required],
+      Derived_From: [{value:this.property[1], disabled: this.isDisabled}, Validators.required],
+    });   
+  }
+  
+  ngOnInit(){
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onClickSave(){
+    //this.catalog = Object.assign({}, this.CatalogFormData.value);
+    this.dialogRef.close(this.CatalogFormData.value);
+  }
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
index 47813829d..c8452e2ff 100644
--- a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
@@ -19,7 +19,7 @@
 */--> 
 <form class="search-form" [formGroup]="myControl">
   <mat-form-field class="search-full-width">
-      <input matInput type="text" [(ngModel)]="searchText" placeholder="Search Resources" formControlName="search_input">
+      <input matInput type="text" [(ngModel)]="searchText" placeholder="Search Catalog" formControlName="search_input">
       <button matSuffix mat-icon-button (click)="fetchCatalogByName()">
     <mat-icon>search</mat-icon>
   </button>
@@ -30,10 +30,12 @@
       <div *ngFor="let option of options" style="position: relative !important;width:20% !important">
           <mat-card class="example-card">
               <mat-card-content class="card-content">
-                  {{option.modelName}}
+                 {{option.modelName}}<br>
+                 {{option.derivedFrom}}
               </mat-card-content>
               <mat-card-actions class="flexBox">
-                  <button matStepperNext mat-menu-item (click)="editInfo(option.blueprintModel.artifactName,option.blueprintModel.artifactVersion,3)">Info</button>
+                  <button class="matStepNextBtn" matStepperNext mat-menu-item (click)="editInfo(option,'Info')">Info</button>
+                  <button class="matStepNextBtn" matStepperNext mat-menu-item (click)="editInfo(option,'Edit')">Edit</button>
               </mat-card-actions>
           </mat-card>
       </div>
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
index a24aebed0..c4eb84ac9 100644
--- a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.scss
@@ -36,14 +36,14 @@
   position: relative;

 }

 

-button.mat-menu-item {

+.matStepNextBtn {

   width: auto;

-  float: left;

-  border-radius: 4px;

-  background-color: #3f51b5;

+  float: center;

+  color:white;

+  background-color:#3f51b5;

+  margin-top: 10px;

   margin: 5px;

-  cursor: pointer;

-  color: white;

+  border-radius: 6px;

 }

 

 .flexBox {

@@ -72,7 +72,7 @@ button.mat-menu-item {
 }

 

 .mat-card-actions {

-  margin-left: 0px !important;

+  margin-left: 50px !important;

   margin-right: 0px !important;

   padding: 0px 0 !important;

 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
index b30fc3a78..717e1088f 100644
--- a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.ts
@@ -20,8 +20,19 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { SearchCatalogService } from './search-catalog.service';
+import { MatDialog ,MatDialogRef } from '@angular/material';
 import { MatAutocompleteTrigger } from '@angular/material';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { SearchCatalogService } from './search-catalog.service';
+import { CatalogDataDialogComponent } from './catalog-data-dialog/catalog-data-dialog.component';
+import { ICatalog } from 'src/app/common/core/store/models/catalog.model'; 
+import { CreateCatalogService } from '../create-catalog/create-catalog.service';
+import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service';
+import { ICatalogState } from 'src/app/common/core/store/models/catalogState.model';
+import { IAppState } from 'src/app/common/core/store/state/app.state';
+
 
 @Component({
   selector: 'app-search-catalog',
@@ -31,28 +42,87 @@ import { MatAutocompleteTrigger } from '@angular/material';
 export class SearchCatalogComponent implements OnInit {
   myControl: FormGroup;
   searchText: string = '';
-  options: any[]   = [];
+  
+  options: any[] = [];
+  private dialogRef: MatDialogRef<CatalogDataDialogComponent>;
+  data: any;
+  catalog: ICatalog;
+  ccState: Observable<ICatalogState>;
   @ViewChild('catalogSelect', { read: MatAutocompleteTrigger }) catalogSelect: MatAutocompleteTrigger;
-  constructor(private _formBuilder: FormBuilder, private searchCatalogService: SearchCatalogService)  { }
   
+  constructor(private _formBuilder: FormBuilder, private store: Store<IAppState>, private searchCatalogService: SearchCatalogService, private dialog: MatDialog, private catalogCreateService: CreateCatalogService, private alertService: NotificationHandlerService)  { 
+    this.ccState = this.store.select('catalog');
+  }
+ 
  ngOnInit() {
+
+  this.ccState.subscribe(
+    catalogdata => {
+      var catalogState: ICatalogState = { catalog: catalogdata.catalog, isLoadSuccess: catalogdata.isLoadSuccess, isSaveSuccess: catalogdata.isSaveSuccess, isUpdateSuccess: catalogdata.isUpdateSuccess };
+      this.catalog = catalogState.catalog;
+      console.log( this.catalog );
+    });
+
     this.myControl = this._formBuilder.group({
       search_input: ['', Validators.required]
     });
   }
   fetchCatalogByName() {
-    this.searchCatalogService.searchByTags(this.searchText)
-    .subscribe(data=>{
-        console.log(data);
-        data.forEach(element => {
-          this.options.push(element)
-        });          
-      this.catalogSelect.openPanel();
-    }, error=>{
-      window.alert('Catalog not matching the search tag' + error);
-    })
+    // this.searchCatalogService.searchByTags(this.searchText)
+    // .subscribe(data=>{
+    //     console.log(data);
+    //     data.forEach(element => {
+    //       this.options.push(element)
+    //     });          
+    //   this.catalogSelect.openPanel();
+    // }, error=>{
+    //   window.alert('Catalog not matching the search tag' + error);
+    // })
+
+    this.options=[  {
+      "modelName": "tosca.nodes.Artifact",
+      "derivedFrom": "tosca.nodes.Root",
+      "definitionType": "node_type",
+      "definition": {
+        "description": "This is Deprecated Artifact Node Type.",
+        "version": "1.0.0",
+        "derived_from": "tosca.nodes.Root"
+      },
+      "description": "This is Deprecated Artifact Node Type.",
+      "version": "1.0.0",
+      "tags": "tosca.nodes.Artifact,tosca.nodes.Root,node_type",
+      "creationDate": "2019-09-16T07:35:24.000Z",
+      "updatedBy": "System"
+    }];
    }
 
-   editInfo(artifactName: string, artifactVersion: string, option: string) {
+   editInfo(item: ICatalog, option: string) {
+
+      this.dialogRef = this.dialog.open(CatalogDataDialogComponent, {
+        height: '500px',
+        width: '700px',
+        disableClose: true,
+        data: {item, option}
+      });
+
+      this.dialogRef.afterClosed().subscribe(result => {
+        if(result == undefined || result == null){
+          console.log("dialogbox is closed");
+        }else{
+          this.catalog.Model_Name=result['Model_Name'];
+          this.catalog.User_id=result['User_id'];
+          this.catalog._tags=result['_tags'];
+          this.catalog._type=result['_type'];
+          this.catalog.Derived_From=result['Derived_From'];
+          console.log(this.catalog);
+          this.catalogCreateService.saveCatalog(this.catalog)
+          .subscribe(response=>{
+              this.alertService.success("save success"+ response)
+          },
+          error=>{
+          this.alertService.error('Error saving resources');
+          })  
+        } 
+      });
   }
 }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
index 2aa1a509e..eb608ed6a 100644
--- a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.module.ts
@@ -21,14 +21,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchCatalogRoutingModule } from './search-catalog-routing.module';
-import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule} from '@angular/material';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatDialogModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, MatAutocompleteModule } from '@angular/material';
 import { MatIconModule } from '@angular/material/icon';
 import { SharedModule } from 'src/app/common/shared/shared.module';
 import { FormsModule,ReactiveFormsModule } from '@angular/forms';
 import { SearchCatalogService } from './search-catalog.service';
+import { CatalogDataDialogComponent } from './catalog-data-dialog/catalog-data-dialog.component';
 
 @NgModule({
-  declarations: [],
+  declarations: [ CatalogDataDialogComponent ],
   imports: [
     CommonModule,
     SearchCatalogRoutingModule,
@@ -51,8 +52,10 @@ import { SearchCatalogService } from './search-catalog.service';
     MatRadioModule, 
     MatFormFieldModule, 
     MatStepperModule,
-    MatAutocompleteModule
+    MatAutocompleteModule,
+    MatDialogModule
   ],
-  providers: [ SearchCatalogService ]
+  providers: [ SearchCatalogService ],
+  entryComponents: [ CatalogDataDialogComponent ]
 })
 export class SearchCatalogModule { }