diff options
23 files changed, 419 insertions, 272 deletions
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css index 36abc9329..067d30d7f 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -184,7 +184,7 @@ button.rotate{ .input-search-controller{ height: 50px; padding-left: 30px; - background: url(/assets/img/icon-search-light.svg) #fff 10px center no-repeat; + background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -333,7 +333,7 @@ p.compType-4{ padding-left: 36px; border: 0; font-size: 14px; - background: url(/assets/img/icon-drag.svg) #fff 20px center no-repeat; + background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; } /*CANVAS*/ @@ -366,10 +366,10 @@ p.compType-4{ padding-left: 30px; } .viewBtns .topologySource{ - background-image: url(/assets/img/icon-topologyView-active.svg); + background-image: url(src/assets/img/icon-topologyView-active.svg); } .viewBtns .topologyView{ - background-image: url(/assets/img/icon-topologySource.svg); + background-image: url(src/assets/img/icon-topologySource.svg); } .card.actionContainer{ margin: 20px 20px 40px 60px; @@ -392,6 +392,7 @@ p.compType-4{ background: #C3CDDB; } .actionContainer .card-body{ + min-height: 170px; padding: 15px 20px !important; border: solid 1px #C3CDDB; background: #fff; diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts new file mode 100644 index 000000000..068e93160 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts @@ -0,0 +1,33 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {BluePrintPage} from './BluePrint.model'; + +export class PackagesDashboardState { + + page: BluePrintPage; + command: string; + currentPage = 0; + totalPackages: number; + tags: string[]; + sortBy = 'DATE'; + totalPackagesWithoutSearchorFilters: number; +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css index e69de29bb..e69de29bb 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html new file mode 100644 index 000000000..6ce3a53a1 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -0,0 +1,18 @@ +<div class="dropdown packagesFilter w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">ALL PACKAGES TAGS</div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group"> + <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus> + </div> + </li> + <li *ngFor="let tag of viewedTags"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}> + <label class="custom-control-label" for={{tag}}>{{tag}}</label> + </div> + </li> + </ul> +</div> + diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts index aaacfb9e8..8285d8962 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts @@ -20,22 +20,21 @@ limitations under the License. */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SearchByTagsComponent } from './search-by-tags.component'; +import { TagsFilteringComponent } from './filter-by-tags.component'; describe('SearchByTagsComponent', () => { - let component: SearchByTagsComponent; - let fixture: ComponentFixture<SearchByTagsComponent>; + let component: TagsFilteringComponent; + let fixture: ComponentFixture<TagsFilteringComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SearchByTagsComponent ] + declarations: [ TagsFilteringComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(SearchByTagsComponent); + fixture = TestBed.createComponent(TagsFilteringComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts index b5cc52fc0..b4007215a 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -24,12 +24,12 @@ import {PackagesStore} from '../../packages.store'; import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model'; @Component({ - selector: 'app-search-by-tags', - templateUrl: './search-by-tags.component.html', - styleUrls: ['./search-by-tags.component.css'] + selector: 'app-filter-by-tags', + templateUrl: './filter-by-tags.component.html', + styleUrls: ['./filter-by-tags.component.css'] }) -export class SearchByTagsComponent implements OnInit { +export class TagsFilteringComponent implements OnInit { page: BluePrintPage; tags: string[] = []; @@ -37,10 +37,24 @@ export class SearchByTagsComponent implements OnInit { searchTag = ''; viewedPackages: BlueprintModel[] = []; private checkBoxTages = ''; - private searchPackage = ''; + constructor(private packagesStore: PackagesStore, ) { + this.packagesStore.state$.subscribe(state => { + console.log(state); + if (state.page) { + this.viewedPackages = state.page.content; + this.viewedPackages.forEach(element => { + element.tags.split(',').forEach(tag => { + this.tags.push(tag.trim()); + }); + this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index); + this.assignTags(); + + }); + } + }); } ngOnInit() { @@ -78,17 +92,9 @@ export class SearchByTagsComponent implements OnInit { return; } this.viewedPackages = []; - this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); + // this.packagesStore.getPagesFilterByTags(this.checkBoxTages); + // this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); } - searchPackages(event: any) { - this.searchPackage = event.target.value; - this.searchPackage = this.searchPackage.trim(); - if (this.searchPackage) { - this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2); - } else { - this.packagesStore.getPagedPackages(0, 2); - } - } } diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index f67b3ca6a..18428d4b4 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -1,92 +1,104 @@ -<div class="row packages-card"><div class="col-lg-3 col-md-6 p-0"> - <!--Add Package Card--> - <div class="card addPaackage-card"> - <div class="card-body text-center"> - <img src="/assets/img/icon-addPackage.svg"> - </div> - <div class="card-footer row"> - <div class="col text-right pr-0"> - <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package - </a> +<div class="row packages-card"> + <div class="col-lg-3 col-md-6"> + <!--Add Package Card--> + <div class="card addPaackage-card"> + <div class="card-body text-center"> + <img src="/assets/img/icon-addPackage.svg"> </div> - <div class="col pr-0"> - <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package - </a> + <div class="card-footer row"> + <div class="col"> + <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package + </a> + </div> + <div class="col"> + <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package + </a> + </div> </div> </div> </div> -</div> -<div class="col-lg-3 col-md-6 p-0" *ngFor="let bluePrint of viewedPackages"> + <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages"> - <!--Card 1--> - <div> - <div class="card"> - <div class="card-body"> - <div class="row"> - <div class="col-9 pr-0"> - <h5 class="card-title">{{bluePrint.artifactName}}</h5> - <p>Last modified {{bluePrint.createdDate}} by {{bluePrint.updatedBy}}</p> - <ul class="package-contributers"> - <li> - <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom" - title="User name"> - <img src="/assets/img/img-user1.jpeg"> - </button> - </li> - <li> - <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name"> - <img src="/assets/img/img-user2.jpg"> - </button> - </li> - <li> - <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name"> - <img src="/assets/img/img-user3.jpg"> - </button> - </li> - <li> - <a href="">5 contributors</a> - </li> - </ul> - </div> - <div class="col-3"> - <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text"> - <img src="/assets/img/icon-menuDots.svg" title="Actions"> + <!--Card 1--> + <div> + <div class="card"> + <div class="card-body"> + <div class="row"> + <div class="col-9 pr-0"> + <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)"> + <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> + {{bluePrint.artifactName}} + </h5> + + </div> + <div class="col-3"> + + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"> + <img src="/assets/img/icon-menuDots.svg" title="Actions"> + </div> + <ul class="dropdown-content"> + <li class="action-clone"> + <a href="#">Clone</a> + </li> + <li class="action-archive"> + <a href="#">Archive</a> + </li> + <li class="action-delete"> + <a href="#">Delete</a> + </li> + </ul> </div> - <ul class="dropdown-content"> - <li class="action-clone"> - <a href="#">Clone</a> + + </div> + </div> + <div class="row"> + <div class="col"> + <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }} + </p> + <p>By {{bluePrint.updatedBy}}</p> + <ul class="package-contributers"> + <li> + <button type="button" class="border-fade" data-toggle="tooltip" + data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user1.jpeg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user2.jpg"> + </button> </li> - <li class="action-archive"> - <a href="#">Archive</a> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user3.jpg"> + </button> </li> - <li class="action-delete"> - <a href="#">Delete</a> + <li> + <a href="">5 contributors</a> </li> </ul> </div> </div> - </div> - <div class="card-footer"> - <div class="row"> - <div class="col"> - <button type="button" class="btn btn-card-topology">Topology View - </button> - </div> - <div class="col"> - <button type="button" class="btn btn-card-config">Configuration</button> + <div class="card-footer"> + <div class="row"> + <div class="col"> + <button type="button" class="btn btn-card-topology">Topology View + </button> + </div> + <div class="col"> + <button type="button" class="btn btn-card-config">Configuration</button> + </div> </div> </div> </div> + </div> </div> - <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> - <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> - <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">... - </div> </div> </div> -</div>
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index 4ef0faf45..c7ec0af20 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -1,28 +1,32 @@ -import { Component, OnInit } from '@angular/core'; -import { BlueprintModel } from '../../model/BluePrint.model'; -import { PackagesStore } from '../../packages.store'; +import {Component, OnInit} from '@angular/core'; +import {BlueprintModel} from '../../model/BluePrint.model'; +import {PackagesStore} from '../../packages.store'; @Component({ - selector: 'app-packages-list', - templateUrl: './package-list.component.html', - styleUrls: ['./package-list.component.css'] + selector: 'app-packages-list', + templateUrl: './package-list.component.html', + styleUrls: ['./package-list.component.css'] }) export class PackageListComponent implements OnInit { - viewedPackages: BlueprintModel[] = []; - numberOfPackages: number; + viewedPackages: BlueprintModel[] = []; - constructor(private packagesStore: PackagesStore) { - console.log('PackageListComponent'); - this.packagesStore.state$.subscribe(page => { - console.log(page); - this.viewedPackages = page.content; - }); - } + constructor(private packagesStore: PackagesStore) { + console.log('PackageListComponent'); + this.packagesStore.state$.subscribe(state => { + console.log(state); + if (state.page) { + this.viewedPackages = state.page.content; + } + }); + } - ngOnInit() { - // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize); - } + ngOnInit() { + this.packagesStore.getAll(); + } + testDispatch(bluePrint: BlueprintModel) { + console.log(bluePrint.id); + } } diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html index cdc0aaa1f..b5245f757 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html @@ -1,4 +1,7 @@ +<!--Package Paginator--> <div class="col package-paginator pr-0"> - <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [(pageSize)]="pageSize" class="float-right" - (pageChange)="getPageFromService($event)"></ngb-pagination> -</div>
\ No newline at end of file + <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right" + (pageChange)="getPageFromService($event)" + + ></ngb-pagination> +</div> diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts index 49a88c6c2..49f91316b 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts @@ -1,30 +1,41 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; -import { PackagesStore } from '../../packages.store'; +import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; +import {map} from 'rxjs/operators'; @Component({ - selector: 'app-package-pagination', - templateUrl: './package-pagination.component.html', - styleUrls: ['./package-pagination.component.css'], + selector: 'app-package-pagination', + templateUrl: './package-pagination.component.html', + styleUrls: ['./package-pagination.component.css'], }) export class PackagePaginationComponent implements OnInit { - pageNumber = 0; - totalCount = 4; - pageSize: number; + pageNumber: number; + totalCount: number; + pageSize: number; + previousPage: number; - constructor(private packagesStore: PackagesStore) { - this.pageSize = packagesStore.pageSize; - } + constructor(private packagesStore: PackagesStore) { + this.pageSize = packagesStore.pageSize; - ngOnInit() { - } + this.packagesStore.state$ + .subscribe(state => { + this.pageNumber = state.currentPage; + this.totalCount = state.totalPackages; + }); + } + + ngOnInit() { + } - public getPageFromService(page) { - console.log('getPageFromService', page); - if (isNaN(page)) { - page = 1; - console.log('page change to first...', page); + public getPageFromService(page) { + console.log('getPageFromService', page); + if (isNaN(page)) { + page = 1; + console.log('page change to first...', page); + } + if (this.previousPage !== page) { + this.packagesStore.getPage(page - 1, this.packagesStore.pageSize); + this.previousPage = page; + } } - this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize); - } } diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index 09a343546..ac510893b 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -2,66 +2,60 @@ </app-header> <div class="new-wrapper"> <div class="container-fluid main-container"> - <!-- <router-outlet></router-outlet> --> - <!--Page Title--> - <header class="page-title"> - <div class="row"> - <h2 class="col m-0">CBA Packages - <span>(20 packages)</span> - </h2> - <div class="col"> - </div> - </div> - </header> <div class="container-fluid body-container"> <nav class="row"> <!--Nav Tabs--> <div class="col pr-0"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" - aria-selected="true">All</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" - aria-selected="false">Deployed</a> - <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" - aria-selected="false">Under Construction</a> - <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1" role="tab" aria-controls="nav-contact1" - aria-selected="false">Archived</a> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" + role="tab" aria-controls="nav-home" + aria-selected="true">All</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" + role="tab" aria-controls="nav-profile" + aria-selected="false">Deployed</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" + role="tab" aria-controls="nav-contact" + aria-selected="false">Under Construction</a> + <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1" + role="tab" aria-controls="nav-contact1" + aria-selected="false">Archived</a> + </div> + </div> + <!--Nav Search & Filter--> + <div class="col search-filter-col"> + <div class="row"> + <div class="col-7"> + <app-packages-search></app-packages-search> + </div> + <div class="col-5 pl-2"> + <app-filter-by-tags class="w-100"></app-filter-by-tags> + </div> + </div> </div> - <app-search-by-tags class="w-50"></app-search-by-tags> </nav> <div class="row mt-4"> <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="row"> - <!--Package Sort--> <div class="col sort-packages"> - Sort by: - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Recent</div> - <ul class="dropdown-content"> - <li> - <a href="#">Name</a> - </li> - <li> - <a href="#">Recent</a> - </li> - </ul> - </div> + </div> - <!--Package Paginator--> <app-package-pagination></app-package-pagination> + </div> <app-packages-list></app-packages-list> - + + </div> + <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> + <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">... </div> </div> </div> </div> - </div> </div> - </div>
\ No newline at end of file +</div> diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts index 0820d9356..4e33a9df1 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts @@ -19,6 +19,7 @@ limitations under the License. ============LICENSE_END============================================ */ import {Component, OnInit} from '@angular/core'; +import {PackagesStore} from '../packages.store'; @Component({ selector: 'app-packages-dashboard', @@ -27,10 +28,10 @@ import {Component, OnInit} from '@angular/core'; }) export class PackagesDashboardComponent implements OnInit { - constructor() { - } + constructor() { } ngOnInit() { + console.log('PackagesDashboardComponent'); } } diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html new file mode 100644 index 000000000..e7c605fd1 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html @@ -0,0 +1,4 @@ +<div class="searchBox"> + <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages"> + <button class="searchButton" href="#"></button> +</div>
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts new file mode 100644 index 000000000..7e50c55cc --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PackagesSearchComponent } from './search-by-packages.component'; + +describe('PackagesSearchComponent', () => { + let component: PackagesSearchComponent; + let fixture: ComponentFixture<PackagesSearchComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [PackagesSearchComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PackagesSearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts new file mode 100644 index 000000000..91304e5c2 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts @@ -0,0 +1,25 @@ +import {Component, OnInit} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; + +@Component({ + selector: 'app-packages-search', + templateUrl: './search-by-packages.component.html', + styleUrls: ['./search-by-packages.component.css'] +}) +export class PackagesSearchComponent implements OnInit { + + private searchQuery = ''; + + constructor(private packagesStore: PackagesStore) { + } + + ngOnInit() { + } + + + searchPackages(event: any) { + this.searchQuery = event.target.value; + this.searchQuery = this.searchQuery.trim(); + this.packagesStore.search(this.searchQuery); + } +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html deleted file mode 100644 index ea6c742a0..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html +++ /dev/null @@ -1,46 +0,0 @@ -<!--Nav Search & Filter--> -<div class="col search-filter-col"> - <div class="row"> - <div class="col-7"> - <div class="searchBox"> - <input class="searchInput" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages"> - <button class="searchButton" href="#"></button> - </div> - </div> - <div class="col-5 pl-2"> - <div class="dropdown packagesFilter w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">ALL PACKAGES TAGS</div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group"> - <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus> - </div> - </li> - <li *ngFor="let tag of viewedTags"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}> - <label class="custom-control-label" for={{tag}}>{{tag}}</label> - </div> - <!--<div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck2"> - <label class="custom-control-label" for="customCheck2">Check this custom - checkbox</label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck3"> - <label class="custom-control-label" for="customCheck3">Check this custom - checkbox</label> - </div> - <div class="custom-control custom-checkbox"> - <input type="checkbox" class="custom-control-input" id="customCheck4"> - <label class="custom-control-label" for="customCheck4">Check this custom - checkbox</label> - </div>--> - </li> - - </ul> - </div> - </div> - </div> -</div> diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts deleted file mode 100644 index 116441bc2..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {TestBed} from '@angular/core/testing'; - -import {SearchByTagsService} from './search-by-tags.service'; - -describe('SearchByTagsService', () => { - beforeEach(() => TestBed.configureTestingModule({})); - - it('should be created', () => { - const service: SearchByTagsService = TestBed.get(SearchByTagsService); - expect(service).toBeTruthy(); - }); -}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts index deaa4d957..e8a98099c 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts @@ -31,18 +31,16 @@ import {BlueprintModel, BluePrintPage} from './model/BluePrint.model'; }) export class PackagesListService { packages: BlueprintModel[] = []; - originalPackage: BlueprintModel[] = []; - private bluePrintModel: BlueprintModel; private numberOfPackages: number; constructor(private api: ApiService<BluePrintPage>) { } - getPagedPackages(pageNumber: number, pageSize: number): Observable<BluePrintPage[]> { + getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> { return this.api.get(BlueprintURLs.getPagedBlueprints, { offset: pageNumber, limit: pageSize, - sort: 'DATE' + sort: sortBy }); } @@ -50,13 +48,6 @@ export class PackagesListService { return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword); } - - // getPackageNumber(): number { - // this.getCountOfAllPackages(this.api.get(BlueprintURLs.countOfAllBluePrints)); - // return this.numberOfPackages; - - // } - getCountOfAllPackages(observable: Observable<number>) { observable.subscribe(data => { this.numberOfPackages = data; @@ -64,11 +55,12 @@ export class PackagesListService { }); } - getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) { + getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) { + return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, { offset: pageNumber, limit: pageSize, - sort: 'DATE' + sort: sortBy }); } } diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts index 0bcd0fa99..f24ae8b00 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts @@ -4,20 +4,23 @@ import {ApiService} from '../../../common/core/services/api.typed.service'; import {PackagesRoutingModule} from './packages.routing.module'; import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap'; import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; -import {SearchByTagsComponent} from './packages-dashboard/search-by-tags/search-by-tags.component'; import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component'; import { PackageListComponent } from './packages-dashboard/package-list/package-list.component'; import { DesignerComponent } from './designer/designer.component'; import { SidebarModule } from 'ng-sidebar'; import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component'; +import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component'; +import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component'; + @NgModule({ declarations: [PackagesDashboardComponent, - SearchByTagsComponent, + TagsFilteringComponent, PackageListComponent, DesignerComponent, - PackagePaginationComponent + PackagePaginationComponent, + PackagesSearchComponent, ], imports: [ CommonModule, diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts index ad9f36979..83044dde5 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -1,7 +1,7 @@ import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; -import { DesignerComponent } from './designer/designer.component'; +import {DesignerComponent} from './designer/designer.component'; const routes: Routes = [ @@ -9,7 +9,7 @@ const routes: Routes = [ path: '', component: PackagesDashboardComponent }, - { path: 'designer', component: DesignerComponent }, + {path: 'designer', component: DesignerComponent}, ]; @NgModule({ diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts index 799946dbc..d770bf737 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts @@ -23,35 +23,82 @@ import {Injectable} from '@angular/core'; import {BluePrintPage} from './model/BluePrint.model'; import {Store} from '../../../common/core/stores/Store'; import {PackagesListService} from './packages-list.service'; +import {PackagesDashboardState} from './model/packages-dashboard.state'; @Injectable({ providedIn: 'root' }) -export class PackagesStore extends Store<BluePrintPage> { - private bluePrintModels: BluePrintPage; - +export class PackagesStore extends Store<PackagesDashboardState> { // TDOD fixed for now as there is no requirement to change it from UI - public pageSize = 2; + public pageSize = 5; constructor(private packagesServiceList: PackagesListService) { - super(new BluePrintPage()); + super(new PackagesDashboardState()); + } + + public getAll() { + console.log('getting all packages...'); + this.getPagedPackages(0, this.pageSize); + } + + public search(command: string) { + if (command) { + this.searchPagedPackages(command, 0, this.pageSize); + } else { + this.getPagedPackages(0, this.pageSize); + } + } + + public getPage(pageNumber: number, pageSize: number) { + if (this.isCommandExist()) { + this.searchPagedPackages(this.state.command, pageNumber, pageSize); + } else { + this.getPagedPackages(pageNumber, pageSize); + } } - getPagedPackages(pageNumber: number, pageSize: number) { - this.packagesServiceList.getPagedPackages(pageNumber, pageSize) + public sortPagedPackages(sortBy: string) { + if (this.isCommandExist()) { + this.searchPagedPackages(this.state.command, this.state.currentPage, this.pageSize, sortBy); + } else { + this.getPagedPackages(this.state.currentPage, this.pageSize, sortBy); + } + + } + + private getPagedPackages(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) { + + this.packagesServiceList.getPagedPackages(pageNumber, pageSize, sortBy) .subscribe((pages: BluePrintPage[]) => { - this.setState(pages[0]); + this.setState({ + ...this.state, + page: pages[0], + command: '', + totalPackages: pages[0].totalElements, + currentPage: pageNumber, + // this param is set only in get all as it represents the total number of pacakges in the server + totalPackagesWithoutSearchorFilters: pages[0].totalElements, + sortBy + }); }); } - getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) { - this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize) + private searchPagedPackages(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) { + this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize, sortBy) .subscribe((pages: BluePrintPage[]) => { - this.setState(pages[0]); + this.setState({ + ...this.state, + page: pages[0], + command: keyWord, + totalPackages: pages[0].totalElements, + currentPage: pageNumber, + sortBy + }); }); - } - + private isCommandExist() { + return this.state.command; + } } diff --git a/cds-ui/client-frankfurt/src/styles.css b/cds-ui/client-frankfurt/src/styles.css index 850f6824a..ff85e332f 100644 --- a/cds-ui/client-frankfurt/src/styles.css +++ b/cds-ui/client-frankfurt/src/styles.css @@ -330,7 +330,7 @@ height: 40px; /**Packages Cards***/ /***Package Info Card***/ .packages-card .card{ - margin: 0 9px; + margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); @@ -498,6 +498,10 @@ height: 40px; .searchInput::placeholder{ color: #BABBC3; } + .searchBox-expanded{ + width: 240px; + border-bottom: solid 1px #C3CDDB; + } /**Drop Down Menu**/ .dropdown{ position: relative; @@ -694,6 +698,7 @@ height: 40px; /**Packages Filter**/ .packagesFilter{ margin-top: 12px; + margin-bottom: 7px; } .packagesFilter .dropdown-toggle{ height: 36px !important; @@ -827,7 +832,7 @@ height: 40px; /**Packages Cards***/ /***Package Info Card***/ .packages-card .card{ - margin: 0 9px; + margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); @@ -845,6 +850,16 @@ height: 40px; font-size: 14px; color: #D0D7E4; } +.packages-card .card-body{ + padding-bottom: 0 !important; +} +.packages-card .card-footer .col{ + padding: 0; + text-align: center; +} +.packages-card .card-footer .col:last-child{ + padding-left: 20px; +} /***Add Package Card***/ .addPaackage-card{ background: #F4F9FE !important; @@ -854,11 +869,11 @@ height: 40px; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; } .addPaackage-card img{ - margin-bottom: 12px; + margin-bottom: 33px; margin-top: 8px; } .addPaackage-card a{ - margin: 0 0 20px; + margin: 0 0 14px; padding: 10px 10px 10px 32px; font-weight: bold; font-size: 10px; @@ -873,6 +888,13 @@ height: 40px; .addPaackage-card a:hover{ text-decoration: unset; } + .addPaackage-card .card-footer .col{ + padding: 0; + text-align: right; + } + .addPaackage-card .card-footer .col:last-child{ + text-align: left; + } .btn-create-package, .btn-create-package:hover{ background-color: #1B3E6F; @@ -957,7 +979,7 @@ height: 40px; } /***Contributers***/ ul.package-contributers{ - margin-bottom: 0 !important; + /*margin-bottom: 0 !important;*/ padding-left: 0 !important; } .package-contributers li{ @@ -973,6 +995,7 @@ height: 40px; .package-contributers li:last-child{ margin-left: 9px; } + .package-modifier, .package-contributers button{ padding: 0 !important; border-radius: 100%; @@ -986,6 +1009,7 @@ height: 40px; display: inline-block; position: relative; } + .package-modifier:before, .package-contributers button:before{ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; @@ -999,10 +1023,12 @@ height: 40px; right: 0; top: 0; } + .package-modifier:hover, .package-contributers button:hover{ box-shadow: 0 0 0 2px #D7E7F9; text-decoration: none; } + .package-modifier:hover:before, .package-contributers button:hover:before{ -webkit-transform: scale(0.925); -moz-transform: scale(0.925); @@ -1012,6 +1038,7 @@ height: 40px; box-shadow: 0 0 0 1px #D7E7F9; opacity: 0.5; } + .package-modifier img, .package-contributers button img{ width: 28px; height: 28px; |