translate title on steps creation and on lang change

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;
-	}
 }

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() {

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]);
 		}
 	}
 

src/app/core/services/poll.service.ts

@@ -87,6 +87,54 @@ export class PollService implements Resolve<Poll> {
 		}
 	}
 
+	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
 	 */

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'));

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

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);

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');

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() {