refactor: show dialogdelete

Services/client/src/components/ListView.vue

@@ -5,12 +5,14 @@ import type { QTableProps } from 'quasar'
 import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
+import DialogDelete from '@/components/DialogDelete.vue'
 import FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
-const { listDataFile, listDataFolder, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
+const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -32,18 +34,18 @@ const currentLevel = computed(() =>
   currentDept.value === 0
     ? 'ตู้จัดเก็บเอกสาร'
     : currentDept.value === 1
-      ? 'ลิ้นชัก'
-      : currentDept.value === 2
-        ? 'แฟ้ม'
-        : 'แฟ้มย่อย',
+    ? 'ลิ้นชัก'
+    : currentDept.value === 2
+    ? 'แฟ้ม'
+    : 'แฟ้มย่อย'
 )
 
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
+    ? 'inbox'
+    : 'o_folder_open'
 )
 
 const folderFormState = ref<boolean>(false)
@@ -64,6 +66,22 @@ const fileFormData = ref<{
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
 
+const dialogDeleteState = ref<boolean>(false)
+const deleteFormPath = ref<string>('')
+const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+
+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 = {}
@@ -101,7 +119,7 @@ function triggerFileEdit(
     keyword: string
     category: string
   },
-  pathname: string,
+  pathname: string
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -138,7 +156,7 @@ async function submitFileForm(value: {
         keyword: value.keyword,
         category: value.category,
       },
-      value.file,
+      value.file
     )
   }
   fileFormData.value = {}
@@ -295,7 +313,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 @click.stop="
                   triggerFolderEdit(
                     actionsRow.row.name,
-                    actionsRow.row.pathname,
+                    actionsRow.row.pathname
                   )
                 "
               />
@@ -304,7 +322,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click.stop="deleteFolder(actionsRow.row.pathname)"
+                @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -395,7 +413,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click="() => deleteFile(actionsRow.row.pathname)"
+                @click="() => triggerFileDelete(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -424,6 +442,15 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
     v-model:name="folderFormData.name"
     @submit="submitFolderForm"
   />
+
+  <dialog-delete
+    v-model:open="dialogDeleteState"
+    @confirm="
+      () =>
+        deleteFormType &&
+        (deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
+    "
+  />
 </template>
 
 <style lang="scss" scoped>