feat: click outside of drawer should close drawer

Services/client/src/components/FileForm.vue

@@ -111,6 +111,7 @@ const file = ref<File | undefined>()
     class="q-pa-md"
     side="right"
     tabindex="0"
+    v-click-outside="() => $emit('update:open', false)"
     :width="300"
     :breakpoint="500"
     :model-value="open"

Services/client/src/components/FileItem.vue

@@ -246,7 +246,7 @@ async function submitFileForm(
           alignItems: 'center',
           padding: currentDept > 2 ? '.5rem 0' : '.5rem',
         }"
-        @click="() => triggerFolderCreate()"
+        @click.stop="() => triggerFolderCreate()"
         id="triggerFolderCreateFileItem"
       >
         <div
@@ -353,7 +353,7 @@ async function submitFileForm(
           maxWidth: '100%',
         }"
         class="dashed"
-        @click="() => triggerFileCreate()"
+        @click.stop="() => triggerFileCreate()"
         id="triggerFileCreateFileItem"
       >
         <div

Services/client/src/components/FileItemAction.vue

@@ -1,35 +1,56 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 defineEmits(['edit', 'delete'])
 
-const props = 
-  defineProps<{
-    nameId: string
-
-  }>()
-
+const props = defineProps<{
+  nameId: string
+}>()
 
+const open = ref(false)
 </script>
 
 <template>
-  <q-btn @click.stop icon="more_vert" color="grey" flat dense :data-testid="`action${props.nameId}`">
-    <q-menu auto-close>
+  <q-btn
+    @click.stop
+    icon="more_vert"
+    color="grey"
+    flat
+    dense
+    :data-testid="`action${props.nameId}`"
+  >
+    <q-menu v-model="open">
       <q-list dense>
-        <q-item clickable @click="() => $emit('edit')" id="FileltemActionEdit">
+        <q-item
+          clickable
+          id="FileltemActionEdit"
+          @click.stop="
+            () => {
+              open = false
+              $emit('edit')
+            }
+          "
+        >
           <q-item-section>
             <div class="row items-center white">
               <q-icon name="o_edit" color="positive" />
-              <span class="q-ml-sm ">แก้ไข</span>
+              <span class="q-ml-sm">แก้ไข</span>
             </div>
           </q-item-section>
         </q-item>
         <q-item
           clickable
-          @click="() => $emit('delete')"
+          @click.stop="
+            () => {
+              open = false
+              $emit('delete')
+            }
+          "
           id="FileltemActiondelete"
         >
           <q-item-section>
             <div class="row items-center white">
-              <q-icon  name="mdi-trash-can-outline" color="negative" />
+              <q-icon name="mdi-trash-can-outline" color="negative" />
               <span class="q-ml-sm">ลบ</span>
             </div>
           </q-item-section>

Services/client/src/components/FolderForm.vue

@@ -50,12 +50,13 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
     class="q-pa-md"
     side="right"
     tabindex="0"
+    v-click-outside="() => $emit('update:open', false)"
     :width="300"
     :breakpoint="500"
     :model-value="open"
     @update:model-value="(v) => $emit('update:open', v)"
   >
-    <q-form @submit.prevent="submit">
+    <q-form @submit.prevent="submit" v-if="open">
       <q-toolbar class="q-mb-md q-pa-none">
         <q-toolbar-title>
           <span class="text-weight-bold" v-if="mode === 'create'">

Services/client/src/components/ListView.vue

@@ -67,6 +67,7 @@ const fileFormData = ref<{
   category?: string[]
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
+const fileFormComponent = ref<InstanceType<typeof FileForm>>()
 
 const dialogDeleteState = ref<boolean>(false)
 const deleteFormPath = ref<string>('')
@@ -176,6 +177,7 @@ async function submitFileForm(
   fileFormData.value = {}
   fileFormState.value = false
   currentParam.value = undefined
+  fileFormComponent.value?.reset()
 }
 
 const columnsFolder: QTableProps['columns'] = [
@@ -276,7 +278,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             color="primary"
             dense
             icon="add"
-            @click="() => triggerFolderCreate()"
+            @click.stop="() => triggerFolderCreate()"
             id="listViewFolderCreate"
           />
         </div>
@@ -380,7 +382,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             color="primary"
             dense
             icon="add"
-            @click="() => triggerFileCreate()"
+            @click.stop="() => triggerFileCreate()"
             id="listViewFileCreate"
           />
         </div>
@@ -391,8 +393,9 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         :rows="listDataFile"
         :columns="columnsFile"
         row-key="name"
-        hide-bottom
-        :rows-per-page-options="[0]"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
         class="cursor"
       >
         <template v-slot:body-cell-name="nameRow">
@@ -464,6 +467,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
   </div>
 
   <file-form
+    ref="fileFormComponent"
     :mode="fileFormType"
     :error="fileFormError"
     v-model:open="fileFormState"