import { Component , OnInit , Input , Output , EventEmitter , forwardRef , ChangeDetectorRef } from '@angular/core' ; import { LanguagesService } from '../../../@core/services/languages.service' ; import { ILanguage } from '@gauzy/contracts' ; import { TranslationBaseComponent } from '../../language-base/translation-base.component' ; import { TranslateService } from '@ngx-translate/core' ; import { Store } from '../../../@core' ; import { filter , tap } from 'rxjs/operators' ; import { NbComponentSize } from '@nebular/theme' ; import { UntilDestroy , untilDestroyed } from '@ngneat/until-destroy' ; import { NG_VALUE_ACCESSOR } from '@angular/forms' ; @ UntilDestroy ( { checkProperties : true } ) @ Component ( { selector : 'ngx-language-selector' , templateUrl : './language-selector.component.html' , styleUrls : [ './language-selector.component.scss' ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => LanguageSelectorComponent ) , multi : true } ] } ) export class LanguageSelectorComponent extends TranslationBaseComponent implements OnInit { languages : ILanguage [ ] ; loading : boolean ; onChange : any = ( ) => { } ; onTouch : any = ( ) => { } ; _placeholder : string = this . getTranslation ( 'MENU.LANGUAGE' ) ; get placeholder ( ) : string { return this . _placeholder ; } @ Input ( ) set placeholder ( value ) { this . _placeholder = value ; } _clearable : boolean ; get clearable ( ) : boolean { return this . _clearable ; } @ Input ( ) set clearable ( value ) { this . _clearable = value ; } _addTag : boolean ; get addTag ( ) : boolean { return this . _addTag ; } @ Input ( ) set addTag ( value ) { this . _addTag = value ; } _selectedLanguageCode : string ; get selectedLanguageCode ( ) : string { return this . _selectedLanguageCode ; } @ Input ( ) set selectedLanguageCode ( value ) { if ( value ) { this . _selectedLanguageCode = value ; this . onChange ( value ) ; this . onTouch ( value ) ; } } @ Input ( ) selectBy : 'code' | 'object' = 'code' ; _template : string ; get template ( ) : string { return this . _template ; } @ Input ( ) set template ( value ) { this . _template = value ; } _size : NbComponentSize = 'medium' ; get size ( ) : NbComponentSize { return this . _size ; } @ Input ( ) set size ( value ) { this . _size = value ; } @ Output ( ) selectedLanguageEvent = new EventEmitter < ILanguage > ( ) ; constructor ( private readonly languagesService , readonly translate , private readonly store , private cd ) { super ( translate ) ; this . store . preferredLanguage$ . pipe ( filter ( ( preferredLanguage ) => ! ! preferredLanguage ) , tap ( ( preferredLanguage ) => this . selectedLanguageCode = preferredLanguage ) , untilDestroyed ( this ) ) . subscribe ( ) ; } onChangeLanguage ( currentSelection ) { let selectedLanguage ; if ( this . selectBy === 'object' ) { selectedLanguage = currentSelection ; } else { selectedLanguage = currentSelection ?. code || this . selectedLanguageCode ; } this . selectedLanguageEvent . emit ( selectedLanguage ) ; } onSelectedChange ( code ) { this . cd . detectChanges ( ) ; let selectedLanguage ; if ( this . selectBy === 'object' ) { selectedLanguage = this . getLanguageByCode ( code ) ; } else { selectedLanguage = code || this . selectedLanguageCode ; } this . selectedLanguageEvent . emit ( selectedLanguage ) ; } writeValue ( value ) { this . _selectedLanguageCode = value ; } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouch = fn ; } addLanguage = async ( languageName ) => { const newLanguage = { name : languageName , color : '#' + Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) , description : '' } ; this . loading = true ; const language = await this . languagesService . insertLanguage ( newLanguage ) ; this . loading = false ; return language ; } ; async ngOnInit ( ) { await this . getAllLanguages ( ) ; if ( this . selectBy === 'object' ) { this . checkPreFilledLanguage ( ) ; } } async getAllLanguages ( ) { const { items } = await this . languagesService . getAllLanguages ( ) ; this . languages = items ; } checkPreFilledLanguage ( ) { if ( ! this . selectedLanguageCode ) { return ; } if ( this . languages ?. length > 0 ) { const selectedLanguage = this . getLanguageByCode ( this . selectedLanguageCode ) ; this . onChangeLanguage ( selectedLanguage ) ; } } getLanguageByCode ( code ) { return this . languages . find ( ( language ) => code === language . code ) ; } }