Add Delete from Collections (swipe on Demo)

silicia-apps · Jan 23, 2024 · 3635bce · 3635bce
1 parent 27b568b
commit 3635bce
Show file tree

Hide file tree

Showing 10 changed files with 262 additions and 275 deletions.
diff --git a/apps/demo/src/app/database/database.page.html b/apps/demo/src/app/database/database.page.html
@@ -1,7 +1,30 @@
 <sio-page title="Database Apprite Plugin Test Page">
-  <sio-button (Click)="this.create()">NEW</sio-button>
-  <sio-button color="danger" (Click)="this.deleteAll()" [disabled]="!this.taskState.localTotals">DELETE
-    ALL</sio-button>
-  <h1>Total Task : {{ this.taskState.localTotals }} loaded /{{ this.taskState.remoteTotals }} on server</h1>
-  <sio-list doLeftSwipe header="name" label="description" [data]="this.taskState.selectAll()" avatar="avatar" thumbnail="thumbnail" (sioCoreItemSwipe)="this.delete($event)"></sio-list>
-</sio-page>
+  <sio-button
+    color="danger"
+    (Click)="this.deleteAll()"
+    [disabled]="!this.taskState.localTotals"
+    >DELETE ALL</sio-button
+  >
+  <h1>
+    Total Task : {{ this.taskState.localTotals }} loaded /{{
+    this.taskState.remoteTotals }} on server
+  </h1> 
+  <sio-list
+    header="name"
+    label="description"
+    [data]="this.taskState.selectAll()"
+    avatar="avatar"
+    thumbnail="thumbnail"
+    LeftSwipe
+    (sioCoreListItemLeftSwipe)="this.archive($event)"
+    (sioCoreListItemRightSwipe)="this.delete($event)"
+  ></sio-list>
+  <ion-fab slot="footer" vertical="bottom" horizontal="end">
+    <sio-button
+      (Click)="this.create()"
+      type="fab"
+      icon="add"
+      color="danger"
+    ></sio-button>
+  </ion-fab>
+</sio-page>
diff --git a/apps/demo/src/app/database/database.page.ts b/apps/demo/src/app/database/database.page.ts
@@ -35,7 +35,12 @@ export class DatabasePageComponent {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public delete(event: any) {
-    console.error (JSON.stringify(event));
-    //this.taskState.removeByEntity()
+    this.sioCoreLoggerService.debug('[DatabasePageComponent][delete]', event.id);
+    this.taskState.removeOne(event.id);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  public archive(event: any) {
+    this.sioCoreLoggerService.log('you have right swiped ');
   }
 }
diff --git a/libs/appwrite/src/lib/services/database.service.ts b/libs/appwrite/src/lib/services/database.service.ts
@@ -118,6 +118,7 @@ export class SioAppwriteDatabaseService implements SioDatabaseServiceInterface {
     databaseId?: string,
   ): Promise<boolean> {
     try {
+      console.log('try to delete '+documentId);
       const items = await this.databases.deleteDocument(
         databaseId as string,
         collectionId as string,

diff --git a/libs/core/src/lib/components/item/item.component.html b/libs/core/src/lib/components/item/item.component.html
@@ -1,7 +1,7 @@
 <ion-item-sliding [disabled]="this.disabled">
-  <ion-item-options *ngIf="this.doRightSwipe" side="start" (ionSwipe)="this.RightSwipe()">
+  <ion-item-options *ngIf="this.RightSwipe" side="start" (ionSwipe)="this.doRightSwipe($event)">
     <ion-item-option color="success" expandable>
-      <sio-icon slot="icon-only" name="archive"></sio-icon>
+      <sio-icon slot="icon-only" name="archive"></sio-icon> 
     </ion-item-option>
   </ion-item-options>
   <ion-item button="this.button" color="none">
@@ -15,7 +15,7 @@
     <ion-label><h2>{{ this.header | translate }}</h2><p>{{ this.label | translate }}</p></ion-label>
     <div slot="end"></div>
   </ion-item>
-  <ion-item-options *ngIf="this.doLeftSwipe" side="end" (ionSwipe)="this.LeftSwipe()">
+  <ion-item-options *ngIf="this.LeftSwipe" side="end" (ionSwipe)="this.doLeftSwipe($event)">
     <ion-item-option color="danger" expandable>
       <sio-icon slot="icon-only" name="trash"></sio-icon>
     </ion-item-option>

diff --git a/libs/core/src/lib/components/item/item.component.ts b/libs/core/src/lib/components/item/item.component.ts
@@ -23,6 +23,7 @@ export class SioCoreItemComponent implements OnInit {
     return this._color;
   }
 
+  @Input() public $id: string | number | undefined = undefined;
   @Input() public header: string = 'NO_HEADER';
   @Input() public label: string = 'NO_LABEL';
 
@@ -37,15 +38,16 @@ export class SioCoreItemComponent implements OnInit {
   @Input() public icon: string | undefined = undefined;
 
   @AttributeBoolean()
-  @Input() public doLeftSwipe: InputBoolean = false;
+  @Input() public LeftSwipe: InputBoolean = false;
 
   @AttributeBoolean()
-  @Input() public doRightSwipe: InputBoolean = false;
+  @Input() public RightSwipe: InputBoolean = false;
 
   @Input() public alt : string | undefined = undefined;
 
   @Output() sioCoreItemClick = new EventEmitter();
-  @Output() sioCoreItemSwipe = new EventEmitter();
+  @Output() sioCoreItemLeftSwipe = new EventEmitter();
+  @Output() sioCoreItemRightSwipe = new EventEmitter();
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   constructor(private sioCoreLoggerService: SioCoreLoggerService) {
@@ -56,24 +58,22 @@ export class SioCoreItemComponent implements OnInit {
     this.sioCoreLoggerService.debug('[SioCoreItemComponent][ngOnInit]');
   }
 
-  public async RightSwipe(): Promise<void> {
-    this.sioCoreLoggerService.info(
-      '[SioCoreItemComponent][RightSwipe] raise event swipe'
-    );
-    this.sioCoreItemSwipe.emit();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  public async doRightSwipe(event: any): Promise<void> {
+    this.sioCoreLoggerService.debug('[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id);
+    this.sioCoreItemRightSwipe.emit({id: this.$id});
   }
 
-  public async LeftSwipe(): Promise<void> {
-    this.sioCoreLoggerService.info(
-      '[SioCoreItemComponent][LeftSwipe] raise event swipe'
-    );
-    this.sioCoreItemSwipe.emit();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  public async doLeftSwipe(event: any): Promise<void> {
+    this.sioCoreLoggerService.debug('[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id);
+    this.sioCoreItemLeftSwipe.emit({ id: this.$id}); 
   }
 
   public async Click(): Promise<void> {
     this.sioCoreLoggerService.info(
       '[SioCoreMenuItemComponent][Click] raise event click'
     );
-    this.sioCoreItemClick.emit();
+    this.sioCoreItemClick.emit(this.$id);
   }
 }
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,15 @@
 <ion-list>
   <sio-item
     *ngFor="let item of this.data; trackBy: trackItems"
+    [$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"
-    [doLeftSwipe]="this.doLeftSwipe"
-    [doRightSwipe]="this.doRightSwipe"
+    [LeftSwipe]="this.LeftSwipe"
+    [RightSwipe]="this.RightSwipe"
+    (sioCoreItemLeftSwipe)="this.receiveListRighSwipe($event)"
+    (sioCoreItemRightSwipe)="this.receiveListLeftSwipe($event)"
   ></sio-item>
-</ion-list>
+</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,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+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';
@@ -22,10 +22,10 @@ export class SioCoreListComponent implements OnInit {
   @Input() public desktop = false;
 
   @AttributeBoolean()
-  @Input() public doLeftSwipe: InputBoolean;
+  @Input() public LeftSwipe: InputBoolean;
 
   @AttributeBoolean()
-  @Input() public doRightSwipe: InputBoolean;
+  @Input() public RightSwipe: InputBoolean = true;
 
   @Input() public header: string = 'name';
   @Input() public label: string = 'description';
@@ -35,6 +35,10 @@ export class SioCoreListComponent implements OnInit {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() public data: any[] | undefined;
 
+  @Output() sioCoreListItemClick = new EventEmitter();
+  @Output() sioCoreListItemLeftSwipe  = new EventEmitter();
+  @Output() sioCoreListItemRightSwipe = new EventEmitter();
+
   // @Output() public sioCoreMenuDidChange = new EventEmitter();
 
   //public sioCoreListState!: SioCoreListInterface;
@@ -63,4 +67,14 @@ export class SioCoreListComponent implements OnInit {
   trackItems(index: number, itemObject: any) {
     return itemObject.id;
   }
+
+  public receiveListLeftSwipe(data: any) {
+    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListLeftSwipe]', data);
+    this.sioCoreListItemLeftSwipe.emit(data);
+  }
+  public receiveListRighSwipe(data: any) {
+    this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListRightSwipe]', data);
+    this.sioCoreListItemRightSwipe.emit(data);
+  }
+
 }
diff --git a/libs/database/src/lib/services/database/database.service.ts b/libs/database/src/lib/services/database/database.service.ts
@@ -109,6 +109,7 @@ export class SioDatabaseService implements SioDatabaseServiceInterface {
     collectionId?: string,
     databaseId?: string,
   ): Promise<boolean> {
+
     try {
       return this.plugins[0].delete(documentId, collectionId, databaseId);
     } catch (e) {

diff --git a/libs/database/src/lib/store/database.state.ts b/libs/database/src/lib/store/database.state.ts
@@ -106,8 +106,10 @@ export abstract class SioDatabaseState<
     return this.snapshot.remoteTotals;
   }
 
-  override removeByEntity(entity: T): void {
-      this.sioDatabaseService.delete(entity.$id!, this.snapshot.collectionId, this.snapshot.databaseId);
+  override removeOne(id: string | number): void {
+      this.sioCoreLoggerService.debug('[SioDatabaseState][removeByEntity]', id)
+      this.sioDatabaseService.delete(id, this.snapshot.collectionId, this.snapshot.databaseId);
+      super.removeOne(id);
   }
 
   override addOne(entity: T): void {