Adding Controller catalog

Adding new component controller catalog

Change-Id: I30ce3498289320a1246d37089fb971c2f71ffe15
Issue-ID: CCSDK-810
Signed-off-by: Swapnali Shadanan Pode <sp00501638@techmahindra.com>

7 files changed, 410 insertions, 0 deletions

diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts
new file mode 100644
index 000000000..68d13b214
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog-routing.module.ts
@@ -0,0 +1,34 @@
+/*
+* ============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 { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CreateCatalogComponent } from './create-catalog.component';
+
+const routes: Routes = [
+  {
+      path: '',
+      component: CreateCatalogComponent
+  }
+];
+@NgModule({
+imports: [RouterModule.forChild(routes)],
+exports: [RouterModule]
+})
+export class CreateCatalogRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html
new file mode 100644
index 000000000..8c71edfa7
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.html
@@ -0,0 +1,56 @@
+<!--/*
+* ============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=========================================================
+*/-->
+<mat-card class="ver-card">
+  <mat-card-header><div class="mat-card-header">Create Catalog</div>
+  </mat-card-header>
+  <mat-card-content>
+<form [formGroup]="CatalogFormData" (ngSubmit)="CreateCatalog()">
+  <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>
+ </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>
+ </mat-form-field>
+ <mat-form-field class="form-field" >
+   <textarea matInput placeholder="Description" formControlName="_description"></textarea>
+ </mat-form-field>
+  <br>
+  <div >
+      <json-editor  placeholder="Definition" class="jsoneditor" [options]="options" [data]="resources" on-change="onChange($event)"></json-editor>
+  </div>
+ <div>
+   <button mat-button class="matStepNextBtn" type="submit">Save</button>
+ </div>  
+</form>
+</mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss
new file mode 100644
index 000000000..cc8e292aa
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.scss
@@ -0,0 +1,60 @@
+/*

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

+*/

+.matStepNextBtn{

+    color:white;

+    background:#3f51b5;

+    margin-top: 10px;

+    position: absolute;

+    margin-bottom: 5px;

+    border-radius: 4px;

+}

+.meta-form {

+  width: 100%;

+}

+

+.form-field {

+  width: 40%;

+  padding:20px;

+}

+

+.form-table {

+  width: 100%;

+}

+.ver-card {

+    width: 100%;  

+    background-color: #f1f1f1;

+     padding: 0.01em 16px;

+      margin: 20px 0;

+      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;

+      height: 800px;

+  }

+  .mat-card-header{

+      height:35px;  

+      padding-top: 4px;

+  }

+  .mat-card-content{

+      width: auto;

+      background-color: #fff;

+      padding: 8px 8px;

+      // border-left: 4px solid #4CAF50;

+      word-wrap: break-word;

+      min-height:350px;

+      height: auto;

+  }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts
new file mode 100644
index 000000000..8a96b6d8b
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+* ============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 { CreateCatalogComponent } from './create-catalog.component';
+
+describe('CreateCatalogComponent', () => {
+  let component: CreateCatalogComponent;
+  let fixture: ComponentFixture<CreateCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts
new file mode 100644
index 000000000..91c6f2835
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.component.ts
@@ -0,0 +1,114 @@
+/*
+* ============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, ViewChild, ɵConsole } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
+import { Observable } from 'rxjs';
+import { ICatalogState } from 'src/app/common/core/store/models/catalogState.model';
+import { ICatalog } from 'src/app/common/core/store/models/catalog.model';
+import { Store } from '@ngrx/store';
+import { IAppState } from 'src/app/common/core/store/state/app.state';
+import { SetCatalogState } from 'src/app/common/core/store/actions/catalog.action';
+import { CreateCatalogService } from './create-catalog.service';
+import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service';
+
+@Component({
+  selector: 'app-create-catalog',
+  templateUrl: './create-catalog.component.html',
+  styleUrls: ['./create-catalog.component.scss']
+})
+export class CreateCatalogComponent implements OnInit {
+  
+  CatalogFormData: FormGroup;
+  @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
+  options = new JsonEditorOptions();
+  data:any;
+  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'}];
+  ccState: Observable<ICatalogState>;
+  catalog: ICatalog;
+
+  constructor(private formBuilder: FormBuilder, private store: Store<IAppState>, private catalogCreateService: CreateCatalogService, private alertService: NotificationHandlerService) { 
+    this.ccState = this.store.select('catalog');
+    this.CatalogFormData = this.formBuilder.group({
+      Model_Name: ['', Validators.required],
+      User_id: ['', Validators.required],
+      _tags: ['', Validators.required],
+      _type: ['', Validators.required],
+      Derived_From: ['', Validators.required],
+      _description : ['', Validators.required]
+    });   
+  }
+  ngOnInit() {
+    this.options.mode = 'text';
+    this.options.modes = [ 'text', 'tree', 'view'];
+    this.options.statusBar = false; 
+
+    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.catalogCreateService.getDefinition()
+//    .subscribe(data=>{
+//        console.log(data);
+//        data.forEach(element => {
+//          this.definitionType.push(element)
+//        });          
+//    }, error=>{
+//      window.alert('error' + error);
+//    })
+//
+//    this.catalogCreateService.getDerivedFrom()
+//    .subscribe(data=>{
+//        console.log(data);
+//        data.forEach(element => {
+//          this.derivedFrom.push(element)
+//        });          
+//    }, error=>{
+//      window.alert('error' + error);
+//    })
+  }
+  CreateCatalog(){
+    this.catalog = Object.assign({}, this.CatalogFormData.value);
+    this.catalog.definition=this.data;
+    let catalogState = {
+      catalog: this.catalog
+    }
+    this.store.dispatch(new SetCatalogState(catalogState));
+    
+      this.catalogCreateService.saveCatalog(this.catalog)
+      .subscribe(response=>{
+        this.alertService.success("save success")
+      },
+      error=>{
+        this.alertService.error('Error saving resources');
+      })
+ 
+  }
+
+  onChange($event) {
+    this.data=JSON.parse($event.srcElement.value); 
+    console.log(this.data);
+  };
+}
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts
new file mode 100644
index 000000000..e0ae0dc42
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.module.ts
@@ -0,0 +1,57 @@
+/*
+* ============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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CreateCatalogRoutingModule } from './create-catalog-routing.module';
+import { MatToolbarModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { SharedModule } from 'src/app/common/shared/shared.module';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
+import { CreateCatalogService } from './create-catalog.service';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    CreateCatalogRoutingModule,
+    SharedModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule,
+    NgJsonEditorModule
+  ],
+  providers: [ CreateCatalogService ]
+})
+
+export class CreateCatalogModule { }
diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.ts
new file mode 100644
index 000000000..fd582cc98
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/controller-catalog/create-catalog/create-catalog.service.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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ApiService } from 'src/app/common/core/services/api.service';
+import { ControllerCatalogURLs } from 'src/app/common/constants/app-constants';
+
+@Injectable()
+export class CreateCatalogService {
+  
+
+  constructor(private _http: HttpClient, private api: ApiService) {
+  }
+
+  saveCatalog(catalog) {
+     return this.api.post(ControllerCatalogURLs.saveControllerCatalog, catalog);
+  }
+
+  getDefinition() {
+    return this.api.get(ControllerCatalogURLs.getDefinition);
+  }
+  getDerivedFrom() {
+    return this.api.get(ControllerCatalogURLs.getDerivedFrom);
+  }
+}
+