feat: แก้ไขและลบ บริการ

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

@@ -63,6 +63,7 @@ const {
   fetchListServiceById,
   createService,
   deleteService,
+  editService,
 } = productServiceStore;
 
 import ItemCard from 'src/components/ItemCard.vue';
@@ -92,13 +93,17 @@ const searchTotalProduct = ref<string>('');
 
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
+
 const dialogInputForm = ref<boolean>(false);
 const dialogProduct = ref<boolean>(false);
 const dialogService = ref<boolean>(false);
 const dialogProductEdit = ref<boolean>(false);
+const dialogServiceEdit = ref<boolean>(false);
+
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
 const infoProductEdit = ref<boolean>(false);
+const infoServiceEdit = ref<boolean>(false);
 
 const imageProduct = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
@@ -332,6 +337,8 @@ async function deleteServiceById(serviceId?: string) {
       await deleteService(serviceId ?? currentIdService.value);
 
       await fetchListOfService();
+
+      dialogServiceEdit.value = false;
     },
     cancel: () => {},
   });
@@ -430,6 +437,20 @@ async function assignFormDataProductService(id: string) {
         ),
       });
     });
+
+    workItems.value = res.work.map((item) => {
+      return {
+        id: item.id,
+        name: item.name,
+        attributes: item.attributes,
+        product: item.productOnWork.map((productOnWorkItem) => {
+          return {
+            ...productOnWorkItem.product,
+            nameEn: '',
+          };
+        }),
+      };
+    });
   }
 }
 
@@ -490,11 +511,15 @@ function clearFormService() {
     work: [],
   };
 
+  workItems.value = [];
   selectProduct.value = [];
   dialogService.value = false;
+  dialogServiceEdit.value = false;
 }
 
 function assignFormDataProductServiceCreate() {
+  formDataProductService.value.work = [];
+
   workItems.value.forEach((item) => {
     formDataProductService.value.work.push({
       name: item.name,
@@ -506,9 +531,22 @@ function assignFormDataProductServiceCreate() {
 
 async function submitService() {
   assignFormDataProductServiceCreate();
-  const res = await createService(formDataProductService.value);
-  if (res) {
-    await fetchListOfService();
+  formDataProductService.value.image = imageProduct.value;
+
+  if (dialogService.value) {
+    const res = await createService(formDataProductService.value);
+    if (res) {
+      await fetchListOfService();
+    }
+  }
+
+  if (dialogServiceEdit.value) {
+    const res = await editService(currentIdService.value, {
+      ...formDataProductService.value,
+    });
+    if (res) {
+      await fetchListOfService();
+    }
   }
 
   clearFormService();
@@ -1126,25 +1164,18 @@ watch(currentStatus, async () => {
               :created-at="i.createdAt"
               @menuViewDetail="
                 () => {
-                  currentIdProduct = i.id;
+                  currentIdService = i.id;
+                  infoServiceEdit = false;
                   assignFormDataProductService(i.id);
-                  dialogProductEdit = true;
+                  dialogServiceEdit = true;
                 }
               "
               @menuEdit="
                 () => {
-                  currentIdProduct = i.id;
-                  infoProductEdit = true;
+                  currentIdService = i.id;
+                  infoServiceEdit = true;
                   assignFormDataProductService(i.id);
-                  dialogProductEdit = true;
-                }
-              "
-              @viewDetail="
-                () => {
-                  currentIdProduct = i.id;
-                  infoProductEdit = false;
-                  assignFormDataProductService(i.id);
-                  dialogProductEdit = true;
+                  dialogServiceEdit = true;
                 }
               "
             />
@@ -1289,6 +1320,10 @@ watch(currentStatus, async () => {
             :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
             :isSelected="true"
             :data="i"
+            :code="i.code"
+            :price="i.price"
+            :process="i.process"
+            :id="i.id"
             typeProduct="product"
             :title="i.name"
             :status="i.status === 'INACTIVE' ? true : false"
@@ -1562,6 +1597,84 @@ watch(currentStatus, async () => {
   >
     <WorkNameManagement />
   </FormDialog>
+
+  <!-- edit service -->
+  <FormDialog
+    no-address
+    edit
+    :isEdit="infoServiceEdit"
+    :title="$t('service', { msg: formDataProductService.name })"
+    v-model:modal="dialogServiceEdit"
+    v-model:tabs-list="serviceTab"
+    v-model:current-tab="currentServiceTab"
+    :submit="
+      () => {
+        submitService();
+      }
+    "
+    :close="
+      () => {
+        clearFormService();
+        dialogServiceEdit = false;
+      }
+    "
+    :edit-data="
+      () => {
+        infoServiceEdit = true;
+      }
+    "
+    :undo="() => (infoServiceEdit = false)"
+    :delete-data="() => deleteServiceById()"
+  >
+    <template #prepend>
+      <ProfileUpload
+        isService
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <template #information>
+      <BasicInformation
+        :readonly="!infoServiceEdit"
+        v-if="currentServiceTab === 'serviceInformation'"
+        dense
+        service
+        @service-properties="
+          () => {
+            tempValueProperties = formDataProductService.attributes;
+            openPropertiesDialog('service');
+          }
+        "
+        v-model:service-code="formDataProductService.code"
+        v-model:service-description="formDataProductService.detail"
+        v-model:service-name-th="formDataProductService.name"
+        @input-file="inputFile.click()"
+      />
+      <FormServiceWork
+        :readonly="!infoServiceEdit"
+        v-model:work-items="workItems"
+        v-if="currentServiceTab === 'workInformation'"
+        dense
+        @addProduct="
+          (index) => {
+            currentWorkIndex = index;
+            dialogTotalProduct = true;
+          }
+        "
+        @manage-work-name="manageWorkNameDialog = true"
+        @work-properties="
+          (index) => {
+            currentWorkIndex = index;
+            tempValueProperties = workItems[index].attributes;
+            openPropertiesDialog('work');
+          }
+        "
+      />
+    </template>
+  </FormDialog>
 </template>
 
 <style scoped>