add ADD function in Database State Component

apps/demo/src/app/app.config.ts

@@ -14,7 +14,7 @@ import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 import { NgxsModule } from '@ngxs/store';
 import { SioStorageState } from '@silicia/storage';
-import { TaskState } from './database/task.state';
+import { TaskState } from './database/store/task.state';
 export const appConfig: ApplicationConfig = {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

apps/demo/src/app/database/database.page.html

@@ -3,5 +3,5 @@
   <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="photo" thumbnail="photo2"></sio-list>
+  <sio-list doLeftSwipe header="name" label="description" [data]="this.taskState.selectAll()" avatar="avatar" thumbnail="thumbnail" (sioCoreItemSwipe)="this.delete($event)"></sio-list>
 </sio-page>

apps/demo/src/app/database/database.page.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
 import { SioCommonModule, SioCoreLoggerService } from '@silicia/core';
-import { TaskState } from './task.state';
-import { taskInterface } from './task.interface';
-
+import { TaskState } from './store/task.state';
+import { taskInterface } from './store/task.interface';
 
 @Component({
   selector: 'sio-database',
@@ -22,22 +21,21 @@ export class DatabasePageComponent {
   }
 
   public async create() {
-    const test = {
-      $id : 'ijijiiij',
-      $collectionId : '',
-      $createdAt : '',
-      $databaseId : '',
-      $updatedAt : '',
+    const test: taskInterface = {
       name : 'test',
-      $permissions : [],
       description : 'test descrption'
     }
     this.taskState.addOne(test);
-    const task = {...this.taskState.selectOne('65a29bfd53f6ff5f0af8')}
+    const task = {...this.taskState.selectOne('65a841c4577a8c033b25')!}
     task.name = 'task ciao';
-    this.taskState.setOne(<taskInterface>task);
+    this.taskState.setOne(task);
   }
   public deleteAll() {
-
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public delete(event: any) {
+    console.error (JSON.stringify(event));
+    //this.taskState.removeByEntity()
   }
 }

libs/appwrite/src/lib/services/database.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from '@angular/core';
-import { Databases } from 'appwrite';
+import { Databases, ID } from 'appwrite';
 
 import {
   SioDatabaseServiceInterface,
@@ -9,6 +9,7 @@ import {
 
 import {
   Loggable,
+  SioCoreDocumentInterface,
   SioCoreLoggerService,
   SioCorePluginServiceConfigModel,
   sioCorePluginServiceConfigToken,
@@ -36,17 +37,18 @@ export class SioAppwriteDatabaseService implements SioDatabaseServiceInterface {
     this.databases = new Databases(this.sioAppwriteClientService.client);
   }
 
-  async create(
-    value: object,
-    collection: string,
-    database?: string | undefined,
-    document?: string | undefined,
+  async add(
+    value: SioCoreDocumentInterface,
+    collectionId?: string,
+    databaseId?: string,
+    documentId?: string,
   ): Promise<boolean> {
     try {
+      if (!documentId) documentId = ID.unique();
       const product = await this.databases.createDocument(
-        database as string,
-        collection,
-        document as string,
+        databaseId as string,
+        collectionId as string,
+        documentId as string,
         value,
       );
       console.error(JSON.stringify(product));
@@ -111,15 +113,15 @@ export class SioAppwriteDatabaseService implements SioDatabaseServiceInterface {
   }
 
   async delete(
-    id: string,
-    collection: string,
-    database?: string | undefined,
+    documentId: string | number,
+    collectionId?: string,
+    databaseId?: string,
   ): Promise<boolean> {
     try {
       const items = await this.databases.deleteDocument(
-        database as string,
-        collection,
-        id,
+        databaseId as string,
+        collectionId as string,
+        documentId as string,
       );
       console.log(JSON.stringify(items));
       return true;

libs/core/src/lib/components/icon/icon.component.html

@@ -1,2 +1,4 @@
 <ion-icon *ngIf="this.slot === 'start'" slot="start" [name]="this.name" [ios]="this.name+ '-outline'" [md]="this.name+ '-sharp'" [color]="this.color" [size]="this.size"></ion-icon>
-<ion-icon *ngIf="this.slot === 'end'" slot="end" [name]="this.name" [ios]="this.name+ '-outline'" [md]="this.name+ '-sharp'" [color]="this.color" [size]="this.size"></ion-icon>
+<ion-icon *ngIf="this.slot === 'end'" slot="end" [name]="this.name" [ios]="this.name+ '-outline'" [md]="this.name+ '-sharp'" [color]="this.color" [size]="this.size"></ion-icon>
+<ion-icon *ngIf="this.slot === 'icon-only'" slot="icon-only" [name]="this.name" [ios]="this.name+ '-outline'" [md]="this.name+ '-sharp'" [color]="this.color" [size]="this.size"></ion-icon>
+<ion-icon *ngIf="!this.slot" [name]="this.name" [ios]="this.name+ '-outline'" [md]="this.name+ '-sharp'" [color]="this.color" [size]="this.size"></ion-icon>

libs/core/src/lib/components/icon/icon.component.ts

@@ -9,7 +9,7 @@ import { SioCoreLoggerService } from '../../services/logger';
 })
 export class SioCoreIconComponent {
   @Input() public color: SioColorType;
-  @Input() public slot : 'start' | 'end' | undefined;
+  @Input() public slot : 'start' | 'end' | 'icon-only' | undefined;
   @Input() public name: string | undefined = undefined;
   @Input() public url: string | undefined = undefined;
   @Input() public size: 'small' | 'large' | undefined = undefined;

libs/core/src/lib/components/item/item.component.html

@@ -1,22 +1,22 @@
 <ion-item-sliding [disabled]="this.disabled">
   <ion-item-options *ngIf="this.doRightSwipe" side="start" (ionSwipe)="this.RightSwipe()">
     <ion-item-option color="success" expandable>
-      <ion-icon slot="icon-only" name="archive"></ion-icon>
+      <sio-icon slot="icon-only" name="archive"></sio-icon>
     </ion-item-option>
   </ion-item-options>
   <ion-item button="this.button" color="none">
-    <ion-avatar *ngIf="this.image && this.avatar" slot="start">
-      <ion-img [alt]="this.alt" [src]="this.image" />
+    <sio-icon *ngIf="this.icon" name="this.icon" slot="start"></sio-icon>
+    <ion-avatar *ngIf="this.avatar" slot="start">
+      <ion-img [alt]="this.alt" [src]="this.avatar" />
     </ion-avatar>
-    <ion-thumbnail *ngIf="this.image && this.thumbnail" slot="start">
-      <ion-img [alt]="this.alt" [src]="this.image" />
+    <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 slot="end"></ion-label>
-    <ion-button slot="end"><sio-icon name="add"></sio-icon></ion-button>
+    <div slot="end"></div>
   </ion-item>
-  <ion-item-options  *ngIf="this.doLeftSwipe" side="end" (ionSwipe)="this.LeftSwipe()">
+  <ion-item-options *ngIf="this.doLeftSwipe" side="end" (ionSwipe)="this.LeftSwipe()">
     <ion-item-option color="danger" expandable>
-      <ion-icon slot="icon-only" name="trash"></ion-icon>
+      <sio-icon slot="icon-only" name="trash"></sio-icon>
     </ion-item-option>
   </ion-item-options>

libs/core/src/lib/components/item/item.component.ts

@@ -13,11 +13,7 @@ export class SioCoreItemComponent implements OnInit {
 
   private _color : SioColorType = undefined;
 
-  @Input() public label: string;
-
-  @Input() public image: string;
-
-  @Input() public set color(value: string) {
+  @Input() public set color(value: SioColorType) {
     //console.error(value);
     this._color = value?value:'none';
   }
@@ -27,25 +23,24 @@ export class SioCoreItemComponent implements OnInit {
     return this._color;
   }
 
-  @Input() public header: string;
+  @Input() public header: string = 'NO_HEADER';
+  @Input() public label: string = 'NO_LABEL';
 
   @AttributeBoolean()
-  @Input() public button: InputBoolean;  
+  @Input() public button: InputBoolean = false;  
 
   @AttributeBoolean()
-  @Input() public disabled: InputBoolean;  
+  @Input() public disabled: InputBoolean = false;  
 
-  @AttributeBoolean()
-  @Input() public thumbnail: InputBoolean;
-
-  @AttributeBoolean()
-  @Input() public avatar: InputBoolean;
+  @Input() public thumbnail: string | undefined = undefined;
+  @Input() public avatar: string | undefined = undefined;
+  @Input() public icon: string | undefined = undefined;
 
   @AttributeBoolean()
-  @Input() public doLeftSwipe: InputBoolean;
+  @Input() public doLeftSwipe: InputBoolean = false;
 
   @AttributeBoolean()
-  @Input() public doRightSwipe: InputBoolean;
+  @Input() public doRightSwipe: InputBoolean = false;
 
   @Input() public alt : string | undefined = undefined;
 
@@ -54,13 +49,7 @@ export class SioCoreItemComponent implements OnInit {
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   constructor(private sioCoreLoggerService: SioCoreLoggerService) {
-    this.disabled = false;
-    this.avatar = false;
-    this.thumbnail = false;
-    this.label = 'no label';
-    this.header = 'no header';
-    this.image = 'https://ionicframework.com/docs/img/demos/thumbnail.svg';
-    console.log(this.label)
+
   }
 
   ngOnInit(): void {

libs/core/src/lib/components/list/list.component.html

@@ -1,6 +1,12 @@
-  <ion-list>
-    <sio-item *ngFor="
-    let item of this.data;
-    trackBy: trackItems
-  " [header]="item[this.header]" [label] = "item[this.label]" [thumbnail]="this.thumbnail" [image]="(this.avatar)?item[this.avatar]:(this.thumbnail)?item[this.thumbnail]:''"></sio-item>
-  </ion-list> 
+<ion-list>
+  <sio-item
+    *ngFor="let item of this.data; trackBy: trackItems"
+    [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"
+  ></sio-item>
+</ion-list>

libs/core/src/lib/components/list/list.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } 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';
 
 @Component({
   selector: 'sio-list',
@@ -19,8 +21,15 @@ export class SioCoreListComponent implements OnInit {
   @Input() public style: 'default' | 'rounded' | 'custom' = 'default';
   @Input() public desktop = false;
 
+  @AttributeBoolean()
+  @Input() public doLeftSwipe: InputBoolean;
+
+  @AttributeBoolean()
+  @Input() public doRightSwipe: InputBoolean;
+
   @Input() public header: string = 'name';
   @Input() public label: string = 'description';
+  @Input() public icon: string | undefined;
   @Input() public avatar: string | undefined;
   @Input() public thumbnail: string | undefined;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

libs/database/src/lib/interfaces/document.interface.ts

@@ -1,9 +1,9 @@
 export interface SioDatabaseDocumentInterface {
-  $id: number | string;
-  $collectionId: string;
-  $databaseId: string;
-  $createdAt: string;
-  $updatedAt: string;
-  $permissions: string[];
+  $id?: number | string;
+  $collectionId?: string;
+  $databaseId?: string;
+  $createdAt?: string;
+  $updatedAt?: string;
+  $permissions?: string[];
   [key: string]: unknown; 
 }

libs/database/src/lib/services/database/database.service.ts

@@ -25,14 +25,14 @@ export class SioDatabaseService implements SioDatabaseServiceInterface {
     this.plugins = Array.isArray(plugins) ? plugins : [plugins];
   }
 
-  async create(
-    value: object,
-    collection: string,
-    database?: string,
-    document?: string,
+  async add(
+    value: SioDatabaseDocumentInterface,
+    collectionId?: string,
+    databaseId?: string,
+    documentId?: string,
   ): Promise<boolean> {
     try {
-      return this.plugins[0].create(value, collection, database, document);
+      return this.plugins[0].add(value, collectionId, databaseId, documentId);
     } catch (e) {
       const error = e as Error;
       if (error.name === 'sio-error')
@@ -105,12 +105,12 @@ export class SioDatabaseService implements SioDatabaseServiceInterface {
   }
 
   async delete(
-    id: string,
-    collection: string,
-    database?: string,
+    documentId: string | number,
+    collectionId?: string,
+    databaseId?: string,
   ): Promise<boolean> {
     try {
-      return this.plugins[0].delete(id, collection, database);
+      return this.plugins[0].delete(documentId, collectionId, databaseId);
     } catch (e) {
       const error = e as Error;
       if (error.name === 'sio-error')

libs/database/src/lib/services/database/interfaces/database-service.interface.ts

@@ -5,11 +5,11 @@ import {
 } from '../../../interfaces';
 
 export interface SioDatabaseServiceInterface {
-  create(
-    value: object,
-    collection: string,
-    database?: string,
-    document?: string,
+  add(
+    value: SioDatabaseDocumentInterface,
+    collectionId?: string,
+    databaseId?: string,
+    documentId?: string | number,
   ): Promise<boolean>;
   query(
     databaseId: string,
@@ -23,7 +23,7 @@ export interface SioDatabaseServiceInterface {
     collectionId: string,
     databaseId: string,
   ): Promise<boolean>;
-  delete(id: string, collection: string, database?: string): Promise<boolean>;
+  delete(documentId: string | number, collectionId?: string, databaseId?: string): Promise<boolean>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   subscribe(): Observable<any>;
 }

libs/database/src/lib/store/database.state.ts

@@ -106,8 +106,17 @@ 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 addOne(entity: T): void {
+      //super.addOne(entity);
+      this.sioDatabaseService.add(entity, this.snapshot.collectionId, this.snapshot.databaseId);
+  }
+
   override setOne(entity: T): void {
-    super.setOne(entity);
+    //super.setOne(entity);
     this.sioDatabaseService.set(
       entity.$id as string,
       entity,