diff options
Diffstat (limited to 'cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags')
5 files changed, 198 insertions, 0 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/search-by-tags/search-by-tags.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html new file mode 100644 index 000000000..ea6c742a0 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html @@ -0,0 +1,46 @@ +<!--Nav Search & Filter--> +<div class="col search-filter-col"> + <div class="row"> + <div class="col-7"> + <div class="searchBox"> + <input class="searchInput" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages"> + <button class="searchButton" href="#"></button> + </div> + </div> + <div class="col-5 pl-2"> + <div class="dropdown packagesFilter w-100"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">ALL PACKAGES TAGS</div> + <ul class="dropdown-content w-100"> + <li> + <div class="form-group"> + <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus> + </div> + </li> + <li *ngFor="let tag of viewedTags"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}> + <label class="custom-control-label" for={{tag}}>{{tag}}</label> + </div> + <!--<div class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input" id="customCheck2"> + <label class="custom-control-label" for="customCheck2">Check this custom + checkbox</label> + </div> + <div class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input" id="customCheck3"> + <label class="custom-control-label" for="customCheck3">Check this custom + checkbox</label> + </div> + <div class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input" id="customCheck4"> + <label class="custom-control-label" for="customCheck4">Check this custom + checkbox</label> + </div>--> + </li> + + </ul> + </div> + </div> + </div> +</div> diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts new file mode 100644 index 000000000..aaacfb9e8 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts @@ -0,0 +1,46 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchByTagsComponent } from './search-by-tags.component'; + +describe('SearchByTagsComponent', () => { + let component: SearchByTagsComponent; + let fixture: ComponentFixture<SearchByTagsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchByTagsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchByTagsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts new file mode 100644 index 000000000..b5cc52fc0 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts @@ -0,0 +1,94 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; +import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model'; + +@Component({ + selector: 'app-search-by-tags', + templateUrl: './search-by-tags.component.html', + styleUrls: ['./search-by-tags.component.css'] +}) + +export class SearchByTagsComponent implements OnInit { + + page: BluePrintPage; + tags: string[] = []; + viewedTags: string[] = []; + searchTag = ''; + viewedPackages: BlueprintModel[] = []; + private checkBoxTages = ''; + private searchPackage = ''; + + constructor(private packagesStore: PackagesStore, + ) { + } + + ngOnInit() { + + } + + reloadChanges(event: any) { + this.searchTag = event.target.value; + this.filterItem(this.searchTag); + } + + private assignTags() { + this.viewedTags = this.tags; + } + + private filterItem(value) { + if (!value) { + this.assignTags(); + } + this.viewedTags = this.tags.filter( + item => item.toLowerCase().indexOf(value.toLowerCase()) > -1 + ); + } + + reloadPackages(event: any) { + + if (!event.target.checked) { + this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '') + .replace(event.target.id, ''); + } else { + this.checkBoxTages += event.target.id.trim() + ','; + } + console.log(this.checkBoxTages); + if (!this.checkBoxTages.includes(',')) { + return; + } + this.viewedPackages = []; + this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index); + } + + searchPackages(event: any) { + this.searchPackage = event.target.value; + this.searchPackage = this.searchPackage.trim(); + if (this.searchPackage) { + this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2); + + } else { + this.packagesStore.getPagedPackages(0, 2); + } + } +} diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts new file mode 100644 index 000000000..116441bc2 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts @@ -0,0 +1,12 @@ +import {TestBed} from '@angular/core/testing'; + +import {SearchByTagsService} from './search-by-tags.service'; + +describe('SearchByTagsService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: SearchByTagsService = TestBed.get(SearchByTagsService); + expect(service).toBeTruthy(); + }); +}); |