fix: check fileName2long? & close after submit

Services/client/src/components/FileForm.vue

@@ -4,7 +4,10 @@ import { onMounted, onUnmounted, ref } from 'vue'
 const props = withDefaults(
   defineProps<{
     open: boolean
-    error: { fileExist?: boolean }
+    error: {
+      fileExist?: boolean
+      fileName2Long?: boolean
+    }
     mode: 'create' | 'edit'
     title?: string
     description?: string
@@ -50,7 +53,7 @@ function submit() {
     keyword: props.keyword ?? '',
     category: props.category ?? '',
   })
-  reset()
+  emit('update:open', !open), reset()
 }
 
 onMounted(() => window.addEventListener('keydown', keydown))
@@ -100,9 +103,13 @@ const file = ref<File | undefined>()
           v-model="file"
           @update:model-value="(v) => $emit('filechange', v.name)"
           :label="file?.name ? undefined : 'เลือกไฟล์'"
-          :error="!!error.fileExist"
+          :error="!!error.fileExist || !!error.fileName2Long"
           :error-message="
-            error.fileExist ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ' : ''
+            error.fileExist
+              ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ'
+              : error.fileName2Long
+                ? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
+                : ''
           "
         >
           <template v-slot:prepend>
@@ -161,7 +168,12 @@ const file = ref<File | undefined>()
       </section>
 
       <section :style="{ display: 'flex', gap: '.5rem' }">
-        <q-btn label="บันทึก" type="submit" color="primary" />
+        <q-btn
+          label="บันทึก"
+          type="submit"
+          color="primary"
+          :disable="error.fileName2Long"
+        />
         <q-btn
           label="ยกเลิก"
           type="reset"

Services/client/src/components/FileItem.vue

@@ -30,6 +30,7 @@ const {
   updateFile,
   deleteFile,
   checkFile,
+  checkFileName,
 } = useTreeDataStore()
 
 const currentIcon = computed(() =>
@@ -60,7 +61,7 @@ const fileFormData = ref<{
   category?: string
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean }>({})
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
 function triggerFolderDelete(pathname: string) {
@@ -368,7 +369,12 @@ async function submitFileForm(
     v-model:description="fileFormData.description"
     v-model:keyword="fileFormData.keyword"
     v-model:category="fileFormData.category"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
+    @filechange="
+      (name: string) => (
+        (fileFormError.fileExist = checkFile(name)),
+        (fileFormError.fileName2Long = checkFileName(name))
+      )
+    "
     @submit="submitFileForm"
   />
 

Services/client/src/components/FolderForm.vue

@@ -31,7 +31,7 @@ function submit() {
     mode: props.mode,
     name: props.name,
   })
-  reset()
+  emit('update:open', !open), reset()
 }
 
 onMounted(() => window.addEventListener('keydown', keydown))

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

@@ -96,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) => ({
@@ -248,7 +248,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       description: string
       keyword: string
       category: string
-    }
+    },
   ) {
     loader.show()
 
@@ -268,7 +268,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       {
         file: file.name,
         ...metadata,
-      }
+      },
     )
 
     if (res && res.data.upload) {
@@ -297,7 +297,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       keyword: string
       category: string
     },
-    file?: File
+    file?: File,
   ) {
     loader.show()
 
@@ -312,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) {
@@ -362,6 +362,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     return currentFile.value.some((element) => element.fileName === fileName)
   }
 
+  function checkFileName(fileName: string) {
+    return fileName.length >= 85
+  }
+
   return {
     data,
     currentFolder,
@@ -380,5 +384,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     deleteFolder,
     editFolder,
     checkFile,
+    checkFileName,
   }
 })