diff options
Diffstat (limited to 'cds-ui/client')
16 files changed, 616 insertions, 48 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/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html index 9d698bd0a..9dbaf6728 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html @@ -1,4 +1,4 @@ - +<!-- ============LICENSE_START========================================== =================================================================== Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved. @@ -18,3 +18,28 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> +<div class="container"> + <div class="fileViewContainer"> + <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> + <!-- This is the tree node template for leaf nodes --> + <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> + <!-- use a disabled button to provide padding for tree leaf --> + <button mat-icon-button disabled></button> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + <!-- This is the tree node template for expandable nodes --> + <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> + <button mat-icon-button matTreeNodeToggle + [attr.aria-label]="'toggle ' + node.name"> + <mat-icon class="mat-icon-rtl-mirror"> + {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} + </mat-icon> + </button> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + </mat-tree> + </div> + <div class="editorConatiner"> + <p>Here comes the actual editor</p> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss index ed77e232b..f7e6f493c 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss @@ -17,4 +17,21 @@ 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============================================ -*/
\ No newline at end of file +*/ +.container { + display: flex; + flex-direction: row; + + .fileViewContainer { + width: 20%; + margin: 2px + } + + .editorConatiner { + width: 80%; + background-color: gainsboro; + height: 533px; + margin-left: 5em; + } + +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts index 18b4563fa..bf135bba2 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts @@ -20,6 +20,60 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; + +interface FoodNode { + name: string; + children?: FoodNode[]; +} + +const TREE_DATA: FoodNode[] = [ + { + name: 'Definitions', + children: [ + {name: 'activation-blueprint.json'}, + {name: 'artifacts_types.json'}, + {name: 'data_types.json'}, + ] + }, + { + name: 'Scripts', + children: [ + { + name: 'kotlin', + children: [ + {name: 'ScriptComponent.cba.kts'}, + {name: 'ResourceAssignmentProcessor.cba.kts'}, + ] + } + ] + }, + { + name: 'Templates', + children: [ + { + name: 'baseconfig-template' + } + ] + }, + { + name: 'TOSCA-Metada', + children: [ + { + name: 'TOSCA.meta' + } + ] + }, +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + @Component({ selector: 'app-editor', @@ -28,9 +82,33 @@ import { Component, OnInit } from '@angular/core'; }) export class EditorComponent implements OnInit { - constructor() { } + private transformer = (node: FoodNode, level: number) => { + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + }; + } + + treeControl = new FlatTreeControl<ExampleFlatNode>( + node => node.level, node => node.expandable); + + treeFlattener = new MatTreeFlattener( + this.transformer, node => node.level, node => node.expandable, node => node.children); + + dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + + constructor() { + this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { } + fileClicked(file) { + console.log('selected file:' + file); + } + } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html index d59597021..8397ae9f6 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -20,7 +20,7 @@ limitations under the License. --> <div class="modifyTemp"> - <div class="outerDiv divone"> + <div *ngIf="designerMode" class="outerDiv divone"> <mat-accordion> <mat-expansion-panel> <mat-expansion-panel-header style="background-color: #f1f1f1"> @@ -48,20 +48,16 @@ limitations under the License. </mat-accordion> </div> + <button class="enrich-btn">Enrichment</button> + <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button> - <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> - <button style="cursor: pointer; position: absolute;top: 4em;right: 27em; padding: 6px;color: white; background-color:#3f51b5;margin-right: 2em;border-radius: 2em; ">Enrichment</button> - <button (click) ="changeView()" style="cursor: pointer; position: absolute;top: 4em;right: 22em; padding: 6px;color: white;background-color:#3f51b5; border-radius: 2em">{{viewText}}</button> + <div *ngIf="designerMode" class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer> - <app-editor *ngIf="editorMode"></app-editor> </div> + <app-editor class="editor-selector" *ngIf="editorMode"></app-editor> - <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)"> - <div *ngFor="let item of list" cdkDrag>{{ item }}</div> - </div> - - <div *ngIf="on" id="overlay" class="outerDiv divThree"> + <div *ngIf="designerMode && on" id="overlay" class="outerDiv divThree"> <mat-accordion style="width: 100%"> <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss index 1ddb2559e..74303dcfb 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -78,4 +78,31 @@ limitations under the License. .mat-expansion-panel-header-title { color: white !important; +} + +.enrich-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 27em; + padding: 6px; + color: white; + background-color:#3f51b5; + margin-right: 2em; + border-radius: 2em; +} + +.toggle-view-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 20em; + padding: 6px; + color: white; + background-color:#3f51b5; + border-radius: 2em +} + +.editor-selector { + width: 100%; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts index 1efdefce6..809f31027 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts @@ -28,9 +28,9 @@ import { Component, OnInit } from '@angular/core'; }) export class ModifyTemplateComponent implements OnInit { - designerMode: boolean = true; - editorMode: boolean = false; - viewText: string = "Editor View"; + designerMode: boolean = false; + editorMode: boolean = true; + viewText: string = "Designer View"; constructor() { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts index cfcb6471a..033950b3a 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts @@ -19,14 +19,17 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit, EventEmitter, Output, AfterViewInit, AfterContentInit, OnChanges, DoCheck, AfterViewChecked } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { IMetaData } from '../../../../common/core/store/models/metadata.model'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; import { A11yModule } from '@angular/cdk/a11y'; + import { IAppState } from '../../../../common/core/store/state/app.state'; -import { Store } from '@ngrx/store'; -import { Observable } from 'rxjs'; import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IMetaData } from '../../../../common/core/store/models/metadata.model'; +import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; @Component({ selector: 'app-metadata', @@ -37,8 +40,8 @@ export class MetadataComponent implements OnInit { CBAMetadataForm: FormGroup; metadata: IMetaData; bpState: Observable<IBlueprintState>; - @Output() metadataform = new EventEmitter<IMetaData>(); - + blueprint: IBlueprint; + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { this.bpState = this.store.select('blueprint'); this.CBAMetadataForm = this.formBuilder.group({ @@ -77,7 +80,8 @@ export class MetadataComponent implements OnInit { UploadMetadata() { this.metadata = Object.assign({}, this.CBAMetadataForm.value); - this.metadataform.emit(this.metadata); + this.blueprint.metadata = this.metadata; + this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); } }
\ 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); + } + } +} |