fix datalist reload and infinite loading

silicia-apps · Feb 27, 2024 · 8c9b3e4 · 8c9b3e4
1 parent df1ca76
commit 8c9b3e4
Show file tree

Hide file tree

Showing 7 changed files with 1,101 additions and 1,441 deletions.
diff --git a/apps/demo/src/app/database/database.page.html b/apps/demo/src/app/database/database.page.html
@@ -1,21 +1,12 @@
-<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"
-    enableLeftSwipe
-    [enableInfinite]="this.taskState.localTotals < this.taskState.remoteTotals"
-    (leftSwipe)="this.archive($event)"
-    (rightSwipe)="this.delete($event)"
-    (infinite)="this.load($event)"
-    (refresh)="this.refresh($event)"
-  ></sio-datalist>
+<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>
+  </sio-datalist>
   <ion-fab slot="footer" vertical="bottom" horizontal="end">
-    <sio-button
-      (Click)="this.create()"
-      type="fab"
-      icon="add"
-      color="danger"
-    ></sio-button>
+    <sio-button (Click)="this.create()" type="fab" icon="add" color="danger"></sio-button>
   </ion-fab>
-</sio-page>
+</sio-page>
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,8 @@
 <ion-item-sliding [disabled]="this.disabled" #slidingItem>
   <ion-item-options *ngIf="this.rightSwipe !== null" side="start" (ionSwipe)="this.rightSwipe($event, slidingItem)">
-    <ion-item-option color="success" expandable>
-      <sio-icon slot="icon-only" name="archive"></sio-icon> 
-    </ion-item-option>
+    <div #left_options>
+      <ng-content select="[slot='left_options']"></ng-content>
+    </div>
   </ion-item-options>
   <ion-item button="this.button" [color]="this.color">
     <sio-icon *ngIf="this.icon" name="this.icon" slot="start"></sio-icon>
@@ -12,11 +12,15 @@
     <ion-thumbnail *ngIf="this.thumbnail" slot="start">
       <ion-img [alt]="this.alt" [src]="this.thumbnail" />
     </ion-thumbnail>
-    <ion-label><h2>{{ this.header | translate }}</h2><p>{{ this.label | translate }}</p></ion-label>
+    <ion-label>
+      <h3>{{ this.header | translate }}</h3>
+      <p>{{ this.label | translate }}</p>
+    </ion-label>
     <div slot="end"></div>
   </ion-item>
   <ion-item-options *ngIf="this.leftSwipe !== null" side="end" (ionSwipe)="this.leftSwipe($event, slidingItem)">
-    <ion-item-option color="danger" expandable>
-      <sio-button slot="icon-only" name="trash" (Click)="this.leftSwipe($event, slidingItem)"></sio-button>
-    </ion-item-option>
-  </ion-item-options>
+    <div #right_options>
+      <ng-content select="[slot='right_options']"></ng-content>
+    </div>
+  </ion-item-options>
+</ion-item-sliding>
diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html
@@ -1,16 +1,12 @@
-<ion-refresher slot="fixed" (ionRefresh)="this.refresh($event)">
-  <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="{{ 'LIST_PULL_TEXT' | translate }}"
-    refreshingSpinner="circles" refreshingText="{{ 'LIST_PULL_WAITING' | translate }}" >
-  </ion-refresher-content>
-</ion-refresher>
 <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)"></sio-item>
