refactor: add delete

src/components/upload-file/UploadFileGroup.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { QTableProps } from 'quasar';
-import { computed, ref, watch, toRaw } from 'vue';
-
+import { ref, toRaw } from 'vue';
+import { dialog } from 'stores/utils';
+import { useI18n } from 'vue-i18n';
 import TableComponents from 'src/components/TableComponents.vue';
 import ShowAttachent from 'src/components/ShowAttachent.vue';
 import DialogForm from 'components/DialogForm.vue';
 
+const { t } = useI18n();
 const obj = defineModel<
   {
     _meta?: Record<string, any>;
@@ -18,22 +20,43 @@ const obj = defineModel<
   default: [],
 });
 
-const dialog = ref(false);
+const modalDialog = ref(false);
 
 const splitAttachment = ref(50);
 
 const currentIndex = ref(-1);
-const currentIndexDropdownList = ref(0);
 
 const props = defineProps<{
   ocr?: (group: any, file: File) => void | Promise<void>;
   getFileList?: (group: any) => Promise<typeof obj.value>;
+  deleteItem?: (obj: any) => void | Promise<boolean>;
+  save?: (
+    group: any,
+    meta: any,
+    file: File | undefined,
+  ) => void | Promise<boolean>;
+  autoSave?: boolean;
   readonly?: boolean;
   hideAction?: boolean;
   columns: QTableProps['columns'];
   menu?: { label: string; value: string; _meta?: Record<string, any> }[];
 }>();
 
+async function triggerDelete(obj: any) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      await props.deleteItem?.(obj);
+      await fileList();
+    },
+    cancel: () => {},
+  });
+}
+
 function browse() {
   inputFile?.click();
 }
@@ -74,7 +97,17 @@ function change(e: Event) {
     };
   }
 
-  dialog.value = true;
+  modalDialog.value = true;
+}
+
+async function fileList() {
+  if (props.getFileList) {
+    const res = await props.getFileList(selectedMenu.value?.value);
+
+    if (res && Array.isArray(res)) {
+      obj.value = [...res];
+    }
+  }
 }
 
 defineEmits<{
@@ -127,13 +160,8 @@ defineEmits<{
             @click="
               async () => {
                 selectedMenu = v;
-
-                if (getFileList) {
-                  const res = await getFileList(
-                    menu?.[currentIndexDropdownList].value || '',
-                  );
-
-                  console.log(res);
+                if (autoSave) {
+                  fileList();
                 }
               }
             "
@@ -155,14 +183,34 @@ defineEmits<{
           <div class="full-height full-width q-pa-md">
             <TableComponents
               buttomDownload
+              @delete="
+                async (index) => {
+                  if (autoSave) {
+                    await triggerDelete(obj[index]);
+                  }
+                }
+              "
+              @view="
+                (index) => {
+                  currentIndex = index;
+                  modalDialog = true;
+                }
+              "
               :rows="
-                obj.map((v, index) => {
-                  return {
-                    branchNo: index + 1,
-                    attachmentName: v.file?.name,
-                    uploadDate: '',
-                  };
-                })
+                obj
+                  .filter((v) => {
+                    if (!autoSave && v.group !== selectedMenu?.value) {
+                      return false;
+                    }
+                    return true;
+                  })
+                  .map((v, index) => {
+                    return {
+                      branchNo: index + 1,
+                      attachmentName: v.file?.name || v.name,
+                      uploadDate: '',
+                    };
+                  })
               "
               :columns="columns"
             ></TableComponents>
@@ -175,19 +223,32 @@ defineEmits<{
     style="position: absolute"
     height="100vh"
     weight="90%"
-    v-model:modal="dialog"
+    v-model:modal="modalDialog"
     title="ดูตัวอย่าง"
     hideCloseEvent
     v-if="obj.length > 0"
     :close="
       () => {
-        obj.splice(currentIndex, 1);
-        dialog = false;
+        if (!autoSave || !obj[currentIndex]?._meta?.hasOwnProperty('id')) {
+          obj.splice(currentIndex, 1);
+        }
+        modalDialog = false;
       }
     "
     :submit="
-      () => {
-        dialog = false;
+      async () => {
+        modalDialog = false;
+        if (autoSave) {
+          const statusSave = await save?.(
+            obj[currentIndex].group,
+            obj[currentIndex]._meta,
+            obj[currentIndex].file,
+          );
+
+          if (statusSave) {
+            fileList();
+          }
+        }
       }
     "
   >