fix realtime update list

silicia-apps · Feb 19, 2024 · 1c6def7 · 1c6def7
1 parent 0b8e508
commit 1c6def7
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 11 deletions.
diff --git a/apps/demo/src/app/database/database.page.html b/apps/demo/src/app/database/database.page.html
@@ -9,6 +9,7 @@
     (sioCoreListItemLeftSwipe)="this.archive($event)"
     (sioCoreListItemRightSwipe)="this.delete($event)"
     (sioCoreListInfinite)="this.load($event)"
+    (sioRefreshList)="this.refresh($event)"
   ></sio-list>
   <ion-fab slot="footer" vertical="bottom" horizontal="end">
     <sio-button

diff --git a/apps/demo/src/app/database/database.page.ts b/apps/demo/src/app/database/database.page.ts
@@ -47,4 +47,10 @@ export class DatabasePageComponent {
     this.sioCoreLoggerService.debug('[DatabasePageComponent][load]', event);
     this.taskState.load();
   }
+
+  public refresh(event: Record<string, number | string>){
+    console.log(event)
+    this.taskState.setRemoteIndex('');
+    this.taskState.load();
+  }
 }
diff --git a/libs/core/src/i18n/en.ts b/libs/core/src/i18n/en.ts
@@ -3,5 +3,7 @@ export const en = {
     'PAGE_TITLE' : 'Page Title',
     'PAGE_COMPONENT_DEFAULT_1' : 'Empty Page',
     'PAGE_COMPONENT_DEFAULT_2' : 'Create your contents',
-    'PAGE_COMPONENT_LINK' : 'Componet Page of '   
+    'PAGE_COMPONENT_LINK' : 'Componet Page of ',
+    'LIST_PULL_WAITING': 'Waiting...',
+    'LIST_PULL_TEXT': 'Pull To Refresh',
 }
diff --git a/libs/core/src/i18n/it.ts b/libs/core/src/i18n/it.ts
@@ -5,5 +5,8 @@ export const it = {
     'PAGE_TITLE' : 'Titolo Pagina',
     'PAGE_COMPONENT_DEFAULT_1' : 'Pagina Vuota',
     'PAGE_COMPONENT_DEFAULT_2' : 'Crea i Tuoi contenuti',
-    'PAGE_COMPONENT_LINK' : 'questo è il componente pagina di '
+    'PAGE_COMPONENT_LINK' : 'questo è il componente pagina di ',
+    'LIST_PULL_WAITING': 'Attendere...',
+    'LIST_PULL_TEXT': 'Trascina per aggiornare',
+
  }
diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html
@@ -1,6 +1,6 @@
 <ion-refresher slot="fixed">
-  <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="Pull to refresh"
-    refreshingSpinner="circles" refreshingText="Refreshing...">
+  <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="{{ 'LIST_PULL_TEXT' | translate }}"
+    refreshingSpinner="circles" refreshingText="{{ 'LIST_PULL_WAITING' | translate }}" (ionRefresh)="onRefresh($event)">
   </ion-refresher-content>
 </ion-refresher>
 <ion-list>

diff --git a/libs/core/src/lib/components/list/list.component.ts b/libs/core/src/lib/components/list/list.component.ts
@@ -3,7 +3,7 @@ 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 } from '@ionic/angular';
+import { InfiniteScrollCustomEvent, RefresherCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'sio-list',
@@ -43,6 +43,7 @@ export class SioCoreListComponent implements OnInit {
   @Output() sioCoreListItemLeftSwipe  = new EventEmitter<Record<string, number | string>>();
   @Output() sioCoreListItemRightSwipe = new EventEmitter<Record<string, number | string>>();
   @Output() sioCoreListInfinite = new EventEmitter<Record<string, number | string>>();
+  @Output() sioCoreRefreshList = new EventEmitter<Record<string, number | string>>();
 
   // @Output() public sioCoreMenuDidChange = new EventEmitter();
 
@@ -82,6 +83,13 @@ export class SioCoreListComponent implements OnInit {
     this.sioCoreListItemRightSwipe.emit(data);
   }
 
+  public onRefresh(data: Event) {
+    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', data);
+    setTimeout(() => {
+      (data as RefresherCustomEvent).target.complete();
+    }, 500);
+  }
+
   public onListInfinite(data: Event) {
     this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', data);
     this.sioCoreListInfinite.emit({ LastId : this.data!.pop().$id });

diff --git a/libs/database/src/lib/store/database.state.ts b/libs/database/src/lib/store/database.state.ts
@@ -23,7 +23,7 @@ export abstract class SioDatabaseState<
     queries: string[];
   }
 > {
-  public override primaryKey: string = '$id';
+  public override primaryKey = '$id';
 
   constructor(
     private sioCoreLoggerService: SioCoreLoggerService,
@@ -35,12 +35,16 @@ export abstract class SioDatabaseState<
   override ngxsAfterBootstrap(): void {
     this.sioDatabaseService.subscribe().subscribe((event) => {
       this.sioCoreLoggerService.debug(
-        `[SioStorageState][ngxAfterBootstrap] received events`,
-      );
-      this.sioCoreLoggerService.trace(
-        `[SioStorageState][ngxAfterBootstrap]`,
-        event,
+        `[SioDatabaseState][DataSocket] received events`,
+        event
       );
+      const item = this.selectOne(event.payload.$id);
+      if (item) {
+        console.debug('[SioDatabaseState][DataSocket] items in list, updated');
+        this.setEntityOne(event.payload);
+      } else {
+        console.debug('[SioDatabaseState][DataSocket] items not in list, do anything');
+      }
       this.load();
     });
   }
@@ -88,7 +92,9 @@ export abstract class SioDatabaseState<
         }
         this.setRemoteTotals(documents.total);
         this.setLocalTotals(this.snapshot.ids.length);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         console.error(documents.documents.pop()!.$id!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         this.setRemoteIndex(documents.documents.pop()!.$id!);
       }
       return true;