refactor of slide menu

silicia-apps · Mar 5, 2024 · f5b2d02 · f5b2d02
1 parent 8c9b3e4
commit f5b2d02
Show file tree

Hide file tree

Showing 18 changed files with 1,987 additions and 1,374 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,12 +1,13 @@
 <sio-app
-
   title="Demo"
   leftPanelType="push"
   righPanelType="none"
   tabMenuID="main"
   tabDesktopPosition="left"
   tabMobilePosition="bottom"
   color="primary"
+  leftMenuID="right_items"
+  menuID="right_items"
 >
   <sio-auth-badge slot="left_header" size="large"></sio-auth-badge>
   <br slot="left_header" />

diff --git a/apps/demo/src/app/database/database.page.html b/apps/demo/src/app/database/database.page.html
@@ -1,10 +1,11 @@
 <sio-page
   [title]="'Task ('+this.taskState.localTotals+'/'+this.taskState.remoteTotals+') index' + this.taskState.remoteIndex">
   <sio-datalist [store]="this.taskState" header="name" label="description" thumbnail="thumbnail"
-    [enableInfinite]="this.taskState.localTotals < this.taskState.remoteTotals" (sioOnLeftSwipe)="this.archive($event)"
-    (sioOnRightSwipe)="this.delete($event)" (sioOnInfinite)="this.load($event)" (sioOnRefresh)="this.refresh($event)">
-    <ion-item-option slot="right_options">Favorite</ion-item-option>
-    <ion-item-option slot="right_options" color="danger">Delete</ion-item-option>
+    [enableInfinite]="this.taskState.localTotals < this.taskState.remoteTotals"
+    (sioOnInfinite)="this.load($event)" (sioOnRefresh)="this.refresh($event)"
+    rightMenuId="right_items"
+    leftMenuId="right_items"
+  >
   </sio-datalist>
   <ion-fab slot="footer" vertical="bottom" horizontal="end">
     <sio-button (Click)="this.create()" type="fab" icon="add" color="danger"></sio-button>

diff --git a/apps/demo/src/environments/environment.ts b/apps/demo/src/environments/environment.ts
@@ -52,6 +52,25 @@ export const environment: SioCoreEnvironmentInterface = {
           },
         },
       },
+      right_items: {
+        id: 'right_items',
+        items: {
+          1: {
+            id: 1,
+            caption: 'trash',
+            icon: 'trash',
+            color: 'danger',
+            url: '/'
+          },
+          2: {
+            id: 2,
+            caption: 'archive',
+            icon: 'archive',
+            color: 'success',
+            url: '/'
+          }
+        }
+      }
     },
   },
 };

diff --git a/libs/core/src/lib/components/item/item-options.interface.ts b/libs/core/src/lib/components/item/item-options.interface.ts
@@ -0,0 +1,14 @@
+import { Fn } from "@angular-ru/cdk/typings";
+import { SioColorType } from "../../types";
+
+export interface SioCoreItemOptionInterface {
+    text?: string | undefined;
+    icon?: string | undefined;
+    color?: SioColorType;
+    default?: boolean;
+    fnHandler? : Fn;
+}
+
+export interface SioCoreItemOptionsInterface {
+    options: SioCoreItemOptionInterface[];
+}
diff --git a/libs/core/src/lib/components/item/item.component.html b/libs/core/src/lib/components/item/item.component.html
@@ -1,8 +1,15 @@
 <ion-item-sliding [disabled]="this.disabled" #slidingItem>
-  <ion-item-options *ngIf="this.rightSwipe !== null" side="start" (ionSwipe)="this.rightSwipe($event, slidingItem)">
-    <div #left_options>
-      <ng-content select="[slot='left_options']"></ng-content>
-    </div>
+  <ion-item-options *ngIf="this.leftMenuId !== undefined" side="start">
+    <ion-item-options>
+      <ion-item-option
+        *ngFor="
+          let item of this.sioCoreLeftMenuState.items | keyvalue;
+          
+        "
+        [color]="item.value.color"
+        >{{ item.value.caption }}</ion-item-option
+      >
+    </ion-item-options>
   </ion-item-options>
   <ion-item button="this.button" [color]="this.color">
     <sio-icon *ngIf="this.icon" name="this.icon" slot="start"></sio-icon>
