fix: new service & work properties

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

@@ -106,25 +106,7 @@ defineEmits<{
       class="col-9"
       :label="$t('serviceName')"
       v-model="serviceName"
-    >
-      <template #prepend>
-        <q-btn
-          v-if="!readonly"
-          dense
-          unelevated
-          round
-          padding="0"
-          style="background-color: var(--surface-tab)"
-          @click="$emit('serviceProperties')"
-        >
-          <Icon
-            icon="basil:settings-adjust-solid"
-            width="24px"
-            style="color: var(--stone-7)"
     />
-        </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"

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import useOptionStore from 'src/stores/options';
+import { Attributes } from 'src/stores/product-service/types';
+import { Icon } from '@iconify/vue';
+
+const optionStore = useOptionStore();
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const serviceAttributes = defineModel<Attributes>('serviceAttributes', {
+  required: true,
+});
+
+defineEmits<{
+  (e: 'serviceProperties'): void;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">
+    • {{ $t(`formDialogTitleInformation`) }}
+    <div>
+      <q-btn
+        :disable="readonly"
+        dense
+        unelevated
+        outline
+        class="q-mt-sm q-px-sm"
+        color="primary"
+        @click="$emit('serviceProperties')"
+      >
+        <Icon
+          icon="basil:settings-adjust-solid"
+          width="24px"
+          class="q-mr-sm"
+          style="color: var(--brand-1)"
+        />
+        {{ $t('properties') }}
+      </q-btn>
+    </div>
+  </div>
+
+  <div class="col-9 row">
+    <div
+      v-if="serviceAttributes.additional.length > 0"
+      class="col q-gutter-sm row items-center"
+    >
+      <div
+        v-for="(p, index) in serviceAttributes.additional"
+        :key="index"
+        class="bordered q-px-sm surface-3"
+        style="border-radius: 6px"
+      >
+        {{ optionStore.mapOption(p.fieldName ?? '') }}
+      </div>
+    </div>
+
+    <div v-else class="col flex items-center app-text-muted">
+      {{ $t('noProperties') }}
+    </div>
+  </div>
+</template>

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

@@ -50,7 +50,7 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height">
-    <div class="col-1 app-text-muted row items-start">
+    <div class="app-text-muted row items-start">
       • {{ $t(`workInformation`) }}
       <q-btn
         v-if="!readonly"

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

@@ -21,7 +21,7 @@ defineProps<{
 }>();
 
 const workName = defineModel<string>('workName');
-const attributes = defineModel<Attributes>('attributes');
+const attributes = defineModel<Attributes>('attributes', { required: true });
 const productItems = defineModel<(ProductList & { nameEn: string })[]>(
   'productItems',
   {
@@ -85,22 +85,6 @@ defineEmits<{
               :style="`background-color:${readonly ? 'var(--surface-2)' : 'var(--surface-1); z-index: 2'}`"
               @click="() => (readonly ? '' : fetchListOfWork())"
             >
-              <q-btn
-                v-if="!readonly"
-                dense
-                unelevated
-                round
-                padding="0"
-                class="q-mr-sm"
-                style="background-color: var(--surface-tab)"
-                @click.stop="$emit('workProperties')"
-              >
-                <Icon
-                  icon="basil:settings-adjust-solid"
-                  width="24px"
-                  style="color: var(--stone-7)"
-                />
-              </q-btn>
               <span class="text-body2" style="color: var(--foreground)">
                 {{ $t('workNo') }} {{ index + 1 }} :
                 <span class="app-text-muted-2">
@@ -168,23 +152,57 @@ 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">
+        <!-- properties -->
+        <div class="bordered-t">
+          <div
+            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
+            style="background-color: hsla(var(--info-bg) / 0.1)"
+          >
+            <span>{{ $t('propertiesInWork') }} {{ workIndex + 1 }}</span>
+            <q-btn
+              v-if="!readonly"
+              id="btn-add-work-product"
+              flat
+              dense
+              padding="0"
+              style="color: hsl(var(--info-bg))"
+              @click.stop="$emit('workProperties')"
+            >
+              <Icon
+                icon="basil:settings-adjust-solid"
+                width="24px"
+                class="q-mr-sm"
+                style="color: hsl(var(--info-bg))"
+              />
+              {{ $t('properties') }}
+            </q-btn>
+          </div>
+
+          <div class="q-py-md q-px-lg full-width">
+            <div
+              v-if="attributes.additional.length > 0"
+              class="row items-center full-width surface-1 q-py-md q-px-sm q-gutter-sm"
+            >
+              <div
+                v-for="(p, index) in attributes.additional"
+                :key="index"
+                class="bordered q-px-sm surface-3"
+                style="border-radius: 6px"
+              >
+                {{ optionStore.mapOption(p.fieldName ?? '') }}
+              </div>
+            </div>
+            <div v-else class="app-text-muted">
+              {{ $t('noProperties') }}
+            </div>
+          </div>
+        </div>
+
+        <!-- product -->
+        <div class="bordered-t">
           <div
             class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
             style="background-color: hsla(var(--info-bg) / 0.1)"
@@ -203,7 +221,10 @@ defineEmits<{
             />
           </div>
 
-        <div class="q-py-md q-px-lg full-width q-gutter-y-sm">
+          <div
+            v-if="productItems.length > 0"
+            class="q-py-md q-px-lg full-width q-gutter-y-sm"
+          >
             <div
               v-for="(product, index) in productItems"
               :key="product.id"
@@ -258,7 +279,9 @@ defineEmits<{
                         :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
                       >
                         {{
-                        $i18n.locale === 'en-US' ? product.nameEn : product.name
+                          $i18n.locale === 'en-US'
+                            ? product.nameEn
+                            : product.name
                         }}
                         <q-tooltip>
                           {{
@@ -307,6 +330,10 @@ defineEmits<{
               />
             </div>
           </div>
+          <div v-else class="app-text-muted q-py-md q-px-lg">
+            {{ $t('noProduct') }}
+          </div>
+        </div>
       </div>
     </q-expansion-item>
     <div class="q-py-sm q-px-md bordered-t row items-center justify-between">

src/i18n/en-US/product-service.ts

@@ -49,6 +49,10 @@ export default {
   addWork: 'Add work',
 
   properties: 'Properties',
+  noProperties: 'No Properties',
+  serviceProperties: 'Service Properties',
+  workProperties: 'Work Properties',
+  propertiesInWork: 'Properties in work',
   text: 'Text',
   number: 'Number',
   date: 'Date',
@@ -61,4 +65,6 @@ export default {
   telMaxLength: 'Max Length',
   addSelection: 'Add Selection',
   selectAll: 'Select All',
+
+  noProduct: 'No Product',
 };

src/i18n/th-th/product-service.ts

@@ -49,6 +49,10 @@ export default {
   addWork: 'เพิ่มงานใหม่',
 
   properties: 'คุณสมบัติ',
+  noProperties: 'ยังไม่มีคุณสมบัติ',
+  serviceProperties: 'คุณสมบัติของบริการ',
+  workProperties: 'คุณสมบัติของงาน',
+  propertiesInWork: 'คุณสมบัติภายในงาน',
   text: 'ข้อความ',
   number: 'ตัวเลข',
   date: 'วันที่',
@@ -61,4 +65,6 @@ export default {
   telMaxLength: 'จำนวนหลัก',
   addSelection: 'เพิ่มตัวเลือก',
   selectAll: 'เลือกทั้งหมด',
+
+  noProduct: 'ยังไม่มีสินค้า',
 };

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

@@ -18,6 +18,7 @@ import FormServiceWork from 'src/components/04_product-service/FormServiceWork.v
 import ServiceProperties from 'src/components/04_product-service/ServiceProperties.vue';
 import WorkNameManagement from 'src/components/04_product-service/WorkNameManagement.vue';
 import useOptionStore from 'src/stores/options';
+import FormServiceProperties from 'src/components/04_product-service/FormServiceProperties.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -1789,6 +1790,7 @@ watch(currentStatus, async () => {
   <!-- add service -->
   <FormDialog
     no-address
+    no-app-box
     height="95vh"
     :title="$t('addService')"
     v-model:modal="dialogService"
@@ -1816,9 +1818,9 @@ watch(currentStatus, async () => {
       />
     </template>
 
-    <template #information>
+    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+      <div class="surface-1 rounded bordered q-pa-lg full-width row">
         <BasicInformation
-        v-if="currentServiceTab === 'serviceInformation'"
           dense
           service
           @service-properties="
@@ -1832,9 +1834,26 @@ watch(currentStatus, async () => {
           v-model:service-name-th="formDataProductService.name"
           @input-file="inputFile.click()"
         />
+      </div>
+      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
+        <FormServiceProperties
+          v-model:service-attributes="formDataProductService.attributes"
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="currentServiceTab === 'workInformation'"
+      class="surface-1 rounded bordered col-10 q-pa-lg"
+    >
       <FormServiceWork
         v-model:work-items="workItems"
-        v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="
           async (index) => {
@@ -1856,7 +1875,7 @@ watch(currentStatus, async () => {
           }
         "
       />
-    </template>
+    </div>
   </FormDialog>
 
   <!-- service properties -->
@@ -1914,6 +1933,7 @@ watch(currentStatus, async () => {
   <!-- edit service -->
   <FormDialog
     no-address
+    no-app-box
     :edit="!(formDataProductService.status === 'INACTIVE')"
     height="95vh"
     :isEdit="infoServiceEdit"
@@ -1956,7 +1976,8 @@ watch(currentStatus, async () => {
       />
     </template>
 
-    <template #information>
+    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+      <div class="surface-1 rounded bordered q-pa-lg full-width row">
         <BasicInformation
           :readonly="!infoServiceEdit"
           v-if="currentServiceTab === 'serviceInformation'"
@@ -1968,12 +1989,30 @@ 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"
           @input-file="inputFile.click()"
         />
+      </div>
+      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
+        <FormServiceProperties
+          :readonly="!infoServiceEdit"
+          v-model:service-attributes="formDataProductService.attributes"
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="currentServiceTab === 'workInformation'"
+      class="surface-1 rounded bordered col-10 q-pa-lg"
+    >
       <FormServiceWork
         :readonly="!infoServiceEdit"
         v-model:work-items="workItems"
@@ -1995,7 +2034,7 @@ watch(currentStatus, async () => {
           }
         "
       />
-    </template>
+    </div>
   </FormDialog>
 </template>