refactor: show dialogdelete

Services/client/src/components/FileItem.vue

@@ -4,22 +4,25 @@ import { storeToRefs } from 'pinia'
 
 import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
+import DialogDelete from '@/components/DialogDelete.vue'
 import FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
 import UploadExistDialog from './UploadExistDialog.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
+import test from 'node:test'
 
 const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
   {
     action: false,
-  },
+  }
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo, getFileNameFormat } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
+const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -35,10 +38,14 @@ const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
+    ? 'inbox'
+    : 'o_folder_open'
 )
 
+const dialogDeleteState = ref<boolean>(false)
+const deleteFormPath = ref<string>('')
+const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+
 const folderFormState = ref<boolean>(false)
 const folderFormPath = ref<string>('')
 const folderFormData = ref<{
@@ -58,6 +65,18 @@ const fileFormType = ref<'edit' | 'create'>('create')
 const fileFormError = ref<{ fileExist?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
+function triggerFolderDelete(pathname: string) {
+  deleteFormType.value = 'deleteFolder'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
+function triggerFileDelete(pathname: string) {
+  deleteFormType.value = 'deleteFile'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
 function triggerFolderCreate() {
   folderFormType.value = 'create'
   folderFormData.value = {}
@@ -95,7 +114,7 @@ function triggerFileEdit(
     keyword: string
     category: string
   },
-  pathname: string,
+  pathname: string
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -119,7 +138,7 @@ async function submitFileForm(
     keyword: string
     category: string
   },
-  force = false,
+  force = false
 ) {
   currentParam.value = value
 
@@ -144,7 +163,7 @@ async function submitFileForm(
         keyword: value.keyword,
         category: value.category,
       },
-      value.file,
+      value.file
     )
   }
   fileFormData.value = {}
@@ -186,7 +205,7 @@ async function submitFileForm(
           v-if="props.action"
         >
           <file-item-action
-            @delete="() => deleteFolder(value.pathname)"
+            @delete="() => triggerFolderDelete(value.pathname)"
             @edit="() => triggerFolderEdit(value.name, value.pathname)"
           />
         </div>
@@ -292,10 +311,10 @@ async function submitFileForm(
                     keyword: value.keyword.join(','),
                     category: value.category.join(','),
                   },
-                  value.pathname,
+                  value.pathname
                 )
             "
-            @delete="() => deleteFile(value.pathname)"
+            @delete="() => triggerFileDelete(value.pathname)"
           />
         </div>
         <div
@@ -369,6 +388,15 @@ async function submitFileForm(
     @confirm="() => currentParam && submitFileForm(currentParam, true)"
     @cancel="() => (currentParam = undefined)"
   />
+
+  <dialog-delete
+    v-model:open="dialogDeleteState"
+    @confirm="
+      () =>
+        deleteFormType &&
+        (deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
+    "
+  />
 </template>
 
 <style lang="scss" scoped>