From dc8637720898b1b53c977a5e5f17efc9f8e444cd Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 11 Nov 2024 12:10:28 +0700
Subject: [PATCH] refactor: ellipsis title & tooltip on card

---
 src/components/01_branch-management/BranchCard.vue         | 5 ++++-
 src/components/04_product-service/ProductCardComponent.vue | 5 ++++-
 src/components/shared/PersonCard.vue                       | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 4c5d51a9..8b956f0f 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -59,7 +59,10 @@ defineProps<{
         </q-img>
       </div>
       <div class="branch-card__name flex justify-center q-ml-sm">
-        <b>{{ data.branchLabelName }}</b>
+        <b class="ellipsis-2-lines">
+          {{ data.branchLabelName }}
+          <q-tooltip>{{ data.branchLabelName }}</q-tooltip>
+        </b>
         <small class="branch-card__code" v-if="data.branchLabelCode">
           {{ data.branchLabelCode }}
         </small>
diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index 1f5a2014..49830be6 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -65,7 +65,10 @@ withDefaults(
       </div>
 
       <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
-        <div class="text-subtitle1 text-bold">{{ title }}</div>
+        <div class="text-subtitle1 text-bold ellipsis-2-lines">
+          {{ title }}
+          <q-tooltip>{{ title }}</q-tooltip>
+        </div>
         <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
         <div class="row q-gutter-md q-mt-sm">
           <div
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index 7f0d52fd..de99af06 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -142,6 +142,9 @@ defineEmits<{
         >
           <div class="items-center ellipsis" style="max-width: 140px">
             {{ data.name }}
+            <q-tooltip>
+              {{ data.name }}
+            </q-tooltip>
           </div>
           <Icon
             v-if="data.male || data.female"