File
Implements
Metadata
selector |
search-tabs |
styleUrls |
./search-tabs.component.scss |
templateUrl |
./search-tabs.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
Public
selectTab
|
selectTab(tab)
|
|
Swithes to clicked tab and performs search on that tab
|
Public
showTab
|
showTab(tab)
|
|
|
search
|
Type : SearchService
|
|
Public
searchFactory
|
Type : SearchFactory
|
|
subscriptions
|
Type : []
|
Default value : []
|
|
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SearchFactory, SearchService } from 'skf-search-angular-service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { AppConfig } from '../../../app.config';
@Component ({
selector: 'search-tabs',
templateUrl: './search-tabs.component.html',
styleUrls: ['./search-tabs.component.scss']
})
export class SearchTabsComponent implements OnInit, OnDestroy {
@Input() tabs;
selectedTab;
clickedTab;
isLoading: boolean;
tabResult: string;
subscriptions = [];
mobileView;
search: SearchService;
// Labels
allLabel: string;
productLabel: string;
libraryLabel: string;
newsLabel: string;
constructor(
public loadingService: LoadingIndicatorService,
public searchFactory: SearchFactory,
public activatedRoute: ActivatedRoute,
private labelService: LabelService
) {
this.search = this.searchFactory.get(`site-search-v2-${AppConfig.settings.searchEnvironment.name}`);
}
ngOnInit() {
// State of loading spinner
this.subscriptions.push(
this.loadingService.searchLoaderState.subscribe(state => {
this.isLoading = state;
})
);
this.subscriptions.push(this.search.result.subscribe(res => {
if (!res['error']) {
this.selectedTab = res['search'].searchers.find(x => x.selected).name;
}
}));
// Fetch labels
this.labelService.getLabel('searchTabTitleAll').then(res => this.allLabel = res);
this.labelService.getLabel('searchTabTitleProducts').then(res => this.productLabel = res);
this.labelService.getLabel('searchTabTitleLibrary').then(res => this.libraryLabel = res);
this.labelService.getLabel('searchTabTitleNews').then(res => this.newsLabel = res);
}
ngOnDestroy(): void {
this.subscriptions.forEach(sub => {
if (sub) { sub.unsubscribe(); }
});
}
/** Swithes to clicked tab and performs search on that tab */
public selectTab(tab) {
if (tab !== this.selectedTab) {
this.clickedTab = tab;
const searcher = this.search.searchers.find(x => x.name === tab);
this.loadingService.show();
searcher.select();
}
}
// Only show tab if it is included in the tab list inputted from parent component.
public showTab(tab) {
if (this.tabs.indexOf(tab) > -1) { return true; }
else { return false; }
}
}
<div class="tabs-container">
<div class="container">
<div class="tabs">
<div class="tab" *ngIf="showTab('all')" (click)="selectTab('all')"
[ngClass]="{'selected': selectedTab=='all'}">
<div>{{ allLabel | uppercase }}</div>
<img class="load-spinner" src="/v2/assets/img/loader.gif" *ngIf="isLoading && clickedTab=='all'" />
</div>
<div class="tab" *ngIf="showTab('products')" (click)="selectTab('products')"
[ngClass]="{'selected': selectedTab=='products'}">
<div>{{ productLabel | uppercase }}</div>
<img class="load-spinner" src="/v2/assets/img/loader.gif" *ngIf="isLoading && clickedTab=='products'" />
</div>
<div class="tab" *ngIf="showTab('library')" (click)="selectTab('library')"
[ngClass]="{'selected': selectedTab=='library'}">
<div>{{ libraryLabel | uppercase }}</div>
<img class="load-spinner" src="/v2/assets/img/loader.gif" *ngIf="isLoading && clickedTab=='library'" />
</div>
<div class="tab" *ngIf="showTab('news')" (click)="selectTab('news')"
[ngClass]="{'selected': selectedTab=='news'}">
<div>{{ newsLabel | uppercase }}</div>
<img class="load-spinner" src="/v2/assets/img/loader.gif" *ngIf="isLoading && clickedTab=='news'" />
</div>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.tabs-container {
background-color: #fafafa;
border-bottom: 1px solid #ebebeb;
.tabs {
display: flex;
flex-direction: row;
justify-content: center;
user-select: none;
.tab {
position: relative;
padding: 10px 0;
width: 20%;
text-align: center;
border: 1px solid #e7ecea;
border-bottom: none;
border-radius: 2px;
@include font-size(15);
color: $cool-grey;
cursor: pointer;
@media (max-width: 575px) {
width: 25%;
@include font-size(13);
}
&:hover { color: $dark-green; }
span { margin-left: 5px; }
.load-spinner {
position: absolute;
right: 5%;
top: 10px;
@media (max-width: 577px) {
display: none;
}
}
&.selected {
background-color: white;
color: black;
border-top: 3px solid $green;
transform: translateY(2px);
font-weight: bold;
div {
transform: translateY(-4px);
}
}
}
}
}
Legend
Html element with directive