From 64f9c80a885833066017f60a573e124fcaf3bf13 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 8 Aug 2024 04:59:57 +0000
Subject: [PATCH] fix: use share button in drawer info

---
 src/components/DrawerInfo.vue | 96 ++++++++++-------------------------
 1 file changed, 27 insertions(+), 69 deletions(-)

diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 2eac1455..91258622 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import {
+  EditButton,
+  DeleteButton,
+  CancelButton,
+  SaveButton,
+  UndoButton,
+} from 'src/components/button';
 
 withDefaults(
   defineProps<{
@@ -65,41 +72,22 @@ function reset() {
         <div class="bordered-b q-pa-lg row items-center">
           <div v-if="showEdit">
             <div v-if="isEdit" class="row">
-              <q-btn
-                round
-                flat
-                id="closeDialog"
-                icon="mdi-arrow-left"
-                padding="xs"
+              <UndoButton
                 class="q-mr-md"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: var(--brand-1)"
+                id="btn-info-undo"
+                iconOnly
                 @click="undo"
               />
-              <div style="width: 31.98px"></div>
+              <div style="width: 36.8px"></div>
             </div>
-            <div v-else>
-              <q-btn
-                round
-                flat
-                id="editDialog"
-                icon="mdi-pencil-outline"
-                padding="xs"
+            <div v-else class="row">
+              <EditButton
+                id="btn-info-edit"
                 class="q-mr-md"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: var(--brand-1)"
+                iconOnly
                 @click="editData"
               />
-              <q-btn
-                round
-                flat
-                id="deleteDialog"
-                icon="mdi-trash-can-outline"
-                padding="xs"
-                :class="{ dark: $q.dark.isActive }"
-                style="color: hsl(var(--negative-bg))"
-                @click="deleteData"
-              />
+              <DeleteButton id="btn-info-delete" iconOnly @click="deleteData" />
             </div>
           </div>
 
@@ -131,22 +119,17 @@ function reset() {
             </text>
           </div>
 
-          <div style="width: 31.98px"></div>
-          <q-btn
-            round
-            flat
-            id="closeDialog"
-            icon="mdi-close"
-            padding="xs"
-            class="close-btn"
-            :class="{ dark: $q.dark.isActive }"
-            type="reset"
+          <div class="q-mr-md" style="width: 36.8px"></div>
+          <CancelButton
+            icon-only
+            id="btn-info-cancel"
             @click="
               () => {
                 drawerOpen = beforeClose ? beforeClose() : !drawerOpen;
                 close?.();
               }
             "
+            type="reset"
             resetValidation
           />
         </div>
@@ -161,39 +144,14 @@ function reset() {
         </div>
 
         <!-- footer -->
-        <div
-          class="bordered-t q-pr-lg row items-center justify-end q-gutter-x-lg q-py-md"
-        >
-          <q-btn
+        <div class="bordered-t q-pr-lg row items-center justify-end q-py-md">
+          <CancelButton id="btn-info-cancel" outlined @click="close" />
+          <SaveButton
+            class="q-ml-md"
+            id="btn-info-save"
             v-if="isEdit"
-            id="cancelBtn"
-            unelevated
-            class="btn-cancel-dialog"
-            color="grey-4"
-            type="reset"
-            text-color="grey-10"
-            @click="close"
-            :label="$t('cancel')"
-          />
-          <q-btn
-            v-if="isEdit"
-            dense
-            unelevated
-            id="submitBtn"
             type="submit"
-            color="primary"
-            class="q-px-md"
-            :label="$t('save')"
-          />
-          <q-btn
-            v-else
-            dense
-            unelevated
-            id="okBtn"
-            color="primary"
-            class="q-px-md"
-            :label="$t('agree')"
-            @click="close"
+            solid
           />
         </div>
       </div>