Merge branch 'development'

Services/client/src/components/FileForm.vue

@@ -112,7 +112,9 @@ const file = ref<File | undefined>()
     class="q-pa-md"
     side="right"
     tabindex="0"
-    v-click-outside="() => $emit('update:open', false)"
+    v-click-outside="
+      () => ($emit('update:open', false), reset(), (file = undefined))
+    "
     :width="300"
     :breakpoint="500"
     :model-value="open"
@@ -141,7 +143,7 @@ const file = ref<File | undefined>()
       </q-toolbar>
 
       <section class="q-mb-md">
-        <span class="text-weight-bold q-mb-sm block">อัพโหลดไฟล์</span>
+        <span class="text-weight-bold q-mb-sm block">อัปโหลดไฟล์</span>
         <q-file
           dense
           outlined
@@ -157,7 +159,7 @@ const file = ref<File | undefined>()
           :error="!!error.fileExist || !!error.fileName2Long"
           :error-message="
             error.fileExist
-              ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ'
+              ? 'พบไฟล์ชื่อซ้ำในระบบ ไฟล์ชื่อนี้ภายในระบบจะถูกเขียนทับ'
               : error.fileName2Long
                 ? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
                 : ''

Services/client/src/components/FileIcon.vue

@@ -15,7 +15,10 @@ function getIcon(mimeType: string | undefined, fileName: string | undefined) {
 
   const extension = mime.getExtension(mimeType)
 
-  if (extension) return mimeFileMapping[mimeType].icon
+  if (extension && mimeFileMapping[mimeType]) {
+    return mimeFileMapping[mimeType].icon
+  }
+
   if (fileName && fileName.includes('.')) return 'mdi-file-outline'
 
   return 'mdi-file-question-outline'
@@ -26,7 +29,9 @@ function getColor(mimeType: string | undefined, fileName: string | undefined) {
 
   const extension = mime.getExtension(mimeType)
 
-  if (extension) return mimeFileMapping[mimeType].color
+  if (extension && mimeFileMapping[mimeType]) {
+    return mimeFileMapping[mimeType].color
+  }
   if (fileName && fileName.includes('.')) return 'blue-11'
 
   return 'grey-5'

Services/client/src/components/FileSearched.vue

@@ -180,8 +180,8 @@ onMounted(() => {
           <div class="q-px-md flex items-center justify-center">
             <file-icon
               size="preview"
-              :fileName="value?.fileName ? value.fileType : 'unknow'"
-              :fileMimeType="value?.fileType ? value.fileType : 'unknow'"
+              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
+              :fileName="value.fileName ? value.fileName : 'unknow'"
             />
           </div>
           <div

Services/client/src/components/FolderForm.vue

@@ -54,7 +54,7 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
     class="q-pa-md"
     side="right"
     tabindex="0"
-    v-click-outside="() => $emit('update:open', false)"
+    v-click-outside="() => ($emit('update:open', false), reset())"
     :width="300"
     :breakpoint="500"
     :model-value="open"

Services/client/src/components/UploadExistDialog.vue

@@ -24,9 +24,9 @@ defineEmits(['update:notification', 'confirm', 'cancel'])
           <div>
             <h6 class="q-my-none">ยืนยันการเพิ่มข้อมูล</h6>
             <p class="q-my-none">
-              พบข้อมูลในระบบ หากดำเนินการต่อ
-              ข้อมูลที่มีอยู่จะถูกแทนที่ด้วยข้อมูลใหม่
-              ต้องการยืนยันการเพิ่มข้อมูลนี้หรือไม่
+              พบไฟล์ชื่อซ้ำในระบบ หากดำเนินการต่อ
+              ไฟล์ที่มีอยู่จะถูกแทนที่ด้วยไฟล์ใหม่
+              ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่
             </p>
           </div>
         </div>

Services/client/src/modules/01_user/components/SearchBar.vue

@@ -3,6 +3,7 @@ import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 import mime from 'mime'
+import io from 'socket.io-client'
 
 import type { StorageFile } from '@/stores/storage'
 import { useSearchDataStore } from '@/stores/searched-data'
@@ -14,6 +15,7 @@ import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
 const loaderStore = useLoader()
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const {
+  foundFile,
   isSearch,
   isAdvSearchCall,
   isActFoundFile,
@@ -39,6 +41,24 @@ const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
+const socket = io(import.meta.env.VITE_API_HOST)
+
+socket.on('FileUpdate', (data: StorageFile) =>
+  replaceSearchItem(data.pathname, data),
+)
+socket.on('FileUpload', (data: StorageFile) =>
+  replaceSearchItem(data.pathname, data),
+)
+socket.on('FileUpdateMove', (data: { from: StorageFile; to: StorageFile }) =>
+  replaceSearchItem(data.from.pathname, data.to),
+)
+
+function replaceSearchItem(pathname: string, data: StorageFile) {
+  const idx = foundFile.value.findIndex((v) => v.pathname === pathname)
+
+  if (idx !== -1) foundFile.value[idx] = data
+}
+
 async function submitSearch() {
   isFilePreview.value = false
   if (searchData.value.value.trim() !== '') {

Services/client/src/stores/storage.ts

@@ -281,13 +281,14 @@ const useStorage = defineStore('storageStore', () => {
     }
 
     if (
-      currentInfo.path !== consistantPath(arr) &&
-      currentInfo.path.length > consistantPath(arr).length &&
+      currentInfo.path.length >= consistantPath(arr).length &&
       currentInfo.path.startsWith(consistantPath(arr))
     ) {
-      error.title = 'แจ้งเตือน'
-      error.msg = 'ข้อมูลที่คุณกำลังเข้าถึงอยู่ถูกลบ'
-      error.show()
+      error.set({
+        title: 'แจ้งเตือน',
+        msg: 'ข้อมูลที่คุณกำลังเข้าถึงอยู่ถูกลบ',
+      })
+      goto()
     }
   })
   socket.on('FileUpload', (data: StorageFile) => {
@@ -357,7 +358,17 @@ const useStorage = defineStore('storageStore', () => {
 
   async function createFolder(name: string, path: string = currentInfo.path) {
     loader.show()
-    await api.post(constructUrl(path, true), { name })
+    if (
+      folder.value[consistantPath(path)]?.findIndex((v) => v.name === name) !==
+      -1
+    ) {
+      error.set({
+        title: 'แจ้งเตือน',
+        msg: `พบชื่อ \"${name}\" ซ้ำในระบบ`,
+      })
+    } else {
+      await api.post(constructUrl(path, true), { name })
+    }
     loader.hide()
   }
   async function editFolder(name: string, path: string) {