diff options
Diffstat (limited to 'cds-ui')
9 files changed, 446 insertions, 25 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html index 9a3ba1edd..64556fb74 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html @@ -20,29 +20,26 @@ limitations under the License. <router-outlet></router-outlet> --> <mat-card class="CBAform"> <mat-card-content> - <mat-horizontal-stepper [linear]="isLinear" #stepper> - <mat-step [stepControl]="firstFormGroup"> - <ng-template matStepLabel>CBA Metadata</ng-template> - <app-select-template></app-select-template> - <div> - <button mat-button matStepperNext style="color:white;background:gray">Proceed</button> - </div> - </mat-step> - <mat-step [stepControl]="secondFormGroup"> - <ng-template matStepLabel>Controller Blueprint Designer</ng-template> - <app-modify-template></app-modify-template> - <div style="position:relative"> - <button mat-button matStepperNext style="color:white;background:gray; right: 20px; position: absolute;bottom:5px; ">Proceed</button> - </div> - </mat-step> - <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Test</ng-template> - <app-test-template></app-test-template> - </mat-step> - <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Deploy</ng-template> - <app-deploy-template></app-deploy-template> - </mat-step> - </mat-horizontal-stepper> + <mat-horizontal-stepper [linear]="isLinear" #stepper> + <mat-step [stepControl]="firstFormGroup"> + <ng-template matStepLabel>CBA Metadata</ng-template> + <app-select-template></app-select-template> + </mat-step> + <mat-step [stepControl]="secondFormGroup"> + <ng-template matStepLabel>Controller Blueprint Designer</ng-template> + <app-modify-template></app-modify-template> + <div style="position:relative"> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </mat-step> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Test</ng-template> + <app-test-template></app-test-template> + </mat-step> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Deploy</ng-template> + <app-deploy-template></app-deploy-template> + </mat-step> + </mat-horizontal-stepper> </mat-card-content> - </mat-card> +</mat-card>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html new file mode 100644 index 000000000..015fd7dfa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html @@ -0,0 +1,33 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 [formGroup]="ResourceMetadata"> + <mat-form-field class="form-field"> + <input matInput placeholder="Name" formControlName="Resource_Name"> + </mat-form-field><mat-form-field class="form-field"> + <input matInput placeholder="Tags" formControlName="_tags"> + </mat-form-field> + <mat-form-field class="form-field"> + <input matInput placeholder="Type" formControlName="_type"> + </mat-form-field> + <mat-form-field class="form-field" > + <textarea matInput placeholder="Description" formControlName="_description"></textarea> + </mat-form-field> +</form>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss new file mode 100644 index 000000000..d10ad488f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss @@ -0,0 +1,33 @@ +/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 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=========================================================
+*/
+
+
+.meta-form {
+ width: 100%;
+}
+
+.form-field {
+ width: 40%;
+ padding:10px;
+}
+
+.form-table {
+ width: 100%;
+}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts new file mode 100644 index 000000000..f157ca58f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 { ResourceMetadataComponent } from './resource-metadata.component'; + +describe('ResourceMetadataComponent', () => { + let component: ResourceMetadataComponent; + let fixture: ComponentFixture<ResourceMetadataComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceMetadataComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceMetadataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts new file mode 100644 index 000000000..119b7a80e --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts @@ -0,0 +1,43 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +@Component({ + selector: 'app-resource-metadata', + templateUrl: './resource-metadata.component.html', + styleUrls: ['./resource-metadata.component.scss'] +}) +export class ResourceMetadataComponent implements OnInit { + + ResourceMetadata: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } + + ngOnInit() { + this.ResourceMetadata = this._formBuilder.group({ + Resource_Name: ['', Validators.required], + _tags: ['', Validators.required], + _description : ['', Validators.required], + _type: ['', Validators.required], + }); + } +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html new file mode 100644 index 000000000..ee59b70b3 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html @@ -0,0 +1,56 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 cdkDropListGroup> + <div class="sources-container"> + <div + cdkDropList + [cdkDropListData]="todo" + class="sources-list" + (cdkDropListDropped)="drop($event)"> + <div class="sources-box" *ngFor="let item of todo" cdkDrag> + <mat-expansion-panel class="expansion-panel"> + <mat-expansion-panel-header> + <mat-panel-title> + {{item}} + </mat-panel-title> + </mat-expansion-panel-header> + {{item}} + </mat-expansion-panel> + </div> + </div> + </div> + + <div class="list-container"> + <h3>Source Options</h3> + <mat-form-field> + <input [(ngModel)]="searchText" type="input" matInput placeholder="search sources"> + <button matSuffix mat-icon-button><mat-icon>search</mat-icon></button> + <mat-hint>db,mdsal,input,default,..</mat-hint> + </mat-form-field> + <br><br> + <div + cdkDropList + [cdkDropListData]="done" + class="options-list" + (cdkDropListDropped)="drop($event)"> + <div class="options-box" *ngFor="let item of done | search : searchText" cdkDrag>{{item}}</div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss new file mode 100644 index 000000000..a76b60aa8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss @@ -0,0 +1,113 @@ + /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 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=========================================================
+*/
+.sources-container {
+ width: 900px;
+ max-width: 100%;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ vertical-align: top;
+ border-bottom: solid 1px #ccc;
+ border-radius: 4px;
+}
+.list-container {
+ min-width: 200px;
+ max-width: 100%;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ vertical-align: top;
+}
+.sources-list {
+ border: solid 1px #ccc;
+ width: 900px;
+ min-height: 30px;
+ background: white;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ border-bottom: solid 1px #ccc;
+}
+.options-list {
+ min-height: 30px;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+}
+.sources-box {
+ //border-bottom: solid 1px #ccc;
+ color: rgba(0, 0, 0, 0.87);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background:white;
+ font-size: 14px;
+ min-height: 30px;
+
+}
+.options-box {
+ border: solid 1px #ccc;
+ color: white;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background:gray;
+ font-size: 14px;
+ min-height: 30px;
+ width: 100px;
+ padding-left: 15px;
+}
+
+.cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+ opacity: 0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.sources-box:last-child {
+ border: none;
+}
+
+.options-list.cdk-drop-list-dragging .options-box:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.expansion-panel{
+ border: solid 0.5px #ededed;
+ background: white;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+ }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts new file mode 100644 index 000000000..4a94fed93 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 { SourcesTemplateComponent } from './sources-template.component'; + +describe('SourcesTemplateComponent', () => { + let component: SourcesTemplateComponent; + let fixture: ComponentFixture<SourcesTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SourcesTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SourcesTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts new file mode 100644 index 000000000..149008518 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts @@ -0,0 +1,57 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 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 } from '@angular/core'; +import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'app-sources-template', + templateUrl: './sources-template.component.html', + styleUrls: ['./sources-template.component.scss'] +}) +export class SourcesTemplateComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + + todo = [ + 'MDSAL' + ]; + + done = [ + 'INPUT', + 'DEFAULT', + 'DB', + 'NETBOX' + ]; + + drop(event: CdkDragDrop<string[]>) { + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem(event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex); + } + } +} |