Merge branch 'methapon' into development

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) => {
@@ -108,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

@@ -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>
 
@@ -244,7 +246,7 @@ async function submitFileForm(
           alignItems: 'center',
           padding: currentDept > 2 ? '.5rem 0' : '.5rem',
         }"
-        @click="() => triggerFolderCreate()"
+        @click.stop="() => triggerFolderCreate()"
         id="triggerFolderCreateFileItem"
       >
         <div
@@ -351,7 +353,7 @@ async function submitFileForm(
           maxWidth: '100%',
         }"
         class="dashed"
-        @click="() => triggerFileCreate()"
+        @click.stop="() => triggerFileCreate()"
         id="triggerFileCreateFileItem"
       >
         <div
@@ -379,6 +381,7 @@ async function submitFileForm(
   </div>
 
   <file-form
+    ref="fileFormComponent"
     :mode="fileFormType"
     :error="fileFormError"
     v-model:open="fileFormState"

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"

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>

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

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, {