File

app/sitesearch/all-tab/alternative-document/alternative-document.component.ts

Implements

OnInit

Metadata

selector alternative-document
styleUrls alternative-document.component.scss
templateUrl alternative-document.component.html

Index

Properties
Methods
Inputs

Constructor

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

Inputs

product

Alternative documents include 'final variant', 'obsolete products' etc.

Methods

ngOnInit
ngOnInit()
Returns : void
Public replacementSearch
replacementSearch()
Returns : void

Properties

contactUs
Type : string
description
Type : string
finalVariant1
Type : string
finalVariant2
Type : string
finalVariant3
Type : string
finalVariant4
Type : string
finalVariant5
Type : string
obsoleteLabel
Type : string
prefixSuffix
pubName
Type : string
search
Type : SearchService
import { Component, OnInit, Input } from '@angular/core';
import { SearchFactory, SearchService } from 'skf-search-angular-service';
import { PublicationService } from 'src/app/core/services/publication-service/publication.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: 'alternative-document',
	templateUrl: 'alternative-document.component.html',
	styleUrls: ['alternative-document.component.scss']
})
export class AlternativeDocumentComponent implements OnInit {
	/** Alternative documents include 'final variant', 'obsolete products' etc. */

	@Input() product;
	description: string;
	prefixSuffix;
	contactUs: string;
	pubName: string;
	search: SearchService;

	// Labels
	finalVariant1: string;
	finalVariant2: string;
	finalVariant3: string;
	finalVariant4: string;
	finalVariant5: string;
	obsoleteLabel: string;


	constructor(
		private searchFactory: SearchFactory,
		private loadingService: LoadingIndicatorService,
		private publicationService: PublicationService,
		private labelService: LabelService
	) {
		this.search = this.searchFactory.get(`site-search-v2-${AppConfig.settings.searchEnvironment.name}`);
	}

	ngOnInit() {
		this.pubName = this.publicationService.getPublicationPath();
		this.prefixSuffix = `${this.pubName}/products/bearings-units-housings/principles/general-bearing-knowledge/bearing-basics/basic-bearing-designation-system/index.html`;
		this.contactUs = `${this.pubName}/our-company/contact-us/index.html?WT.oss=6205/C3&WT.z_oss_boost=1&tabname=All&WT.z_oss_rank=1`;

		// Fetch labels
		this.labelService.getLabel('finalVariantTextIntro').then(res => this.finalVariant1 = res);
		this.labelService.getLabel('finalVariantTextLinkPrefixSuffix').then(res => this.finalVariant2 = res);
		this.labelService.getLabel('finalVariantTextMiddle').then(res => this.finalVariant3 = res);
		this.labelService.getLabel('finalVariantTextLinkContact').then(res => this.finalVariant4 = res);
		this.labelService.getLabel('finalVariantTextEnd').then(res => this.finalVariant5 = res);
		this.labelService.getLabel('obsoleteProductText').then(res => this.obsoleteLabel = res);

	}

	public replacementSearch() {
		this.loadingService.show();
		this.search.doSearch({queryString: this.product.replacement_designation});
	}
}
<div class="special-document">
    <div class="info">
        <i class="fas fa-info-circle" aria-hidden="true"></i>
    </div>
    <div>
        <div class="title">
            <span>{{ product.designation }}</span>
        </div>
        <div class="desc">
            <div *ngIf="product.collection == 'final_variants'" class="final-variant">
                <span>{{ finalVariant1 }}</span> 
                <a class="link" href="{{prefixSuffix}}">{{ finalVariant2 }}</a>
                <span>{{ finalVariant3 }}</span>
                <a class="link" href="{{contactUs}}">{{ finalVariant4 }}</a>
                <span>{{ finalVariant5 }}</span>
            </div>
            <div *ngIf="product.collection == 'obsoletes'" class="obsolete">
                <span>{{ obsoleteLabel }}</span>
                <span (click)="replacementSearch()" class="link">{{product.replacement_designation}}</span>
            </div>
        </div>        
    </div>

</div>

alternative-document.component.scss

@import "src/app/styles/helpers";

.special-document {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;

    @media(max-width: 575px) {
        .title { @include font-size(15); }
        .desc { @include font-size(13); }
    }

    @media(min-width: 576px) {
        .title { @include font-size(17); }
        .desc { @include font-size(15); }
    }

    .info {
        display: flex;
        align-items: center;
        margin-right: 10px;
        @include font-size(20);
        color: $blue;
    }

    .title {
        display: flex;
        flex-direction: row;
        text-decoration: none;
        font-weight: 600;
    }

    .desc {
        display: flex;
        flex-direction: row;

        .link {
            margin-right: 4px;
        }

    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""