tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

🐛 select lang wigthout lifecycle bug

Browse Source
This commit is contained in:
tykayn 2020-11-05 14:39:01 +01:00 committed by Baptiste Lemoine
parent 60eeddbf21
commit 10c1930e4d
15 changed files with 112 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lokalize-scripts/scripts.rc Normal file
View File

@ -0,0 +1,14 @@
<!--
Collection name attribute represents the name of the menu, e.g., to use menu "File" use "file" or "Help" use "help". You can add new menus.
If you type a relative script file beware that this script is located in $XDG_DATA_HOME/applicationname/
The following example adds an action with the text "Export..." into the "File" menu
<KrossScripting>
<collection name="file" text="File" comment="File menu">
<script name="export" text="Export..." comment="Export content" file="export.py" />
</collection>
</KrossScripting>
-->

4
src/app/app.module.ts
View File

@ -52,7 +52,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
NgxWebstorageModule.forRoot({ prefix: environment.localStorage.key }),
SharedModule,
TranslateModule.forRoot({
defaultLanguage: 'fr',
defaultLanguage: 'FR',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
@ -62,7 +62,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
provide: MissingTranslationHandler,
useClass: MyMissingTranslationHandler,
},
useDefaultLang: false,
useDefaultLang: true,
}),
],
providers: [Title, TranslateService],

7
src/app/core/components/header/header.component.html
View File

@ -19,6 +19,8 @@
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
[ngClass]="{ 'bg-primary': mobileMenuVisible }"
(click)="mobileMenuVisible = !mobileMenuVisible"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@ -34,10 +36,15 @@
</div>
<div class="navbar-end">
<app-language-selector></app-language-selector>
<app-theme-selector></app-theme-selector>
<a class="navbar-item btn btn-primary" routerLink="user/polls" routerLinkActive="is-active">
<i class="fa fa-user"></i> {{ 'config.find_my_polls' | translate }}
</a>
</div>
</div>
<div class="mobile-menu" *ngIf="mobileMenuVisible">
menu mobile
</div>
</nav>
</header>

3
src/app/core/components/header/header.component.ts
View File

@ -17,8 +17,9 @@ export class HeaderComponent implements OnInit {
public env = environment;
@Input() public appTitle: string = 'FramaDate Funky';
@Input() public appLogo: string;
mobileMenuVisible = false;
constructor(private userService: UserService, private modalService: ModalService) {}
constructor(private userService: UserService) {}
public ngOnInit(): void {}
}

47
src/app/core/components/sibebar/navigation/navigation.component.html
View File

