From 22f7329267efb8a3a0d8c008427189b91bc7cb9c Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 11 Jun 2024 15:04:01 +0700
Subject: [PATCH] feat: createProductService

---
 src/pages/04_product-service/MainPage.vue | 56 ++++++++++++++++++++---
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 0d29377b..e2e14d83 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -8,6 +8,21 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import BasicInformation from 'src/components/04_product-service/BasicInformation.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import { dialog } from 'src/stores/utils';
+
+import useProductServiceStore from 'src/stores/product-service';
+import {
+  ProductGroup,
+  ProductGroupCreate,
+} from 'src/stores/product-service/types';
+
+const productServiceStore = useProductServiceStore();
+
+const {
+  fetchStatsProductGroup,
+  fetchListProductService,
+  createProductService,
+} = productServiceStore;
+
 const cardData = ref({
   title: 'งาน MCU',
   subtitle: 'G00000000001',
@@ -37,6 +52,7 @@ const stat = ref<
 ]);
 
 import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
 
 const { t } = useI18n();
 
@@ -47,16 +63,15 @@ const dialogInputForm = ref<boolean>(false);
 const isType = ref<boolean>(false);
 const groupName = ref<string>('test');
 
-const formData = ref({
+const productGroup = ref<ProductGroup[]>();
+
+const formData = ref<ProductGroupCreate>({
   remark: '',
   detail: '',
   name: '',
   code: '',
 });
 
-async function submitGroup() {
-  console.log(formData.value);
-}
 async function submitType() {
   console.log(formData.value);
 }
@@ -76,6 +91,36 @@ async function deleteProductById() {
     cancel: () => {},
   });
 }
+
+function clearForm() {
+  formData.value = {
+    remark: '',
+    detail: '',
+    name: '',
+    code: '',
+  };
+
+  dialogInputForm.value = false;
+}
+
+async function submitGroup() {
+  await createProductService(formData.value);
+
+  await fetchList();
+  clearForm();
+}
+
+async function fetchList() {
+  const res = await fetchListProductService();
+
+  if (res) {
+    productGroup.value = res;
+  }
+}
+
+onMounted(async () => {
+  await fetchList();
+});
 </script>
 
 <template>
@@ -211,7 +256,7 @@ async function deleteProductById() {
     :title="$t('customerEmployerAdd')"
     :submit="
       () => {
-        console.log('submit');
+        submitGroup();
       }
     "
     :close="() => {}"
@@ -222,7 +267,6 @@ async function deleteProductById() {
         :isType="isType"
         v-model:remark="formData.remark"
         v-model:name="formData.name"
-        v-model:code="formData.code"
         v-model:detail="formData.detail"
       />
     </template>