rename ui project from client-franfurt to designer-client

Issue-ID: CCSDK-1981
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Ic53ea9cf4a48d0ba60f91aa27960e05c77ae9b07

20 files changed, 604 insertions, 0 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
new file mode 100644
index 000000000..6ce3a53a1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -0,0 +1,18 @@
+<div class="dropdown packagesFilter w-100">
+    <input class="dropdown-toggle" type="text">
+    <div class="dropdown-text">ALL PACKAGES TAGS</div>
+    <ul class="dropdown-content w-100">
+        <li>
+            <div class="form-group">
+                <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
+            </div>
+        </li>
+        <li *ngFor="let tag of viewedTags">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}>
+                <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+            </div>
+        </li>
+    </ul>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
new file mode 100644
index 000000000..8285d8962
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 { TagsFilteringComponent } from './filter-by-tags.component';
+
+describe('SearchByTagsComponent', () => {
+  let component: TagsFilteringComponent;
+  let fixture: ComponentFixture<TagsFilteringComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TagsFilteringComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagsFilteringComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
new file mode 100644
index 000000000..b4007215a
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -0,0 +1,100 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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, OnDestroy, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model';
+
+@Component({
+    selector: 'app-filter-by-tags',
+    templateUrl: './filter-by-tags.component.html',
+    styleUrls: ['./filter-by-tags.component.css']
+})
+
+export class TagsFilteringComponent implements OnInit {
+
+    page: BluePrintPage;
+    tags: string[] = [];
+    viewedTags: string[] = [];
+    searchTag = '';
+    viewedPackages: BlueprintModel[] = [];
+    private checkBoxTages = '';
+
+
+    constructor(private packagesStore: PackagesStore,
+    ) {
+        this.packagesStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.page) {
+                this.viewedPackages = state.page.content;
+                this.viewedPackages.forEach(element => {
+                    element.tags.split(',').forEach(tag => {
+                        this.tags.push(tag.trim());
+                    });
+                    this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
+                    this.assignTags();
+
+                });
+            }
+        });
+    }
+
+    ngOnInit() {
+
+    }
+
+    reloadChanges(event: any) {
+        this.searchTag = event.target.value;
+        this.filterItem(this.searchTag);
+    }
+
+    private assignTags() {
+        this.viewedTags = this.tags;
+    }
+
+    private filterItem(value) {
+        if (!value) {
+            this.assignTags();
+        }
+        this.viewedTags = this.tags.filter(
+            item => item.toLowerCase().indexOf(value.toLowerCase()) > -1
+        );
+    }
+
+    reloadPackages(event: any) {
+
+        if (!event.target.checked) {
+            this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
+                .replace(event.target.id, '');
+        } else {
+            this.checkBoxTages += event.target.id.trim() + ',';
+        }
+        console.log(this.checkBoxTages);
+        if (!this.checkBoxTages.includes(',')) {
+            return;
+        }
+        this.viewedPackages = [];
+        // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
+        //   this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+    }
+
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
new file mode 100644
index 000000000..18428d4b4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -0,0 +1,104 @@
+<div class="row packages-card">
+    <div class="col-lg-3 col-md-6">
+        <!--Add Package Card-->
+        <div class="card addPaackage-card">
+            <div class="card-body text-center">
+                <img src="/assets/img/icon-addPackage.svg">
+            </div>
+            <div class="card-footer row">
+                <div class="col">
+                    <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages">
+
+        <!--Card 1-->
+        <div>
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-9 pr-0">
+                            <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)">
+                                <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
+                                {{bluePrint.artifactName}}
+                            </h5>
+
+                        </div>
+                        <div class="col-3">
+
+                            <div class="dropdown">
+                                <input class="dropdown-toggle" type="text">
+                                <div class="dropdown-text">
+                                    <img src="/assets/img/icon-menuDots.svg" title="Actions">
+                                </div>
+                                <ul class="dropdown-content">
+                                    <li class="action-clone">
+                                        <a href="#">Clone</a>
+                                    </li>
+                                    <li class="action-archive">
+                                        <a href="#">Archive</a>
+                                    </li>
+                                    <li class="action-delete">
+                                        <a href="#">Delete</a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
+                         </p>
+                         <p>By {{bluePrint.updatedBy}}</p>
+                            <ul class="package-contributers">
+                                <li>
+                                    <button type="button" class="border-fade" data-toggle="tooltip"
+                                            data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user1.jpeg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user2.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user3.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <a href="">5 contributors</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <div class="row">
+                            <div class="col">
+                                <button type="button" class="btn btn-card-topology">Topology View
+                                </button>
+                            </div>
+                            <div class="col">
+                                <button type="button" class="btn btn-card-config">Configuration</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
new file mode 100644
index 000000000..f45f25996
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageListComponent } from './package-list.component';
+import { PackagesStore } from '../../packages.store';
+import { getBluePrintPageMock } from '../../blueprint.page.mock';
+import { of } from 'rxjs';
+
+describe('PackageListComponent', () => {
+  let component: PackageListComponent;
+  let fixture: ComponentFixture<PackageListComponent>;
+  let store: Partial<PackagesStore>;
+
+  beforeEach(async(() => {
+
+    store = { state$: of(getBluePrintPageMock()) };
+
+    TestBed.configureTestingModule({
+      declarations: [ PackageListComponent ],
+      providers: [{ provide: PackagesStore, useValue: store }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackageListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+
+  // TODO create another test with store in mind
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
new file mode 100644
index 000000000..c7ec0af20
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {BlueprintModel} from '../../model/BluePrint.model';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+    selector: 'app-packages-list',
+    templateUrl: './package-list.component.html',
+    styleUrls: ['./package-list.component.css']
+})
+export class PackageListComponent implements OnInit {
+
+    viewedPackages: BlueprintModel[] = [];
+
+
+    constructor(private packagesStore: PackagesStore) {
+        console.log('PackageListComponent');
+        this.packagesStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.page) {
+                this.viewedPackages = state.page.content;
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.packagesStore.getAll();
+    }
+
+    testDispatch(bluePrint: BlueprintModel) {
+        console.log(bluePrint.id);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
new file mode 100644
index 000000000..b5245f757
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -0,0 +1,7 @@
+<!--Package Paginator-->
+<div class="col package-paginator pr-0">
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)"
+
+    ></ngb-pagination>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts
new file mode 100644
index 000000000..ce7f99f62
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagePaginationComponent } from './package-pagination.component';
+
+describe('PackagePaginationComponent', () => {
+  let component: PackagePaginationComponent;
+  let fixture: ComponentFixture<PackagePaginationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PackagePaginationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackagePaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
new file mode 100644
index 000000000..49f91316b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -0,0 +1,41 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'app-package-pagination',
+    templateUrl: './package-pagination.component.html',
+    styleUrls: ['./package-pagination.component.css'],
+})
+export class PackagePaginationComponent implements OnInit {
+    pageNumber: number;
+    totalCount: number;
+    pageSize: number;
+    previousPage: number;
+
+    constructor(private packagesStore: PackagesStore) {
+        this.pageSize = packagesStore.pageSize;
+
+        this.packagesStore.state$
+            .subscribe(state => {
+                this.pageNumber = state.currentPage;
+                this.totalCount = state.totalPackages;
+            });
+    }
+
+    ngOnInit() {
+    }
+
+    public getPageFromService(page) {
+        console.log('getPageFromService', page);
+        if (isNaN(page)) {
+            page = 1;
+            console.log('page change to first...', page);
+        }
+        if (this.previousPage !== page) {
+            this.packagesStore.getPage(page - 1, this.packagesStore.pageSize);
+            this.previousPage = page;
+        }
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts
new file mode 100644
index 000000000..fe156b6cb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 { PackagesDashboardComponent } from './packages-dashboard.component';
+
+describe('PackagesDashboardComponent', () => {
+  let component: PackagesDashboardComponent;
+  let fixture: ComponentFixture<PackagesDashboardComponent>;
+
+  beforeEach(async(() => {
+
+
+    TestBed.configureTestingModule({
+      declarations: [PackagesDashboardComponent ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PackagesDashboardComponent);
+    component = fixture.componentInstance;
+  }));
+
+  fit('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
new file mode 100644
index 000000000..ac510893b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -0,0 +1,61 @@
+<app-header>
+</app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+
+        <div class="container-fluid body-container">
+            <nav class="row">
+                <!--Nav Tabs-->
+                <div class="col pr-0">
+                    <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+                           role="tab" aria-controls="nav-home"
+                           aria-selected="true">All</a>
+                        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
+                           role="tab" aria-controls="nav-profile"
+                           aria-selected="false">Deployed</a>
+                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
+                           role="tab" aria-controls="nav-contact"
+                           aria-selected="false">Under Construction</a>
+                        <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
+                           role="tab" aria-controls="nav-contact1"
+                           aria-selected="false">Archived</a>
+                    </div>
+                </div>
+                <!--Nav Search & Filter-->
+                <div class="col search-filter-col">
+                    <div class="row">
+                        <div class="col-7">
+                            <app-packages-search></app-packages-search>
+                        </div>
+                        <div class="col-5 pl-2">
+                            <app-filter-by-tags class="w-100"></app-filter-by-tags>
+                        </div>
+                        
+                    </div>
+                </div>
+            </nav>
+            <div class="row mt-4">
+                <div class="col">
+                    <div class="tab-content" id="nav-tabContent">
+                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+                            <div class="row">
+                                <div class="col sort-packages">
+                                    
+                                </div>
+                                <app-package-pagination></app-package-pagination>
+            
+                            </div>
+                            <app-packages-list></app-packages-list>
+            
+                        </div>
+                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+                        <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
new file mode 100644
index 000000000..4e33a9df1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -0,0 +1,37 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 {PackagesStore} from '../packages.store';
+
+@Component({
+    selector: 'app-packages-dashboard',
+    templateUrl: './packages-dashboard.component.html',
+    styleUrls: ['./packages-dashboard.component.css']
+})
+export class PackagesDashboardComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+
+        console.log('PackagesDashboardComponent');
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
new file mode 100644
index 000000000..e7c605fd1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -0,0 +1,4 @@
+<div class="searchBox">
+    <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+    <button class="searchButton" href="#"></button>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
new file mode 100644
index 000000000..7e50c55cc
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagesSearchComponent } from './search-by-packages.component';
+
+describe('PackagesSearchComponent', () => {
+  let component: PackagesSearchComponent;
+  let fixture: ComponentFixture<PackagesSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PackagesSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackagesSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
new file mode 100644
index 000000000..91304e5c2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+    selector: 'app-packages-search',
+    templateUrl: './search-by-packages.component.html',
+    styleUrls: ['./search-by-packages.component.css']
+})
+export class PackagesSearchComponent implements OnInit {
+
+    private searchQuery = '';
+
+    constructor(private packagesStore: PackagesStore) {
+    }
+
+    ngOnInit() {
+    }
+
+
+    searchPackages(event: any) {
+        this.searchQuery = event.target.value;
+        this.searchQuery = this.searchQuery.trim();
+        this.packagesStore.search(this.searchQuery);
+    }
+}