@ -2,9 +2,6 @@
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Tous les sondages </a>
<div class="navbar-dropdown">
<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
« inexistentPoll »
</a>
<a
class="navbar-item"
*ngFor="let poll of _pollsAvailables | async"
@ -18,7 +15,7 @@
<hr />
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="devModeEnabled">
<a class="navbar-link"> Modules </a>
<div class="navbar-dropdown">
<a class="navbar-item" routerLink="oldstuff" routerLinkActive="is-active">
@ -34,28 +31,32 @@
Participation
</a>
</div>
</div>
<hr />
<hr />
<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
« inexistentPoll »
</a>
<hr />
<a class="button is-block" routerLink="oldstuff/step/creation" routerLinkActive="active"> Création </a>
<a class="button is-block" routerLink="oldstuff/step/date" routerLinkActive="active"> Les Dates </a>
<a class="button is-block" routerLink="oldstuff/step/answers" routerLinkActive="active"> Réponses </a>
<a class="button is-block" routerLink="oldstuff/step/visibility" routerLinkActive="active"> Visibilité </a>
<a class="button is-block" routerLink="oldstuff/step/resume" routerLinkActive="active"> Résumé </a>
<a class="button is-block" routerLink="oldstuff/step/end" routerLinkActive="active"> Confirmation </a>
<a class="button is-block" routerLink="oldstuff/step/admin"> Administration </a>
<hr />
<a class="button is-block" routerLink="oldstuff/step/kind" routerLinkActive="active"> Page démo </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/1" routerLinkActive="active"> Sondage 1 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/2" routerLinkActive="active"> Sondage 2 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/3" routerLinkActive="active">
Sondage 3 (dessins animés)
</a>
<a class="button is-block" routerLink="oldstuff/graphic/toto" routerLinkActive="active"> Graphique </a>
</div>
<a class="button is-block" routerLink="oldstuff/step/home" routerLinkActive="active">
<i class="fa fa-home" aria-hidden="true"></i> Accueil
</a>
<a class="button is-block" routerLink="oldstuff/step/creation" routerLinkActive="active"> Création </a>
<a class="button is-block" routerLink="oldstuff/step/date" routerLinkActive="active"> Les Dates </a>
<a class="button is-block" routerLink="oldstuff/step/answers" routerLinkActive="active"> Réponses </a>
<a class="button is-block" routerLink="oldstuff/step/visibility" routerLinkActive="active"> Visibilité </a>
<a class="button is-block" routerLink="oldstuff/step/resume" routerLinkActive="active"> Résumé </a>
<a class="button is-block" routerLink="oldstuff/step/end" routerLinkActive="active"> Confirmation </a>
<a class="button is-block" routerLink="oldstuff/step/admin"> Administration </a>
<hr />
<a class="button is-block" routerLink="oldstuff/step/kind" routerLinkActive="active"> Page démo </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/1" routerLinkActive="active"> Sondage 1 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/2" routerLinkActive="active"> Sondage 2 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/3" routerLinkActive="active">
Sondage 3 (dessins animés)
</a>
<a class="button is-block" routerLink="oldstuff/graphic/toto" routerLinkActive="active"> Graphique </a>
</nav>

2
src/app/core/components/sibebar/navigation/navigation.component.ts
View File

