filter packages by tag

rename filter-by-keyword to search-by-packages

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

23 files changed, 419 insertions, 272 deletions

diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
index d41bf5222..faa419c80 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -184,7 +184,7 @@ button.rotate{
 .input-search-controller{
   height: 50px;
   padding-left: 30px;
-  background: url(/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
+  background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
   border-radius: 0;
   border: 0;
   border-bottom: solid 1px #D7E7F9;
@@ -333,7 +333,7 @@ p.compType-4{
   padding-left: 36px;
   border: 0;
   font-size: 14px;
-  background: url(/assets/img/icon-drag.svg) #fff 20px center no-repeat;
+  background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
 }
  
 /*CANVAS*/
@@ -365,10 +365,10 @@ p.compType-4{
   padding-left: 30px;
 }
 .viewBtns .topologySource{
-  background-image: url(/assets/img/icon-topologyView-active.svg);
+  background-image: url(src/assets/img/icon-topologyView-active.svg);
 }
 .viewBtns .topologyView{
-  background-image: url(/assets/img/icon-topologySource.svg);
+  background-image: url(src/assets/img/icon-topologySource.svg);
 }
 .card.actionContainer{
   margin: 20px 20px 40px 60px;
@@ -391,6 +391,7 @@ p.compType-4{
   background: #C3CDDB;
 }
 .actionContainer .card-body{
+  min-height: 170px;
   padding: 15px 20px !important;
   border: solid 1px #C3CDDB;
   background: #fff;
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
new file mode 100644
index 000000000..068e93160
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
@@ -0,0 +1,33 @@
+/*
+============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 {BluePrintPage} from './BluePrint.model';
+
+export class PackagesDashboardState {
+
+    page: BluePrintPage;
+    command: string;
+    currentPage = 0;
+    totalPackages: number;
+    tags: string[];
+    sortBy = 'DATE';
+    totalPackagesWithoutSearchorFilters: number;
+}
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/filter-by-tags/filter-by-tags.component.css
index e69de29bb..e69de29bb 100644
--- 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/filter-by-tags/filter-by-tags.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/client-frankfurt/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/client-frankfurt/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/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/filter-by-tags/filter-by-tags.component.spec.ts
index aaacfb9e8..8285d8962 100644
--- 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/filter-by-tags/filter-by-tags.component.spec.ts
@@ -20,22 +20,21 @@ limitations under the License.
 */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SearchByTagsComponent } from './search-by-tags.component';
+import { TagsFilteringComponent } from './filter-by-tags.component';
 
 describe('SearchByTagsComponent', () => {
-  let component: SearchByTagsComponent;
-  let fixture: ComponentFixture<SearchByTagsComponent>;
+  let component: TagsFilteringComponent;
+  let fixture: ComponentFixture<TagsFilteringComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchByTagsComponent ]
+      declarations: [ TagsFilteringComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchByTagsComponent);
+    fixture = TestBed.createComponent(TagsFilteringComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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/filter-by-tags/filter-by-tags.component.ts
index b5cc52fc0..b4007215a 100644
--- 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/filter-by-tags/filter-by-tags.component.ts
@@ -24,12 +24,12 @@ 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']
+    selector: 'app-filter-by-tags',
+    templateUrl: './filter-by-tags.component.html',
+    styleUrls: ['./filter-by-tags.component.css']
 })
 
-export class SearchByTagsComponent implements OnInit {
+export class TagsFilteringComponent implements OnInit {
 
     page: BluePrintPage;
     tags: string[] = [];
@@ -37,10 +37,24 @@ export class SearchByTagsComponent implements OnInit {
     searchTag = '';
     viewedPackages: BlueprintModel[] = [];
     private checkBoxTages = '';
-    private searchPackage = '';
+
 
     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() {
@@ -78,17 +92,9 @@ export class SearchByTagsComponent implements OnInit {
             return;
         }
         this.viewedPackages = [];
-        this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+        // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
+        //   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/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
index f67b3ca6a..18428d4b4 100644
--- 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
@@ -1,92 +1,104 @@
-<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 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="col pr-0">
-                <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
-                </a>
+            <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>
-<div class="col-lg-3 col-md-6 p-0" *ngFor="let bluePrint of viewedPackages">
+    <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">{{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">
+        <!--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>
-                            <ul class="dropdown-content">
-                                <li class="action-clone">
-                                    <a href="#">Clone</a>
+
+                        </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 class="action-archive">
-                                    <a href="#">Archive</a>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user3.jpg">
+                                    </button>
                                 </li>
-                                <li class="action-delete">
-                                    <a href="#">Delete</a>
+                                <li>
+                                    <a href="">5 contributors</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 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 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.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 4ef0faf45..c7ec0af20 100644
--- 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
@@ -1,28 +1,32 @@
-import { Component, OnInit } from '@angular/core';
-import { BlueprintModel } from '../../model/BluePrint.model';
-import { PackagesStore } from '../../packages.store';
+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']
+    selector: 'app-packages-list',
+    templateUrl: './package-list.component.html',
+    styleUrls: ['./package-list.component.css']
 })
 export class PackageListComponent implements OnInit {
 
-  viewedPackages: BlueprintModel[] = [];
-  numberOfPackages: number;
+    viewedPackages: BlueprintModel[] = [];
 
 
-  constructor(private packagesStore: PackagesStore) {
-    console.log('PackageListComponent');
-    this.packagesStore.state$.subscribe(page => {
-      console.log(page);
-      this.viewedPackages = page.content;
-    });
-  }
+    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.getPagedPackages(0, this.packagesStore.pageSize);
-  }
+    ngOnInit() {
+        this.packagesStore.getAll();
+    }
 
+    testDispatch(bluePrint: BlueprintModel) {
+        console.log(bluePrint.id);
+    }
 }
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
index cdc0aaa1f..b5245f757 100644
--- 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
@@ -1,4 +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>
\ No newline at end of file
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)"
+
+    ></ngb-pagination>
+</div>
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
index 49a88c6c2..49f91316b 100644
--- 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
@@ -1,30 +1,41 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { PackagesStore } from '../../packages.store';
+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'],
+    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;
+    pageNumber: number;
+    totalCount: number;
+    pageSize: number;
+    previousPage: number;
 
-  constructor(private packagesStore: PackagesStore) {
-    this.pageSize = packagesStore.pageSize;
-   }
+    constructor(private packagesStore: PackagesStore) {
+        this.pageSize = packagesStore.pageSize;
 
-  ngOnInit() {
-  }
+        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);
+    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;
+        }
     }
-    this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize);
-  }
 
 }
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
index 09a343546..ac510893b 100644
--- 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
@@ -2,66 +2,60 @@
 </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>
