fix some errors

silicia-apps · Nov 8, 2023 · ff46b17 · ff46b17
1 parent 9a96dc9
commit ff46b17
Show file tree

Hide file tree

Showing 10 changed files with 2,805 additions and 2,949 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,2 +1,2 @@
-<sio-app>
+<sio-app leftPanelType="reveal">
 </sio-app>
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { SioCommonModule } from '@silicia/core';
+import { SioCommonModule, SioCoreLoggerService, Loggable } from '@silicia/core';
 
+@Loggable()
 @Component({
   selector: 'sio-root',
   templateUrl: 'app.component.html',
@@ -9,7 +10,9 @@ import { SioCommonModule } from '@silicia/core';
   imports: [SioCommonModule],
 })
 export class AppComponent {
-  constructor() {
-    console.log('test');
+  constructor(
+    private sioCoreLoggerService: SioCoreLoggerService,
+  ) {
+    this.sioCoreLoggerService.debug(`[AppComponent][constructor]`);
   }
 }
diff --git a/apps/demo/src/environments/environment.ts b/apps/demo/src/environments/environment.ts
@@ -29,6 +29,11 @@ export const environment: SioCoreEnvironmentInterface = {
       default: 'it',
       fallback: 'en',
     },
+    layout: {
+      left_panel: {
+        menu: 'main'
+      }
+    },
     menu: {
       main: {
         id: 'main',

diff --git a/libs/core/src/lib/components/app/app.component.html b/libs/core/src/lib/components/app/app.component.html
@@ -1,27 +1,32 @@
 <ion-app>
-  <div *ngIf="(this.sioCoreAppComponentState.leftPanelType === 'none' &&  this.sioCoreAppComponentState.rightPanelType === 'none') || this.sioCoreAppComponentState.full; then blank; else split"></div>
-  <ng-template #split> 
-    <ion-split-pane side="start" when="lg" contentId="main-content" (ionSplitPaneVisible)="sioAppSplitPanelVisible($event)">
-      <ion-menu contentId="main-content" [type]="!(this.sioCoreAppComponentState.leftPanelType === 'none' ||  this.sioCoreAppComponentState. === 'toogle')?this.sioCoreAppComponentState.sidemenu:'reveal'" [swipeGesture]="(this.sioCoreAppComponentState.sidemenu !== 'toogle')">
+  <div
+    *ngIf="(this.sioCoreAppComponentState.leftPanelType === 'none' &&  this.sioCoreAppComponentState.rightPanelType === 'none') || this.sioCoreAppComponentState.full; then blank; else split">
+  </div>
+  <ng-template #split>
+    <ion-split-pane side="start" when="lg" contentId="main-content"
+      (ionSplitPaneVisible)="sioAppSplitPanelVisible($event)">
+      <ion-menu contentId="main-content"
+        [type]="!(this.sioCoreAppComponentState.leftPanelType === 'none' ||  this.sioCoreAppComponentState.leftPanelType === 'toogle')?this.sioCoreAppComponentState.leftPanelType: 'reveal'"
+        [swipeGesture]="(this.sioCoreAppComponentState.leftPanelType !== 'toogle')">
         <ion-header class="ion-no-border">
           <ion-toolbar [color]="this.color">
-            <div #side_header>
-              <ng-content select="[slot='side_header']"></ng-content>
+            <div #left_header>
+              <ng-content select="[slot='left_header']"></ng-content>
             </div>
-            <ng-container *ngIf="!side_header.hasChildNodes()">
+            <ng-container *ngIf="!left_header.hasChildNodes()">
               <ion-title>{{
                 (this.sioCoreAppComponentState.state$ | async)?.title
                 }}</ion-title>
             </ng-container>
-          </ion-toolbar> 
+          </ion-toolbar>
         </ion-header>
         <ion-content>
-          <sio-menu *ngIf="this.tab && this.sioCoreAppComponentState.split" id="tab"></sio-menu>
-          <div #side_content>
-            <ng-content select="[slot='side_content']"></ng-content>
+          <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID && this.sioCoreAppComponentState.split" id="tab"></sio-menu>
+          <div #left_content>
+            <ng-content select="[slot='left_content']"></ng-content>
           </div>
-          <ng-container *ngIf="!side_content.hasChildNodes()">
-            <sio-menu *ngIf="this.menu" [id]="this.menu"></sio-menu>
+          <ng-container *ngIf="!left_content.hasChildNodes()">
+            <sio-menu *ngIf="this.sioCoreAppComponentState.leftMenuID" [id]="'leftmenu_' + this.sioCoreAppComponentState.leftMenuID"></sio-menu>
           </ng-container>
         </ion-content>
         <ion-footer class="ion-no-border">
@@ -30,7 +35,7 @@
           </div>
           <ng-container *ngIf="!side_footer.hasChildNodes()">
             <ion-toolbar class="ion-no-border" [color]="this.color">
-                <ion-item lines="none" [color]="this.color"><ion-label>powered by Sio</ion-label></ion-item>
+              <ion-item lines="none" [color]="this.color"><ion-label>powered by Sio</ion-label></ion-item>
               <ion-buttons slot="end">
                 <ion-button href="https://github.com/silicia-apps/sio" target="_blank" shape="round" fill="clear">
                   <ion-icon slot="start" name="logo-github"></ion-icon>
@@ -39,7 +44,9 @@
             </ion-toolbar>
           </ng-container>
         </ion-footer>
-      </ion-menu>  <ion-menu *ngIf="false" side="end" contentId="right-content" [type]="!(this.sioCoreAppComponentState.sidemenu === 'none' ||  this.sioCoreAppComponentState.sidemenu === 'toogle')?this.sioCoreAppComponentState.sidemenu:'reveal'" [swipeGesture]="(this.sioCoreAppComponentState.sidemenu !== 'toogle')">
+      </ion-menu> <ion-menu *ngIf="false" side="end" contentId="right-content"
+        [type]="!(this.sioCoreAppComponentState.rightPanelType === 'none' ||  this.sioCoreAppComponentState.rightPanelType === 'toogle')?this.sioCoreAppComponentState.rightPanelType:'reveal'"
+        [swipeGesture]="(this.sioCoreAppComponentState.rightPanelType !== 'toogle')">
         <ion-header class="ion-no-border">
           <ion-toolbar>
             <div #right_header>
@@ -50,7 +57,7 @@
                 (this.sioCoreAppComponentState.state$ | async)?.title
                 }}</ion-title>
             </ng-container>
-          </ion-toolbar> 
+          </ion-toolbar>
         </ion-header>
         <ion-content>
           <div #right_content>
@@ -77,13 +84,14 @@
       </ion-menu>
       <ion-router-outlet id="main-content">
         <ng-content></ng-content>
-        <sio-menu *ngIf="this.tab" id="tab" position="bottom"></sio-menu>
+        <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID" id="tab"></sio-menu>
       </ion-router-outlet>
     </ion-split-pane>
   </ng-template>
   <ng-template #blank>
     <ion-router-outlet id="main-content">
-      <sio-menu *ngIf="this.sioCoreAppComponentState.layout?.tab?.menu && this.sioCoreAppComponentState.full" id="tab" [position]="this.sioCoreAppComponentState.layout?.tab?.mobile || 'side'"></sio-menu>
+      <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID && this.sioCoreAppComponentState.full" id="tab"
+        position="bottom"></sio-menu>
       <ng-content></ng-content>
     </ion-router-outlet>
   </ng-template>

diff --git a/libs/core/src/lib/components/app/app.component.ts b/libs/core/src/lib/components/app/app.component.ts
@@ -17,7 +17,7 @@ import {
   SioCoreLoggerService,
 } from '../../services';
 
-import { SioColorType } from '../../types';
+import { SioColorType, SioSideMenuType } from '../../types';
 import { SioCoreLayoutInterface } from '../menu-item';
 
 @Component({
@@ -33,7 +33,11 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
     this.sioCoreAppComponentState.SetTitle(value);
   }
 
-  @Input() layout: SioCoreLayoutInterface | undefined = undefined;
+  @Input()
+  set leftPanelType (value: SioSideMenuType) {
+    this.sioCoreAppComponentState.setLeftPanelType(value);
+  }
+
   @Input() color: SioColorType;
 
   @Select(SioCoreAppComponentState.loading)
@@ -55,7 +59,9 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
     private sioCoreLoggerService: SioCoreLoggerService,
     private translateService: TranslateService,
   ) {
+    this.sioCoreLoggerService.info(`[sioCoreAppComponentState][constructor] Check config...`);
     if (this.sioCoreEnvironmentService.config) {
+      this.sioCoreLoggerService.info(`[sioCoreAppComponentState][constructor] Config found loading...`, this.sioCoreEnvironmentService.config);
       this.sioCoreAppComponentState.LoadConfig(
         this.sioCoreEnvironmentService.config.app,
       );
@@ -89,9 +95,9 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
           platform = 'browser';
           // eslint-disable-next-line no-case-declarations
           const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-          this.sioCoreAppComponentState.dark = prefersDark.matches;
+          this.sioCoreAppComponentState.setDark(prefersDark.matches);
           prefersDark.addEventListener('change', (mediaQuery) =>
-            this.sioCoreAppComponentState.dark = mediaQuery.matches,
+            this.sioCoreAppComponentState.setDark(mediaQuery.matches),
           );
           break;
         case 'hybrid':

diff --git a/libs/core/src/lib/components/app/store/app.state.ts b/libs/core/src/lib/components/app/store/app.state.ts
@@ -1,10 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Selector, StateToken } from '@ngxs/store';
 import { SioCoreAppComponentStateModel } from './app.model';
-import {
-  SioCoreAppCompomentInterface,
-  SioCoreLayoutInterface,
-} from '../../../interfaces';
+import { SioCoreAppCompomentInterface } from '../../../interfaces';
 
 import { State } from '@ngxs/store';
 import {
@@ -72,11 +69,6 @@ export class SioCoreAppComponentState extends NgxsDataRepository<SioCoreAppCompo
     return state.errors;
   }
 
-  @Computed()
-  get layout(): SioCoreLayoutInterface {
-    return this.snapshot.layout || {};
-  }
-
   @Computed()
   get split(): boolean {
     return this.snapshot.layout?.split || false;
@@ -97,6 +89,21 @@ export class SioCoreAppComponentState extends NgxsDataRepository<SioCoreAppCompo
     return this.snapshot.layout?.left_panel?.type;
   }
 
+  @Computed()
+  get leftMenuID(): string | undefined {
+    return this.snapshot.layout?.left_panel?.menu;
+  }
+
+  @Computed()
+  get rightMenuID(): string | undefined {
+    return this.snapshot.layout?.right_panel?.menu;
+  }
+
+  @Computed()
+  get tabMenuID(): string | undefined {
+    return this.snapshot.layout?.tab?.menu;
+  }
+
   @Computed()
   get rightPanelType(): SioSideMenuType {
     return this.snapshot.layout?.right_panel?.type;
@@ -131,7 +138,13 @@ export class SioCoreAppComponentState extends NgxsDataRepository<SioCoreAppCompo
 
   @DataAction()
   setLeftPanelType(value: SioSideMenuType) {
-    this.ctx.patchState({ layout: { left_panel: { type: value } } });
+    const layout = this.ctx.getState().layout;
+    if (layout) layout.dark = true;
+    console.error(JSON.stringify(layout));
+    if (layout?.left_panel) { layout.left_panel.type = value }
+   // else if (layout) layout.left_panel = { type : value }
+    console.error('new '+ JSON.stringify(layout));
+    this.ctx.patchState({ layout: layout });
   }
 
   @DataAction()
@@ -154,8 +167,11 @@ export class SioCoreAppComponentState extends NgxsDataRepository<SioCoreAppCompo
   }*/
 
   @DataAction()
-  public set dark(value: boolean) {
-    this.patchState({ layout: { dark: value } });
+  public async setDark(value: boolean) {
+    const layout = this.ctx.getState().layout
+      ? this.ctx.getState().layout
+      : { dark: value };
+    this.patchState({ layout: layout });
   }
 
   @DataAction()

diff --git a/libs/core/src/lib/components/dark-mode-toogle/dark-mode-toggle.component.ts b/libs/core/src/lib/components/dark-mode-toogle/dark-mode-toggle.component.ts
@@ -42,11 +42,11 @@ export class SioCoreDarkModeToggleComponent implements OnInit {
     this.sioCoreLoggerService.debug('[SioCoreDarkModeToggleComponent][onChange] - Switch style');
     if (event.detail.checked) {
       this.sioCoreLoggerService.debug('[SioCoreDarkModeToggleComponent][onChange] - New Style is Dark Mode');
-      this.sioCoreAppComponentState.dark = true;
+      this.sioCoreAppComponentState.setDark(true);
       this.icon = 'moon';
     } else {
       this.sioCoreLoggerService.debug('[SioCoreDarkModeToggleComponent][onChange] - New Style is Light Mode');
-      this.sioCoreAppComponentState.dark = false;
+      this.sioCoreAppComponentState.setDark(false);
       this.icon = 'sunny';
     }
   }

diff --git a/libs/core/src/lib/components/menu/menu.component.html b/libs/core/src/lib/components/menu/menu.component.html
@@ -30,5 +30,5 @@
   </div>
 </ng-template>
 <ng-template #tab>
-  <sio-tabs *ngIf="this.position === 'bottom' || 'top'" [position]="this.position" color="primary"></sio-tabs> 
+  <sio-tabs *ngIf="this.position === 'bottom' || 'top'" position="bottom" color="primary"></sio-tabs> 
 </ng-template>
diff --git a/libs/core/src/lib/interfaces/app.interface.ts b/libs/core/src/lib/interfaces/app.interface.ts
@@ -19,7 +19,7 @@ export interface SioCoreAppCompomentInterface {
     };
     tab?: {
       mobile?: 'top' | 'bottom' | 'none';
-      desktop?: 'left' | 'right' | 'bottom' | 'header' | 'none';
+      desktop?: 'top' | 'bottom' | 'none' | 'left' | 'right';
       menu?: string | undefined;
     };
     split?: boolean | undefined;