File

app/sitesearch/shared/search-tabs/search-tabs.component.ts

Implements

OnInit OnDestroy

Metadata

selector search-tabs
styleUrls ./search-tabs.component.scss
templateUrl ./search-tabs.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(loadingService: LoadingIndicatorService, searchFactory: SearchFactory, activatedRoute: ActivatedRoute, labelService: LabelService)
Parameters :
Name Type Optional
loadingService LoadingIndicatorService No
searchFactory SearchFactory No
activatedRoute ActivatedRoute No
labelService LabelService No

Inputs

tabs

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Public selectTab
selectTab(tab)

Swithes to clicked tab and performs search on that tab

Parameters :
Name Optional
tab No
Returns : void
Public showTab
showTab(tab)
Parameters :
Name Optional
tab No
Returns : boolean

Properties

Public activatedRoute
Type : ActivatedRoute
allLabel
Type : string
clickedTab
isLoading
Type : boolean
libraryLabel
Type : string
Public loadingService
Type : LoadingIndicatorService
mobileView
newsLabel
Type : string
productLabel
Type : string
search
Type : SearchService
Public searchFactory
Type : SearchFactory
selectedTab
subscriptions
Type : []
Default value : []
tabResult
Type : string
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>

./search-tabs.component.scss

@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
Component
Html element with directive

result-matching ""

    No results matching ""