From c910fbf7e7959a66e2b4e164d98d79a28c6cb753 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 18 Jul 2024 04:51:09 +0000
Subject: [PATCH] fix: hide dropdown icon when sceen xs

---
 src/css/quasar.variables.scss                  | 6 ++++++
 src/pages/01_branch-management/MainPage.vue    | 9 +++++++--
 src/pages/02_personnel-management/MainPage.vue | 2 ++
 src/pages/03_customer-management/MainPage.vue  | 2 ++
 src/pages/04_product-service/MainPage.vue      | 2 ++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 2ad828be..d13cb815 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -97,3 +97,9 @@ div.fullscreen.q-drawer__backdrop {
 .q-field--outlined.q-field--readonly .q-field__control:before {
   border-color: transparent;
 }
+
+.q-field__native {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 798e9ff5..6aa47567 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -554,6 +554,7 @@ watch(locale, () => {
             :limits="[0, 100]"
             style="width: 100%"
             class="col"
+            before-class="overflow-hidden"
             after-class="overflow-hidden"
           >
             <template v-slot:before>
@@ -563,7 +564,6 @@ watch(locale, () => {
                   :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
                 >
                   <div class="col">จัดการสาขาทั้งหมด</div>
-
                   <q-btn
                     round
                     flat
@@ -806,13 +806,13 @@ watch(locale, () => {
                   <div
                     class="row col-12 col-md-6"
                     :class="{ 'q-pt-xs': $q.screen.lt.md }"
-                    style="white-space: nowrap"
                   >
                     <q-select
                       v-model="statusFilter"
                       outlined
                       dense
                       option-value="value"
+                      :hide-dropdown-icon="$q.screen.lt.sm"
                       option-label="label"
                       class="col"
                       map-options
@@ -834,6 +834,7 @@ watch(locale, () => {
                         fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                       "
                       :display-value="$t('displayField')"
+                      :hide-dropdown-icon="$q.screen.lt.sm"
                       class="col q-mx-sm"
                       v-model="fieldSelected"
                       option-label="label"
@@ -1681,4 +1682,8 @@ watch(locale, () => {
   transform: translateY(-20px);
   opacity: 0;
 }
+
+:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
+  padding-block: 8px;
+}
 </style>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index e97b88ba..d14d09fd 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -744,6 +744,7 @@ watch(inputSearch, async () => await fetchUserList());
                 class="col"
                 map-options
                 emit-value
+                :hide-dropdown-icon="$q.screen.lt.sm"
                 :options="[
                   { label: $t('all'), value: 'all' },
                   { label: $t('statusACTIVE'), value: 'statusACTIVE' },
@@ -763,6 +764,7 @@ watch(inputSearch, async () => await fetchUserList());
                   }))
                 "
                 :display-value="$t('displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
                 v-model="fieldSelected"
                 option-label="label"
                 option-value="value"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e8d34bec..f7a618e3 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1686,6 +1686,7 @@ watch([inputSearch, currentStatus], async () => {
                 class="col"
                 map-options
                 emit-value
+                :hide-dropdown-icon="$q.screen.lt.sm"
                 :options="[
                   { label: $t('all'), value: 'All' },
                   { label: $t('statusACTIVE'), value: 'ACTIVE' },
@@ -1703,6 +1704,7 @@ watch([inputSearch, currentStatus], async () => {
                     : fieldDisplayEmployee
                 "
                 :display-value="$t('displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
                 v-model="fieldSelected"
                 option-label="label"
                 option-value="value"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 6fc3b255..daae6a8b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1686,6 +1686,7 @@ watch(inputSearchProductAndService, async () => {
                     class="col"
                     map-options
                     emit-value
+                    :hide-dropdown-icon="$q.screen.lt.sm"
                     :options="[
                       { label: $t('all'), value: 'All' },
                       { label: $t('statusACTIVE'), value: 'ACTIVE' },
@@ -1706,6 +1707,7 @@ watch(inputSearchProductAndService, async () => {
                         value: x,
                       }))
                     "
+                    :hide-dropdown-icon="$q.screen.lt.sm"
                     :display-value="$t('displayField')"
                     v-model="tbControl.groupAndType.fieldSelected"
                     class="col q-mx-sm"