feat: by ค่า

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

@@ -8,46 +8,51 @@ import WorkManagementComponent from './WorkManagementComponent.vue';
 
 const { t } = useI18n();
 
-const serviceName = defineModel<string>('serviceName');
+import { WorkItems, ProductList } from 'src/stores/product-service/types';
 
-const workItems = ref([
+const serviceName = defineModel<string>('serviceName');
-  {
+const product = defineModel<ProductList[]>();
-    id: '1',
+
-    product: [
+const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
-      {
+
-        id: '1',
+// const workItems = ref([
-        label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+//   {
-        labelEn: '2 year work permit fee',
+//     id: '1',
-        code: 'AC101',
+//     product: [
-        price: 1200,
+//       {
-        time: '14',
+//         id: '1',
-      },
+//         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี 555',
-    ],
+//         labelEn: '2 year work permit fee',
-  },
+//         code: 'AC101',
-  {
+//         price: 1200,
-    id: '2',
+//         time: '14',
-    product: [
+//       },
-      {
+//     ],
-        id: '1',
+//   },
-        label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+//   {
-        labelEn: '2 year work permit fee',
+//     id: '2',
-        code: 'AC101',
+//     product: [
-        price: 1200,
+//       {
-        time: '14',
+//         id: '1',
-      },
+//         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
-      {
+//         labelEn: '2 year work permit fee',
-        id: '1',
+//         code: 'AC101',
-        label:
+//         price: 1200,
-          'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
+//         time: '14',
-        labelEn:
+//       },
-          'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
+//       {
-        code: 'AC102',
+//         id: '1',
-        price: 1200,
+//         label:
-        time: '14',
+//           'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
-      },
+//         labelEn:
-    ],
+//           'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
-  },
+//         code: 'AC102',
-]);
+//         price: 1200,
+//         time: '14',
+//       },
+//     ],
+//   },
+// ]);
 
 defineProps<{
   dense?: boolean;
@@ -57,15 +62,16 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (e: 'addProduct'): void;
+  (e: 'addProduct', index: number): void;
   (e: 'manageWorkName'): void;
-  (e: 'workProperties'): void;
+  (e: 'workProperties', index: number): void;
 }>();
 
 function addWork() {
-  console.log('hi');
   workItems.value.push({
     id: '',
+    name: '',
+    attributes: { additional: [] },
     product: [],
   });
 }