-</ion-list>
-<ion-infinite-scroll *ngIf="this.enableInfinite" threshold="20%" (ionInfinite)="this.infinite($event)">
-  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LIST_LOADING' | translate }}">
-  </ion-infinite-scroll-content>
-</ion-infinite-scroll>
+    (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>
+</ion-list>
diff --git a/libs/core/src/lib/components/list/list.component.ts b/libs/core/src/lib/components/list/list.component.ts
@@ -1,9 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { SioColorType } from '../../types';
 import { SioCoreLoggerService } from '../../services/logger';
-import { AttributeBoolean } from '@angular-ru/cdk/decorators';
-import { InputBoolean } from '@angular-ru/cdk/typings';
-import { InfiniteScrollCustomEvent, RefresherCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'sio-list',
@@ -21,16 +18,7 @@ export class SioCoreListComponent implements OnInit {
   @Input() public shape: 'compact' | 'inset' = 'compact';
   @Input() public style: 'default' | 'rounded' | 'custom' = 'default';
   @Input() public desktop = false;
-
-  @AttributeBoolean()
-  @Input() public enableInfinite: InputBoolean = false;
-
-  @AttributeBoolean()
-  @Input() public enableLeftSwipe: InputBoolean = false;
-
-  @AttributeBoolean()
-  @Input() public enableRightSwipe: InputBoolean = true;
-
+
   @Input() public header = 'name';
   @Input() public label = 'description';
   @Input() public icon: string | undefined;
@@ -39,12 +27,12 @@ export class SioCoreListComponent implements OnInit {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() public data: any[] | undefined;
 
-  @Output() sioOnClickItem = new EventEmitter<Event>();
-  @Output() sioOnLeftSwipe  = new EventEmitter<Event>();
+  @Output() sioOnClickItem = new EventEmitter<CustomEvent>();
+  @Output() sioOnLeftSwipe = new EventEmitter<Event>();
   @Output() sioOnRightSwipe = new EventEmitter<Event>();
-  @Output() sioOnInfinite = new EventEmitter<InfiniteScrollCustomEvent>();
-  @Output() sioOnRefresh = new EventEmitter<RefresherCustomEvent>();
-  
+  @Output() sioOnInfinite = new EventEmitter<CustomEvent>();
+  @Output() sioOnRefresh = new EventEmitter<CustomEvent>();
+
   // @Output() public sioCoreMenuDidChange = new EventEmitter();
 
   //public sioCoreListState!: SioCoreListInterface;
@@ -74,27 +62,18 @@ export class SioCoreListComponent implements OnInit {
     return itemObject.id;
   }
 
-  public leftSwipe(data: Event) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListLeftSwipe]', data);
-    this.sioOnLeftSwipe.emit(data);
-  }
-  public rightSwipe(data: Event) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListRightSwipe]', data);
-    this.sioOnRightSwipe.emit(data);
-  }
-
-  public refresh(event: RefresherCustomEvent) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', event);
-    this.sioOnRefresh.emit(event);
-    setTimeout(() => {
-      event.target.complete();
-    }, 500);
+  public leftSwipe(event: Event) {
+    this.sioCoreLoggerService.debug(
+      '[sioCoreListItemComponent][leftSwipe]',
+      event,
+    );
+    this.sioOnLeftSwipe.emit(event);
   }
