refactor(04): action and display control in component

src/components/04_product-service/FormServiceProperties.vue

@@ -21,11 +21,12 @@ defineEmits<{
   <div class="column full-width full-height">
     <div
       class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
-      style="background: hsla(var(--info-bg) / 0.1)"
+      style="background: hsla(var(--info-bg) / 0.1); min-height: 50px"
     >
       {{ $t(`serviceProperties`) }}
 
       <q-btn
+        v-if="!readonly"
         :disable="readonly"
         dense
         flat

src/components/04_product-service/FormServiceWork.vue

@@ -16,6 +16,12 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+
+  priceDisplay?: {
+    price: boolean;
+    agentPrice: boolean;
+    serviceCharge: boolean;
+  };
 }>();
 
 defineEmits<{
@@ -78,6 +84,7 @@ function confirmDelete(items: unknown[], index: number) {
         :length="workItems.length"
         :workIndex="index"
         :readonly="readonly"
+        :priceDisplay="priceDisplay"
         v-model:work-name="workItems[index].name"
         v-model:product-items="work.product"
         v-model:attributes="work.attributes"

src/components/04_product-service/PriceDataComponent.vue

@@ -3,13 +3,27 @@ const serviceCharge = defineModel<number>('serviceCharge');
 const agentPrice = defineModel<number>('agentPrice');
 const price = defineModel<number>('price');
 
-defineProps<{
+withDefaults(
-  dense?: boolean;
+  defineProps<{
-  outlined?: boolean;
+    dense?: boolean;
-  readonly?: boolean;
+    outlined?: boolean;
-  separator?: boolean;
+    readonly?: boolean;
-  isType?: boolean;
+    separator?: boolean;
-}>();
+    isType?: boolean;
+    priceDisplay?: {
+      price: boolean;
+      agentPrice: boolean;
+      serviceCharge: boolean;
+    };
+  }>(),
+  {
+    priceDisplay: () => ({
+      price: true,
+      agentPrice: true,
+      serviceCharge: true,
+    }),
+  },
+);
 </script>
 
 <template>
@@ -27,6 +41,7 @@ defineProps<{
     </div>
     <div class="col-12 row q-col-gutter-sm">
       <q-input
+        v-if="priceDisplay?.price"
         lazy-rules="ondemand"
         :dense="dense"
         outlined
@@ -40,6 +55,7 @@ defineProps<{
       />
 
       <q-input
+        v-if="priceDisplay?.agentPrice"
         lazy-rules="ondemand"
         :dense="dense"
         outlined
@@ -53,6 +69,7 @@ defineProps<{
       />
 
       <q-input
+        v-if="priceDisplay?.serviceCharge"
         lazy-rules="ondemand"
         :dense="dense"
         outlined

src/components/04_product-service/ProductCardComponent.vue

@@ -15,6 +15,7 @@ withDefaults(
     countType?: number;
     countProduct?: number;
     countService?: number;
+    action?: boolean;
   }>(),
   {
     color: 'var(--brand-1)',
@@ -51,6 +52,7 @@ withDefaults(
         />
 
         <q-btn
+          v-if="action"
           flat
           round
           padding="sm"

src/components/04_product-service/TotalProductCardComponent.vue

@@ -28,15 +28,21 @@ withDefaults(
     typeProduct?: string;
 
     isAddProduct?: boolean;
-    isSelected?: boolean;
+    action?: boolean;
 
     index?: number;
     isDisabled?: boolean;
 
     noTimeImg?: boolean;
+
+    priceDisplay?: {
+      price: boolean;
+      agentPrice: boolean;
+      serviceCharge: boolean;
+    };
   }>(),
   {
-    isSelected: false,
+    action: false,
   },
 );
 </script>
@@ -57,7 +63,7 @@ withDefaults(
         </q-tooltip>
       </div>
       <div
-        v-if="isSelected === false"
+        v-if="action"
         class="col-1 relative-position"
         style="left: 10px; bottom: 10px"
       >
@@ -141,7 +147,7 @@ withDefaults(
       </q-avatar>
     </div>
 
-    <div :class="{ inactive: isDisabled }" class="column col">
+    <div :class="{ inactive: isDisabled }" class="column col full-width">
       <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
       <div class="flex justify-start text-bold">
         <div
@@ -155,14 +161,16 @@ withDefaults(
         </div>
       </div>
 
-      <div v-if="data?.type === 'product'" class="flex">
+      <div v-if="data?.type === 'product'" class="flex full-width">
         <div
           class="row full-width text-right"
           style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
         >
-          <div class="col-4">ราคาขาย</div>
+          <div class="col" v-if="priceDisplay?.price">ราคาขาย</div>
-          <div class="col-4">ราคาตัวแทน</div>
+          <div class="col" v-if="priceDisplay?.agentPrice">ราคาตัวแทน</div>
-          <div class="col-4">ราคาค่าดำเนินการ</div>
+          <div class="col" v-if="priceDisplay?.serviceCharge">
+            ราคาดำเนินการ
+          </div>
         </div>
 
         <div
@@ -170,20 +178,23 @@ withDefaults(
           style="margin-top: -5px"
         >
           <div
-            class="col-4 text-weight-bold"
+            class="col text-weight-bold"
             style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
+            v-if="priceDisplay?.price"
           >
             ฿{{ formatNumberDecimal(data?.price, 2) }}
           </div>
           <div
-            class="col-4 text-weight-bold"
+            class="col text-weight-bold"
             style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
+            v-if="priceDisplay?.agentPrice"
           >
             ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
           </div>
           <div
-            class="col-4"
+            class="col"
             style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
+            v-if="priceDisplay?.serviceCharge"
           >
             ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
           </div>

src/components/04_product-service/WorkManagementComponent.vue

@@ -15,12 +15,27 @@ const optionStore = useOptionStore();
 const { fetchListOfWork } = productServiceStore;
 const { workNameItems } = storeToRefs(productServiceStore);
 
-defineProps<{
+withDefaults(
-  workIndex: number;
+  defineProps<{
-  length: number;
+    workIndex: number;
-  index: number;
+    length: number;
-  readonly?: boolean;
+    index: number;
-}>();
+    readonly?: boolean;
+
+    priceDisplay?: {
+      price: boolean;
+      agentPrice: boolean;
+      serviceCharge: boolean;
+    };
+  }>(),
+  {
+    priceDisplay: () => ({
+      price: true,
+      agentPrice: true,
+      serviceCharge: true,
+    }),
+  },
+);
 
 const workName = defineModel<string>('workName');
 const attributes = defineModel<Attributes>('attributes', { required: true });
@@ -327,30 +342,51 @@ defineEmits<{
                     class="col-12 q-col-gutter-md row"
                     style="color: var(--teal-9)"
                   >
-                    <span class="col ellipsis price-orange text-weight-bold">
+                    <span
+                      v-if="priceDisplay?.price"
+                      class="col ellipsis price-orange text-weight-bold"
+                    >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('salePrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.price, 2) }}
-                      <q-tooltip>
+                      <q-tooltip
+                        anchor="bottom right"
+                        self="center right"
+                        :delay="300"
+                      >
                         ฿{{ formatNumberDecimal(product.price, 2) }}
                       </q-tooltip>
                     </span>
-                    <span class="col ellipsis price-purple text-weight-bold">
+                    <span
+                      v-if="priceDisplay?.agentPrice"
+                      class="col ellipsis price-purple text-weight-bold"
+                    >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('agentPrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
-                      <q-tooltip>
+                      <q-tooltip
+                        anchor="bottom right"
+                        self="center right"
+                        :delay="300"
+                      >
                         ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
                       </q-tooltip>
                     </span>
-                    <span class="col ellipsis price-pink column">
+                    <span
+                      v-if="priceDisplay?.serviceCharge"
+                      class="col ellipsis price-pink column"
+                    >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('processingPrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
-                      <q-tooltip>
+                      <q-tooltip
+                        anchor="bottom right"
+                        self="center right"
+                        :delay="300"
+                      >
                         ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                       </q-tooltip>
                     </span>

src/components/ProfileBanner.vue

@@ -176,7 +176,10 @@ const showOverlay = ref(false);
 
           <!-- icon -->
           <div class="row items-center q-pr-lg" style="z-index: 1">
-            <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
+            <span
+              v-if="useToggle && toggleTitle"
+              class="q-mr-md app-text-muted-2"
+            >
               {{ toggleTitle }}
             </span>
 

src/components/TreeComponent.vue

@@ -15,6 +15,7 @@ withDefaults(
     nodeKey?: string;
     labelKey?: string;
     childrenKey: string;
+    action?: boolean;
   }>(),
   {
     color: 'transparent',
@@ -123,6 +124,7 @@ defineEmits<{
             />
 
             <q-btn
+              v-if="action"
               icon="mdi-dots-vertical"
               :id="`btn-tree-dots-${node.name}`"
               size="sm"