Merge pull request #7 from silicia-apps/draft/serene-tamas

add select language component
silicia-apps · Oct 18, 2023 · 5305fea · 5305fea
2 parents 1788ea9 + a047c15
commit 5305fea
Show file tree

Hide file tree

Showing 14 changed files with 12,744 additions and 12,518 deletions.
diff --git a/apps/demo/project.json b/apps/demo/project.json
@@ -15,7 +15,7 @@
         "main": "apps/demo/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/demo/tsconfig.app.json",
-        "assets": ["apps/demo/src/assets"],
+        "assets": ["apps/demo/src/assets","@sio/core/assets/"],
         "styles": [
           "apps/demo/src/theme/variables.scss",
           "apps/demo/src/global.scss"

diff --git a/apps/demo/src/app/home/home.page.html b/apps/demo/src/app/home/home.page.html
@@ -1,3 +1,3 @@
 <sio-page title="test" color="primary">
-    {{ 'M_HOME' | translate }}
+    <sio-language-selector></sio-language-selector>
 </sio-page>   
diff --git a/apps/demo/src/environments/environment.ts b/apps/demo/src/environments/environment.ts
@@ -13,41 +13,41 @@ import { SioCoreEnvironmentInterface, SioCorePluginServiceConfigModel } from '@s
 
 export const environment: SioCoreEnvironmentInterface = {
   production: false,
-  language: {
-    avaibles: ['it', 'en'],
-    default: 'it',
-    fallback: 'en',
-  },
   logLevel: 0,
   plugins: [
     NgxsLoggerPluginModule.forRoot(),
     NgxsReduxDevtoolsPluginModule.forRoot(),
   ],
   backend: {},
   app: {
+    'language': {
+      'avaibles': ['it', 'en'],
+      'default': 'it',
+      'fallback': 'en',
+    },
     'sidemenu': 'toogle',
-    title: 'Demo App',
-    urls: {
+    'title': 'Demo App',
+    'urls': {
       login: '',
       redirectTo: '',
     },
-    menu: {
-      main: {
-        id: 'main',
-        items: {
-          1: { id: 1, icon: 'home', url: 'home', badge: 3 },
-          2: { id: 2, icon: 'information-circle', url: 'about' },
-          3: { id: 3, icon: 'settings', url: 'settings' }
+    'menu': {
+      'main': {
+        'id': 'main',
+        'items': {
+          1: { 'id': 1, 'icon': 'home', 'url': 'home', badge: 3 },
+          2: { 'id': 2, 'icon': 'information-circle', 'url': 'about' },
+          3: { 'id': 3, 'icon': 'settings', 'url': 'settings' }
         },
       },
-      logged: {
-        id: 'logged',
-        items: {
+      'logged': {
+        'id': 'logged',
+        'items': {
           1: {
-            id: 1,
-            icon: 'person',
-            caption: 'T_MENU_LOGGED_PROFILE',
-            url: '/auth/profile',
+            'id': 1,
+            'icon': 'person',
+            'caption': 'T_MENU_LOGGED_PROFILE',
+            'url': '/auth/profile',
           },
         },
       },

diff --git a/libs/core/src/lib/components/app/app.component.ts b/libs/core/src/lib/components/app/app.component.ts
@@ -77,10 +77,10 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     (async () => {
-      this.translateService.addLangs(['en','it']);
-      this.translateService.use('en');
-      this.sioCoreLoggerService.info('check platform...');
+      this.sioCoreLoggerService.info('await for platform avaible...');
       let platform = await this.platform.ready();
+      this.translateService.addLangs(this.sioCoreEnvironmentService.config.app.language.avaibles);
+      this.sioCoreLoggerService.info('Check platform...');
       switch (platform) {
         case 'dom':
           platform = 'browser';

diff --git a/libs/core/src/lib/components/app/app.interface.ts b/libs/core/src/lib/components/app/app.interface.ts
@@ -3,6 +3,11 @@ import { SioCoreMenuInterface } from '../menu';
 export interface SioCoreAppCompomentInterface {
   title: string;
   //style: number;
+  language : {
+    default: string,
+    fallback: string,
+    avaibles: string[],
+  };
   sidemenu: SioSideMenuType;
   fullmode?: boolean;
   menu?: { [id: string]: SioCoreMenuInterface };

diff --git a/libs/core/src/lib/components/app/store/app.model.ts b/libs/core/src/lib/components/app/store/app.model.ts
@@ -5,6 +5,11 @@ import { SioCoreTabsStateModel } from '../../tabs';
 
 export interface SioCoreAppComponentStateModel extends SioCoreAppCompomentInterface {
   title: string;
+  language: {
+    default: string,
+    fallback: string,
+    avaibles: string[],
+  },
   dark: boolean | undefined;
   split: boolean | undefined;
   urls: {

diff --git a/libs/core/src/lib/components/app/store/app.state.ts b/libs/core/src/lib/components/app/store/app.state.ts
@@ -21,6 +21,11 @@ const APP_STATE_TOKEN = new StateToken<SioCoreAppComponentStateModel>('app');
 @State<SioCoreAppComponentStateModel>({
   name: APP_STATE_TOKEN,
   defaults: {
+    'language': {
+      'avaibles': ['en'],
+      'default' : 'en',
+      'fallback' : 'en'
+    },
     'title': 'APP_TITLE',
     'dark': false,
     'sidemenu': 'none',
@@ -55,6 +60,11 @@ export class SioCoreAppComponentState extends NgxsDataRepository<SioCoreAppCompo
     return this.snapshot.split;
   }
 
+  @Computed()
+  get currentLanguage() {
+    return this.snapshot.language.default;
+  }
+
   @Selector()
   static error(state: SioCoreAppComponentStateModel) {
     return state.errors;

diff --git a/libs/core/src/lib/components/index.ts b/libs/core/src/lib/components/index.ts
@@ -14,8 +14,10 @@ import { SioCoreListComponent } from './list';
 import { SioCoreItemComponent } from './item';
 import { SioCoreModalComponent } from './modal';
 import { SioCoreSlideComponent } from './slide';
+import { SioCoreLanguageSelectorComponent } from './language-selector/language-selector.component';
 
 export { SioCoreAppComponent } from './app';
+export { SioCoreLanguageSelectorComponent } from './language-selector/language-selector.component';
 export { SioCoreCardComponent } from './card';
 export { SioCoreDarkModeToggleComponent } from './dark-mode-toogle';
 export { SioCoreFormComponent } from './form';
@@ -34,6 +36,7 @@ export { SioCoreSlideComponent } from './slide';
 
 export const SioCoreComponents = [
   SioCoreAppComponent,
+  SioCoreLanguageSelectorComponent,
   SioCoreCardComponent,
   SioCoreDarkModeToggleComponent,
   SioCoreFormComponent,

diff --git a/libs/core/src/lib/components/language-selector/language-selector.component.html b/libs/core/src/lib/components/language-selector/language-selector.component.html
@@ -0,0 +1,6 @@
+<ion-item>
+    <ion-select [label]="this.label" (ionChange)="this.onChange($event)">
+      <ion-select-option value="it">Italiano</ion-select-option>
+      <ion-select-option value="en">Inglese</ion-select-option>
+    </ion-select>
+  </ion-item>
diff --git a/libs/core/src/lib/components/language-selector/language-selector.component.scss b/libs/core/src/lib/components/language-selector/language-selector.component.scss
@@ -0,0 +1,3 @@
+:host {
+
+}
diff --git a/libs/core/src/lib/components/language-selector/language-selector.component.ts b/libs/core/src/lib/components/language-selector/language-selector.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { IonToggle } from '@ionic/angular';
+import { Select } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { Loggable, SioCoreLoggerService } from '../../services';
+import { SioColorType } from '../../shared/shared.type';
+import { SioCoreAppComponentState } from '../../store';
+import { TranslateService } from '@ngx-translate/core';
+
+@Loggable()
+@Component({
+  selector: 'sio-language-selector',
+  templateUrl: './language-selector.component.html',
+  styleUrls: ['./language-selector.component.scss'],
+})
+export class SioCoreLanguageSelectorComponent implements OnInit {
+  @Input() public caption = 'L_LANGUAGE';
+  @Input() public style: 'default' | undefined = undefined;
+  @Input() public color: SioColorType;
+  @Input() public icon = 'sunny';
+
+  public label = 'L_LANGUAGE';
+
+  //@Select(SioCoreAppComponentState) darkmode$!: Observable<boolean>; 
+
+  //@ViewChild('darkmode_toggle', { static: true }) ionToggle!: IonToggle;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  constructor(
+    private sioCoreLoggerService: SioCoreLoggerService,
+    public sioCoreAppComponentState: SioCoreAppComponentState,
+    private translateService: TranslateService,
+  ) {}
+
+  ngOnInit(): void {
+    null;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public onChange(event: any) {
+    this.sioCoreLoggerService.debug('set language to ' + event.detail.value);
+    this.translateService.use(event.detail.value);   
+  }
+}
diff --git a/libs/core/src/lib/services/environment/environment.interface.ts b/libs/core/src/lib/services/environment/environment.interface.ts
@@ -5,11 +5,6 @@ import { SioCorePluginServiceConfigModel } from "../plugins";
 export interface SioCoreEnvironmentInterface {
   logLevel: number,
   backend : SioCorePluginServiceConfigModel,
-  language: {
-    default: string,
-    fallback: string,
-    avaibles: string[],
-  }
   production: boolean,
   plugins?: ModuleWithProviders<unknown>[],
   app: SioCoreAppCompomentInterface,

diff --git a/libs/core/src/lib/services/environment/environment.service.ts b/libs/core/src/lib/services/environment/environment.service.ts
@@ -8,13 +8,14 @@ export class SioCoreEnvironmentConfig implements SioCoreEnvironmentInterface {
   production = false;
   logLevel = LogLevel.Info;
   backend = {};
-  language = {
-    default: 'en',
-    fallback: 'en',
-    avaibles: ['it', 'en'],
-  };
+
   app: SioCoreAppCompomentInterface = {
     title: 'TEST',
+    language : {
+      default: 'en',
+      fallback: 'en',
+      avaibles: ['it', 'en'],
+    },
     sidemenu: 'overlay',
     //dark: false,
     menu: {},