feat: show option propertie (service)

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

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { Attributes } from 'src/stores/product-service/types';
+import useOptionStore from 'src/stores/options';
+
+const optionStore = useOptionStore();
 
 const remark = defineModel<string>('remark');
 const detail = defineModel<string>('detail');
@@ -9,6 +13,7 @@ const code = defineModel<string>('code');
 const serviceCode = defineModel<string>('serviceCode');
 const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
+const serviceAttributes = defineModel<Attributes>('serviceAttributes');
 
 defineProps<{
   dense?: boolean;
@@ -120,6 +125,16 @@ defineEmits<{
         </q-btn>
       </template>
     </q-input>
+    <div v-if="readonly && serviceAttributes" class="col-12 q-gutter-x-md">
+      <span
+        v-for="(p, index) in serviceAttributes.additional"
+        :key="index"
+        class="bordered q-px-sm surface-tab"
+        style="border-radius: 6px"
+      >
+        {{ optionStore.mapOption(p.fieldName ?? '') }}
+      </span>
+    </div>
     <q-input
       id="input-service-description"
       for="input-service-description"

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

@@ -5,10 +5,10 @@ import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
 import NoData from 'src/components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 
-const { t } = useI18n();
-
 import { WorkItems } from 'src/stores/product-service/types';
 
+const { t } = useI18n();
+
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
 
 defineProps<{
@@ -75,6 +75,7 @@ function confirmDelete(items: unknown[], index: number) {
         :readonly="readonly"
         v-model:work-name="workItems[index].name"
         v-model:product-items="work.product"
+        v-model:attributes="work.attributes"
         @add-product="$emit('addProduct', index)"
         @move-work-up="moveItemUp(workItems, index)"
         @move-work-down="moveItemDown(workItems, index)"

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

@@ -3,10 +3,12 @@ import { Icon } from '@iconify/vue';
 import { formatNumberDecimal } from 'src/stores/utils';
 
 import useProductServiceStore from 'src/stores/product-service';
-import { ProductList } from 'src/stores/product-service/types';
+import useOptionStore from 'src/stores/options';
+import { Attributes, ProductList } from 'src/stores/product-service/types';
 import { storeToRefs } from 'pinia';
 
 const productServiceStore = useProductServiceStore();
+const optionStore = useOptionStore();
 
 const { fetchListOfWork } = productServiceStore;
 const { workNameItems } = storeToRefs(productServiceStore);
@@ -19,6 +21,7 @@ defineProps<{
 }>();
 
 const workName = defineModel<string>('workName');
+const attributes = defineModel<Attributes>('attributes');
 const productItems = defineModel<(ProductList & { nameEn: string })[]>(
   'productItems',
   {
@@ -50,6 +53,7 @@ defineEmits<{
       header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
     >
       <template v-slot:header>
+        <div class="column full-width">
           <div class="row items-center q-py-sm full-width" @click.stop>
             <q-btn
               v-if="!readonly"
@@ -164,6 +168,21 @@ defineEmits<{
               <q-tooltip>{{ $t('delete') }}</q-tooltip>
             </q-btn>
           </div>
+
+          <div
+            v-if="readonly && attributes"
+            class="row q-pb-md q-px-md q-gutter-x-md"
+          >
+            <span
+              v-for="(p, index) in attributes.additional"
+              :key="index"
+              class="bordered q-px-sm surface-tab"
+              style="border-radius: 6px"
+            >
+              {{ optionStore.mapOption(p.fieldName ?? '') }}
+            </span>
+          </div>
+        </div>
       </template>
       <div class="surface-2">
         <div
@@ -318,7 +337,9 @@ defineEmits<{
 :deep(
     .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
   ) {
+  justify-content: start !important;
   padding-right: 8px !important;
+  padding-top: 16px;
   min-width: 0px;
 }
 </style>

src/pages/04_product-service/MainPage.vue

@@ -1881,6 +1881,7 @@ watch(currentStatus, async () => {
             openPropertiesDialog('service');
           }
         "
+        v-model:service-attributes="formDataProductService.attributes"
         v-model:service-code="formDataProductService.code"
         v-model:service-description="formDataProductService.detail"
         v-model:service-name-th="formDataProductService.name"

src/stores/options/index.ts

@@ -4,8 +4,21 @@ import { defineStore } from 'pinia';
 const useOptionStore = defineStore('optionStore', () => {
   const globalOption = ref();
 
+  function mapOption(value: string) {
+    for (const category in globalOption.value) {
+      if (globalOption.value.hasOwnProperty(category)) {
+        const option = globalOption.value[category].find(
+          (opt: { value: string }) => opt.value === value,
+        );
+        if (option) return option.label;
+      }
+    }
+  }
+
   return {
     globalOption,
+
+    mapOption,
   };
 });