From dc89a60eb46b8eb71f950964833b1c1e67edbd3d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 25 Jul 2024 11:08:15 +0000
Subject: [PATCH] fix(04): service properties ui

---
 .../04_product-service/ServiceProperties.vue  | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 7c531196..e39d8d45 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -242,7 +242,6 @@ function confirmDelete(items: unknown[], index: number) {
         menu-anchor="bottom end"
       >
         <q-list dense v-if="formServiceProperties && propertiesOption">
-          asdas
           <q-item clickable @click="manageProperties('all')">
             <div class="full-width flex items-center">
               <q-icon
@@ -266,7 +265,6 @@ function confirmDelete(items: unknown[], index: number) {
             </div>
           </q-item>
           <q-separator />
-          dasdsad
           <q-item
             v-for="(ops, index) in propertiesOption"
             clickable
@@ -469,13 +467,9 @@ function confirmDelete(items: unknown[], index: number) {
             </template>
           </q-select>
 
-          <div
-            v-if="p.type !== 'date' && p.type"
-            class="menu-border q-pt-md q-pb-sm"
-            style="margin-top: -20px"
-          >
-            <q-item>
-              <q-item-section class="column">
+          <div v-if="p.type !== 'date' && p.type">
+            <q-item class="no-padding" style="font-size: 11px">
+              <q-item-section class="column q-py-sm" style="padding-left: 12px">
                 <span class="app-text-muted-2">{{ $t('additional') }}</span>
 
                 <div v-if="p.type === 'string'" class="q-gutter-y-sm">
@@ -491,7 +485,8 @@ function confirmDelete(items: unknown[], index: number) {
                     <q-input
                       v-if="p.type === 'string'"
                       v-model="p.phoneNumberLength"
-                      class="col"
+                      input-class="text-caption"
+                      class="col additional-label"
                       dense
                       outlined
                       :label="$t('telMaxLength')"
@@ -501,19 +496,29 @@ function confirmDelete(items: unknown[], index: number) {
 
                 <div v-if="p.type === 'number'" class="q-gutter-y-sm">
                   <div class="row items-center">
-                    <div class="col surface-3 rounded q-py-xs">
-                      <q-checkbox v-model="p.comma" size="xs" />
+                    <div class="col-md-4 col-12 surface-3 rounded">
+                      <q-checkbox v-model="p.comma" size="xs" class="q-py-xs" />
                       {{ $t('useComma') }}
                     </div>
-                  </div>
-                  <div class="row items-center">
-                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                      <q-checkbox v-model="p.decimal" size="xs" />
+                    <div
+                      class="col-md-4 col-7 surface-3 rounded"
+                      :class="{
+                        'q-mx-sm': $q.screen.gt.sm,
+                        'q-mr-sm q-mt-xs': $q.screen.lt.md,
+                      }"
+                    >
+                      <q-checkbox
+                        v-model="p.decimal"
+                        size="xs"
+                        class="q-py-xs"
+                      />
                       {{ $t('decimal') }}
                     </div>
                     <q-input
                       v-model="p.decimalPlace"
-                      class="col"
+                      class="col additional-label"
+                      :class="{ 'q-mt-xs': $q.screen.lt.md }"
+                      input-class="text-caption"
                       dense
                       outlined
                       :label="$t('decimalPlace')"
@@ -525,13 +530,15 @@ function confirmDelete(items: unknown[], index: number) {
                   <div
                     class="row items-center justify-between"
                     v-for="(_, i) in p.options"
+                    :key="i"
                   >
                     <div class="col rounded">
                       <q-input
                         v-model="p.options[i]"
-                        class="col"
+                        class="col additional-label"
                         dense
                         outlined
+                        input-class="text-caption"
                         :label="$t('selection')"
                         :rules="[
                           (val) => (!!val && i >= 1) || $t('pleaseInformation'),
@@ -598,4 +605,8 @@ function confirmDelete(items: unknown[], index: number) {
   border-bottom-left-radius: var(--radius-2);
   border-bottom-right-radius: var(--radius-2);
 }
+
+.additional-label:deep(.q-field__label.no-pointer-events.absolute.ellipsis) {
+  font-size: 11px !important;
+}
 </style>