From d3bd7b986e6c2b30ee7f7096e45c36b61ea318f6 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 25 Dec 2024 09:42:55 +0700
Subject: [PATCH] fix: cancel text and icon

---
 src/components/shared/KebabAction.vue         | 34 ++++++++++++++++++-
 src/i18n/eng.ts                               |  2 ++
 src/i18n/tha.ts                               |  2 ++
 src/pages/08_request-list/MainPage.vue        |  1 +
 .../08_request-list/TableRequestList.vue      |  3 +-
 5 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/KebabAction.vue b/src/components/shared/KebabAction.vue
index 9360b56e..bd42d6f5 100644
--- a/src/components/shared/KebabAction.vue
+++ b/src/components/shared/KebabAction.vue
@@ -11,8 +11,11 @@ const props = withDefaults(
     hideToggle?: boolean;
     hideEdit?: boolean;
     hideView?: boolean;
+    hideDelete?: boolean;
     useLink?: boolean;
     useUpload?: boolean;
+    useCancel?: boolean;
+    disableCancel?: boolean;
     disableDelete?: boolean;
   }>(),
   {
@@ -27,6 +30,7 @@ defineEmits<{
   (e: 'link'): void;
   (e: 'upload'): void;
   (e: 'delete'): void;
+  (e: 'cancel'): void;
   (e: 'changeStatus'): void;
 }>();
 
@@ -138,7 +142,7 @@ watch(
         </q-item>
 
         <q-item
-          v-if="status !== 'INACTIVE'"
+          v-if="status !== 'INACTIVE' && !hideDelete"
           v-close-popup
           dense
           class="row"
@@ -166,6 +170,34 @@ watch(
           </span>
         </q-item>
 
+        <q-item
+          v-close-popup
+          dense
+          class="row"
+          style="white-space: nowrap"
+          :clickable="!disableDelete"
+          :id="`btn-kebab-delete-${idName}`"
+          :class="{
+            'surface-3': disableCancel,
+            'app-text-muted': disableCancel,
+          }"
+          @click.stop="() => $emit('cancel')"
+        >
+          <q-icon
+            size="xs"
+            name="mdi-cancel"
+            class="col-3"
+            :class="{
+              'app-text-negative': !disableCancel,
+            }"
+          />
+          <span class="col-9 q-px-md flex items-center">
+            <slot name="labelDelete">
+              {{ $t('general.cancel') }}
+            </slot>
+          </span>
+        </q-item>
+
         <q-item v-if="!hideToggle" dense>
           <q-item-section class="q-py-sm">
             <div class="q-pa-sm surface-2 rounded flex items-center">
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 44853e68..cb9c83c1 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -307,6 +307,8 @@ export default {
         'Duplicate data found. Do you want to use the data from the document?',
 
       duplicateInformation: 'Data found in the system',
+      cancel:
+        'Are you sure you want to continue? Cancel action cannot be undone.',
     },
     info: {
       cantChange:
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index ba700bcb..c2c943d1 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -303,6 +303,8 @@ export default {
         'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
       message: 'พบข้อมูลซ้ำกันต้องการใช้ข้อมูลจากเอกสารหรือไม่',
       duplicateInformation: 'พบข้อมูลในระบบ',
+      cancel:
+        'คุณแน่ใจหรือไม่ว่าต้องการดำเนินการต่อ? รายการนี้จะถูกยกเลิกและไม่สามารถย้อนกลับได้',
     },
     info: {
       cantChange:
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 5fb08a17..b3fcb5e8 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -68,6 +68,7 @@ async function fetchStats() {
 
 function triggerCancel(id: string) {
   dialogWarningClose(t, {
+    message: t('form.warning.cancel'),
     action: async () => {
       const res = await requestListStore.cancelRequest(id);
       if (res) {
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index cab4047f..15492ffe 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -160,7 +160,8 @@ function getEmployeeName(
             hide-edit
             hide-toggle
             hide-view
-            @delete="$emit('delete', props.row)"
+            hide-delete
+            @cancel="$emit('delete', props.row)"
           />
         </q-td>
       </q-tr>