From 1e51ad558cf554108279784e4939c76530e9421e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Jun 2024 11:23:21 +0000
Subject: [PATCH] fix: change global dialog

---
 src/components/GlobalDialog.vue | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/GlobalDialog.vue b/src/components/GlobalDialog.vue
index 739bceea..ce0ec418 100644
--- a/src/components/GlobalDialog.vue
+++ b/src/components/GlobalDialog.vue
@@ -7,6 +7,7 @@ defineProps<{
   actionText?: string;
   cancelText?: string;
   persistent?: boolean;
+  enablei18n?: boolean;
   action?: (...args: unknown[]) => void;
   cancel?: (...args: unknown[]) => void;
 }>();
@@ -15,7 +16,7 @@ defineProps<{
   <q-dialog ref="dialogRef" :persistent="persistent || false">
     <q-card
       class="q-pt-sm"
-      style="overflow: visible; min-width: 300px; max-width: 80%"
+      style="overflow: visible; min-width: 300px; max-width: 90%"
     >
       <div
         class="box-icon q-pa-sm"
@@ -37,6 +38,8 @@ defineProps<{
 
       <div class="text-right q-px-sm">
         <q-btn
+          id="`btn-close-dialog`"
+          class="btn-close-dialog"
           flat
           size="sm"
           padding="none"
@@ -48,33 +51,40 @@ defineProps<{
 
       <q-card-section class="column items-center q-pa-sm">
         <div class="column q-mt-md items-center">
-          <span class="text-bold block">{{ title }}</span>
-          <span class="block">{{ message }}</span>
+          <span class="text-bold block">
+            {{ enablei18n ? $t(title) : title }}
+          </span>
+          <span class="block q-px-sm" style="max-width: 400px">
+            {{ enablei18n ? $t(message) : message }}
+          </span>
         </div>
       </q-card-section>
 
       <q-card-actions
         :class="{ 'no-padding': !action || !cancel }"
-        align="right"
+        class="justify-center"
         v-if="action || cancel"
       >
         <q-btn
           id="btn-cancel-dialog"
           v-if="cancel"
+          class="col btn-cancel-dialog"
+          outline
+          :color="color || 'primary'"
           :class="{ 'full-width': !action }"
           @click="cancel"
           :label="cancelText || $t('cancel')"
-          :color="color || 'primary'"
           v-close-popup
-          flat
         />
 
         <q-btn
           id="btn-ok-dialog"
+          unelevated
+          class="col btn-ok-dialog"
           :class="{ 'full-width': !cancel }"
           v-if="action"
           @click="action"
-          :label="actionText || $t('ok')"
+          :label="actionText || $t('defaultDialog')"
           :color="color || 'primary'"
           v-close-popup
         />
@@ -87,7 +97,8 @@ defineProps<{
 .box-icon {
   position: absolute;
   top: -40px;
-  right: 37.5%;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 999;
 }