From 1792f60055f92933ddb9d34eb28f3a32856d42be Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 24 Dec 2024 13:19:18 +0700
Subject: [PATCH] refactor: handle btn on dialog

---
 src/components/DialogForm.vue            | 79 ++++++++++++------------
 src/components/upload-file/OcrDialog.vue |  2 +
 2 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 7295c62b..863f1e28 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -21,6 +21,7 @@ defineProps<{
   edit?: boolean;
   hideFooter?: boolean;
   hideDelete?: boolean;
+  hideBtn?: boolean;
   readonly?: boolean;
 
   saveAmount?: number;
@@ -68,44 +69,46 @@ const currentTab = defineModel<string>('currentTab');
           }"
         >
           <div class="row items-center">
-            <div v-if="!readonly && isEdit && edit" class="row">
-              <q-btn
-                round
-                flat
-                id="closeDialog"
-                icon="mdi-arrow-left"
-                padding="xs"
-                class="q-mr-md"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: var(--brand-1)"
-                @click="undo"
-              />
-              <div style="width: 31.98px"></div>
-            </div>
-            <div v-if="!readonly && !isEdit && edit">
-              <q-btn
-                round
-                flat
-                id="editDialog"
-                icon="mdi-pencil-outline"
-                padding="xs"
-                class="q-mr-md"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: var(--brand-1)"
-                @click="editData"
-              />
-              <q-btn
-                v-if="edit && !hideDelete"
-                round
-                flat
-                id="deleteDialog"
-                icon="mdi-trash-can-outline"
-                padding="xs"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: hsl(var(--negative-bg))"
-                @click="deleteData"
-              />
-            </div>
+            <templatez v-if="!hideBtn">
+              <div v-if="!readonly && isEdit && edit" class="row">
+                <q-btn
+                  round
+                  flat
+                  id="closeDialog"
+                  icon="mdi-arrow-left"
+                  padding="xs"
+                  class="q-mr-md"
+                  :class="{ dark: $q.dark.isActive }"
+                  style="color: var(--brand-1)"
+                  @click="undo"
+                />
+                <div style="width: 31.98px"></div>
+              </div>
+              <div v-if="!readonly && !isEdit && edit">
+                <q-btn
+                  round
+                  flat
+                  id="editDialog"
+                  icon="mdi-pencil-outline"
+                  padding="xs"
+                  class="q-mr-md"
+                  :class="{ dark: $q.dark.isActive }"
+                  style="color: var(--brand-1)"
+                  @click="editData"
+                />
+                <q-btn
+                  v-if="edit && !hideDelete"
+                  round
+                  flat
+                  id="deleteDialog"
+                  icon="mdi-trash-can-outline"
+                  padding="xs"
+                  :class="{ dark: $q.dark.isActive }"
+                  style="color: hsl(var(--negative-bg))"
+                  @click="deleteData"
+                />
+              </div>
+            </templatez>
 
             <div style="width: 31.98px"></div>
             <div class="col text-subtitle1 text-weight-bold text-center">
diff --git a/src/components/upload-file/OcrDialog.vue b/src/components/upload-file/OcrDialog.vue
index 923bd69b..426196bd 100644
--- a/src/components/upload-file/OcrDialog.vue
+++ b/src/components/upload-file/OcrDialog.vue
@@ -21,6 +21,7 @@ type Props = {
   readonly?: boolean;
   autoSave?: boolean;
   data?: Data;
+  hideBtn?: boolean;
 };
 
 type HandleProps = {
@@ -106,6 +107,7 @@ async function change(e: Event) {
     weight="90%"
     hide-close-event
     hide-delete
+    hide-btn
     edit
     :title
     :is-edit