feat: toggle able edit

src/pages/03_customer-management/MainPage.vue

@@ -229,6 +229,7 @@ function deleteCustomerById(id: string) {
       await customerStore.deleteById(id);
 
       await fetchListCustomer(true);
+      customerFormState.value.dialogModal = false;
       flowStore.rotate();
     },
     cancel: () => {},
@@ -1636,6 +1637,19 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
   <DialogForm
     v-model:modal="customerFormState.dialogModal"
     :title="$t('form.title.create', { name: 'Employer' })"
+    :edit="customerFormState.dialogType === 'edit'"
+    :isEdit="customerFormState.editReadonly === false"
+    :undo="
+      () => (
+        customerFormStore.resetForm(), (customerFormState.editReadonly = true)
+      )
+    "
+    :deleteData="
+      () =>
+        customerFormState.editCustomerId &&
+        deleteCustomerById(customerFormState.editCustomerId)
+    "
+    :editData="() => (customerFormState.editReadonly = false)"
     :show="
       async () =>
         await fetchListOfOptionBranch().then(() => {
@@ -1732,7 +1746,6 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     <!--   label="Save" -->
     <!-- /> -->
   </DialogForm>
-
   <ImageUploadDialog
     ref="dialogCustomerImageUpload"
     v-model:dialog-state="customerFormState.imageDialog"
@@ -1743,7 +1756,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
       !customerFormState.customerImageUrl ||
       customerFormState.dialogType === 'edit'
     "
-    :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+    :fallback-url="`/images/customer-${customerFormData.customerType}-avartar.png`"
     clear-button
     @save="() => {}"
   ></ImageUploadDialog>