+                        <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>
-                <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 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>
\ No newline at end of file
+</div>
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
index 0820d9356..4e33a9df1 100644
--- 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
@@ -19,6 +19,7 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../packages.store';
 
 @Component({
     selector: 'app-packages-dashboard',
@@ -27,10 +28,10 @@ import {Component, OnInit} from '@angular/core';
 })
 export class PackagesDashboardComponent implements OnInit {
 
-    constructor() {
-    }
+    constructor() { }
 
     ngOnInit() {
+
         console.log('PackagesDashboardComponent');
     }
 }
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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);
+    }
+}
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
deleted file mode 100644
index ea6c742a0..000000000
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--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.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
deleted file mode 100644
index 116441bc2..000000000
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-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
index deaa4d957..e8a98099c 100644
--- 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
@@ -31,18 +31,16 @@ import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
 })
 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[]> {
+    getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> {
         return this.api.get(BlueprintURLs.getPagedBlueprints, {
             offset: pageNumber,
             limit: pageSize,
-            sort: 'DATE'
+            sort: sortBy
         });
     }
 
@@ -50,13 +48,6 @@ export class PackagesListService {
         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;
@@ -64,11 +55,12 @@ export class PackagesListService {
         });
     }
 
-    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) {
+
         return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, {
             offset: pageNumber,
             limit: pageSize,
-            sort: 'DATE'
+            sort: sortBy
         });
     }
 }
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 0bcd0fa99..f24ae8b00 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
@@ -4,20 +4,23 @@ 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';
+import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
+import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+
 
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
-        SearchByTagsComponent,
+        TagsFilteringComponent,
         PackageListComponent,
         DesignerComponent,
