feat(): add delete mix db

apps/mix-cms/src/app/pages/portal/database-data/database-data.component.html

@@ -73,6 +73,7 @@
                              [rowSelection]="'multiple'"
                              [suppressMoveWhenRowDragging]="true"
                              (gridReady)="onGridReady($event)"
+                             (selectionChanged)="onSelectionChanged()"
                              style="width: 100%; height: 100%">
             </ag-grid-angular>
           </div>

apps/mix-cms/src/app/pages/portal/database-data/database-data.component.ts

@@ -22,7 +22,7 @@ import { TuiReorderModule, TuiTableModule } from '@taiga-ui/addon-table';
 import { TuiDestroyService } from '@taiga-ui/cdk';
 import { TuiCheckboxModule, TuiPaginationModule } from '@taiga-ui/kit';
 import { AgGridModule } from 'ag-grid-angular';
-import { ColDef, GridReadyEvent } from 'ag-grid-community';
+import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
 import {
   Observable,
   Subject,
@@ -136,8 +136,10 @@ export class DatabaseDataComponent
   public columnNames: string[] = [];
   public displayColumns: string[] = [];
   public displayColumns$ = new Subject<string[]>();
+  public gridApi!: GridApi<MixDynamicData>;
 
-  onGridReady(params: GridReadyEvent) {
+  public onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
     this.rowData$ = this.store.vm$.pipe(
       filter((s) => s.status === 'Success'),
       tap((s) => {
@@ -164,14 +166,19 @@ export class DatabaseDataComponent
           ];
         }
       }),
-      map((s) => s.data)
+      map((s) => s.data),
+      takeUntil(this.destroy$)
     );
 
     this.displayColumns$
       .pipe(distinctUntilChanged(), debounceTime(0))
       .subscribe((v) => this.reUpdateColumnDef());
   }
 
+  public onSelectionChanged() {
+    this.selectedItems = this.gridApi.getSelectedRows();
+  }
+
   public actions = [
     {
       label: 'Insert',
@@ -238,11 +245,16 @@ export class DatabaseDataComponent
           this.mixApi.databaseApi.deleteData(this.dbSysName, d.id!)
         );
 
-        forkJoin(requests).subscribe({
-          next: () => {
-            this.modal.success('Successfully delete your data').subscribe();
-          },
-        });
+        forkJoin(requests)
+          .pipe(toastObserverProcessing(this.toast))
+          .subscribe({
+            next: () => {
+              this.modal.success('Successfully delete your data').subscribe();
+              this.store.removeData(selectedData.map((x) => x.id!));
+              this.selectedItems = [];
+              this.gridApi.deselectAll();
+            },
+          });
       });
   }
 

apps/mix-cms/src/app/stores/database-data.store.ts

@@ -126,4 +126,11 @@ export class DatabaseDataStore extends ComponentStore<DatabaseDataState> {
       data: [...s.data, data],
     }));
   }
+
+  public removeData(dataId: number[]) {
+    this.patchState((s) => ({
+      ...s,
+      data: s.data.filter((x) => !dataId.includes(x.id!)),
+    }));
+  }
 }