From eea49075a4a8bb62a5a15ec31adfe52e1f1f3b7a Mon Sep 17 00:00:00 2001 From: Ahmed Abbas Date: Wed, 27 Nov 2019 15:04:18 +0200 Subject: filter packages by tag rename filter-by-keyword to search-by-packages Issue-ID: CCSDK-1968 Issue-ID: CCSDK-1951 Signed-off-by: Ahmed Abbas Change-Id: I4667f2b9e98ba7e217ba7ab15e5cd8c45bee0c33 --- .../packages/designer/designer.component.css | 9 +- .../packages/model/packages-dashboard.state.ts | 33 +++++ .../filter-by-tags/filter-by-tags.component.css | 0 .../filter-by-tags/filter-by-tags.component.html | 18 +++ .../filter-by-tags.component.spec.ts | 45 ++++++ .../filter-by-tags/filter-by-tags.component.ts | 100 +++++++++++++ .../package-list/package-list.component.html | 156 +++++++++++---------- .../package-list/package-list.component.ts | 40 +++--- .../package-pagination.component.html | 9 +- .../package-pagination.component.ts | 51 ++++--- .../packages-dashboard.component.html | 70 +++++---- .../packages-dashboard.component.ts | 5 +- .../search-by-packages.component.css | 0 .../search-by-packages.component.html | 4 + .../search-by-packages.component.spec.ts | 25 ++++ .../search-by-packages.component.ts | 25 ++++ .../search-by-tags/search-by-tags.component.css | 0 .../search-by-tags/search-by-tags.component.html | 46 ------ .../search-by-tags.component.spec.ts | 46 ------ .../search-by-tags/search-by-tags.component.ts | 94 ------------- .../search-by-tags/search-by-tags.service.spec.ts | 12 -- .../packages/packages-list.service.ts | 18 +-- .../feature-modules/packages/packages.module.ts | 9 +- .../packages/packages.routing.module.ts | 4 +- .../feature-modules/packages/packages.store.ts | 73 ++++++++-- cds-ui/client-frankfurt/src/styles.css | 37 ++++- 26 files changed, 538 insertions(+), 391 deletions(-) create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts create mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts delete mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css delete mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html delete mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts delete mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts delete mode 100644 cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts (limited to 'cds-ui/client-frankfurt/src') diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css index d41bf5222..faa419c80 100644 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -184,7 +184,7 @@ button.rotate{ .input-search-controller{ height: 50px; padding-left: 30px; - background: url(/assets/img/icon-search-light.svg) #fff 10px center no-repeat; + background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -333,7 +333,7 @@ p.compType-4{ padding-left: 36px; border: 0; font-size: 14px; - background: url(/assets/img/icon-drag.svg) #fff 20px center no-repeat; + background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; } /*CANVAS*/ @@ -365,10 +365,10 @@ p.compType-4{ padding-left: 30px; } .viewBtns .topologySource{ - background-image: url(/assets/img/icon-topologyView-active.svg); + background-image: url(src/assets/img/icon-topologyView-active.svg); } .viewBtns .topologyView{ - background-image: url(/assets/img/icon-topologySource.svg); + background-image: url(src/assets/img/icon-topologySource.svg); } .card.actionContainer{ margin: 20px 20px 40px 60px; @@ -391,6 +391,7 @@ p.compType-4{ background: #C3CDDB; } .actionContainer .card-body{ + min-height: 170px; padding: 15px 20px !important; border: solid 1px #C3CDDB; background: #fff; diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts new file mode 100644 index 000000000..068e93160 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts @@ -0,0 +1,33 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {BluePrintPage} from './BluePrint.model'; + +export class PackagesDashboardState { + + page: BluePrintPage; + command: string; + currentPage = 0; + totalPackages: number; + tags: string[]; + sortBy = 'DATE'; + totalPackagesWithoutSearchorFilters: number; +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-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 new file mode 100644 index 000000000..e69de29bb 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 @@ +
+ +
ALL PACKAGES TAGS
+
    +
  • +
    + +
    +
    • +
  • +
    + + +
    +
    • +
+
+ diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-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 new file mode 100644 index 000000000..8285d8962 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts @@ -0,0 +1,45 @@ +/* +============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 { TagsFilteringComponent } from './filter-by-tags.component'; + +describe('SearchByTagsComponent', () => { + let component: TagsFilteringComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TagsFilteringComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TagsFilteringComponent); + 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/filter-by-tags/filter-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 new file mode 100644 index 000000000..b4007215a --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -0,0 +1,100 @@ +/* +============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-filter-by-tags', + templateUrl: './filter-by-tags.component.html', + styleUrls: ['./filter-by-tags.component.css'] +}) + +export class TagsFilteringComponent implements OnInit { + + page: BluePrintPage; + tags: string[] = []; + viewedTags: string[] = []; + searchTag = ''; + viewedPackages: BlueprintModel[] = []; + private checkBoxTages = ''; + + + 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() { + + } + + 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.packagesStore.getPagesFilterByTags(this.checkBoxTages); + // this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); + } + + +} 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 @@ -
- -
-
- -
-
-
- Create Package - +
+
+ +
+
+
-
- Import Package - +
+
+ Create Package + +
+
+ Import Package + +
-
-
+
- -
-
-
-
-
-
{{bluePrint.artifactName}}
-

Last modified {{bluePrint.createdDate}} by {{bluePrint.updatedBy}}

- -
-
- -
- -
- + +
+
+
+
+
+
+ + {{bluePrint.artifactName}} +
+ +
+
+ +
+ +
+ +
+
-
+
+
+
+

Last modified {{ bluePrint.createdDate | date:'short' }} +

+

By {{bluePrint.updatedBy}}

+
-
-
-
-
- -
-
- +
+
+
+ +
+
+ +
+
- - -
-
\ 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 @@ +
- -
\ 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.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 @@
- - -
-
-

CBA Packages - (20 packages) -

-
-
-
-
+ + +
-
-
\ 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 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 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 @@ +
+ + +
\ 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; + + 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.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css deleted file mode 100644 index e69de29bb..000000000 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 @@ - -
-
-
-
- - -
-
-
-
- -
ALL PACKAGES TAGS
-
    -
  • -
    - -
    -
    • -
  • -
    - - -
    - -
    • - -
-
-
-
-
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 deleted file mode 100644 index aaacfb9e8..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* -============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; - - 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 deleted file mode 100644 index b5cc52fc0..000000000 --- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts +++ /dev/null @@ -1,94 +0,0 @@ -/* -============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 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) { } - getPagedPackages(pageNumber: number, pageSize: number): Observable { + getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable { 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) { 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 { - private bluePrintModels: BluePrintPage; - +export class PackagesStore extends Store { // 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; -- cgit 1.2.3-korg