From 34da989c9b1ce0a3a9257e02d6b7a224e6a17c76 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 14 Feb 2022 10:37:38 +0100 Subject: [PATCH] translate title on steps creation and on lang change --- src/app/app.component.ts | 44 +++++++++-------- .../core/components/home/home.component.ts | 11 +++-- src/app/core/services/language.service.ts | 3 +- src/app/core/services/poll.service.ts | 48 +++++++++++++++++++ src/app/core/services/storage.service.ts | 3 +- .../form/steps/step-two/step-two.component.ts | 2 + .../nav-steps/nav-steps.component.ts | 1 + .../stepper/stepper.component.ts | 16 +++++-- .../language-selector.component.ts | 3 ++ 9 files changed, 100 insertions(+), 31 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e71c0a0a..f3b25a01 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -14,6 +14,10 @@ import { PollService } from './core/services/poll.service'; import { PrimeNGConfig } from 'primeng/api'; import { ApiService } from './core/services/api.service'; import { DOCUMENT } from '@angular/common'; +import { Poll } from './core/models/poll.model'; +import { TranslateService } from '@ngx-translate/core'; +import { ToastService } from './core/services/toast.service'; +import { StorageService } from './core/services/storage.service'; @Component({ selector: 'app-root', @@ -30,15 +34,19 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { public isSidebarOpened = false; public devModeEnabled = !environment.production; public environment = environment; + public onHomePage = false; private themeSubscription: Subscription; constructor( private router: Router, private titleService: Title, + private translate: TranslateService, private themeService: ThemeService, private pollService: PollService, + private storageService: StorageService, private apiService: ApiService, + private toastService: ToastService, private config: PrimeNGConfig, @Inject(DOCUMENT) private document: any, private languageService: LanguageService // private mockingService: MockingService @@ -57,6 +65,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { ngOnInit(): void { this.languageService.getPrimeNgStrings().subscribe((resp) => { this.config.setTranslation(resp); + this.pollService.updateTitle(); }); this.printpath('', this.router.config); @@ -64,9 +73,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { if (!(evt instanceof NavigationEnd)) { return; } - console.log('evt', evt); this.onHomePage = evt.url === '/'; + this.pollService.updateTitle(); setTimeout(() => { window.scrollTo(0, 0); }, 10); @@ -76,12 +85,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { this.appTitle += ' [DEV]'; } - let loadedPoll; - if (this.pollService.poll) { - loadedPoll = this.pollService.poll; - } - - this.titleService.setTitle(this.appTitle + ' - ' + loadedPoll.title); this.languageService.configureAndInitTranslations(); this.themeSubscription = this.themeService.theme.subscribe((theme: Theme) => { switch (theme) { @@ -98,12 +101,23 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { this.themeClass = 'theme-light-watermelon'; } }); - - // debug cors - // this.apiService.getAllAvailablePolls(); } ngAfterViewInit(): void { + this.setupShortcuts(); + } + + ngOnDestroy(): void { + if (this.themeSubscription) { + this.themeSubscription.unsubscribe(); + } + } + + prepareRoute(outlet: any) { + return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation; + } + + private setupShortcuts() { this.shortcuts.push( { key: '?', @@ -127,14 +141,4 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { } ); } - - ngOnDestroy(): void { - if (this.themeSubscription) { - this.themeSubscription.unsubscribe(); - } - } - - prepareRoute(outlet: any) { - return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation; - } } diff --git a/src/app/core/components/home/home.component.ts b/src/app/core/components/home/home.component.ts index 5c99b912..c6421f91 100644 --- a/src/app/core/components/home/home.component.ts +++ b/src/app/core/components/home/home.component.ts @@ -5,6 +5,8 @@ import { ApiService } from '../../services/api.service'; import { ToastService } from '../../services/toast.service'; import { DOCUMENT } from '@angular/common'; import { Title } from '@angular/platform-browser'; +import { PollService } from '../../services/poll.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-home', @@ -24,12 +26,15 @@ export class HomeComponent implements OnInit { public toastService: ToastService, public titleService: Title, private api: ApiService, + private pollService: PollService, + private translate: TranslateService, private cd: ChangeDetectorRef - ) { - this.titleService.setTitle(environment.appTitle + ' - Landing '); - } + ) {} + ngOnInit() { // this.openModalFindPoll(); + this.pollService.step_current = null; + this.pollService.updateTitle(); } searchMyPolls() { diff --git a/src/app/core/services/language.service.ts b/src/app/core/services/language.service.ts index e8e6c618..ad07d338 100644 --- a/src/app/core/services/language.service.ts +++ b/src/app/core/services/language.service.ts @@ -3,6 +3,7 @@ import { LangChangeEvent, TranslateService } from '@ngx-translate/core'; import { LanguageEnum } from '../enums/language.enum'; import { StorageService } from './storage.service'; +import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root', @@ -52,7 +53,7 @@ export class LanguageService { // set default language if (!this.translate.currentLang) { - this.setLanguage(LanguageEnum.fr); + this.setLanguage(LanguageEnum[environment.defaultLanguage]); } } diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index 9fdfca9a..0763ba8a 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -87,6 +87,54 @@ export class PollService implements Resolve { } } + updateTitle() { + let suppl = environment.production ? ' [DEV]' : ''; + let apptitle = environment.appTitle + suppl; + let step_current; + if (this.step_current) { + // in creation tunnel + let stepsTitle = { + date: [ + 'creation.title', + 'creation.want', + 'dates.title', + 'hours.title', + 'advanced.title', + 'owner.title', + 'resume.title', + ], + text: [ + 'creation.title', + 'creation.want', + 'dates.title', + 'hours.title', + 'advanced.title', + 'owner.title', + 'resume.title', + ], + }; + + let kind = 'date'; + step_current = this.step_current | 1; + if (this.form.value.isAboutDate) { + kind = 'text'; + } + let keyToTranslate = stepsTitle[kind][(step_current - 1) | 0]; + + this.translate.get(keyToTranslate).subscribe( + (resp) => { + this.titleService.setTitle(environment.appTitle + ' - ' + resp + ' - ' + this.form.value.title); + }, + (err) => { + console.error(err); + this.toastService.display(err.message); + } + ); + } else { + this.titleService.setTitle(apptitle); + } + } + /** * add example values to the form for demo env */ diff --git a/src/app/core/services/storage.service.ts b/src/app/core/services/storage.service.ts index f183d64c..2866a082 100644 --- a/src/app/core/services/storage.service.ts +++ b/src/app/core/services/storage.service.ts @@ -9,7 +9,6 @@ import { DateChoice, defaultTimeOfDay, TimeSlices } from '../../../../mocks/old- import { Poll } from '../models/poll.model'; import { Owner } from '../models/owner.model'; import { DateUtilitiesService } from './date.utilities.service'; -import { ToastService } from './toast.service'; @Injectable({ providedIn: 'root', @@ -51,7 +50,7 @@ export class StorageService { }, ]; - constructor(public dateUtilities: DateUtilitiesService, private toastService: ToastService) { + constructor(public dateUtilities: DateUtilitiesService) { if (environment.autofill_participation) { this.userPolls.push(new Poll(new Owner(), 'Démo: Anniversaire de tonton Patrick', 'aujourdhui-ou-demain')); this.userPolls.push(new Poll(new Owner(), 'Démo: Atelier cuisine du quartier', 'aujourdhui-ou-demain')); diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.ts b/src/app/features/administration/form/steps/step-two/step-two.component.ts index d971e87d..0653835e 100644 --- a/src/app/features/administration/form/steps/step-two/step-two.component.ts +++ b/src/app/features/administration/form/steps/step-two/step-two.component.ts @@ -10,6 +10,7 @@ import { DateUtilitiesService } from '../../../../../core/services/date.utilitie import { ApiService } from '../../../../../core/services/api.service'; import { environment } from '../../../../../../environments/environment'; import { Title } from '@angular/platform-browser'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-step-two', @@ -37,6 +38,7 @@ export class StepTwoComponent implements OnInit { public pollService: PollService, private router: Router, private titleService: Title, + private translate: TranslateService, public dateUtilities: DateUtilitiesService, private apiService: ApiService, @Inject(DOCUMENT) private document: any diff --git a/src/app/features/administration/nav-steps/nav-steps.component.ts b/src/app/features/administration/nav-steps/nav-steps.component.ts index a75b5c59..340c9585 100644 --- a/src/app/features/administration/nav-steps/nav-steps.component.ts +++ b/src/app/features/administration/nav-steps/nav-steps.component.ts @@ -44,6 +44,7 @@ export class NavStepsComponent implements OnInit { this.pollService.createPoll().then( (resp) => { this.router.navigate(['/administration/success']); + this.pollService.step_current = null; }, (err) => { console.error('oops err', err); diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts index 010acb20..ce8e646b 100644 --- a/src/app/features/administration/stepper/stepper.component.ts +++ b/src/app/features/administration/stepper/stepper.component.ts @@ -1,15 +1,18 @@ -import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; import { PollService } from '../../../core/services/poll.service'; import { environment } from '../../../../environments/environment'; import { Router } from '@angular/router'; import { DOCUMENT } from '@angular/common'; +import { Title } from '@angular/platform-browser'; +import { TranslateService } from '@ngx-translate/core'; +import { ToastService } from '../../../core/services/toast.service'; @Component({ selector: 'app-stepper', templateUrl: './stepper.component.html', styleUrls: ['./stepper.component.scss'], }) -export class StepperComponent { +export class StepperComponent implements OnInit { @Input() public stepperConfirm: HTMLElement; @@ -25,10 +28,12 @@ export class StepperComponent { public pollService: PollService, @Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef, + private titleService: Title, + private toastService: ToastService, + private translate: TranslateService, private router: Router - ) { - this.step_current = this.pollService.step_current; - } + ) {} + ngOnInit() {} showCancelDialog() { this.display_cancel_dialog = true; @@ -41,6 +46,7 @@ export class StepperComponent { console.log('not found'); } } + focusOnCancelButton() { this.display_cancel_dialog = false; let buttonClose = this.document.querySelector('#display_cancel_popup_button'); diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts index 6c82a7fa..85d87305 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts @@ -4,6 +4,7 @@ import { LanguageEnum } from '../../../../core/enums/language.enum'; import { LanguageService } from '../../../../core/services/language.service'; import { StorageService } from '../../../../core/services/storage.service'; import { DOCUMENT } from '@angular/common'; +import { PollService } from '../../../../core/services/poll.service'; @Component({ selector: 'app-language-selector', @@ -21,6 +22,7 @@ export class LanguageSelectorComponent implements OnInit { constructor( private languageService: LanguageService, private storageService: StorageService, + private pollService: PollService, @Inject(DOCUMENT) private document: any ) {} @@ -39,6 +41,7 @@ export class LanguageSelectorComponent implements OnInit { this.currentLang = newlang; this.languageService.setLanguage(newlang); this.storageService.language = this.currentLang; + this.pollService.updateTitle(); } focusOnCancelButton() {