fix: ListView CRUD

Services/client/src/components/ListView.vue

@@ -4,24 +4,25 @@ import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
 import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
-import FromEdit from '@/components/FromEdit.vue'
 import FileIcon from '@/components/FileIcon.vue'
-import FormUpload from '@/components/FormUpload.vue'
-import DialogDelete from '@/components/DialogDelete.vue'
+import FileForm from './FileForm.vue'
+import FolderForm from './FolderForm.vue'
 
-const { deleteFolder } = useTreeDataStore()
 const { getFormatDate, getSize, getType } = useFileInfoStore()
-const { listDataFile, listDataFolder, currentDept } = storeToRefs(
+const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
   useTreeDataStore()
 )
-const { getFolder } = useTreeDataStore()
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
-const drawer = ref<boolean>(false)
-const drawerFile = ref<boolean>(false)
-const drawerStatus = ref<'edit' | 'create'>('create')
-const editPathname = ref<string>('')
-const confirmDelete = ref<boolean>(false)
-const currentPathDelete = ref<string>('')
+const {
+  createFolder,
+  editFolder,
+  getFolder,
+  deleteFolder,
+  uploadFile,
+  updateFile,
+  deleteFile,
+} = useTreeDataStore()
+
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const props = defineProps<{
   mode: 'admin' | 'user'
@@ -44,6 +45,105 @@ const currentIcon = computed(() =>
     ? 'inbox'
     : 'o_folder_open'
 )
+
+const folderFormState = ref<boolean>(false)
+const folderFormPath = ref<string>('')
+const folderFormData = ref<{
+  name?: string
+}>({})
+const folderFormType = ref<'edit' | 'create'>('create')
+const fileFormState = ref<boolean>(false)
+const fileFormPath = ref<string>('')
+const fileFormData = ref<{
+  file?: File
+  title?: string
+  description?: string
+  keyword?: string
+  category?: string
+}>({})
+const fileFormType = ref<'edit' | 'create'>('create')
+
+function triggerFolderCreate() {
+  folderFormType.value = 'create'
+  folderFormData.value = {}
+  folderFormState.value = !folderFormState.value
+}
+
+function triggerFolderEdit(name: string, pathname: string) {
+  folderFormType.value = 'edit'
+  folderFormPath.value = pathname
+  folderFormData.value.name = name
+  folderFormState.value = true
+}
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  } else {
+    await editFolder(value.name, folderFormPath.value)
+  }
+}
+
+function triggerFileCreate() {
+  fileFormType.value = 'create'
+  fileFormData.value = {}
+  fileFormState.value = !fileFormState.value
+}
+
+function triggerFileEdit(
+  value: {
+    title: string
+    description: string
+    keyword: string
+    category: string
+  },
+  pathname: string
+) {
+  fileFormState.value = true
+  fileFormType.value = 'edit'
+  fileFormPath.value = pathname
+  fileFormData.value = {
+    title: value.title,
+    description: value.description,
+    keyword: value.keyword,
+    category: value.keyword,
+  }
+}
+
+async function submitFileForm(value: {
+  mode: 'create' | 'edit'
+  file: File
+  title: string
+  description: string
+  keyword: string
+  category: string
+}) {
+  if (value.mode === 'create') {
+    await uploadFile(currentPath.value, value.file, {
+      title: value.title,
+      description: value.description,
+      keyword: value.keyword,
+      category: value.category,
+    })
+  } else {
+    await updateFile(
+      fileFormPath.value,
+      {
+        title: value.title,
+        description: value.description,
+        keyword: value.keyword,
+        category: value.category,
+      },
+      value.file
+    )
+  }
+  fileFormData.value = {}
+  fileFormState.value = false
+}
+
 const columnsFolder: QTableProps['columns'] = [
   {
     name: 'name',
@@ -144,16 +244,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             color="primary"
             dense
             icon="add"
-            @click="
-              () => {
-                drawer = !drawer
-                drawerStatus = 'create'
-                drawerFile = false
-              }
-            "
+            @click="() => triggerFolderCreate()"
           />
         </div>
       </div>
+
       <q-table
         flat
         bordered
@@ -197,11 +292,10 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 dense
                 icon="edit"
                 @click.stop="
-                  () => {
-                    drawer = !drawer
-                    drawerStatus = 'edit'
-                    editPathname = actionsRow.row.pathname
-                  }
+                  triggerFolderEdit(
+                    actionsRow.row.name,
+                    actionsRow.row.pathname
+                  )
                 "
               />
               <q-btn
@@ -209,12 +303,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click.stop="
-                  () => {
-                    confirmDelete = !confirmDelete
-                    currentPathDelete = actionsRow.row.pathname
-                  }
-                "
+                @click.stop="deleteFolder(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -240,12 +329,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             color="primary"
             dense
             icon="add"
-            @click="
-              () => {
-                drawerFile = !drawerFile
-                drawer = false
-              }
-            "
+            @click="() => triggerFileCreate()"
           />
         </div>
       </div>
@@ -294,8 +378,22 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
-              <q-btn flat color="positive" dense icon="edit" @click="" />
-              <q-btn flat color="negative" dense icon="delete" @click="" />
+              <q-btn
+                flat
+                color="positive"
+                dense
+                icon="edit"
+                @click="
+                  () => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
+                "
+              />
+              <q-btn
+                flat
+                color="negative"
+                dense
+                icon="delete"
+                @click="() => deleteFile(actionsRow.row.pathname)"
+              />
             </div>
           </q-td>
         </template>
@@ -303,23 +401,23 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
     </div>
   </div>
 
-  <from-edit
-    v-if="drawer"
-    :drawer="drawer"
-    :drawerStatus="drawerStatus"
-    :DEPT_NAME="DEPT_NAME"
-    :currentDept="currentDept"
-    :editPathname="editPathname"
-    @update:drawer="() => (drawer = false)"
+  <file-form
+    :mode="fileFormType"
+    v-model:open="fileFormState"
+    v-model:title="fileFormData.title"
+    v-model:description="fileFormData.description"
+    v-model:keyword="fileFormData.keyword"
+    v-model:category="fileFormData.category"
+    @submit="submitFileForm"
   />
-  <form-upload
-    :drawerFile="drawerFile"
-    @update:drawerFile="() => (drawerFile = false)"
-  />
-  <dialog-delete
-    :confirmDelete="confirmDelete"
-    :pathname="currentPathDelete"
-    @update:confirmDelete="() => (confirmDelete = false)"
+
+  <folder-form
+    :mode="folderFormType"
+    :tree="DEPT_NAME[currentDept]"
+    v-if="currentDept < 4"
+    v-model:open="folderFormState"
+    v-model:name="folderFormData.name"
+    @submit="submitFolderForm"
   />
 </template>