-
-  public infinite(event: InfiniteScrollCustomEvent) {
-    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', event);
-    setTimeout(() => {
-      event.target.complete();
-    }, 500);
+  public rightSwipe(event: Event) {
+    this.sioCoreLoggerService.debug(
+      '[sioCoreListItemComponent][rightSwipe]',
+      event,
+    );
+    this.sioOnRightSwipe.emit(event);
   }
 }
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
@@ -1,12 +1,22 @@
-<sio-list
-  [data]="this.store!.selectAll()"
-  [header]="this.header"
-  [label]="this.label"
-  [thumbnail]="this.thumbnail"
-  [enableLeftSwipe]="this.enableLeftSwipe"
-  [enableInfinite]="this.enableInfinite"
-  (sioOnLeftSwipe)="this.onLeftSwipe($event)"
-  (sioOnRightSwipe)="this.onRightSwipe($event)"
-  (sioOnInfinite)="this.onInfinite($event)"
-  (sioOnRefresh)="this.onRefresh($event)"
-></sio-list>
+<ion-refresher slot="fixed" *ngIf="this.refresh !== null" (ionRefresh)="this.refresh($event)">
+  <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="{{ 'LIST_PULL_TEXT' | translate }}"
+    refreshingSpinner="circles" refreshingText="{{ 'LIST_PULL_WAITING' | translate }}">
+  </ion-refresher-content>
+</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>
+</sio-list>
+<ion-infinite-scroll *ngIf="this.infinite !== null && this.store?.localTotals !== this.store?.remoteTotals"
+  threshold="20%" (ionInfinite)="this.infinite($event)">
+  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LIST_LOADING' | translate }}">
+  </ion-infinite-scroll-content>
+</ion-infinite-scroll>
diff --git a/libs/database/src/lib/components/data-list/data-list.component.ts b/libs/database/src/lib/components/data-list/data-list.component.ts
@@ -49,11 +49,11 @@ export class SioDatabaseListComponent implements OnInit {
   @Input() public avatar: string | undefined;
   @Input() public thumbnail: string | undefined;
 
-  @Output() Click = new EventEmitter<Event>();
-  @Output() LeftSwipe = new EventEmitter<Event>();
-  @Output() RightSwipe = new EventEmitter<Event>();
-  @Output() infinite = new EventEmitter<Event>();
-  @Output() refresh = new EventEmitter<Event>();
+  @Output() sioOnClick = new EventEmitter<Event>();
+  @Output() sioOnLeftSwipe = new EventEmitter<Event>();
+  @Output() sioOnRightSwipe = new EventEmitter<Event>();
+  @Output() sioOnInfinite = new EventEmitter<Event>();
+  @Output() sioOnRefresh = new EventEmitter<Event>();
 
   constructor(private sioCoreLoggerService: SioCoreLoggerService) {
     this.sioCoreLoggerService.debug('[SioDatabaseListComponent][constructor]');
@@ -63,45 +63,47 @@ export class SioDatabaseListComponent implements OnInit {
     this.sioCoreLoggerService.debug('[SioDatabaseListComponent][ngOnInit]');
   }
 
-  public onLeftSwipe(event: Event) {
+  public leftSwipe(event: Event) {
     this.sioCoreLoggerService.debug(
-      '[SioDatabaseListComponent][onLeftSwipe]',
+      '[SioDatabaseListComponent][leftSwipe]',
       event,
     );
-    this.LeftSwipe.emit(event);
+    this.sioOnLeftSwipe.emit(event);
   }
-  public onRightSwipe(event: Event) {
+  public rightSwipe(event: Event) {
     this.sioCoreLoggerService.debug(
-      '[SioDatabaseListComponent][onRightSwipe]',
+      '[SioDatabaseListComponent][rightSwipe]',
       event,
     );
-    this.RightSwipe.emit(event);
+    this.sioOnRightSwipe.emit(event);
   }
 
-  public onRefresh(event: RefresherCustomEvent) {
+  public refresh(event: CustomEvent) {
     this.sioCoreLoggerService.debug(
-      '[SioDatabaseListComponent][onRefresh]',
+      '[SioDatabaseListComponent][refresh]',
       event,
     );
-    if (this.store) this.store.load();
-    this.refresh.emit();
+    if (this.store) {
+      this.store.setRemoteIndex(0);
+      this.store.load();
+    }
+    this.sioOnRefresh.emit();
     setTimeout(() => {
       (event as RefresherCustomEvent).target.complete();
     }, 500);
   }
-
-  public onInfinite(data: Event) {
+  
+  public infinite(event: CustomEvent) {
     this.sioCoreLoggerService.debug(
-      '[sioDatabaseListComponent][onInfinite]',
-      data,
+      '[sioDatabaseListComponent][infinite]',
+      event,
     );
-    this.infinite.emit(); //{ LastId: this.store.entitiesArray.pop().$id });
     if (this.store) {
-      this.store.setRemoteIndex('');
       this.store.load();
     }
+    this.sioOnInfinite.emit(event);
     setTimeout(() => {
-      (data as InfiniteScrollCustomEvent).target.complete();
+      (event as InfiniteScrollCustomEvent).target.complete();
     }, 500);
   }
 }