@@ -18,9 +25,16 @@ <h3>{{ this.header | translate }}</h3>
     </ion-label>
     <div slot="end"></div>
   </ion-item>
-  <ion-item-options *ngIf="this.leftSwipe !== null" side="end" (ionSwipe)="this.leftSwipe($event, slidingItem)">
-    <div #right_options>
-      <ng-content select="[slot='right_options']"></ng-content>
-    </div>
+  <ion-item-options *ngIf="this.leftMenuId !== undefined" side="end">
+    <ion-item-options>
+      <ion-item-option
+        *ngFor="
+          let item of this.sioCoreLeftMenuState.items | keyvalue;
+          
+        "
+        [color]="item.value.color"
+        >{{ item.value.caption }}</ion-item-option
+      >
+    </ion-item-options>
   </ion-item-options>
 </ion-item-sliding>
diff --git a/libs/core/src/lib/components/item/item.component.ts b/libs/core/src/lib/components/item/item.component.ts
@@ -4,6 +4,7 @@ import { SioCoreLoggerService } from '../../services/logger';
 import { AttributeBoolean } from '@angular-ru/cdk/decorators';
 import { InputBoolean } from '@angular-ru/cdk/typings';
 import { SioColorType } from '../../types';
+import { SioCoreMenuInterface, SioCoreMenuState } from '../../store';
 
 @Component({
   selector: 'sio-item',
@@ -40,6 +41,11 @@ export class SioCoreItemComponent implements OnInit {
     return this._header;
   }
 
+  @Input()
+  public leftMenuId: string | undefined = undefined;
+  @Input()
+  public rightMenuId: string | undefined = undefined;
+
   @Input() public set label(value: string) {
     if (Date.parse(value)) {
       this._label = new Date(value).toLocaleString();
@@ -70,11 +76,18 @@ export class SioCoreItemComponent implements OnInit {
   @Output() sioOnLeftSwipe = new EventEmitter<Event>();
   @Output() sioOnRightSwipe = new EventEmitter<Event>();
 
+  public sioCoreLeftMenuState: SioCoreMenuInterface;
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(private sioCoreLoggerService: SioCoreLoggerService) {}
+  constructor(
+    private sioCoreLoggerService: SioCoreLoggerService,
+    public sioCoreMenuState: SioCoreMenuState) {
+      this.sioCoreLeftMenuState = this.sioCoreMenuState.snapshot[(this.leftMenuId === undefined)?'main':this.leftMenuId];
+    }
 
   ngOnInit(): void {
     this.sioCoreLoggerService.debug('[SioCoreItemComponent][ngOnInit]');
+
   }
 
   public async rightSwipe(

diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html
@@ -1,12 +1,14 @@
 <ion-list>
-  <sio-item *ngFor="let item of this.data; trackItem" [$id]="item['$id']" [header]="item[this.header]"
-    [label]="item[this.label]" [thumbnail]="this.thumbnail ? item[this.thumbnail] : undefined"
-    [avatar]="this.avatar ? item[this.avatar] : undefined" [icon]="this.icon ? item[this.icon] : undefined"
-    (sioOnLeftSwipe)="this.leftSwipe($event)" (sioOnRightSwipe)="this.rightSwipe($event)">
-    <div slot="right_options">
-      <div #right_options>
-        <ng-content select="[slot='right_options']"></ng-content>
-      </div>
-    </div>
+  <sio-item
+    *ngFor="let item of this.data; trackItem"
+    [$id]="item['$id']"
+    [header]="item[this.header]"
+    [label]="item[this.label]"
+    [thumbnail]="this.thumbnail ? item[this.thumbnail] : undefined"
+    [avatar]="this.avatar ? item[this.avatar] : undefined"
+    [icon]="this.icon ? item[this.icon] : undefined"
+    [rightMenuId]="this.rightMenuId"
+    [leftMenuId]="this.leftMenuId"
+  >
   </sio-item>
 </ion-list>
diff --git a/libs/core/src/lib/components/list/list.component.ts b/libs/core/src/lib/components/list/list.component.ts
@@ -19,6 +19,10 @@ export class SioCoreListComponent implements OnInit {
   @Input() public style: 'default' | 'rounded' | 'custom' = 'default';
   @Input() public desktop = false;
 
+  @Input() public leftMenuId: string | undefined = undefined;
+  @Input() public rightMenuId: string | undefined = undefined;
+
+
   @Input() public header = 'name';
   @Input() public label = 'description';
   @Input() public icon: string | undefined;

diff --git a/libs/core/src/lib/components/menu/menu.component.html b/libs/core/src/lib/components/menu/menu.component.html
@@ -1,49 +1,68 @@
-<ion-accordion-group
-  *ngIf="this.sioCoreMenuState.caption"
-  [expand]="this.shape"
->
-  <ion-accordion
-    [value]="this.sioCoreMenuState.caption"
-    [toggleIconSlot]="this.toggleIconSlot"
-    [toggleIcon]="this.toggleIcon"
-  >
-    <ion-item slot="header" [color]="this.color">
-      <ion-label>{{ this.sioCoreMenuState.caption | translate }}</ion-label>
-    </ion-item>
-    <ion-list slot="content" inset="true">
-      <sio-menu-item
-        *ngFor="
-          let item of sioCoreMenuState.items | keyvalue;
-          trackBy: trackItems
-        "
-        [color]="this.color"
-        [icon]="item.value.icon"
-        [caption]="item.value.caption"
-        [lines]="this.lines"
-        [style]="this.style"
+@switch (this.type) {
+  @case ('swipe') {
+      <ion-item-options>
+        <ion-item-option
+          *ngFor="
+            let item of this.sioCoreMenuState.items | keyvalue;
+            trackBy: trackItems
+          "
+          [color]="item.value.color"
+          >{{ item.value.caption }}</ion-item-option
+        >
+      </ion-item-options>
+  }
+  @default {
+    @if (this.sioCoreMenuState.caption) {
+      <ion-accordion-group
+        *ngIf="this.sioCoreMenuState.caption"
+        [expand]="this.shape"
       >
-      </sio-menu-item>
-    </ion-list>
-  </ion-accordion>
-</ion-accordion-group>
-<div *ngIf="!this.sioCoreMenuState.caption">
-  <ion-menu-toggle auto-hide="false">
-    <ion-list [inset]="true">
-      <sio-menu-item
-        *ngFor="
-          let item of this.sioCoreMenuState.items | keyvalue;
-          trackBy: trackItems
-        "
-        [icon]="item.value.icon"
-        [caption]="item.value.caption"
-        [lines]="this.lines"
-        [url]="item.value.url"
-        [style]="this.style"
-        [tabbed]="false"
-        [badge]="item.value.badge!"
-        [color]="this.color"
-      >
-      </sio-menu-item>
-    </ion-list>
-  </ion-menu-toggle>
-</div>
+        <ion-accordion
+          [value]="this.sioCoreMenuState.caption"
+          [toggleIconSlot]="this.toggleIconSlot"
+          [toggleIcon]="this.toggleIcon"
+        >
+          <ion-item slot="header" [color]="this.color">
+            <ion-label>{{
+              this.sioCoreMenuState.caption | translate
+            }}</ion-label>
+          </ion-item>
+          <ion-list slot="content" inset="true">
+            <sio-menu-item
+              *ngFor="
+                let item of sioCoreMenuState.items | keyvalue;
+                trackBy: trackItems
+              "
+              [color]="this.color"
+              [icon]="item.value.icon"
+              [caption]="item.value.caption"
+              [lines]="this.lines"
+              [style]="this.style"
+            >
+            </sio-menu-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>
+    } @else {
+      <ion-menu-toggle auto-hide="false">
+        <ion-list [inset]="true">
+          <sio-menu-item
+            *ngFor="
+              let item of this.sioCoreMenuState.items | keyvalue;
+              trackBy: trackItems
+            "
+            [icon]="item.value.icon"
+            [caption]="item.value.caption"
+            [lines]="this.lines"
+            [url]="item.value.url"
+            [style]="this.style"
+            [tabbed]="false"
+            [badge]="item.value.badge!"
+            [color]="this.color"
+          >
+          </sio-menu-item>
+        </ion-list>
+      </ion-menu-toggle>
+    }
+  }
+}
diff --git a/libs/core/src/lib/components/menu/menu.component.ts b/libs/core/src/lib/components/menu/menu.component.ts
@@ -11,7 +11,7 @@ import { SioCoreAppComponentState } from '../app/store';
   styleUrls: ['./menu.component.scss'],
 })
 export class SioCoreMenuComponent implements OnInit {
-  @Input() public menuID = 'main';
+  @Input() public menuID : string | undefined = undefined;
   @Input() public lines: 'full' | 'inset' | 'none' = 'none';
   //@Input() public shape: 'line' | 'dot' | 'rounded' = 'line';
   @Input() public position: 'side' | 'bottom' | 'top' | 'none' = 'side';
@@ -21,6 +21,7 @@ export class SioCoreMenuComponent implements OnInit {
   @Input() public shape: 'compact' | 'inset' = 'compact';
   @Input() public style: 'default' | 'rounded' | 'custom' = 'default';
   @Input() public desktop = false;
+  @Input() public type : 'default' | 'swipe' = 'default';
 
   @Output() public sioCoreMenuDidChange = new EventEmitter();
   @Output() public sioCoreMenuWillChange = new EventEmitter();
@@ -35,7 +36,7 @@ export class SioCoreMenuComponent implements OnInit {
 
   ngOnInit(): void {
     this.sioCoreLoggerService.debug('[sioCoreMenuComponent][ngOnInit]', this.menuID);
-    this.sioCoreMenuState = this._sioCoreMenuState.snapshot[this.menuID];
+    this.sioCoreMenuState = this._sioCoreMenuState.snapshot[(this.menuID === undefined)?'main':this.menuID];
     this.sioCoreLoggerService.debug('[sioCoreMenuComponent][ngOnInit]', this.sioCoreMenuState);
   }
 

diff --git a/libs/core/src/lib/core.module.ts b/libs/core/src/lib/core.module.ts
@@ -140,7 +140,7 @@ export class SioCoreModule extends EnsureModuleLoadedOnceGuard {
       ngModule: SioCoreModule,
       providers: [
         { provide: SioCoreEnvironmentConfig, useValue: config },
-        { provide: ErrorHandler, useClass: SioCoreErrorHandlerService },
+       // { provide: ErrorHandler, useClass: SioCoreErrorHandlerService },
       ],
     };
   }

diff --git a/libs/core/src/lib/interfaces/menu-item.interface.ts b/libs/core/src/lib/interfaces/menu-item.interface.ts
@@ -1,8 +1,11 @@
+import { SioColorType } from "../types";
+
 export interface SioCoreMenuItemInterface {
   id: number;
   icon?: string;
   caption?: string;
   url: string;
+  color?: SioColorType,
   type?: 'download' | 'navigate';
   disabled?: boolean;
   badge?: number;

diff --git a/libs/core/src/lib/interfaces/menu.interface.ts b/libs/core/src/lib/interfaces/menu.interface.ts
@@ -5,6 +5,7 @@ export interface SioCoreMenuInterface {
   enabled?: boolean;
   showed?: boolean;
   caption?: string;
+  type?: 'default' | 'popup' | 'popover' | 'item-options';
   style?: 'default' | 'rounded' | 'custom' | 'tab';
   items: { [id: number]: SioCoreMenuItemInterface };
 }
diff --git a/libs/database/src/lib/components/data-list/data-list.component.html b/libs/database/src/lib/components/data-list/data-list.component.html
@@ -5,15 +5,9 @@
 </ion-refresher>
 <sio-list [data]="this.store!.selectAll()" [header]="this.header" [label]="this.label" [thumbnail]="this.thumbnail"
   (sioOnLeftSwipe)="this.leftSwipe($event)" (sioOnRightSwipe)="this.rightSwipe($event)"
-  (sioOnInfinite)="this.infinite($event)" (sioOnRefresh)="this.refresh($event)">
-  <ion-item-option slot="left_options">Favorite</ion-item-option>
-  <ion-item-option slot="left_options" color="danger">Delete</ion-item-option>
-  <div #left_options>
-    <ng-content select="[slot='left_options']"></ng-content>
-  </div>
-  <div #right_options>
-    <ng-content select="[slot='right_options']"></ng-content>
-  </div>
+  (sioOnInfinite)="this.infinite($event)" (sioOnRefresh)="this.refresh($event)"
+  [leftMenuId]="this.leftMenuId"
+  [rightMenuId]="this.rightMenuId">
 </sio-list>
 <ion-infinite-scroll *ngIf="this.infinite !== null && this.store?.localTotals !== this.store?.remoteTotals"
   threshold="20%" (ionInfinite)="this.infinite($event)">