diff options
author | 2020-02-05 15:40:15 +0530 | |
---|---|---|
committer | 2020-02-05 10:16:03 +0000 | |
commit | df54a39b99fd5e1a52522623dfdfc0d2247f1dbf (patch) | |
tree | af438a55d7fd0c4412c60fc7787792c07e3568c4 /portal-FE-common/src/app/layout/components/global-search | |
parent | 099ece77f49e4a6bc4d9b35ef03a5e0f33bf8384 (diff) |
global-search and search user components
global-search and search user components with service
Issue-ID: PORTAL-827
Change-Id: I503b259b71f3edcb27456d4e37c84fb356239f31
Signed-off-by: jz385p <jegadeesh.babu@att.com>
Diffstat (limited to 'portal-FE-common/src/app/layout/components/global-search')
4 files changed, 397 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/layout/components/global-search/global-search.component.html b/portal-FE-common/src/app/layout/components/global-search/global-search.component.html new file mode 100644 index 00000000..ff5473be --- /dev/null +++ b/portal-FE-common/src/app/layout/components/global-search/global-search.component.html @@ -0,0 +1,109 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2019 AT&T Intellectual Property. 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. + + Unless otherwise specified, all documentation contained herein is licensed + under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + you may not use this documentation except in compliance with the License. + You may obtain a copy of the License at + + https://creativecommons.org/licenses/by/4.0/ + + Unless required by applicable law or agreed to in writing, documentation + 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============================================ + + + --> +<div class="search-div" (clickOutside)="clickOutSide($event)"> + <div class="notification-div"> + <div class="form-field form-field__small"> + <div class="search-input"> + <input id="mainSearchText" style="border-radius:0.25rem;" type="text" (keypress)="searchDialogToggle($event)" + placeholder="What are you looking for?" class="form-field form-field__small" /> + </div> + <span class="icon-search-span"> <i class="icon-search"> </i> + </span> + + </div> + </div> +</div> +<div *ngIf="searchResDialog" class="search-res-dialog"> + <div id="reg-header-snippet"> + + <div tabindex="0" id="reg-searchPop-id"> + <div id="contentVertical" att-scrollbar="y"> + <ul class="searchUl"> + <li><a class="icon-tiles"></a> <a id="search-app-title" (click)="goToUrl(item)" + class="searchLiHeader">Applications:</a> + </li> + <li *ngFor="let item of items?.application"><a + id="search-app-item-{{item.name.split(' ').join('-')}}-{{$index}}" (click)="goToUrl(item)" + class="searchLiItems">{{item.name}}</a> + </li> + </ul> + + <ul class="searchUl"> + <li><a class="icon-tiles-small"></a> <a id="seach-functional-menu-title" (click)="goToUrl(item)" + class="searchLiHeader">Functional Menus:</a></li> + <li *ngFor="let item of items?.menu"><a + id="search-functional-menu-item-{{item.name.split(' ').join('-')}}-{{$index}}" (click)="goToUrl(item)" + class="searchLiItems">{{item.name}}</a> + </li> + </ul> + + + <ul class="searchUl"> + <li><a class="full-linear-icon-person search-li"></a> <a id="search-user-title" (click)="goToUrl(item)" + class="searchLiHeader">Users:</a></li> + <li *ngFor="let item of items?.user"><a id="search-user-item-{{item.name.split(' ').join('-')}}-{{$index}}" + href="qto://talk/{{item.target}}" class="searchLiItems">{{item.name}}</a> + + </li> + </ul> + + <ul class="searchUl"> + <li><a class="full-linear-icon-person search-li"></a> <a id="search-widgets-title" (click)="goToUrl(item)" + class="searchLiHeader">Widgets:</a></li> + <li *ngFor="let item of items?.widget"><a + id="search-widgets-item-{{item.name.split(' ').join('-')}}-{{$index}}" href="widgetCatalog" + class="searchLiHeader">{{item.name}}</a></li> + </ul> + + <ul class="searchUl"> + <li><a class="full-linear-icon-internet search-li"></a> <a id="search-intranet" + (click)="goToUrl(item, 'intra')" class="searchLiHeader" style="cursor: pointer;">Click to search + Intranet <span class="icon-arrow-right"></span> + </a></li> + </ul> + + <ul class="searchUl"> + <li><a class="full-linear-icon-internet search-li"></a> <a id="search-extranet" + (click)="goToUrl(item, 'extra')" class="searchLiHeader" style="cursor: pointer;">Click to search + Extranet <span class="icon-arrow-right"></span></a></li> + </ul> + + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/layout/components/global-search/global-search.component.scss b/portal-FE-common/src/app/layout/components/global-search/global-search.component.scss new file mode 100644 index 00000000..70f1b34c --- /dev/null +++ b/portal-FE-common/src/app/layout/components/global-search/global-search.component.scss @@ -0,0 +1,74 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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============================================ + * + * + */ + + .search-div { + margin-bottom: -14px; + } + + .search-res-dialog{ + position: fixed; + background: white; + box-shadow: rgba(0, 0, 0, 0.247059) 0px 5px 6px 0px; + top: 2.5em; + border-radius: 0.25rem; + padding: 20px; + opacity: 1; + z-index: 1; + } + .searchUl { + list-style: none; + border-bottom: 1px solid #bbb; + padding-bottom: 20px; + padding-left: 4px; + } + .searchLiHeader { + font-weight: bold; + color: #0574ac; + font-size: 16px; + padding-bottom: 10px; + line-height: 1.5; + font-family: Omnes-ECOMP-W02,Arial; + + } + .searchLiItems{ + cursor: pointer; + font-weight: normal; + font-size: 12px; + color: #444444; + font-family: Omnes-ECOMP-W02,Arial; + }
\ No newline at end of file diff --git a/portal-FE-common/src/app/layout/components/global-search/global-search.component.spec.ts b/portal-FE-common/src/app/layout/components/global-search/global-search.component.spec.ts new file mode 100644 index 00000000..c3771377 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/global-search/global-search.component.spec.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * 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 { GlobalSearchComponent } from './global-search.component'; + +describe('GlobalSearchComponent', () => { + let component: GlobalSearchComponent; + let fixture: ComponentFixture<GlobalSearchComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GlobalSearchComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GlobalSearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/layout/components/global-search/global-search.component.ts b/portal-FE-common/src/app/layout/components/global-search/global-search.component.ts new file mode 100644 index 00000000..f98ea397 --- /dev/null +++ b/portal-FE-common/src/app/layout/components/global-search/global-search.component.ts @@ -0,0 +1,152 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. 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. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { GlobalSearchService } from 'src/app/shared/services/global-search/global-search.service'; +import { GlobalSearchItem } from 'src/app/shared/model/global-search-item.model'; +import * as $ from 'jquery'; +import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service'; +import { Router } from '@angular/router'; +import { environment } from 'src/environments/environment'; + +@Component({ + selector: 'app-global-search', + templateUrl: './global-search.component.html', + styleUrls: ['./global-search.component.scss'] +}) +export class GlobalSearchComponent implements OnInit { + searchResDialog: boolean = false; + items: any; + searchString: string; + api = environment.api; + constructor(private globalSearchService: GlobalSearchService, private addTabFuntionService: AddTabFunctionService, private router: Router) { } + + ngOnInit() { + } + + showHideSearchSnippet() { + setTimeout(() => { + $('#mainSearchSnippet').click(); + }, 1000); + setTimeout(() => { + $('mainSearchText').focus(); + }, 1000); + } + + mainSearchEvent = $('#mainSearchDiv').keyup((event) => { + if (event.keyCode == 13) { + + this.getSearchResult(<string><any>$('#mainSearchText').val()); + + // opens the popup + var popupDomObj = $("[content='searchSnippet.html']"); + if (popupDomObj.length == 0) { + this.showHideSearchSnippet(); + } else { + $('#mainSearchSnippet').click(); + this.showHideSearchSnippet(); + } + + + + } + }); + + clickOutSide(event: any) { + + this.searchResDialog = false; + + } + searchDialogToggle(event: any) { + if (event.keyCode == 13) { + this.searchResDialog = true; + this.searchString = <string><any>$('#mainSearchText').val(); + this.getSearchResult(<string><any>$('#mainSearchText').val()); + } + } + + getSearchResult(searchString: string) { + //console.log("getSearch Result"); + this.globalSearchService.getSearchResults(searchString).subscribe(data => { + //console.log("Response data" + data); + this.items = data.response; + //console.log("search result data" + JSON.stringify(data)); + + }, error => { + console.log('getSearchResult Error Object' + error); + }); + }; + goToUrl(item: any, type?: any) { + //console.log('check goto'); + //var a = { 'test1': 'value1', 'test2': 'value3', 'test3': 'value2' }; + if (type == 'intra') { + + var intraSearcLink = this.api.intraSearcLink; + var intraSpecSearcLink = intraSearcLink + encodeURIComponent(this.searchString); + window.open(intraSpecSearcLink, '_blank'); + + } else if (type == 'extra') { + var extraSearcLink = this.api.extraSearcLink; + var extraSpecSearcLink = extraSearcLink + encodeURIComponent(this.searchString); + window.open(extraSpecSearcLink, '_blank'); + } + let url = item.target; + let restrictedApp = item.uuid; + let getAccessState = "getAccess" + console.log("item.target " + item.target + "item.uuid " + item.uuid); + if (!url) { + this.router.navigate(['/' + getAccessState]); + //$log.info('No url found for this application, doing nothing..'); + return; + } + if (!restrictedApp) { + window.open(url, '_blank'); + } else { + if (item.url == "root.access") { + this.router.navigate(['/' + item.url]); + var tabContent = { id: new Date(), title: 'Home', url: url }; + // $cookies.putObject('addTab', tabContent ); + this.addTabFuntionService.filter(tabContent); + } else { + var tabContentCtrl = { id: new Date(), title: item.name, url: url }; + this.addTabFuntionService.filter(tabContentCtrl); + } + } + + } + +} |