Merge "Adding new component sources-template"

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);
+    }
+  }    
+}