diff options
author | Ahmed Abbas <ahmad.helmy@orange.com> | 2019-11-27 15:04:18 +0200 |
---|---|---|
committer | Ahmed Abbas <ahmad.helmy@orange.com> | 2019-11-27 15:04:18 +0200 |
commit | eea49075a4a8bb62a5a15ec31adfe52e1f1f3b7a (patch) | |
tree | d0c8e90ba9ce30262e72b86873c8fde5ff60605c /cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard | |
parent | 341db21b2ac0a14a1ed2b8bf7930914dda054bfe (diff) |
filter packages by tag
rename filter-by-keyword to search-by-packages
Issue-ID: CCSDK-1968
Issue-ID: CCSDK-1951
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: I4667f2b9e98ba7e217ba7ab15e5cd8c45bee0c33
Diffstat (limited to 'cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard')
16 files changed, 276 insertions, 232 deletions
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(); - }); -}); |