feat(): add edit data

apps/mix-cms/src/app/components/record-form/record-form.component.html

@@ -1,6 +1,6 @@
 <div class="mix-dialog">
   <div class="mix-dialog__header">
-    Create record from {{ ref.data.mixDatabase.displayName }}
+    {{ mode === 'create' ? 'Create' : 'Update'}} record from {{ ref.data.mixDatabase.displayName }}
   </div>
 
   <div class="mix-dialog__content">

apps/mix-cms/src/app/components/record-form/record-form.component.ts

@@ -34,6 +34,7 @@ export class RecordFormComponent extends BaseComponent implements OnInit {
   ref: DialogRef<
     {
       mixDatabase: MixDatabase;
+      data: MixDynamicData | undefined;
     },
     MixDynamicData
   > = inject(DialogRef);
@@ -53,10 +54,12 @@ export class RecordFormComponent extends BaseComponent implements OnInit {
   public modelData: MixDynamicData = {};
   public fields: FormlyFieldConfig[] = [];
   public form = new FormGroup({});
+  public mode: 'create' | 'update' = 'create';
 
   ngOnInit() {
     const db = this.ref.data.mixDatabase;
-    const data = {};
+    const data = this.ref.data.data ?? {};
+    this.mode = data ? 'update' : 'create';
 
     const { model, fields } = Utils.BuildDynamicFormField(
       db.columns,

apps/mix-cms/src/app/pages/portal/database-data/components/custom-action-cell/custom-action-cell.component.ts

@@ -15,9 +15,11 @@ import { ICellRendererParams } from 'ag-grid-community';
 export class CustomActionCellComponent implements ICellRendererAngularComp {
   public cellValue!: string;
   public dataId!: number;
+  public parentComp: any;
 
   public agInit(params: ICellRendererParams): void {
     this.cellValue = this.getValueToDisplay(params);
+    this.parentComp = params.context.componentParent;
   }
 
   public refresh(params: ICellRendererParams): boolean {
@@ -26,7 +28,7 @@ export class CustomActionCellComponent implements ICellRendererAngularComp {
   }
 
   public btnClick() {
-    console.log(123);
+    this.parentComp.editData(this.dataId);
   }
 
   public getValueToDisplay(params: ICellRendererParams) {

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

@@ -323,12 +323,29 @@ export class DatabaseDataComponent
       if (!value.db) return;
 
       const dialogRef = this.dialog.open(RecordFormComponent, {
-        data: { mixDatabase: value.db },
+        data: { mixDatabase: value.db, data: undefined },
       });
 
       dialogRef.afterClosed$.subscribe((value) => {
         if (value) this.store.addData(value);
       });
     });
   }
+
+  public editData(dataId: number) {
+    this.store.state$.pipe(take(1)).subscribe((state) => {
+      if (!state.db) return;
+
+      const dataIndex = state.data.findIndex((x) => x.id === dataId);
+      if (dataIndex < 0) return;
+
+      const dialogRef = this.dialog.open(RecordFormComponent, {
+        data: { mixDatabase: state.db, data: state.data[dataIndex] },
+      });
+
+      dialogRef.afterClosed$.subscribe((value) => {
+        if (value) this.store.updateData(dataIndex, value);
+      });
+    });
+  }
 }

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

@@ -127,6 +127,18 @@ export class DatabaseDataStore extends ComponentStore<DatabaseDataState> {
     }));
   }
 
+  public updateData(dataIndex: number, data: MixDynamicData) {
+    this.patchState((s) => {
+      const current = s.data;
+      current[dataIndex] = data;
+
+      return {
+        ...s,
+        data: current,
+      };
+    });
+  }
+
   public removeData(dataId: number[]) {
     this.patchState((s) => ({
       ...s,