@dasidev/dasi-ui 1.0.0

package/src/lib/form.utils.ts

@@ -0,0 +1,1009 @@
+import api from "@/api/api";
+import { clearFormSchema, fillFormSchema, intlFormatedToNumber } from "./utils";
+import type { FormReactiveSchema, FormSchemaHooks } from "@/types/form.types";
+import { useFormSheet } from "@/stores/form";
+import { useConfirmDialog, useErrorDialog, useLoadingDialog, useSuccessDialog } from "@/stores/dialog";
+import { InternalServerError } from "./constants";
+import { toast } from "vue-sonner";
+import { nextTick } from "vue";
+
+export interface SubmitFormDataOptions {
+  endpoint: string;
+  form$: any;
+  formSchema: FormReactiveSchema | any;
+  formHooks?: FormSchemaHooks;
+}
+
+interface BaseFormOptions {
+  title: string;
+  endpoint: string;
+  formSchema: FormReactiveSchema;
+  formHooks?: FormSchemaHooks;
+  formDialogClass?: string;
+  pageConfig?: any;
+}
+
+export interface AddFormOptions extends BaseFormOptions {}
+
+export interface EditFormOptions extends BaseFormOptions {
+  item: any;
+}
+
+export interface DeleteRestoreFormOptions extends BaseFormOptions {
+  index: number;
+  allData: any[];
+  item: any;
+}
+
+// ==========================================
+// CORE INTERFACES FOR GENERIC ADD DATA LIB
+// ==========================================
+
+export interface FormStateRefs {
+  loadingForm: any;
+  formType: any;
+  formOpen: any;
+  formError: any;
+  formEditEl?: any;
+}
+
+export interface FormHooksConfig {
+  onBeforeMount?: (formSchema: any, formType: "add" | "edit", data?: any) => Promise<boolean>;
+  onMounted?: (formEl: any, formSchema: any, formType: "add" | "edit", data?: any) => Promise<boolean>;
+  onChange?: (after: any, before: any, formEl: any, formSchema: any, formType: "add" | "edit") => void;
+  onBeforeSubmit?: (form$: any) => Promise<boolean>;
+  onAfterSubmit?: (response: any) => void;
+}
+
+export interface OrganizationAutoFillConfig {
+  enabled: boolean;
+  fieldName?: string; // default: 'organizationId'
+  accessLevelField?: string; // default: 'accessLevel'
+  endpoint?: string; // default: '/organization/my'
+}
+
+export interface EndpointSpecificConfig {
+  [endpoint: string]: {
+    onMount?: (formEditEl: any) => void;
+    customFields?: Record<string, any>;
+    validation?: (formData: any) => Promise<boolean>;
+  };
+}
+
+// Base interface untuk semua add data options
+export interface AddDataBaseOptions {
+  title: string;
+  endpoint: string;
+  formSchema: FormReactiveSchema | any;
+  formHooks?: FormSchemaHooks | FormHooksConfig;
+  pageConfig?: any;
+
+  // Callbacks
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+
+  // Auto-fill configuration
+  organizationAutoFill?: OrganizationAutoFillConfig;
+
+  // Endpoint specific configurations
+  endpointConfig?: EndpointSpecificConfig;
+
+  // Flow specific (untuk cases seperti PageActivityFlow)
+  previousData?: any;
+  previousDataField?: string;
+}
+
+// Interface untuk FormSheet mode (seperti PageActivity.vue)
+export interface AddDataSheetOptions extends AddDataBaseOptions {
+  mode: "sheet";
+}
+
+// Interface untuk Inline mode (seperti PageActivityNew.vue)
+export interface AddDataInlineOptions extends AddDataBaseOptions {
+  mode: "inline";
+  formState: FormStateRefs;
+}
+
+// Interface untuk Basic mode (seperti Master.vue)
+export interface AddDataBasicOptions extends AddDataBaseOptions {
+  mode: "basic";
+  formState: FormStateRefs;
+}
+
+// Interface untuk Flow mode (seperti PageActivityFlow.vue)
+export interface AddDataFlowOptions extends AddDataBaseOptions {
+  mode: "flow";
+  formState: FormStateRefs;
+  itemData: any; // Data item yang dipilih dari table
+  previousDataField: string; // Required untuk flow mode
+}
+
+// Union type untuk semua options
+export type AddDataOptions = AddDataSheetOptions | AddDataInlineOptions | AddDataBasicOptions | AddDataFlowOptions;
+
+// Legacy interface untuk backward compatibility
+export interface AddDataGenericOptions extends AddDataBaseOptions {
+  // Form state refs untuk inline mode
+  formState?: FormStateRefs;
+
+  // Options
+  mode?: "sheet" | "inline" | "basic" | "flow";
+  endpointSpecificHandlers?: {
+    [key: string]: (formEditEl: any) => void;
+  };
+
+  // Auto-fill organization (legacy)
+  autoFillOrganization?: boolean;
+}
+
+/**
+ * Dialog
+ *
+ */
+const formSheet = useFormSheet();
+const errorDialog = useErrorDialog();
+const successDialog = useSuccessDialog();
+const loadingDialog = useLoadingDialog();
+const confirmDialog = useConfirmDialog();
+
+/**
+ * Submit form data to API
+ * based on vue form schema
+ *
+ */
+export async function submitFormData({ endpoint, form$, formSchema, formHooks }: SubmitFormDataOptions) {
+  /**
+   * Run schema hook if
+   * schema has onBeforeSubmit hook
+   *
+   */
+  if (formHooks && formHooks.onBeforeSubmit) {
+    await nextTick();
+    if (!(await formHooks.onBeforeSubmit(form$))) return;
+  }
+
+  const formData = { ...form$.data };
+
+  /**
+   * Transfrom data
+   *
+   */
+  for (const [k, v] of Object.entries(formData)) {
+    /**
+     * Update media
+     *
+     */
+    if (v && (v as any).mimetype) formData[k] = (v as any).id;
+
+    if (formSchema.value[k]) {
+      const schemaItem = formSchema.value[k];
+
+      /**
+       * Format input on fe is formated internaional number
+       * and sent to be as a number
+       *
+       */
+      if (schemaItem.mask?.thousandsSeparator === ",") {
+        formData[k] = v ? intlFormatedToNumber(String(v)) : null;
+      }
+
+      /**
+       * Format number without sparator (input int)
+       *
+       */
+      if (schemaItem.mask?.thousandsSeparator === "") {
+        formData[k] = v ? Number(String(v)) : null;
+      }
+
+      /**
+       * Format dialog selector,
+       * displayed as object selected item,
+       * and sent to be as an id string
+       */
+      if (['dasi_v2_organization', "dasi_v2_selector_single", "dasi_v2_selector_single_v2"].includes(schemaItem.type)) {
+        // Accept object, id string, or single-item array of either
+        const rawVal: any = v;
+        let val: any = Array.isArray(rawVal) ? rawVal[0] : rawVal;
+
+        // Fallback: if user didn't touch the field, take id/object from schema default (object or [object])
+        if ((!val || (!val.id && typeof val !== 'string')) && schemaItem?.default) {
+          const def: any = Array.isArray(schemaItem.default) ? schemaItem.default[0] : schemaItem.default;
+          if (def) val = def;
+        }
+
+        // Resolve id
+        const resolvedId = typeof val === 'string' ? val : val?.id || null;
+
+        if (schemaItem.type === "dasi_v2_selector_single_v2" && schemaItem.subItem) {
+          formData[k] = {
+            id: resolvedId,
+            subItemSelectedId: (val as any)?.subItemSelected?.[schemaItem.subItem.submitField || "id"]
+          };
+        } else {
+          formData[k] = resolvedId;
+        }
+
+        // no-op
+      }
+    }
+  }
+
+  form$.cancelToken = form$?.$vueform?.services?.axios?.CancelToken?.source();
+  return await api.post(endpoint, formData, {
+    cancelToken: form$.cancelToken.token
+  });
+}
+
+export async function addFormData(options: AddFormOptions) {
+  /**
+   * Clear schema
+   * and display loading
+   *
+   */
+  clearFormSchema(Object.entries(options.formSchema.value));
+  loadingDialog.open();
+
+  /**
+   * Add on before mount and pass edit data,
+   * this might change the schema
+   *
+   */
+  if (options.formHooks?.onBeforeMount) {
+    try {
+      if (!(await options.formHooks.onBeforeMount(options.formSchema, "add"))) {
+        loadingDialog.close();
+        return;
+      }
+    } catch (err: any) {
+      loadingDialog.close();
+      errorDialog.open({
+        title: "Tamabah Data Gagal",
+        description: err.message || InternalServerError
+      });
+      return;
+    }
+  }
+
+  /**
+   * Auto fill organization from
+   * auth session
+   *
+   */
+  for (const [_, item] of Object.entries(options.formSchema.value)) {
+    if (item.autofill) {
+      try {
+        const r = await api.get("/organization/my");
+        if (!item.accessLevel || (r.data.data.accessLevel && r.data.data.accessLevel.code === item.accessLevel)) {
+          item.default = [r.data.data];
+        }
+      } catch (err) {
+        toast.error("Get my organization failed!");
+      }
+    }
+  }
+
+  /**
+   * Render form
+   * Hide loading data preparation
+   *
+   */
+  loadingDialog.close();
+  return await formSheet.open({
+    title: options.title,
+    formSchema: options.formSchema,
+    loading: false,
+    className: options.formDialogClass,
+    onChange(after, before, el$) {
+      if (options.formHooks?.onChange) {
+        options.formHooks?.onChange(after, before, el$, options.formSchema, "add");
+      }
+    },
+    async onMounted(form$) {
+      if (options.formHooks?.onMounted) {
+        try {
+          if (!(await options.formHooks?.onMounted(form$, options.formSchema, "add"))) {
+            formSheet.close();
+          }
+        } catch (err: any) {
+          errorDialog
+            .open({
+              title: "Tamabah Data Gagal",
+              description: err.message || InternalServerError
+            })
+            .then(() => {
+              formSheet.close();
+            });
+        }
+      }
+    },
+    async onSubmit(form$) {
+      formSheet.saving = true;
+      try {
+        const b = await submitFormData({
+          form$,
+          endpoint: options.endpoint,
+          formSchema: options.formSchema,
+          formHooks: options.formHooks
+        });
+        if (!b) return;
+        successDialog.open().then(() => {
+          formSheet.close(true);
+        });
+      } catch (err: any) {
+        formSheet.formError = err?.response?.data?.[0]?.message || err.message || InternalServerError;
+      } finally {
+        formSheet.saving = false;
+      }
+    }
+  });
+}
+
+export function fieldCapitalFirst(e: any) {
+  const val = e.target?.value ?? "";
+  if (val.length > 0) {
+    let capitalizedString = val[0].toUpperCase() + val.slice(1);
+    e.target.value = capitalizedString;
+  }
+}
+
+export function fieldCapitalize(e: any) {
+  const val = e.target?.value ?? "";
+  if (val.length > 0) {
+    e.target.value = val.toUpperCase();
+  }
+}
+
+// ==========================================
+// CORE FUNCTIONS FOR GENERIC ADD DATA LIB
+// ==========================================
+
+/**
+ * Helper function untuk auto-fill organization
+ */
+async function handleOrganizationAutoFill(formSchema: any, config: OrganizationAutoFillConfig): Promise<void> {
+  if (!config.enabled) return;
+
+  const fieldName = config.fieldName || "organizationId";
+  const accessLevelField = config.accessLevelField || "accessLevel";
+  const endpoint = config.endpoint || "/organization/my";
+
+  if (!formSchema.value[fieldName]?.autofill) return;
+
+  try {
+    const response = await api.get(endpoint);
+    const orgData = response.data.data;
+
+    if (!formSchema.value[fieldName][accessLevelField] || (orgData[accessLevelField] && formSchema.value[fieldName][accessLevelField] === orgData[accessLevelField].code)) {
+      formSchema.value[fieldName].default = [orgData];
+    }
+  } catch (err) {
+    toast.error("Get my organization failed!");
+    throw err;
+  }
+}
+
+/**
+ * Helper function untuk endpoint specific configuration
+ */
+function handleEndpointSpecificConfig(endpoint: string, formEditEl: any, config?: EndpointSpecificConfig): void {
+  if (!config || !config[endpoint] || !formEditEl) return;
+
+  const endpointConfig = config[endpoint];
+
+  if (endpointConfig.onMount) {
+    setTimeout(() => {
+      endpointConfig.onMount!(formEditEl.value);
+    });
+  }
+}
+
+/**
+ * Helper function untuk setup previous data (flow mode)
+ */
+function setupPreviousData(formSchema: any, previousData: any, previousDataField?: string): void {
+  if (!previousData || !previousDataField) return;
+
+  if (formSchema.value[previousDataField]) {
+    formSchema.value[previousDataField].default = [previousData];
+  }
+}
+
+/**
+ * Core function - FormSheet Mode (seperti PageActivity.vue)
+ */
+async function executeAddDataSheet(options: AddDataSheetOptions): Promise<boolean> {
+  const { title, endpoint, formSchema, formHooks, pageConfig, onSuccess } = options;
+
+  const savePath = pageConfig?.savePath || endpoint;
+
+  const success = await addFormData({
+    title,
+    endpoint: savePath,
+    formSchema,
+    formHooks
+  });
+
+  if (success && onSuccess) {
+    onSuccess();
+  }
+
+  return success || false;
+}
+
+/**
+ * Core function - Basic Mode (seperti Master.vue)
+ */
+async function executeAddDataBasic(options: AddDataBasicOptions): Promise<boolean> {
+  const { formSchema, formState } = options;
+
+  // Simple clear schema (Master.vue pattern)
+  clearFormSchema(Object.entries(formSchema.value || formSchema));
+
+  formState.loadingForm.value = false;
+  formState.formType.value = "add";
+  formState.formOpen.value = true;
+  formState.formError.value = null;
+
+  return true;
+}
+
+/**
+ * Core function - Inline Mode (seperti PageActivityNew.vue)
+ */
+async function executeAddDataInline(options: AddDataInlineOptions): Promise<boolean> {
+  const { formSchema, formHooks, formState, organizationAutoFill, endpointConfig, endpoint, onError } = options;
+
+  // Clear schema dan setup form state
+  clearFormSchema(Object.entries(formSchema.value));
+
+  formState.loadingForm.value = true;
+  formState.formType.value = "add";
+  formState.formOpen.value = true;
+  formState.formError.value = null;
+
+  try {
+    // Call schema onMounted hook
+    if (formSchema.value.onMounted) {
+      if (!(await formSchema.value.onMounted("add", formSchema))) {
+        formState.formOpen.value = false;
+        return false;
+      }
+    }
+
+    // Call form hooks
+    if (formHooks?.onMounted) {
+      if (!(await formHooks.onMounted(formState.formEditEl?.value, formSchema, "add"))) {
+        formState.formOpen.value = false;
+        return false;
+      }
+    }
+
+    // Handle endpoint specific configuration
+    handleEndpointSpecificConfig(endpoint, formState.formEditEl, endpointConfig);
+
+    // Handle organization auto-fill
+    if (organizationAutoFill?.enabled) {
+      await handleOrganizationAutoFill(formSchema, organizationAutoFill);
+    }
+
+    return true;
+  } catch (err: any) {
+    console.error("Failed to add form");
+    onError?.(err.message || InternalServerError);
+    formState.formOpen.value = false;
+    return false;
+  } finally {
+    formState.loadingForm.value = false;
+  }
+}
+
+/**
+ * Core function - Flow Mode (seperti PageActivityFlow.vue)
+ */
+async function executeAddDataFlow(options: AddDataFlowOptions): Promise<boolean> {
+  const { formSchema, formState, itemData, previousDataField, organizationAutoFill, onError } = options;
+
+  // Clear schema
+  clearFormSchema(Object.entries(formSchema.value));
+
+  // Setup previous data
+  setupPreviousData(formSchema, itemData, previousDataField);
+
+  const needsOrgAutoFill = organizationAutoFill?.enabled;
+  formState.loadingForm.value = needsOrgAutoFill || false;
+  formState.formType.value = "add";
+  formState.formOpen.value = true;
+  formState.formError.value = null;
+
+  try {
+    // Handle organization auto-fill
+    if (organizationAutoFill?.enabled) {
+      await handleOrganizationAutoFill(formSchema, organizationAutoFill);
+    }
+
+    return true;
+  } catch (err: any) {
+    onError?.(err.message || InternalServerError);
+    return false;
+  } finally {
+    formState.loadingForm.value = false;
+  }
+}
+
+/**
+ * Main function - Generic Add Data
+ * Router untuk semua mode add data
+ */
+export async function addData(options: AddDataOptions): Promise<boolean> {
+  // Validation
+  if (!options.formSchema?.value && !options.formSchema) {
+    options.onError?.("Form schema tidak ditemukan");
+    return false;
+  }
+
+  try {
+    switch (options.mode) {
+      case "sheet":
+        return await executeAddDataSheet(options);
+
+      case "basic":
+        return await executeAddDataBasic(options);
+
+      case "inline":
+        return await executeAddDataInline(options);
+
+      case "flow":
+        return await executeAddDataFlow(options);
+
+      default:
+        throw new Error(`Unsupported mode: ${(options as any).mode}`);
+    }
+  } catch (error: any) {
+    options.onError?.(error.message || InternalServerError);
+    return false;
+  }
+}
+
+/**
+ * Legacy function untuk backward compatibility
+ * @deprecated Use addData() instead
+ */
+export async function addDataGeneric(options: AddDataGenericOptions): Promise<boolean> {
+  // Convert legacy options to new format
+  const mode = options.mode || "sheet";
+
+  // Handle legacy autoFillOrganization
+  let organizationAutoFill: OrganizationAutoFillConfig | undefined;
+  if (options.autoFillOrganization) {
+    organizationAutoFill = { enabled: true };
+  }
+
+  // Handle legacy endpointSpecificHandlers
+  let endpointConfig: EndpointSpecificConfig | undefined;
+  if (options.endpointSpecificHandlers) {
+    endpointConfig = {};
+    for (const [endpoint, handler] of Object.entries(options.endpointSpecificHandlers)) {
+      endpointConfig[endpoint] = { onMount: handler };
+    }
+  }
+
+  const newOptions: AddDataOptions = {
+    ...options,
+    mode: mode as any,
+    organizationAutoFill,
+    endpointConfig
+  } as AddDataOptions;
+
+  return await addData(newOptions);
+}
+
+// ==========================================
+// HELPER FUNCTIONS FOR EASY USAGE
+// ==========================================
+
+/**
+ * Helper untuk Sheet Mode (PageActivity.vue pattern)
+ * Paling simple untuk digunakan
+ */
+export async function addDataSheet(options: {
+  title: string;
+  endpoint: string;
+  formSchema: any;
+  formHooks?: any;
+  pageConfig?: any;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}): Promise<boolean> {
+  return await addData({
+    ...options,
+    mode: "sheet"
+  });
+}
+
+/**
+ * Helper untuk Inline Mode (PageActivityNew.vue pattern)
+ * Dengan auto-fill organization
+ */
+export async function addDataInline(options: {
+  title: string;
+  endpoint: string;
+  formSchema: any;
+  formHooks?: any;
+  pageConfig?: any;
+  formState: FormStateRefs;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  endpointHandlers?: Record<string, (formEditEl: any) => void>;
+}): Promise<boolean> {
+  // Auto-detect organization auto-fill
+  const hasOrgField = options.formSchema.value?.organizationId?.autofill;
+
+  return await addData({
+    ...options,
+    mode: "inline",
+    organizationAutoFill: hasOrgField ? { enabled: true } : undefined,
+    endpointConfig: options.endpointHandlers ? Object.fromEntries(Object.entries(options.endpointHandlers).map(([key, handler]) => [key, { onMount: handler }])) : undefined
+  });
+}
+
+/**
+ * Helper untuk Basic Mode (Master.vue pattern)
+ * Paling simple tanpa auto-fill
+ */
+export async function addDataBasic(options: {
+  formSchema: any;
+  formState: FormStateRefs;
+  onError?: (error: string) => void;
+  customClearFunction?: (schema: any) => void; // For Master.vue custom clearSchema
+}): Promise<boolean> {
+  // Handle custom clear function for Master.vue pattern
+  if (options.customClearFunction) {
+    options.customClearFunction(Object.entries(options.formSchema));
+  }
+
+  return await addData({
+    title: "Data",
+    endpoint: "",
+    ...options,
+    mode: "basic"
+  });
+}
+
+/**
+ * Helper untuk Flow Mode (PageActivityFlow.vue pattern)
+ * Dengan previous data auto-fill
+ */
+export async function addDataFlow(options: {
+  title: string;
+  endpoint: string;
+  formSchema: any;
+  formState: FormStateRefs;
+  itemData: any;
+  previousDataField: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  withOrganizationAutoFill?: boolean;
+  customClearFunction?: (schema: any) => void; // For PageActivityFlow.vue custom clearSchema
+}): Promise<boolean> {
+  // Handle custom clear function for PageActivityFlow.vue pattern
+  if (options.customClearFunction) {
+    options.customClearFunction(Object.entries(options.formSchema.value));
+  }
+
+  return await addData({
+    ...options,
+    mode: "flow",
+    organizationAutoFill: options.withOrganizationAutoFill ? { enabled: true } : undefined
+  });
+}
+
+/**
+ * Helper untuk create custom endpoint configuration
+ */
+export function createEndpointConfig(configs: { [endpoint: string]: (formEditEl: any) => void }): EndpointSpecificConfig {
+  return Object.fromEntries(Object.entries(configs).map(([endpoint, handler]) => [endpoint, { onMount: handler }]));
+}
+
+/**
+ * Helper untuk create organization auto-fill config
+ */
+export function createOrgAutoFillConfig(options?: { fieldName?: string; accessLevelField?: string; endpoint?: string }): OrganizationAutoFillConfig {
+  return {
+    enabled: true,
+    fieldName: options?.fieldName || "organizationId",
+    accessLevelField: options?.accessLevelField || "accessLevel",
+    endpoint: options?.endpoint || "/organization/my"
+  };
+}
+
+/**
+ * Factory function untuk membuat add data function yang sudah dikonfigurasi
+ * Berguna untuk halaman yang sering digunakan
+ */
+export function createAddDataFunction(baseConfig: Partial<AddDataOptions>) {
+  return async (overrides: Partial<AddDataOptions> = {}): Promise<boolean> => {
+    const mergedConfig = { ...baseConfig, ...overrides } as AddDataOptions;
+    return await addData(mergedConfig);
+  };
+}
+
+// ==========================================
+// PRESET CONFIGURATIONS FOR COMMON PATTERNS
+// ==========================================
+
+/**
+ * Preset untuk halaman dengan FormSheet (seperti PageActivity.vue)
+ */
+export const SHEET_MODE_PRESET = {
+  mode: "sheet" as const
+};
+
+/**
+ * Preset untuk halaman dengan inline form + auto-fill org (seperti PageActivityNew.vue)
+ */
+export const INLINE_WITH_ORG_PRESET = {
+  mode: "inline" as const,
+  organizationAutoFill: { enabled: true }
+};
+
+/**
+ * Preset untuk halaman basic (seperti Master.vue)
+ */
+export const BASIC_MODE_PRESET = {
+  mode: "basic" as const
+};
+
+/**
+ * Preset untuk halaman flow (seperti PageActivityFlow.vue)
+ */
+export const FLOW_MODE_PRESET = {
+  mode: "flow" as const,
+  organizationAutoFill: { enabled: true }
+};
+
+/**
+ * -------------------------------------------
+ * Edit item
+ * @return
+ * true: data saved to api
+ * false: aborted
+ *
+ */
+export async function editFormData(options: EditFormOptions) {
+  /**
+   * Clear schema
+   *
+   */
+  clearFormSchema(Object.entries(options.formSchema.value));
+  let editData: any;
+
+  /**
+   * Generate save api url
+   *
+   */
+  const slash = options.endpoint.startsWith("/") ? "" : "/";
+  const uri = `${slash}${options.endpoint}/${options.item.id}`;
+
+  /**
+   * Render form with loading
+   *
+   */
+  return await formSheet.open({
+    title: options.title,
+    formSchema: options.formSchema,
+    loading: true,
+    className: options.formDialogClass,
+    onChange(after, before, el$) {
+      if (options.formHooks?.onChange) {
+        options.formHooks?.onChange(after, before, el$, options.formSchema, "edit");
+      }
+    },
+    async onDialogOpen() {
+      try {
+        /**
+         * Get edit data from api
+         *
+         */
+        let editUri = uri;
+        // Include extras for relational data (e.g., AccessLevel)
+        if (options.pageConfig?.extras?.length > 0) {
+          editUri += `?extras=${options.pageConfig.extras.join(",")}`;
+        }
+        const r = await api.get(editUri);
+        editData = r.data.data;
+
+        /**
+         * Add on before mount and pass edit data,
+         * this might change the schema
+         *
+         */
+        if (options.formHooks?.onBeforeMount) {
+          if (!(await options.formHooks.onBeforeMount(options.formSchema, "edit", editData))) {
+            return;
+          }
+        }
+
+        /**
+         * Fill schema with editData from API and then
+         * Render form by set loading to false
+         *
+         */
+        fillFormSchema(Object.entries(options.formSchema.value), editData);
+        formSheet.loading = false;
+      } catch (err: any) {
+        errorDialog
+          .open({
+            title: "Edit Data Gagal",
+            description: err.message || InternalServerError
+          })
+          .then(() => {
+            formSheet.close();
+          });
+      }
+    },
+    async onMounted(form$) {
+      try {
+        /**
+         * After form rendered
+         * run onMounted event
+         *
+         */
+        if (options.formHooks?.onMounted) {
+          console.log('q',options.formHooks?.onMounted )
+          if (!(await options.formHooks?.onMounted(form$, options.formSchema, "edit", editData))) {
+            console.log('On mounted failed, edit canceled');
+            formSheet.close();
+          }
+        }
+      } catch (err: any) {
+        errorDialog
+          .open({
+            title: "Edit Data Gagal",
+            description: err.message || InternalServerError
+          })
+          .then(() => {
+            formSheet.close();
+          });
+      }
+    },
+    async onSubmit(form$) {
+      formSheet.saving = true;
+      try {
+        const b = await submitFormData({
+          form$,
+          endpoint: `${uri}/edit`,
+          formSchema: options.formSchema,
+          formHooks: options.formHooks
+        });
+        if (!b) return;
+        successDialog.open().then(() => {
+          formSheet.close(true);
+        });
+      } catch (err: any) {
+        formSheet.formError = err?.response?.data?.[0]?.message || err.message || InternalServerError;
+      } finally {
+        formSheet.saving = false;
+      }
+    }
+  });
+
+  // loadingForm.value = true;
+  // formType.value = "edit";
+  // formOpen.value = true;
+  // formError.value = null;
+  // editId.value = item.id;
+  // let editData: any = null;
+  // api
+  //   .get(`${endpoint.value}/${item.id}`)
+  //   .then(async (r) => {
+  //     editData = r.data.data;
+  //     fillFormSchema(Object.entries(formSchema.value || {}), r.data.data);
+  //   })
+  //   .catch((err) => {
+  //     errorDialog.value?.open({
+  //       title: `Edit ${title.value} Gagal`,
+  //       description: err.message || "Internal server error. Please try again later.",
+  //     });
+  //   })
+  //   .finally(() => {
+  //     loadingForm.value = false;
+  //     if (!formSchema.value) return;
+  //     setTimeout(async () => {
+  //       if (formHooks.value && formHooks.value.onMounted) {
+  //         await formHooks.value.onMounted(formEditEl.value, formSchema, 'edit', editData);
+  //       }
+  //     })
+  //   });
+}
+
+/**
+ * -------------------------------------------
+ * Delete item
+ * @return
+ * true: data deleted to api
+ * false: aborted
+ *
+ */
+export async function deleteFormData(options: DeleteRestoreFormOptions) {
+  const name = options.pageConfig?.dataName ? options.pageConfig.dataName(options.item) : (options.item?.name || options.item?.nama || "data");
+  const b = await confirmDialog.open({
+    title: `Hapus ${options.title}`,
+    description: `Apakah Anda yakin ingin menghapus ${options.title.toLowerCase()} <b class="font-bold text-red-500">${name}?</b> Data terhapus akan dipindah ke dalam folder Deleted`,
+    cancelLabel: "Batal",
+    actionLabel: `Hapus ${options.title}`,
+    actionIcon: "LucideTrash2",
+    negative: true
+  });
+
+  /**
+   * Aborted by user
+   *
+   */
+  if (!b) return false;
+  const deletedItem = options.allData.splice(options.index, 1);
+  try {
+    api.delete(`${options.endpoint}/${options.item.id}/soft`);
+    toast.success(`${options.title} ${name} sukses dihapus`, {
+      action: {
+        label: "Undo",
+        onClick: () => {
+          options.allData.splice(options.index, 0, deletedItem[0]);
+          api
+            .put(`${options.endpoint}/${options.item.id}/restore`)
+            .then(() => {
+              toast.info(`Aksi hapus ${name} dibatalkan`);
+            })
+            .catch(err => {
+              errorDialog.open({
+                title: `Undo Hapus ${options.title} Gagal`,
+                description: err.message || "Internal server error. Please try again later."
+              });
+            });
+        }
+      }
+    });
+  } catch (err: any) {
+    options.allData.splice(options.index, 0, deletedItem[0]);
+    errorDialog.open({
+      title: `Hapus ${options.title} Gagal`,
+      description: err.message || "Internal server error. Please try again later."
+    });
+  }
+}
+
+/**
+ * -------------------------------------------
+ * Restore item
+ * @return
+ * true: data restored to api
+ * false: aborted
+ *
+ */
+export async function restoreFormData(options: DeleteRestoreFormOptions) {
+  const name = options.pageConfig?.dataName ? options.pageConfig.dataName(options.item) : (options.item?.name || options.item?.nama || "data");
+  const b = await confirmDialog.open({
+    title: `Restore ${options.title}`,
+    description: `Apakah Anda yakin ingin mengembalikan ${options.title.toLowerCase()} <b class="font-bold text-red-500">${name}?</b> Data akan tampil kembali di semua data`,
+    cancelLabel: "Batal",
+    actionLabel: `Restore ${options.title}`,
+    actionIcon: "LucideUndo2",
+    negative: true
+  });
+
+  /**
+   * Aborted by user
+   *
+   */
+  if (!b) return false;
+  const restoredItem = options.allData.splice(options.index, 1);
+  try {
+    api.put(`${options.endpoint}/${options.item.id}/restore`);
+    toast.success(`${options.title} ${name} sukses dikembalikan`);
+  } catch (err: any) {
+    options.allData.splice(options.index, 0, restoredItem[0]);
+    errorDialog.open({
+      title: `Restore ${options.title} Gagal`,
+      description: err.message || "Internal server error. Please try again later."
+    });
+  }
+}