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 ],
MatFormFieldModule,
MatStepperModule,
MatAutocompleteModule,
+ MatDialogModule,
FormsModule,
ReactiveFormsModule,
NgJsonEditorModule
--- /dev/null
+<!--/*
+* ============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
--- /dev/null
+/*\r
+* ============LICENSE_START=======================================================\r
+* ONAP : CDS\r
+* ================================================================================\r
+* Copyright (C) 2019 TechMahindra\r
+*=================================================================================\r
+* Licensed under the Apache License, Version 2.0 (the "License");\r
+* you may not use this file except in compliance with the License.\r
+* You may obtain a copy of the License at\r
+*\r
+* http://www.apache.org/licenses/LICENSE-2.0\r
+*\r
+* Unless required by applicable law or agreed to in writing, software\r
+* distributed under the License is distributed on an "AS IS" BASIS,\r
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+* See the License for the specific language governing permissions and\r
+* limitations under the License.\r
+* ============LICENSE_END=========================================================\r
+*/\r
+\r
+.form-field {\r
+ width: 40%;\r
+ padding:10px;\r
+}\r
+.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after, .mat-input-element:disabled {\r
+ color: rgba(0,0,0,.87);\r
+}\r
+.mat-button{\r
+ float: center;\r
+ color:white;\r
+ background-color:#3f51b5;\r
+ margin-top: 10px;\r
+ margin: 5px;\r
+ border-radius: 6px;\r
+}
\ No newline at end of file
--- /dev/null
+/*
+* ============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();
+ });
+});
--- /dev/null
+/*
+* ============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);
+ }
+}
*/-->
<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>
<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>
position: relative;\r
}\r
\r
-button.mat-menu-item {\r
+.matStepNextBtn {\r
width: auto;\r
- float: left;\r
- border-radius: 4px;\r
- background-color: #3f51b5;\r
+ float: center;\r
+ color:white;\r
+ background-color:#3f51b5;\r
+ margin-top: 10px;\r
margin: 5px;\r
- cursor: pointer;\r
- color: white;\r
+ border-radius: 6px;\r
}\r
\r
.flexBox {\r
}\r
\r
.mat-card-actions {\r
- margin-left: 0px !important;\r
+ margin-left: 50px !important;\r
margin-right: 0px !important;\r
padding: 0px 0 !important;\r
}
\ No newline at end of file
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',
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');
+ })
+ }
+ });
}
}
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,
MatRadioModule,
MatFormFieldModule,
MatStepperModule,
- MatAutocompleteModule
+ MatAutocompleteModule,
+ MatDialogModule
],
- providers: [ SearchCatalogService ]
+ providers: [ SearchCatalogService ],
+ entryComponents: [ CatalogDataDialogComponent ]
})
export class SearchCatalogModule { }
Code Review / ccsdk / cds.git / commitdiff