diff options
4 files changed, 270 insertions, 0 deletions
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); + } + } +} |