@@ -108,8 +114,9 @@ function confirmDelete(items: unknown[], index: number) {
         :index="index"
         :length="workItems.length"
         :workIndex="index"
+        v-model:work-name="workItems[index].name"
         v-model:product-items="work.product"
-        @add-product="$emit('addProduct')"
+        @add-product="$emit('addProduct', index)"
         @move-work-up="moveItemUp(workItems, index)"
         @move-work-down="moveItemDown(workItems, index)"
         @delete-work="confirmDelete(workItems, index)"
@@ -117,7 +124,7 @@ function confirmDelete(items: unknown[], index: number) {
         @move-product-down="moveItemDown"
         @delete-product="confirmDelete"
         @manage-work-name="$emit('manageWorkName')"
-        @work-properties="$emit('workProperties')"
+        @work-properties="$emit('workProperties', index)"
       ></WorkManagementComponent>
     </div>
 

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

@@ -2,6 +2,8 @@
 import { Icon } from '@iconify/vue';
 import { formatNumberDecimal } from 'src/stores/utils';
 
+import { ProductList } from 'src/stores/product-service/types';
+
 defineProps<{
   workIndex: number;
   length: number;
@@ -9,16 +11,20 @@ defineProps<{
 }>();
 
 const workName = defineModel<string>('workName');
-const productItems = defineModel<
+const productItems = defineModel<(ProductList & { nameEn: string })[]>(
+  'productItems',
   {
-    id: string;
+    required: true,
-    label: string;
+  },
-    labelEn: string;
+);
-    code: string;
+
-    price: number;
+const testName = [
-    time: string;
+  'ทดสอบการขาย 1',
-  }[]
+  'ทดสอบการขาย 2',
->('productItems', { required: true });
+  'ทดสอบการขาย 3',
+  'ทดสอบการขาย 4',
+  'ทดสอบการขาย 5',
+];
 
 defineEmits<{
   (e: 'moveWorkUp'): void;
@@ -87,7 +93,9 @@ defineEmits<{
             </q-btn>
             <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
               {{ $t('workNo') }} {{ index + 1 }} :
-              <span class="app-text-muted-2">{{ $t('workName') }}</span>
+              <span class="app-text-muted-2">
+                {{ $t('workName') + ' ' + workName }}
+              </span>
             </span>
 
             <q-menu fit anchor="bottom left" self="top left">
@@ -109,7 +117,12 @@ defineEmits<{
                   </q-btn>
                 </div>
               </q-item>
-              <q-item clickable>
+              <q-item
+                @click="workName = item"
+                clickable
+                v-for="item in testName"
+                :key="item"
+              >
                 <div class="full-width flex items-center">
                   <q-icon
                     v-if="false"
@@ -125,7 +138,7 @@ defineEmits<{
                     style="color: hsl(var(--text-mute))"
                     class="q-mr-sm"
                   />
-                  {{ 'asd' }}
+                  {{ item }}
                 </div>
               </q-item>
             </q-menu>
@@ -214,15 +227,13 @@ defineEmits<{
                       :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
                     >
                       {{
-                        $i18n.locale === 'en-US'
+                        $i18n.locale === 'en-US' ? product.nameEn : product.name
-                          ? product.labelEn
-                          : product.label
                       }}
                       <q-tooltip>
                         {{
                           $i18n.locale === 'en-US'
-                            ? product.labelEn
+                            ? product.nameEn
-                            : product.label
+                            : product.name
                         }}
                       </q-tooltip>
                     </span>
@@ -247,7 +258,7 @@ defineEmits<{
                   {{ $t('processTime') }}
                 </span>
                 <span class="col-3 text-caption app-text-muted-2">
-                  {{ product.time }} {{ $t('day') }}
+                  {{ product.process }} {{ $t('day') }}
                 </span>
               </div>
             </div>

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

@@ -33,6 +33,8 @@ import {
   ServiceCreate,
   Service,
   ServiceById,
+  WorkItems,
+  Attributes,
 } from 'src/stores/product-service/types';
 
 const productServiceStore = useProductServiceStore();
@@ -81,6 +83,7 @@ const stat = ref<
 
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
+import { time } from 'console';
 
 const { t } = useI18n();
 
@@ -100,7 +103,9 @@ const infoProductEdit = ref<boolean>(false);
 const imageProduct = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 
-const groupName = ref<string>('งาน MOU');
+const pathGroupName = ref<string>('');
+const pathTypeName = ref<string>('');
+
 const dialogProductServiceType = ref<boolean>(false);
 const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
@@ -156,11 +161,16 @@ const serviceTab = [
     label: 'workInformation',
   },
 ];
+
+const workItems = ref<WorkItems[]>([]);
+
 const currentServiceTab = ref('serviceInformation');
 const propertiesDialog = ref<boolean>(false);
 
 const selectProduct = ref<ProductList[]>([]);
 
+const currentWorkIndex = ref<number>(0);
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
@@ -532,6 +542,11 @@ async function submitGroup() {
   clearFormGroup();
 }
 
+const tempValueProperties = ref<Attributes>({
+  additional: [],
+});
+const currentPropertiesMode = ref<'service' | 'work'>('service');
+
 function openPropertiesDialog(type: 'service' | 'work') {
   if (type === 'service') {
     propertiesOption.value =
@@ -541,6 +556,8 @@ function openPropertiesDialog(type: 'service' | 'work') {
   if (type === 'work') {
     propertiesOption.value = optionStore.globalOption.tha.workPropertiesField;
   }
+
+  currentPropertiesMode.value = type;
   propertiesDialog.value = true;
 }
 
@@ -676,7 +693,7 @@ watch(currentStatus, async () => {
           class="q-mr-md"
         />
         <div class="text-h6 app-text-muted q-mr-sm hover-underline">
-          {{ groupName }}
+          {{ pathGroupName }}
         </div>
         <div class="text-h6 app-text-muted q-mx-sm">/</div>
         <div class="text-h6 text-weight-bold">
@@ -696,11 +713,11 @@ watch(currentStatus, async () => {
           class="q-mr-md"
         />
         <div class="text-h6 app-text-muted q-mr-sm hover-underline">
-          {{ groupName }}
+          {{ pathGroupName }}
         </div>
         <div class="text-h6 app-text-muted q-mx-sm">/</div>
         <div class="text-h6 app-text-muted q-mr-sm hover-underline">
-          {{ 'บริการพิสูจน์สัญชาติ' }}
+          {{ pathTypeName }}
         </div>
         <div class="text-h6 app-text-muted q-mx-sm">/</div>
         <div class="text-h6 text-weight-bold">
@@ -843,6 +860,7 @@ watch(currentStatus, async () => {
               "
               @on-click="
                 async () => {
+                  pathTypeName = v.name;
                   currentIdType = v.id;
                   productMode = 'service';
                   await fetchListOfProduct(currentIdType);
@@ -885,6 +903,7 @@ watch(currentStatus, async () => {
               "
               @on-click="
                 async () => {
+                  pathGroupName = v.name;
                   currentId = v.id;
                   productMode = 'type';
                   await fetchListType();
@@ -917,7 +936,7 @@ watch(currentStatus, async () => {
                     : 'app-text-muted'
                 "
               >
-                ทั้งหมด
+                {{ $t('all') }}
                 <q-badge
                   class="rounded q-ml-sm"
                   :class="
@@ -939,7 +958,7 @@ watch(currentStatus, async () => {
                     : 'app-text-muted'
                 "
               >
-                บริการ
+                {{ $t('service') }}
                 <q-badge
                   class="rounded q-ml-sm"
                   :class="
@@ -960,7 +979,7 @@ watch(currentStatus, async () => {
                     : 'app-text-muted'
                 "
               >
-                สินค้า
+                {{ $t('product') }}
                 <q-badge
                   class="rounded q-ml-sm"
                   :class="
@@ -1161,7 +1180,15 @@ watch(currentStatus, async () => {
     title="สินค้าทั้งหมด"
     :submit="
       () => {
-        console.log('submit');
+        selectProduct.forEach((i) => {
+          workItems[currentWorkIndex].product.push({
+            ...i,
+            nameEn: '',
+          });
+        });
+
+        dialogTotalProduct = false;
+        selectProduct = [];
       }
     "
     :close="() => {}"
@@ -1394,14 +1421,31 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'serviceInformation'"
         dense
         service
-        @service-properties="openPropertiesDialog('service')"
+        @service-properties="
+          () => {
+            tempValueProperties = formDataProductService.attributes;
+            openPropertiesDialog('service');
+          }
+        "
       />
       <FormServiceWork
+        v-model:work-items="workItems"
         v-if="currentServiceTab === 'workInformation'"
         dense
-        @addProduct="dialogTotalProduct = true"
+        @addProduct="
+          (index) => {
+            currentWorkIndex = index;
+            dialogTotalProduct = true;
+          }
+        "
         @manage-work-name="manageWorkNameDialog = true"
-        @work-properties="openPropertiesDialog('work')"
+        @work-properties="
+          (index) => {
+            currentWorkIndex = index;
+            tempValueProperties = workItems[index].attributes;
+            openPropertiesDialog('work');
+          }
+        "
       />
     </template>
   </FormDialog>
@@ -1409,15 +1453,31 @@ watch(currentStatus, async () => {
   <!-- service properties -->
   <FormDialog
     no-address
-    no-footer
     no-app-box
     width="75%"
     title="Properties"
     v-model:modal="propertiesDialog"
+    :submit="
+      () => {
+        if (currentPropertiesMode === 'service') {
+          formDataProductService.attributes = tempValueProperties;
+        }
+        if (currentPropertiesMode === 'work') {
+          workItems[currentWorkIndex].attributes = tempValueProperties;
+        }
+
+        propertiesDialog = false;
+      }
+    "
+    :close="
+      () => {
+        propertiesDialog = false;
+      }
+    "
   >
     <ServiceProperties
       v-model:properties-option="propertiesOption"
-      v-model:form-service-properties="formDataProductService.attributes"
+      v-model:form-service-properties="tempValueProperties"
       @add-properties="console.log('')"
     />
   </FormDialog>