import { Component , OnInit , OnDestroy } from '@angular/core' ; import { ActivatedRoute , Router } from '@angular/router' ; import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap' ; import { Title } from '@angular/platform-browser' ; import { HomeService } from './home.service' ; import { NavService } from '../shared/nav.service' ; import { Brand } from './interfaces/brands.interface' ; import { OS } from './interfaces/os.interface' ; import { Processor } from './interfaces/processor.interface' ; import { RAM } from './interfaces/ram.interface' ; import { Storage } from './interfaces/storage.interface' ; import { QueryParam } from './interfaces/queryparam.interface' ; @ Component ( { selector : 'app-home' , templateUrl : 'home.component.html' , providers : [ HomeService , NgbRatingConfig ] , styleUrls : [ 'home.component.scss' ] } ) export class HomeComponent implements OnInit , OnDestroy { param : any ; brand : Brand ; os : OS ; processor : Processor ; ram : RAM ; storage : Storage ; queryParams : QueryParam ; searchResult = true ; minCustom : number ; maxCustom : number ; page = 1 ; itemsPerPage = 24 ; data : Array < Object > = [ ] ; totalItems : number ; isPrice = '' ; brandOptions = this . homeService . brandOptions ; osOptions = this . homeService . osOptions ; ramOptions = this . homeService . ramOptions ; processorOptions = this . homeService . processorOptions ; storageOptions = this . homeService . storageOptions ; priceOptions = this . homeService . priceOptions ; searchString : string ; showFilter = true ; constructor ( private route , private router , private homeService , private config , private titleService , private navService ) { config . max = 5 ; config . readonly = true ; } ngOnInit ( ) { this . navService . newRoute ( true ) ; this . routeParams ( ) ; } routeParams ( ) { this . param = this . route . queryParamMap . subscribe ( params => { this . queryParams = params ; const results = this . homeService . parseQueryParams ( this . queryParams ) ; const { queryObj , pageTitle } = results ; if ( pageTitle . length > 0 ) { this . titleService . setTitle ( `Node Amazon: ${ pageTitle . join ( ' / ' ) }` ) ; } else { this . titleService . setTitle ( 'Node Amazon: Laptops' ) ; } this . searchString = queryObj . search ; this . brand = queryObj . brand ; this . os = queryObj . os ; this . isPrice = `${ queryObj . min ? queryObj . min : '' },${ queryObj . max ? queryObj . max : '' }` ; if ( this . isPrice === ',' ) this . isPrice = '' ; this . processor = queryObj . processor ; this . ram = queryObj . ram ; this . storage = queryObj . storage ; if ( this . queryParams . params . page ) this . page = parseInt ( this . queryParams . params . page , 10 ) ; else this . page = 1 ; if ( this . isPrice && ! this . homeService . defaultPrices . includes ( this . isPrice ) ) { const price = this . isPrice . split ( ',' ) ; if ( price [ 0 ] ) this . minCustom = parseInt ( price [ 0 ] , 10 ) ; if ( price [ 1 ] ) this . maxCustom = parseInt ( price [ 1 ] , 10 ) ; } this . getResults ( ) ; } ) ; } getPage ( page , queryParam ) { const isMinCustom = ! ! ( this . minCustom || this . minCustom === 0 ) ; window . scrollTo ( 0 , 0 ) ; if ( window . innerWidth < 768 && ! this . showFilter ) { try { const resultsTab = document . getElementById ( 'back-btn' ) as HTMLElement ; resultsTab . click ( ) ; } catch ( err ) { } } if ( queryParam && queryParam !== '' ) page = 1 ; if ( queryParam === 'customPrice' ) { this . isPrice = `${ this . minCustom ? this . minCustom : '' },${ this . maxCustom ? this . maxCustom : '' }` ; if ( this . isPrice === ',' ) this . isPrice = '' ; } else if ( ( isMinCustom || this . maxCustom ) && queryParam === 'price' ) { this . minCustom = null ; this . maxCustom = null ; } const tempObj = { brand : this . brand , os : this . os , price : this . isPrice , processor : this . processor , ram : this . ram , storage : this . storage } ; const serializeQuery = this . homeService . serializeQueryParams ( tempObj ) ; const param = { ... serializeQuery , page } ; if ( isMinCustom && this . maxCustom ) { param . min = `${ this . minCustom }` ; param . max = `${ this . maxCustom }` ; } if ( this . searchString ) { param . search = this . searchString ; } this . router . navigate ( [ '' ] , { queryParams : param } ) ; } getResults ( ) { const tempObj = { brand : this . brand , os : this . os , processor : this . processor , ram : this . ram , storage : this . storage , page : this . page , search : this . searchString , price : this . isPrice , minCustom : this . minCustom , maxCustom : this . maxCustom } ; this . homeService . getAllProducts ( tempObj ) . subscribe ( result => { this . searchResult = result . data . length !== 0 ; this . data = result . data ; this . totalItems = result . total ; } ) ; } ngOnDestroy ( ) { this . param . unsubscribe ( ) ; this . navService . newRoute ( false ) ; } }