Merge "add pacakges dashboard component to new cds ui"

24 files changed, 862 insertions, 2 deletions

diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts
new file mode 100644
index 000000000..9e0ce71d2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts
@@ -0,0 +1,50 @@
+import { BluePrintPage } from './model/BluePrint.model';
+export function getBluePrintPageMock(): BluePrintPage {
+    return {
+        content: [
+            {
+                id: 'bc0dabea-3112-4202-a4b9-6a525bcc19a9',
+                artifactUUId: null,
+                artifactType: 'SDNC_MODEL',
+                artifactVersion: '1.0.0',
+                artifactDescription: 'Controller Blueprint for vLB_CDS123:1.0.0',
+                internalVersion: null,
+                createdDate: '2019-10-30T13:55:16.000Z',
+                artifactName: 'vLB_CDS123',
+                published: 'N',
+                updatedBy: 'Abdelmuhaimen Seaudi',
+                tags: 'test, vDNS-CDS, SCALE-OUT, MARCO'
+            },
+            {
+                id: 'a741913f-2b1b-4eb8-94b3-8c6b08928f0a',
+                artifactUUId: null,
+                artifactType: 'SDNC_MODEL',
+                artifactVersion: '1.0.0',
+                artifactDescription: 'Controller Blueprint for vLB_CDS12312312:1.0.0',
+                internalVersion: null,
+                createdDate: '2019-10-30T14:58:04.000Z',
+                artifactName: 'vLB_CDS12312312',
+                published: 'N',
+                updatedBy: 'Abdelmuhaimen Seaudi',
+                tags: 'test, vDNS-CDS, SCALE-OUT, MARCO'
+            }
+        ],
+        pageable: {
+            sort: {
+                sorted: true,
+                unsorted: false,
+                empty: false
+            },
+            offset: 0,
+            pageSize: 2,
+            pageNumber: 0,
+            paged: true,
+            unpaged: false
+        },
+        last: false,
+        totalElements: 4,
+        totalPages: 2,
+        first: true,
+        empty: false
+    };
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
new file mode 100644
index 000000000..46dab88f8
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
@@ -0,0 +1,58 @@
+/*
+============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 { Page } from 'src/app/common/model/page';
+
+export class BlueprintModel {
+
+
+    constructor(id: string, artifactUUId: null, artifactType: string,
+                artifactVersion: string, artifactDescription: string,
+                internalVersion: null, createdDate: string, artifactName: string,
+                published: string, updatedBy: string, tags: string) {
+        this.id = id;
+        this.artifactUUId = artifactUUId;
+        this.artifactType = artifactType;
+        this.artifactVersion = artifactVersion;
+        this.artifactDescription = artifactDescription;
+        this.internalVersion = internalVersion;
+        this.createdDate = createdDate;
+        this.artifactName = artifactName;
+        this.published = published;
+        this.updatedBy = updatedBy;
+        this.tags = tags;
+    }
+
+    id: string;
+    artifactUUId?: null;
+    artifactType: string;
+    artifactVersion: string;
+    artifactDescription: string;
+    internalVersion?: null;
+    createdDate: string;
+    artifactName: string;
+    published: string;
+    updatedBy: string;
+    tags: string;
+}
+
+export class BluePrintPage extends Page<BlueprintModel> {
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
new file mode 100644
index 000000000..f67b3ca6a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -0,0 +1,92 @@
+<div class="row packages-card"><div class="col-lg-3 col-md-6 p-0">
+    <!--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 text-right pr-0">
+                <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                </a>
+            </div>
+            <div class="col pr-0">
+                <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 p-0" *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">{{bluePrint.artifactName}}</h5>
+                        <p>Last modified {{bluePrint.createdDate}} 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 class="col-3">
+                        <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
+                        <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="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 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>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
new file mode 100644
index 000000000..4ef0faf45
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -0,0 +1,28 @@
+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[] = [];
+  numberOfPackages: number;
+
+
+  constructor(private packagesStore: PackagesStore) {
+    console.log('PackageListComponent');
+    this.packagesStore.state$.subscribe(page => {
+      console.log(page);
+      this.viewedPackages = page.content;
+    });
+  }
+
+  ngOnInit() {
+    // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize);
+  }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
new file mode 100644
index 000000000..cdc0aaa1f
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -0,0 +1,4 @@
+<div class="col package-paginator pr-0">
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [(pageSize)]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)"></ngb-pagination>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
new file mode 100644
index 000000000..49a88c6c2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { PackagesStore } from '../../packages.store';
+
+@Component({
+  selector: 'app-package-pagination',
+  templateUrl: './package-pagination.component.html',
+  styleUrls: ['./package-pagination.component.css'],
+})
+export class PackagePaginationComponent implements OnInit {
+  pageNumber = 0;
+  totalCount = 4;
+  pageSize: number;
+
+  constructor(private packagesStore: PackagesStore) {
+    this.pageSize = packagesStore.pageSize;
+   }
+
+  ngOnInit() {
+  }
+
+  public getPageFromService(page) {
+    console.log('getPageFromService', page);
+    if (isNaN(page)) {
+      page = 1;
+      console.log('page change to first...', page);
+    }
+    this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize);
+  }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
new file mode 100644
index 000000000..09a343546
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -0,0 +1,67 @@
+<app-header>
+</app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <!-- <router-outlet></router-outlet> -->
+        <!--Page Title-->
+        <header class="page-title">
+            <div class="row">
+                <h2 class="col m-0">CBA Packages
+                    <span>(20 packages)</span>
+                </h2>
+                <div class="col">
+                </div>
+            </div>
+        </header>
+
+        <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>
+                <app-search-by-tags class="w-50"></app-search-by-tags>
+            </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">
+                                <!--Package Sort-->
+                                <div class="col sort-packages">
+                                    Sort by:
+                                    <div class="dropdown">
+                                        <input class="dropdown-toggle" type="text">
+                                        <div class="dropdown-text">Recent</div>
+                                        <ul class="dropdown-content">
+                                            <li>
+                                                <a href="#">Name</a>
+                                            </li>
+                                            <li>
+                                                <a href="#">Recent</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <!--Package Paginator-->
+                                <app-package-pagination></app-package-pagination>
+                            </div>
+                            <app-packages-list></app-packages-list>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </div>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
new file mode 100644
index 000000000..0820d9356
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -0,0 +1,36 @@
+/*
+============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';
+
+@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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
new file mode 100644
index 000000000..ea6c742a0
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
@@ -0,0 +1,46 @@
+<!--Nav Search & Filter-->
+<div class="col search-filter-col">
+    <div class="row">
+        <div class="col-7">
+            <div class="searchBox">
+                <input class="searchInput" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+                <button class="searchButton" href="#"></button>
+            </div>
+        </div>
+        <div class="col-5 pl-2">
+            <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>
+                        <!--<div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck2">
+                            <label class="custom-control-label" for="customCheck2">Check this custom
+                                checkbox</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck3">
+                            <label class="custom-control-label" for="customCheck3">Check this custom
+                                checkbox</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck4">
+                            <label class="custom-control-label" for="customCheck4">Check this custom
+                                checkbox</label>
+                        </div>-->
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts
new file mode 100644
index 000000000..aaacfb9e8
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+============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 { SearchByTagsComponent } from './search-by-tags.component';
+
+describe('SearchByTagsComponent', () => {
+  let component: SearchByTagsComponent;
+  let fixture: ComponentFixture<SearchByTagsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchByTagsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchByTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts
new file mode 100644
index 000000000..b5cc52fc0
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts
@@ -0,0 +1,94 @@
+/*
+============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-search-by-tags',
+    templateUrl: './search-by-tags.component.html',
+    styleUrls: ['./search-by-tags.component.css']
+})
+
+export class SearchByTagsComponent implements OnInit {
+
+    page: BluePrintPage;
+    tags: string[] = [];
+    viewedTags: string[] = [];
+    searchTag = '';
+    viewedPackages: BlueprintModel[] = [];
+    private checkBoxTages = '';
+    private searchPackage = '';
+
+    constructor(private packagesStore: PackagesStore,
+    ) {
+    }
+
+    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.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+    }
+
+    searchPackages(event: any) {
+        this.searchPackage = event.target.value;
+        this.searchPackage = this.searchPackage.trim();
+        if (this.searchPackage) {
+            this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2);
+
+        } else {
+            this.packagesStore.getPagedPackages(0, 2);
+        }
+    }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
new file mode 100644
index 000000000..116441bc2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
@@ -0,0 +1,12 @@
+import {TestBed} from '@angular/core/testing';
+
+import {SearchByTagsService} from './search-by-tags.service';
+
+describe('SearchByTagsService', () => {
+    beforeEach(() => TestBed.configureTestingModule({}));
+
+    it('should be created', () => {
+        const service: SearchByTagsService = TestBed.get(SearchByTagsService);
+        expect(service).toBeTruthy();
+    });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
new file mode 100644
index 000000000..deaa4d957
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
@@ -0,0 +1,74 @@
+/*
+============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 {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../common/core/services/api.typed.service';
+import {BlueprintURLs} from '../../../common/constants/app-constants';
+import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackagesListService {
+    packages: BlueprintModel[] = [];
+    originalPackage: BlueprintModel[] = [];
+    private bluePrintModel: BlueprintModel;
+    private numberOfPackages: number;
+
+    constructor(private api: ApiService<BluePrintPage>) {
+    }
+
+    getPagedPackages(pageNumber: number, pageSize: number): Observable<BluePrintPage[]> {
+        return this.api.get(BlueprintURLs.getPagedBlueprints, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: 'DATE'
+        });
+    }
+
+    searchByTags(keyword: string): Observable<any> {
+        return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
+    }
+
+
+    // getPackageNumber(): number {
+    //     this.getCountOfAllPackages(this.api.get(BlueprintURLs.countOfAllBluePrints));
+    //     return this.numberOfPackages;
+
+    // }
+
+    getCountOfAllPackages(observable: Observable<number>) {
+        observable.subscribe(data => {
+            this.numberOfPackages = data;
+            console.log(data);
+        });
+    }
+
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+        return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: 'DATE'
+        });
+    }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
index 63b84ebb8..0bcd0fa99 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
@@ -1,20 +1,32 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ApiService} from '../../../common/core/services/api.typed.service';
 import {PackagesRoutingModule} from './packages.routing.module';
 import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import {SearchByTagsComponent} from './packages-dashboard/search-by-tags/search-by-tags.component';
+import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
+import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
 import { DesignerComponent } from './designer/designer.component';
 import { SidebarModule } from 'ng-sidebar';
+import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
 
 
 @NgModule({
-    declarations: [DesignerComponent],
+    declarations: [PackagesDashboardComponent,
+        SearchByTagsComponent,
+        PackageListComponent,
+        DesignerComponent,
+        PackagePaginationComponent
+    ],
     imports: [
         CommonModule,
         PackagesRoutingModule,
         NgbPaginationModule,
+        SharedModulesModule,
         SidebarModule.forRoot(),
     ],
-    providers: [],
+    providers: [ApiService],
     bootstrap: []
 })
 export class PackagesModule {
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
index dc4856806..ad9f36979 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -1,9 +1,14 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
 import { DesignerComponent } from './designer/designer.component';
 
 
 const routes: Routes = [
+    {
+        path: '',
+        component: PackagesDashboardComponent
+    },
     { path: 'designer', component: DesignerComponent },
 ];
 
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts
new file mode 100644
index 000000000..b091ed90e
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts
@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { PackagesStore } from './packages.store';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { PackagesListService } from './packages-list.service';
+import { of } from 'rxjs';
+import { BluePrintPage } from './model/BluePrint.model';
+import { getBluePrintPageMock } from './blueprint.page.mock';
+
+describe('PackagesStore', () => {
+    let store: PackagesStore;
+
+    const MOCK_BLUEPRINTS_PAGE: BluePrintPage = getBluePrintPageMock();
+
+    let httpMock: HttpTestingController;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientTestingModule
+            ],
+            providers: [
+                PackagesStore,
+                PackagesListService
+            ]
+        });
+        httpMock = TestBed.get(HttpTestingController);
+
+    });
+
+    it('should correctly get page of packages', () => {
+        const packagesServiceSpy = jasmine.createSpyObj('PackagesListService', ['getPagedPackages']);
+
+        // set the value to return when the `getPagedPackages` spy is called.
+        packagesServiceSpy.getPagedPackages.and.returnValue(of([MOCK_BLUEPRINTS_PAGE]));
+        store = new PackagesStore(packagesServiceSpy);
+
+        store.getPagedPackages(0, 2);
+        store.state$.subscribe(page => {
+            expect(store.state).toEqual(MOCK_BLUEPRINTS_PAGE);
+        });
+
+    });
+});
+
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
new file mode 100644
index 000000000..799946dbc
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
@@ -0,0 +1,57 @@
+/*
+============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 {Injectable} from '@angular/core';
+import {BluePrintPage} from './model/BluePrint.model';
+import {Store} from '../../../common/core/stores/Store';
+import {PackagesListService} from './packages-list.service';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackagesStore extends Store<BluePrintPage> {
+    private bluePrintModels: BluePrintPage;
+
+    // TDOD fixed for now as there is no requirement to change it from UI
+    public pageSize = 2;
+
+    constructor(private packagesServiceList: PackagesListService) {
+        super(new BluePrintPage());
+    }
+
+    getPagedPackages(pageNumber: number, pageSize: number) {
+        this.packagesServiceList.getPagedPackages(pageNumber, pageSize)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState(pages[0]);
+            });
+    }
+
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+        this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState(pages[0]);
+            });
+
+    }
+
+
+}