From 396c244bc384908d285190d22c4efffd637ea81d Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 25 Sep 2024 11:25:41 +0700
Subject: [PATCH] refacot: add tppltip

---
 src/pages/03_customer-management/MainPage.vue | 57 +++++++++++++++++--
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b0a1087f..968297ab 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1191,7 +1191,11 @@ const emptyCreateDialog = ref(false);
                           }}
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('titleName')">
+                        <q-td
+                          v-if="fieldSelected.includes('titleName')"
+                          style="max-width: 200px"
+                          class="ellipsis"
+                        >
                           <div class="row items-center no-wrap">
                             <div
                               class="q-mr-sm"
@@ -1247,7 +1251,11 @@ const emptyCreateDialog = ref(false);
                           </div>
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('businessTypePure')">
+                        <q-td
+                          v-if="fieldSelected.includes('businessTypePure')"
+                          style="max-width: 150px"
+                          class="ellipsis"
+                        >
                           {{
                             props.row.branch.length !== 0
                               ? props.row.branch[0].businessType !== null
@@ -1257,9 +1265,25 @@ const emptyCreateDialog = ref(false);
                                 : ''
                               : '-'
                           }}
+
+                          <q-tooltip>
+                            {{
+                              props.row.branch.length !== 0
+                                ? props.row.branch[0].businessType !== null
+                                  ? optionStore.mapOption(
+                                      props.row.branch[0].businessType,
+                                    )
+                                  : ''
+                                : '-'
+                            }}
+                          </q-tooltip>
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('jobPosition')">
+                        <q-td
+                          v-if="fieldSelected.includes('jobPosition')"
+                          style="max-width: 150px"
+                          class="ellipsis"
+                        >
                           {{
                             props.row.branch.length !== 0
                               ? props.row.branch[0].jobPosition !== null
@@ -1269,9 +1293,25 @@ const emptyCreateDialog = ref(false);
                                 : ''
                               : '-'
                           }}
+
+                          <q-tooltip>
+                            {{
+                              props.row.branch.length !== 0
+                                ? props.row.branch[0].jobPosition !== null
+                                  ? optionStore.mapOption(
+                                      props.row.branch[0].jobPosition,
+                                    )
+                                  : ''
+                                : '-'
+                            }}
+                          </q-tooltip>
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('address')">
+                        <q-td
+                          v-if="fieldSelected.includes('address')"
+                          style="max-width: 150px"
+                          class="ellipsis"
+                        >
                           {{
                             locale === 'eng'
                               ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
@@ -1279,6 +1319,15 @@ const emptyCreateDialog = ref(false);
                               : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
                                 '-'
                           }}
+                          <q-tooltip>
+                            {{
+                              locale === 'eng'
+                                ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                  '-'
+                                : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                  '-'
+                            }}
+                          </q-tooltip>
                         </q-td>
 
                         <q-td v-if="fieldSelected.includes('contactName')">