adding new designer component, sort and configuration dashboard

Issue-ID: CCSDK-1982
Issue-ID: CCSDK-1984
Issue-ID: CCSDK-1983

Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I05d12bbf5ebc940bd6983da06af3f85ee18eb723

4 files changed, 59 insertions, 0 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html
new file mode 100644
index 000000000..df272bce4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html
@@ -0,0 +1,15 @@
+<div>
+    <b>Select from other packages:</b>
+    <div class="actions-scroll">
+        <div class="custom-control custom-checkbox" *ngFor="let action of actions">
+            <input type="checkbox" class="custom-control-input" id="customCheck1">
+            <label class="custom-control-label" for="customCheck1">Action name
+                <p class="m-0">{{action}}</p>
+            </label>
+        </div>
+    </div>
+    <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+        <button type="button" class="btn btn-secondary mr-3">Insert</button>
+        <button type="button" class="btn btn-secondary">Cancel</button>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts
new file mode 100644
index 000000000..2e30615e0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsComponent } from './actions.component';
+
+describe('ActionsComponent', () => {
+  let component: ActionsComponent;
+  let fixture: ComponentFixture<ActionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts
new file mode 100644
index 000000000..144cd0a70
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts
@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-actions',
+    templateUrl: './actions.component.html',
+    styleUrls: ['./actions.component.css']
+})
+export class ActionsComponent implements OnInit {
+    actions: string[] = [];
+
+    constructor() {
+      this.actions.push('action 1 ');
+      this.actions.push('action 2');
+    }
+
+    ngOnInit() {
+    }
+
+}