From 4f9ca4bd1734488dfb8556cd2283275725524304 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 7 Dec 2023 09:42:36 +0700
Subject: [PATCH 1/5] refactor: dialog

---
 .../src/components/UploadExistDialog.vue      | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/Services/client/src/components/UploadExistDialog.vue b/Services/client/src/components/UploadExistDialog.vue
index a34619f..3fdfd81 100644
--- a/Services/client/src/components/UploadExistDialog.vue
+++ b/Services/client/src/components/UploadExistDialog.vue
@@ -15,19 +15,23 @@ defineEmits(['update:notification', 'confirm', 'cancel'])
   >
     <q-card style="width: 400px">
       <q-card-section>
-        <div class="text-h6">
-          <q-icon
-            name="error"
-            color="warning"
-            size="2.5rem"
-          />เตือนพบไฟล์ชื่อซ้ำในระบบ
+        <div class="flex items-center" style="flex-wrap: nowrap">
+          <div class="q-pa-sm">
+            <div style="border-radius: 50%" class="bg-secondary q-pa-sm">
+              <q-icon name="mdi-alert-outline" color="warning" size="2.5rem" />
+            </div>
+          </div>
+          <div>
+            <h6 class="q-my-none">ยืนยันการเพิ่มข้อมูล</h6>
+            <p class="q-my-none">
+              พบข้อมูลในระบบ หากดำเนินการต่อ
+              ข้อมูลที่มีอยู่จะถูกแทนที่ด้วยข้อมูลใหม่
+              ต้องการยืนยันการเพิ่มข้อมูลนี้หรือไม่
+            </p>
+          </div>
         </div>
       </q-card-section>
 
-      <q-card-section class="q-pt-none">
-        หากดำเนินการต่อข้อมูลจะถูกเขียนทับ
-      </q-card-section>
-
       <q-card-actions align="right" class="bg-white text-primary">
         <q-space />
         <q-btn
@@ -37,10 +41,9 @@ defineEmits(['update:notification', 'confirm', 'cancel'])
           @click="() => $emit('cancel')"
         />
         <q-btn
-          flat
           label="ดำเนินการต่อ"
           v-close-popup
-          class="text-red"
+          color="warning"
           @click="() => $emit('confirm')"
         />
       </q-card-actions>

From 458c1663bf7108f4d439da592ee1cc4a2543971f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 7 Dec 2023 09:42:49 +0700
Subject: [PATCH 2/5] refactor: reset on leave

---
 Services/client/src/components/FileForm.vue | 5 ++++-
 Services/client/src/components/FileItem.vue | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 1222d70..0bda271 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@@ -38,6 +38,10 @@ const emit = defineEmits([
   'submit',
 ])
 
+defineExpose({
+  reset,
+})
+
 function keydown(e: KeyboardEvent) {
   if (e.key === 'Escape' && props.open === true) {
     emit('update:open', false)
@@ -63,7 +67,6 @@ function submit() {
     keyword: props.keyword,
     category: props.category,
   })
-  emit('update:open', !open), reset()
 }
 
 const createKeyword = ((val, done) => {
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 4285180..d7c1cbb 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -64,6 +64,7 @@ const fileFormData = ref<{
 const fileFormType = ref<'edit' | 'create'>('create')
 const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
+const fileFormComponent = ref<InstanceType<typeof FileForm>>()
 
 function triggerFolderDelete(pathname: string) {
   deleteFormType.value = 'deleteFolder'
@@ -176,6 +177,7 @@ async function submitFileForm(
   fileFormData.value = {}
   fileFormState.value = false
   currentParam.value = undefined
+  fileFormComponent.value?.reset()
 }
 </script>
 
@@ -379,6 +381,7 @@ async function submitFileForm(
   </div>
 
   <file-form
+    ref="fileFormComponent"
     :mode="fileFormType"
     :error="fileFormError"
     v-model:open="fileFormState"

From 5ff294be3d50c0afccdc7205f32439c5f70873e5 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:45:58 +0700
Subject: [PATCH 3/5] feat: click outside of drawer should close drawer

---
 Services/client/src/components/FileForm.vue   |  1 +
 Services/client/src/components/FileItem.vue   |  4 +-
 .../client/src/components/FileItemAction.vue  | 45 ++++++++++++++-----
 Services/client/src/components/FolderForm.vue |  3 +-
 Services/client/src/components/ListView.vue   | 12 +++--
 5 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 0bda271..5289238 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/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"
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index d7c1cbb..93c7abe 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/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
diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue
index 14cabe5..603ae6c 100644
--- a/Services/client/src/components/FileItemAction.vue
+++ b/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>
diff --git a/Services/client/src/components/FolderForm.vue b/Services/client/src/components/FolderForm.vue
index a41a60f..d6d89fd 100644
--- a/Services/client/src/components/FolderForm.vue
+++ b/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'">
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index b813dea..7b367c2 100644
--- a/Services/client/src/components/ListView.vue
+++ b/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"

From 6016699ec6988ff8280e8b6b277a4ae892eb5c2b Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:46:10 +0700
Subject: [PATCH 4/5] feat: click outside directives

---
 Services/client/src/lib/directives.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 Services/client/src/lib/directives.ts

diff --git a/Services/client/src/lib/directives.ts b/Services/client/src/lib/directives.ts
new file mode 100644
index 0000000..b0f9483
--- /dev/null
+++ b/Services/client/src/lib/directives.ts
@@ -0,0 +1,15 @@
+import type { ObjectDirective } from 'vue'
+
+export const clickOutside = {
+  beforeMount(element, binding) {
+    element.clickOutsideEvent = (e: MouseEvent) => {
+      if (!(element === e.target || element.contains(e.target))) {
+        binding.value(e)
+      }
+    }
+    document.addEventListener('click', element.clickOutsideEvent)
+  },
+  unmounted(element) {
+    document.removeEventListener('click', element.clickOutsideEvent)
+  },
+} satisfies ObjectDirective

From 7f5d7b93c08741e8b16102e439855720360981fa Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:46:25 +0700
Subject: [PATCH 5/5] feat: register click outside directives

---
 Services/client/src/main.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Services/client/src/main.ts b/Services/client/src/main.ts
index a7cb552..6ab4a8d 100644
--- a/Services/client/src/main.ts
+++ b/Services/client/src/main.ts
@@ -14,6 +14,11 @@ login().then(async () => {
   const app = createApp(App)
   const pinia = createPinia()
 
+  app.directive(
+    'click-outside',
+    (await import('@/lib/directives')).clickOutside,
+  )
+
   app.use((await import('./router')).default)
   app.use(pinia)
   app.use(Quasar, {