Merge branch 'net' into dev/front

Services/client/src/components/DialogDelete.vue

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-defineEmits(['confirm', 'cancel'])
+defineEmits(['confirm', 'cancel', 'update:open'])
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+  }>(),
+  {
+    open: false,
+  },
+)
 </script>
 
 <template>
-  <q-dialog persistent transition-show="scale" transition-hide="scale">
+  <q-dialog 
+  persistent 
+  transition-show="scale" 
+  transition-hide="scale"
+  :model-value="props.open"
+  @update:model-value="(v) => $emit('update:open', v)"
+  >
     <q-card style="width: 400px">
       <q-card-section>
         <span class="text-h6">
@@ -21,7 +36,7 @@ defineEmits(['confirm', 'cancel'])
           label="ยกเลิก"
           flat
           v-close-popup
-          @click="() => $emit('cancel')"
+          @click="() => ($emit('update:open', !open))"
         />
 
         <q-btn

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 } =
+const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
-  storeToRefs(useTreeDataStore())
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -35,10 +38,14 @@ const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
+    ? 'inbox'
-      : 'o_folder_open',
+    : '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, deleteFile }[deleteFormType](deleteFormPath)
+    "
+  />
 </template>
 
 <style lang="scss" scoped>

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 } =
+const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
-  storeToRefs(useTreeDataStore())
+  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'
+    ? 'inbox'
-      : 'o_folder_open',
+    : '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>

Services/client/src/stores/tree-data.ts

@@ -40,6 +40,8 @@ export interface TreeDataFolder {
 
 export const useTreeDataStore = defineStore('changeCabinet', () => {
   const loader = useLoader()
+  const indexToRemove = ref<number>()
+  const fileNameRemove = ref<string>('')
 
   const data = ref<TreeDataFolder[]>([])
   const currentFolder = ref<TreeDataFolder[]>([])
@@ -94,7 +96,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     currentPath.value = pathname
 
     const res = await axiosClient.get<EhrFolder[]>(
-      `${apiEndpoint}${requestPath}`,
+      `${apiEndpoint}${requestPath}`
     )
 
     const list = res.data.map((v) => ({
@@ -154,6 +156,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     const res = await axiosClient.get<EhrFile[]>(`${apiEndpoint}${requestPath}`)
 
     currentFile.value = res.data
+
     listDataFile.value = currentFile.value
 
     return loader.hide()
@@ -245,7 +248,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       description: string
       keyword: string
       category: string
-    },
+    }
   ) {
     loader.show()
 
@@ -265,7 +268,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       {
         file: file.name,
         ...metadata,
-      },
+      }
     )
 
     if (res && res.data.upload) {
@@ -294,7 +297,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       keyword: string
       category: string
     },
-    file?: File,
+    file?: File
   ) {
     loader.show()
 
@@ -309,7 +312,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     const res = await axiosClient.patch<{ upload: string }>(
       `${apiEndpoint}${requestPath}`,
-      { file: file?.name, ...metadata },
+      { file: file?.name, ...metadata }
     )
 
     if (res && res.data.upload) {
@@ -342,7 +345,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     if (pathArray.length >= 5) requestPath += `/subfolder/${pathArray[3]}`
     requestPath += `/file/${pathArray.at(-1)}`
 
-    console.log(requestPath, pathArray)
     await axiosClient.delete(`${apiEndpoint}${requestPath}`)
 
     if (currentDept.value === 0) {
@@ -351,6 +353,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     await getFile(currentPath.value)
 
+    currentFile.value = currentFile.value.filter((v) => v.pathname !== pathname)
+
     return loader.hide()
   }