From 576736574c8ae55a35a130160a5c8142d365f828 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Tue, 28 Nov 2023 17:44:56 +0700
Subject: [PATCH] fix: ListView CRUD

---
 Services/client/src/components/FormUpload.vue |  10 +-
 Services/client/src/components/ListView.vue   | 208 +++++++++++++-----
 Services/client/src/components/PageLayout.vue |  57 ++---
 3 files changed, 189 insertions(+), 86 deletions(-)

diff --git a/Services/client/src/components/FormUpload.vue b/Services/client/src/components/FormUpload.vue
index b4be980..5a10dcc 100644
--- a/Services/client/src/components/FormUpload.vue
+++ b/Services/client/src/components/FormUpload.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
-import  TagInput  from '@/components/TagInput.vue'
+import TagInput from '@/components/TagInput.vue'
 const { currentPath } = storeToRefs(useTreeDataStore())
 const { uploadFile, checkFile } = useTreeDataStore()
 
@@ -44,8 +44,8 @@ async function handleSubmit(continueUpload: boolean = false) {
     await uploadFile(currentPath.value, inputFile.value, {
       title: fileTitle.value,
       description: fileDesc.value,
-      keyword: [fileKeyword.value],
-      category: [fileCategory.value],
+      keyword: fileKeyword.value,
+      category: fileCategory.value,
     })
   } else notification.value = true
 }
@@ -113,9 +113,7 @@ async function handleSubmit(continueUpload: boolean = false) {
       dense
     />
 
-    <tag-input/>
-
-
+    <tag-input />
   </q-drawer>
 
   <q-dialog
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 5041dc1..956ae91 100644
--- a/Services/client/src/components/ListView.vue
+++ b/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>
 
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 3b9103a..6f5ae94 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -10,19 +10,14 @@ import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileSearched from '@/components/FileSearched.vue'
 import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 import ListView from '@/components/ListView.vue'
-import FromEdit from '@/components/FromEdit.vue'
+import FolderForm from './FolderForm.vue'
 
-
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const { isPreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
-const { getCabinet, gotoParent } = useTreeDataStore()
-
-const drawer = ref<boolean>(false)
-const drawerFile = ref<boolean>(false)
-const drawerStatus = ref<'create'>('create')
+const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
 
 const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const inputSearch = ref<string>()
@@ -30,6 +25,27 @@ const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
+const folderFormState = ref<boolean>(false)
+const folderFormType = ref<'edit' | 'create'>('create')
+const folderFormData = ref<{
+  name?: string
+}>({})
+
+function triggerFolderCreate() {
+  folderFormType.value = 'create'
+  folderFormData.value = {}
+  folderFormState.value = !folderFormState.value
+}
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  }
+}
+
 onMounted(getCabinet)
 </script>
 <template>
@@ -107,13 +123,7 @@ onMounted(getCabinet)
                 color="primary"
                 dense
                 icon="add"
-                @click="
-                  () => {
-                    drawer = !drawer
-                    drawerStatus = 'create'
-                    drawerFile = false
-                  }
-                "
+                @click="()=> triggerFolderCreate()"
               />
             </span>
             <q-btn
@@ -142,16 +152,13 @@ onMounted(getCabinet)
     </div>
   </section>
 
-
-  
-  <from-edit
-    v-if="currentDept === 0 && drawer "
-    :drawer="drawer"
-    :drawerStatus="drawerStatus"
-    :DEPT_NAME="DEPT_NAME"
-    :currentDept="currentDept"
-    editPathname=""
-    @update:drawer="() => (drawer = 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>