diff options
Diffstat (limited to 'cds-ui/client-frankfurt/src/app')
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 { } |