feat: manage work name & work properties

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

@@ -16,6 +16,7 @@ import ProfileUpload from 'src/components/ProfileUpload.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
 import FormServiceWork from 'src/components/04_product-service/FormServiceWork.vue';
 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 { Status } from 'src/stores/types';
@@ -110,8 +111,11 @@ const product = ref<ProductList[]>();
 const service = ref<Service[]>();
 
 const productAndServiceTab = ref<string>('all');
+const manageWorkNameDialog = ref<boolean>(false);
 const previousValue = ref();
 
+const propertiesOption = ref();
+
 const formDataGroup = ref<ProductGroupCreate>({
   remark: '',
   detail: '',
@@ -528,6 +532,18 @@ async function submitGroup() {
   clearFormGroup();
 }
 
+function openPropertiesDialog(type: 'service' | 'work') {
+  if (type === 'service') {
+    propertiesOption.value =
+      optionStore.globalOption.tha.servicePropertiesField;
+  }
+
+  if (type === 'work') {
+    propertiesOption.value = optionStore.globalOption.tha.workPropertiesField;
+  }
+  propertiesDialog.value = true;
+}
+
 onMounted(async () => {
   const resStatsGroup = await fetchStatsProductGroup();
   const resStatsType = await fetchStatsProductType();
@@ -1378,12 +1394,14 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'serviceInformation'"
         dense
         service
-        @service-properties="propertiesDialog = true"
+        @service-properties="openPropertiesDialog('service')"
       />
       <FormServiceWork
         v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="dialogTotalProduct = true"
+        @manage-work-name="manageWorkNameDialog = true"
+        @work-properties="openPropertiesDialog('work')"
       />
     </template>
   </FormDialog>
@@ -1394,18 +1412,26 @@ watch(currentStatus, async () => {
     no-footer
     no-app-box
     width="75%"
-    height="1000px"
     title="Properties"
     v-model:modal="propertiesDialog"
   >
     <ServiceProperties
-      v-model:properties-option="
-        optionStore.globalOption.tha.servicePropertiesField
-      "
+      v-model:properties-option="propertiesOption"
       v-model:form-service-properties="formDataProductService.attributes"
       @add-properties="console.log('')"
     />
   </FormDialog>
+
+  <!-- manage work name -->
+  <FormDialog
+    no-address
+    no-app-box
+    width="65%"
+    title="จัดการ"
+    v-model:modal="manageWorkNameDialog"
+  >
+    <WorkNameManagement />
+  </FormDialog>
 </template>
 
 <style scoped>