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))