-        PackagePaginationComponent
+        PackagePaginationComponent,
+        PackagesSearchComponent,
     ],
     imports: [
         CommonModule,
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 ad9f36979..83044dde5 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,7 +1,7 @@
 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';
+import {DesignerComponent} from './designer/designer.component';
 
 
 const routes: Routes = [
@@ -9,7 +9,7 @@ const routes: Routes = [
         path: '',
         component: PackagesDashboardComponent
     },
-    { path: 'designer', component: DesignerComponent },
+    {path: 'designer', component: DesignerComponent},
 ];
 
 @NgModule({
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
index 799946dbc..d770bf737 100644
--- 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
@@ -23,35 +23,82 @@ import {Injectable} from '@angular/core';
 import {BluePrintPage} from './model/BluePrint.model';
 import {Store} from '../../../common/core/stores/Store';
 import {PackagesListService} from './packages-list.service';
+import {PackagesDashboardState} from './model/packages-dashboard.state';
 
 
 @Injectable({
     providedIn: 'root'
 })
-export class PackagesStore extends Store<BluePrintPage> {
-    private bluePrintModels: BluePrintPage;
-
+export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
-    public pageSize = 2;
+    public pageSize = 5;
 
     constructor(private packagesServiceList: PackagesListService) {
-        super(new BluePrintPage());
+        super(new PackagesDashboardState());
+    }
+
+    public getAll() {
+        console.log('getting all packages...');
+        this.getPagedPackages(0, this.pageSize);
+    }
+
+    public search(command: string) {
+        if (command) {
+            this.searchPagedPackages(command, 0, this.pageSize);
+        } else {
+            this.getPagedPackages(0, this.pageSize);
+        }
+    }
+
+    public getPage(pageNumber: number, pageSize: number) {
+        if (this.isCommandExist()) {
+            this.searchPagedPackages(this.state.command, pageNumber, pageSize);
+        } else {
+            this.getPagedPackages(pageNumber, pageSize);
+        }
     }
 
-    getPagedPackages(pageNumber: number, pageSize: number) {
-        this.packagesServiceList.getPagedPackages(pageNumber, pageSize)
+    public sortPagedPackages(sortBy: string) {
+        if (this.isCommandExist()) {
+            this.searchPagedPackages(this.state.command, this.state.currentPage, this.pageSize, sortBy);
+        } else {
+            this.getPagedPackages(this.state.currentPage, this.pageSize, sortBy);
+        }
+
+    }
+
+    private getPagedPackages(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+
+        this.packagesServiceList.getPagedPackages(pageNumber, pageSize, sortBy)
             .subscribe((pages: BluePrintPage[]) => {
-                this.setState(pages[0]);
+                this.setState({
+                    ...this.state,
+                    page: pages[0],
+                    command: '',
+                    totalPackages: pages[0].totalElements,
+                    currentPage: pageNumber,
+                    // this param is set only in get all as it represents the total number of pacakges in the server
+                    totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+                    sortBy
+                });
             });
     }
 
-    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
-        this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize)
+    private searchPagedPackages(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+        this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize, sortBy)
             .subscribe((pages: BluePrintPage[]) => {
-                this.setState(pages[0]);
+                this.setState({
+                    ...this.state,
+                    page: pages[0],
+                    command: keyWord,
+                    totalPackages: pages[0].totalElements,
+                    currentPage: pageNumber,
+                    sortBy
+                });
             });
-
     }
 
-
+    private isCommandExist() {
+        return this.state.command;
+    }
 }
diff --git a/cds-ui/client-frankfurt/src/styles.css b/cds-ui/client-frankfurt/src/styles.css
index 850f6824a..ff85e332f 100644
--- a/cds-ui/client-frankfurt/src/styles.css
+++ b/cds-ui/client-frankfurt/src/styles.css
@@ -330,7 +330,7 @@ height: 40px;
 /**Packages Cards***/
 /***Package Info Card***/
 .packages-card .card{
-  margin: 0 9px;
+  margin: 0;
   border-radius: 2px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
@@ -498,6 +498,10 @@ height: 40px;
   .searchInput::placeholder{
     color: #BABBC3;
   }
+  .searchBox-expanded{
+    width: 240px;
+    border-bottom: solid 1px #C3CDDB;
+  }
   /**Drop Down Menu**/
   .dropdown{
     position: relative;
@@ -694,6 +698,7 @@ height: 40px;
   /**Packages Filter**/
   .packagesFilter{
     margin-top: 12px;
+    margin-bottom: 7px;
   }
   .packagesFilter .dropdown-toggle{
     height: 36px !important;
@@ -827,7 +832,7 @@ height: 40px;
   /**Packages Cards***/
   /***Package Info Card***/
   .packages-card .card{
-    margin: 0 9px;
+    margin: 0;
     border-radius: 2px;
     border: 0;
     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
@@ -845,6 +850,16 @@ height: 40px;
     font-size: 14px;
     color: #D0D7E4;
   }
+.packages-card .card-body{
+  padding-bottom: 0 !important;
+}
+.packages-card .card-footer .col{
+  padding: 0;
+  text-align: center;
+}
+.packages-card .card-footer .col:last-child{
+  padding-left: 20px;
+}
   /***Add Package Card***/
   .addPaackage-card{
     background: #F4F9FE !important;
@@ -854,11 +869,11 @@ height: 40px;
     box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
   }
   .addPaackage-card img{
-    margin-bottom: 12px;
+    margin-bottom: 33px;
     margin-top: 8px;
   }
   .addPaackage-card a{
-    margin: 0 0 20px;
+    margin: 0 0 14px;
     padding: 10px 10px 10px 32px;
     font-weight: bold;
     font-size: 10px;
@@ -873,6 +888,13 @@ height: 40px;
   .addPaackage-card a:hover{
     text-decoration: unset;
   }
+  .addPaackage-card .card-footer .col{
+    padding: 0;
+    text-align: right;
+  }
+  .addPaackage-card .card-footer .col:last-child{
+    text-align: left;
+  }
   .btn-create-package,
   .btn-create-package:hover{
     background-color: #1B3E6F;
@@ -957,7 +979,7 @@ height: 40px;
   }
   /***Contributers***/
   ul.package-contributers{
-    margin-bottom: 0 !important;
+    /*margin-bottom: 0 !important;*/
     padding-left: 0 !important;
   }
   .package-contributers li{
@@ -973,6 +995,7 @@ height: 40px;
   .package-contributers li:last-child{
     margin-left: 9px;
   }
+  .package-modifier,
   .package-contributers button{
     padding: 0 !important;
     border-radius: 100%;
@@ -986,6 +1009,7 @@ height: 40px;
     display: inline-block;
     position: relative;
   }
+  .package-modifier:before,
   .package-contributers button:before{
     -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
@@ -999,10 +1023,12 @@ height: 40px;
     right: 0;
     top: 0;
   }
+  .package-modifier:hover,
   .package-contributers button:hover{
     box-shadow: 0 0 0 2px #D7E7F9;
     text-decoration: none;
   }
+  .package-modifier:hover:before,
   .package-contributers button:hover:before{
     -webkit-transform: scale(0.925);
     -moz-transform: scale(0.925);
@@ -1012,6 +1038,7 @@ height: 40px;
     box-shadow: 0 0 0 1px #D7E7F9;
     opacity: 0.5;
   }
+  .package-modifier img,
   .package-contributers button img{
     width: 28px;
     height: 28px;