From 9d81097b4c54777c70265accaeee132f1767c9fc Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Tue, 28 Nov 2023 09:22:44 +0700
Subject: [PATCH] fix: esc exit formEdit

---
 Services/client/src/components/FileItem.vue   |  7 ++---
 Services/client/src/components/FromEdit.vue   | 28 +++++++++++++++++--
 Services/client/src/components/ListView.vue   | 27 ++++++++++--------
 Services/client/src/components/PageLayout.vue |  4 ++-
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 87eb06e..96d823b 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -91,11 +91,8 @@ async function handleSubmit() {
         class="inline-block"
         v-if="props.action && currentDept < 4"
         tabindex="0"
-        @keydown.esc="
-          () => {
-            drawer = false
-          }
-        "
+        
+
       >
         <div class="dashed border-radius-inherit">
           <q-card
diff --git a/Services/client/src/components/FromEdit.vue b/Services/client/src/components/FromEdit.vue
index a39d92b..8f1adab 100644
--- a/Services/client/src/components/FromEdit.vue
+++ b/Services/client/src/components/FromEdit.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 import { useTreeDataStore } from '@/stores/tree-data'
 const { createFolder, editFolder } = useTreeDataStore()
@@ -19,7 +19,22 @@ const props = withDefaults(
     drawerStatus: 'create',
   }
 )
-defineEmits(['update:drawer'])
+
+let isListenerAdded = false
+const emit = defineEmits(['update:drawer'])
+const handleClose = (event: any) => {
+  console.log('key close event')
+  if (event.key === 'Escape') {
+    emit('update:drawer')
+  }
+}
+
+onMounted(() => {
+  if (!isListenerAdded) {
+    document.addEventListener('keyup', handleClose)
+    isListenerAdded = true
+  }
+})
 </script>
 
 <template>
@@ -60,6 +75,15 @@ defineEmits(['update:drawer'])
       v-model="input"
       :placeholder="`กรอกชื่อ${props.DEPT_NAME[props.currentDept]}`"
       dense
+      @keyup.enter="
+        () => {
+          $emit('update:drawer')
+          props.drawerStatus === 'create'
+            ? createFolder(input)
+            : editFolder(input, editPathname)
+          input = ''
+        }
+      "
     />
     <q-btn
       class="q-px-md"
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 270ad4a..9dcf055 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import type { QTableProps } from 'quasar'
-import { useTreeDataStore } from '@/stores/tree-data'
+import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FromEdit from '@/components/FromEdit.vue'
 import FileIcon from '@/components/FileIcon.vue'
@@ -113,6 +113,10 @@ const columnsFile: QTableProps['columns'] = [
     style: 'width: 20px',
   },
 ]
+
+const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
+  getFolder(row.pathname)
+}
 </script>
 
 <template>
@@ -153,15 +157,11 @@ const columnsFile: QTableProps['columns'] = [
         row-key="name"
         hide-bottom
         :rows-per-page-options="[0]"
+        @row-click="onRowClick"
+        class="cursor"
       >
         <template v-slot:body-cell-name="nameRow">
-          <q-td
-            @click="
-              () => {
-                getFolder(nameRow.row.pathname)
-              }
-            "
-          >
+          <q-td>
             <q-icon :name="currentIcon" size="2em" color="primary" />
             {{ nameRow.row.name }}
           </q-td>
@@ -191,7 +191,7 @@ const columnsFile: QTableProps['columns'] = [
                 color="positive"
                 dense
                 icon="edit"
-                @click="
+                @click.stop="
                   () => {
                     drawer = !drawer
                     drawerStatus = 'edit'
@@ -204,7 +204,7 @@ const columnsFile: QTableProps['columns'] = [
                 color="negative"
                 dense
                 icon="delete"
-                @click="() => deleteFolder(actionsRow.row.pathname)"
+                @click.stop="() => deleteFolder(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -250,7 +250,7 @@ const columnsFile: QTableProps['columns'] = [
               }
             "
           >
-          <file-icon size="list" :fileMimeType="nameRow.row.fileType" />
+            <file-icon size="list" :fileMimeType="nameRow.row.fileType" />
             {{ nameRow.row.fileName }}
           </q-td>
         </template>
@@ -286,6 +286,7 @@ const columnsFile: QTableProps['columns'] = [
   </div>
 
   <from-edit
+    v-if="drawer"
     :drawer="drawer"
     :drawerStatus="drawerStatus"
     :DEPT_NAME="DEPT_NAME"
@@ -301,4 +302,8 @@ const columnsFile: QTableProps['columns'] = [
   justify-content: center;
   align-items: center;
 }
+
+.cursor {
+  cursor: pointer;
+}
 </style>
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index e9114d2..f276661 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -141,8 +141,10 @@ onMounted(getCabinet)
     </div>
   </section>
 
+
+  
   <from-edit
-    v-if="currentDept === 0"
+    v-if="currentDept === 0 && drawer "
     :drawer="drawer"
     :drawerStatus="drawerStatus"
     :DEPT_NAME="DEPT_NAME"