@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
import { Poll } from '../../../models/poll.model';
import { MockingService } from '../../../services/mocking.service';
import { environment } from '../../../../../environments/environment';
@Component({
selector: 'app-navigation',
@ -11,6 +12,7 @@ import { MockingService } from '../../../services/mocking.service';
})
export class NavigationComponent implements OnInit {
public _pollsAvailables: Observable<Poll[]> = this.mockingService.pollsAvailables;
public devModeEnabled = !environment.production;
constructor(private mockingService: MockingService) {}

3
src/app/core/core.module.ts
View File

@ -10,10 +10,11 @@ import { HomeComponent } from './components/home/home.component';
import { LogoComponent } from './components/logo/logo.component';
import { NavigationComponent } from './components/sibebar/navigation/navigation.component';
import { throwIfAlreadyLoaded } from './guards/module-import.guard';
import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent],
imports: [CommonModule, FormsModule, RouterModule, TranslateModule],
imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule],
exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent],
})
export class CoreModule {

15
src/app/core/enums/language.enum.ts
View File

@ -1,4 +1,15 @@
export enum Language {
FR = 'FR',
EN = 'EN',
FR = 'fr',
// BR = 'br',
// CA = 'ca',
// DE = 'de',
// EL = 'el',
EN = 'en',
// ES = 'es',
// GL = 'gl',
// HU = 'hu',
// IT = 'it',
// NL = 'nl',
// OC = 'oc',
// SV = 'sv',
}

6
src/app/core/services/language.service.ts
View File

@ -15,7 +15,7 @@ export class LanguageService {
}
public setLanguage(language: Language): void {
this.translate.use(language.toString().toUpperCase());
this.translate.use(language.toString());
}
public getAvailableLanguages(): string[] {
@ -48,17 +48,19 @@ export class LanguageService {
// set default language
if (!this.translate.currentLang) {
this.setLanguage(Language.EN);
this.setLanguage(Language.FR);
}
}
private setLanguageFromStorage(): void {
console.log('this.storageService.language', this.storageService.language);
if (this.storageService.language && this.translate.getLangs().includes(this.storageService.language)) {
this.setLanguage(this.storageService.language);
}
}
private setLanguageFromBrowser(): void {
const currentBrowserLanguage: Language = this.translate.getBrowserLang().toUpperCase() as Language;
console.log('currentBrowserLanguage', currentBrowserLanguage);
if (this.translate.getLangs().includes(currentBrowserLanguage)) {
this.setLanguage(currentBrowserLanguage);
}

4
src/app/features/administration/form/form.component.html
View File

@ -1,8 +1,8 @@
<div class="admin-form">
<h1 i18n>
<h1>
{{ 'creation.title' | translate }}
</h1>
<span class="pre-selector" i18n>
<span class="pre-selector">
{{ 'creation.want' | translate }}
</span>
<button class="btn btn--warning" (click)="askInitFormDefault()">

21
src/app/shared/components/selectors/language-selector/language-selector.component.html
View File

@ -1,14 +1,11 @@
<div class="columns">
<div class="column">
<p>Langue</p>
</div>
<div class="column">
<div class="buttons has-addons">
<select class="select" [(ngModel)]="currentLang">
<option *ngFor="let language of availableLanguages" value="{{ language }}">
{{ 'LANGUAGES.' + language | translate }}
</option>
</select>
</div>
<div class="selector">
<img src="assets/img/icone-langue.svg" alt="langue" />
<div class="buttons has-addons">
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
<select class="select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
<option *ngFor="let language of availableLanguages" value="{{ language }}">
{{ language }} - {{ 'LANGUAGES.' + language | translate }}
</option>
</select>
</div>
</div>

4
src/app/shared/components/selectors/language-selector/language-selector.component.ts
View File

@ -10,7 +10,7 @@ import { LanguageService } from '../../../../core/services/language.service';
templateUrl: './language-selector.component.html',
styleUrls: ['./language-selector.component.scss'],
})
export class LanguageSelectorComponent implements OnInit, DoCheck {
export class LanguageSelectorComponent implements OnInit {
public currentLang: Language;
public availableLanguages: string[] = [];
@ -21,7 +21,7 @@ export class LanguageSelectorComponent implements OnInit, DoCheck {
this.currentLang = this.languageService.getLangage();
}
ngDoCheck(): void {
setLang(): void {
this.languageService.setLanguage(this.currentLang);
}
}

15
src/assets/i18n/en.json
View File

@ -134,7 +134,18 @@
"colorblindText": "colorblind."
},
"LANGUAGES": {
"FR": "Français",
"EN": "English"
"DE": "Allemand",
"FR": "French",
"BR": "Breton",
"CA": "Canadien",
"EL": "el",
"ES": "Espagnol",
"EN": "English",
"GL": "gl",
"HU": "hu",
"IT": "Italien",
"NL": "Néérlandais",
"OC": "oc",
"SV": "sv"
}
}

16
src/assets/i18n/fr.json
View File

@ -133,8 +133,22 @@
"choiceNotColorblind": "Je ne suis pas",
"colorblindText": "daltonien."
},
"selectors": {
"lang": "Sélectionner la langue"
},
"LANGUAGES": {
"DE": "Allemand",
"FR": "Français",
"EN": "English"
"BR": "Breton",
"CA": "Canadien",
"EL": "el",
"ES": "Espagnol",
"EN": "English",
"GL": "gl",
"HU": "hu",
"IT": "Italien",
"NL": "Néérlandais",
"OC": "oc",
"SV": "sv"
}
}

2
src/environments/environment.ts
View File

@ -9,7 +9,7 @@ const backendApiUrlsInDev = {
export const environment = {
production: false,
appTitle: 'FramaDate',
appTitle: 'FramaDate Funky',
appVersion: '2.0.0',
appLogo: 'assets/img/logo.png',
api: {