From 0f9c752e04833cea3aac8c2953300edff0797636 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 8 Aug 2024 06:11:47 +0000
Subject: [PATCH] fix: use share button on dialog form

---
 src/components/DialogForm.vue | 44 +++++++++++++++++------------------
 src/components/DrawerInfo.vue |  2 +-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 7dbcbb8c..c2eb4d0e 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import {
+  EditButton,
+  DeleteButton,
+  CancelButton,
+  SaveButton,
+  UndoButton,
+} from 'src/components/button';
+
 defineProps<{
   title: string;
   titleFormAddress?: string;
@@ -127,20 +135,17 @@ const currentTab = defineModel<string>('currentTab');
                 {{ badgeLabel }}
               </text>
             </div>
-            <q-btn
-              round
-              flat
-              id="closeDialog"
-              icon="mdi-close"
-              padding="xs"
-              class="close-btn"
-              :class="{ dark: $q.dark.isActive }"
+            <CancelButton
+              icon-only
+              id="btn-form-close"
               @click="
                 () => {
                   modal = beforeClose ? beforeClose() : !modal;
                   close?.();
                 }
               "
+              type="reset"
+              resetValidation
             />
           </div>
         </div>
@@ -205,25 +210,18 @@ const currentTab = defineModel<string>('currentTab');
           <div>
             <slot name="footer"></slot>
           </div>
-          <div class="row flex justify-end q-gutter-x-md">
-            <q-btn
-              id="cancelBtn"
-              unelevated
-              class="col btn-cancel-dialog rounded"
-              color="grey-4"
-              text-color="grey-10"
+          <div class="row flex justify-end">
+            <CancelButton
+              id="btn-form-cancel"
+              outlined
               @click="close"
-              :label="$t('cancel')"
               v-close-popup
             />
-            <q-btn
-              dense
-              unelevated
-              id="submitBtn"
+            <SaveButton
+              class="q-ml-md"
+              id="btn-form-submit"
               type="submit"
-              color="primary"
-              class="q-px-md rounded"
-              :label="$t('save')"
+              solid
             />
           </div>
         </div>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 91258622..2db83b25 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -122,7 +122,7 @@ function reset() {
           <div class="q-mr-md" style="width: 36.8px"></div>
           <CancelButton
             icon-only
-            id="btn-info-cancel"
+            id="btn-info-close"
             @click="
               () => {
                 drawerOpen = beforeClose ? beforeClose() : !drawerOpen;