summaryrefslogtreecommitdiffstats
path: root/cds-ui/client-frankfurt/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/client-frankfurt/src/app')
-rw-r--r--cds-ui/client-frankfurt/src/app/app-routing.module.ts1
-rw-r--r--cds-ui/client-frankfurt/src/app/app.component.html6
-rw-r--r--cds-ui/client-frankfurt/src/app/app.module.ts5
-rw-r--r--cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts5
-rw-r--r--cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts110
-rw-r--r--cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts51
-rw-r--r--cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts22
-rw-r--r--cds-ui/client-frankfurt/src/app/common/model/page.ts21
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts50
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts58
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html92
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts36
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts28
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html4
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts25
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts30
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts44
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html67
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts36
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html46
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts46
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts94
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts12
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts74
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts16
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts5
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts44
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts57
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css12
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html72
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts25
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts15
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts13
37 files changed, 1121 insertions, 101 deletions
diff --git a/cds-ui/client-frankfurt/src/app/app-routing.module.ts b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
index e55393b03..c6e42cb0b 100644
--- a/cds-ui/client-frankfurt/src/app/app-routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
@@ -24,6 +24,7 @@ import {Routes, RouterModule} from '@angular/router';
const routes: Routes = [
{path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+ // { path: '', component: MainAppComponent },
{
path: '',
redirectTo: 'packages',
diff --git a/cds-ui/client-frankfurt/src/app/app.component.html b/cds-ui/client-frankfurt/src/app/app.component.html
index 0680b43f9..693dba7c3 100644
--- a/cds-ui/client-frankfurt/src/app/app.component.html
+++ b/cds-ui/client-frankfurt/src/app/app.component.html
@@ -1 +1,7 @@
<router-outlet></router-outlet>
+<!-- <app-header></app-header>
+<div class="new-wrapper">
+ <div class="container-fluid main-container">
+ <router-outlet></router-outlet>
+ </div>
+</div> -->
diff --git a/cds-ui/client-frankfurt/src/app/app.module.ts b/cds-ui/client-frankfurt/src/app/app.module.ts
index c52da5cb9..20b9b4d7b 100644
--- a/cds-ui/client-frankfurt/src/app/app.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app.module.ts
@@ -30,6 +30,9 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {MatTabsModule} from '@angular/material/tabs';
import {ApiService} from './common/core/services/api.service';
import {HttpClientModule} from '@angular/common/http';
+import {PackagesModule} from './modules/feature-modules/packages/packages.module';
+import { SidebarModule } from 'ng-sidebar';
+import {SharedModulesModule} from './modules/shared-modules/shared-modules.module';
@NgModule({
declarations: [
@@ -43,6 +46,8 @@ import {HttpClientModule} from '@angular/common/http';
NoopAnimationsModule,
MatTabsModule,
HttpClientModule,
+ PackagesModule,
+ SharedModulesModule,
],
providers: [ApiService],
diff --git a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
index 11d0598d9..cfe8061f3 100644
--- a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
+++ b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
@@ -88,13 +88,16 @@ export const GlobalContants = {
export const BlueprintURLs = {
getAllBlueprints: '/controllerblueprint/all',
+ getPagedBlueprints: '/controllerblueprint/paged',
searchByTag: '/controllerblueprint/searchByTags/',
save: '/controllerblueprint/create-blueprint',
publish: '/controllerblueprint/publish',
enrich: '/controllerblueprint/enrich-blueprint',
download: '/controllerblueprint/download-blueprint/',
deploy: '/controllerblueprint/deploy-blueprint',
- getMetaDate: '/controllerblueprint/meta-data/'
+ getMetaDate: '/controllerblueprint/meta-data/',
+ countOfAllBluePrints: '/controllerblueprint/list/count',
+ getMetaDatePageable: '/controllerblueprint/metadata/paged'
};
export const ResourceDictionaryURLs = {
diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
index b26558b01..de8aab886 100644
--- a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
+++ b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
@@ -1,4 +1,3 @@
-
/*
============LICENSE_START==========================================
===================================================================
@@ -22,103 +21,10 @@ See the License for the specific language governing permissions and
limitations under the License.
============LICENSE_END============================================
*/
-export const GlobalContants = {
- endpoints: {},
- cbawizard: {
- stepsRequired:
- {
- stepCount: 4,
- steps: [{
- name: 'CBA Metadata',
- componentURL: '/controllerBlueprint/selectTemplate',
- label: 'CBA Metadata',
- link: '/blueprint/selectTemplate',
- index: 0,
- component: 'SelectTemplateComponent'
- },
- {
- name: 'Controller Blueprint Designer',
- componentURL: '/controllerBlueprint/modifyTemplate',
- label: 'Controller Blueprint Designer',
- link: '/blueprint/modifyTemplate',
- index: 1,
- component: 'ModifyTemplateComponent'
- },
- {
- name: 'Test',
- componentURL: '/controllerBlueprint/testTemplate',
- label: 'Test',
- link: '/blueprint/testTemplate',
- index: 2,
- component: 'TestTemplateComponent'
- },
- {
- name: 'Deploy',
- componentURL: '/controllerBlueprint/deployTemplate',
- label: 'Deploy',
- link: '/blueprint/deployTemplate',
- index: 3,
- component: 'DeployTemplateComponent'
- }]
- }
- },
- datadictionary: {
- stepsRequired:
- {
- stepCount: 3,
- steps: [{
- name: 'Resource Creation', componentURL: '/dataDictionary/selectTemplate',
- label: 'Resource Creation',
- component: 'ResourceCreationComponent'
-
- },
- {
- name: 'Edit/Validate', componentURL: '/dataDictionary/modifyTemplate',
- label: 'Edit/Validate',
- component: 'ResourceEditComponent'
- },
- {
- name: 'Save', componentURL: '/dataDictionary/saveTemplate',
- label: 'Save Resource',
- component: 'SaveResourceComponent'
- }]
- }
-
- }
-};
-
-export const BlueprintURLs = {
- getAllBlueprints: '/controllerblueprint/all',
- searchByTag: '/controllerblueprint/searchByTags/',
- save: '/controllerblueprint/create-blueprint',
- publish: '/controllerblueprint/publish',
- enrich: '/controllerblueprint/enrich-blueprint',
- download: '/controllerblueprint/download-blueprint/',
- deploy: '/controllerblueprint/deploy-blueprint',
- getMetaDate: '/controllerblueprint/meta-data/'
-};
-
-export const ResourceDictionaryURLs = {
- saveResourceDictionary: '/resourcedictionary/save',
- searchResourceDictionaryByTags: '/resourcedictionary/search',
- searchResourceDictionaryByName: '',
- getSources: '/resourcedictionary/source-mapping',
- getModelType: '/resourcedictionary/model-type',
- getDataType: '/resourcedictionary/model-type/by-definition/data_type'
-};
-
-export const ControllerCatalogURLs = {
- searchControllerCatalogByTags: '/controllercatalog/search',
- saveControllerCatalog: '/controllercatalog/save',
- getDefinition: '/controllercatalog/model-type/by-definition',
- getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom'
-};
-
-
import {Injectable} from '@angular/core';
-import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse} from '@angular/common/http';
-import {Observable} from 'rxjs';
+import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams} from '@angular/common/http';
+import {Observable, of} from 'rxjs';
@Injectable()
export class ApiService {
@@ -126,8 +32,16 @@ export class ApiService {
constructor(private httpClient: HttpClient) {
}
- get(url: string, params?: any): Observable<any> {
- return this.httpClient.get(url, params);
+ get(url: string, params?: {}): Observable<any> {
+ console.log('params', params);
+ let httpParams = new HttpParams();
+ for (const key in params) {
+ if (params.hasOwnProperty(key)) {
+ httpParams = httpParams.append(key, params[key]);
+ }
+ }
+ const options = {params: httpParams};
+ return this.httpClient.get(url, options);
}
post(url: string, body: any | null, options?: any): Observable<any> {
diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts
new file mode 100644
index 000000000..2f3778c1a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts
@@ -0,0 +1,51 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 Orange
+
+===================================================================
+
+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 { HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class ApiService<T> {
+
+ constructor(private httpClient: HttpClient) {
+ }
+
+ get(url: string, params?: {}): Observable<T[]> {
+ console.log('params', params);
+ let httpParams = new HttpParams();
+ for (const key in params) {
+ if (params.hasOwnProperty(key)) {
+ httpParams = httpParams.append(key, params[key]);
+ }
+ }
+ const options = {params: httpParams};
+ return this.httpClient.get<T[]>(url, options);
+ }
+
+ post(url: string, body: any | null, options?: any): Observable<any> {
+
+ return this.httpClient.post(url, body, options);
+ }
+}
diff --git a/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts b/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts
new file mode 100644
index 000000000..1d5b0afc1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts
@@ -0,0 +1,22 @@
+import {Observable, BehaviorSubject} from 'rxjs';
+import { Injectable } from '@angular/core';
+
+export class Store<T> {
+ state$: Observable<T>;
+ private subject: BehaviorSubject<T>;
+
+ protected constructor(initialState: T) {
+ this.subject = new BehaviorSubject(initialState);
+ this.state$ = this.subject.asObservable();
+ }
+
+ get state(): T {
+ return this.subject.getValue();
+ }
+
+ protected setState(nextState: T): void {
+ console.log('setting state', this.subject);
+ this.subject.next(nextState);
+ }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/common/model/page.ts b/cds-ui/client-frankfurt/src/app/common/model/page.ts
new file mode 100644
index 000000000..7c3a0c4f3
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/common/model/page.ts
@@ -0,0 +1,21 @@
+export class Page<T> {
+ content: T[];
+ pageable: {
+ sort: {
+ unsorted: boolean,
+ sorted: boolean,
+ empty: boolean
+ };
+
+ offset: number,
+ pageSize: number,
+ pageNumber: number,
+ paged: boolean,
+ unpaged: boolean,
+ };
+ totalPages: number;
+ totalElements: number;
+ last: boolean;
+ first: boolean;
+ empty: boolean;
+}
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]);
+ });
+
+ }
+
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css
new file mode 100644
index 000000000..240f9dfae
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html
new file mode 100644
index 000000000..541b38d1a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html
@@ -0,0 +1,72 @@
+<div class="primary-nav">
+ <img class="logo-icon open-panel nav-toggle" src="../assets/img/logo-icon.svg" title="CDS">
+ <nav role="navigation" class="menu">
+ <img class="logotype" src="../assets/img/logo-text.svg">
+ <div class="overflow-container">
+ <ul class="menu-dropdown">
+ <li class="active">
+ <a href="packages/list">Packages</a>
+ <span class="icon">
+ <!-- <i class="fa fa-dashboard"></i> -->
+ <img src="../assets/img/icon-nav-packages.svg">
+ </span>
+ </li>
+ <li class="menu-hasdropdown">
+ <a href="#">Data Dictionary</a>
+ <span class="icon">
+ <img src="../assets/img/icon-nav-dictionary.svg">
+ </span>
+ <label title="toggle menu" for="settings">
+ <span class="downarrow">
+ <i class="fa fa-caret-down"></i>
+ </span>
+ </label>
+ <input type="checkbox" class="sub-menu-checkbox" id="settings" />
+ <ul class="sub-menu-dropdown">
+ <li>
+ <a href="">Link</a>
+ </li>
+ <li>
+ <a href="">Link</a>
+ </li>
+ <li>
+ <a href="">Link</a>
+ </li>
+ </ul>
+ </li>
+ <!-- <li>
+ <a href="#">Favourites</a>
+ <span class="icon">
+ <i class="fa fa-heart"></i>
+ </span>
+ </li>
+ <li>
+ <a href="#">Messages</a>
+ <span class="icon">
+ <i class="fa fa-envelope"></i>
+ </span>
+ </li> -->
+ </ul>
+ </div>
+ <ul class="menu-dropdown userProfile">
+ <li>
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">User name</div>
+ <ul class="dropdown-content">
+ <li>
+ <a href="#">Settings</a>
+ </li>
+ <li>
+ <a href="#">Projects</a>
+ </li>
+ <li>
+ <a href="#">Log out</a>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+
+ </nav>
+</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts
new file mode 100644
index 000000000..2d0479d7d
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture<HeaderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HeaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts
new file mode 100644
index 000000000..3ee4d0f65
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-header',
+ templateUrl: './header.component.html',
+ styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts
new file mode 100644
index 000000000..6b6d39689
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header/header.component';
+
+
+
+@NgModule({
+ declarations: [HeaderComponent],
+ imports: [
+ CommonModule
+ ], exports : [HeaderComponent]
+})
+export class SharedModulesModule { }