diff options
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 { } |