feat: แก้ไข และ ลบ ของ Product

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

@@ -53,6 +53,8 @@ const {
   fetchStatsProduct,
   fetchListProduct,
   createProduct,
+  editProduct,
+  deleteProduct,
 
   fetchListService,
   fetchListServiceById,
@@ -87,8 +89,11 @@ 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 statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
+const infoProductEdit = ref<boolean>(false);
+
 const imageProduct = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 
@@ -151,6 +156,7 @@ const propertiesDialog = ref<boolean>(false);
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
+const currentIdProduct = ref<string>('');
 
 const resultSearchGroup = ref<ProductGroup[]>();
 const resultSearchType = ref<(ProductGroup & { productGroupId: string })[]>();
@@ -297,6 +303,27 @@ async function deleteServiceById(serviceId?: string) {
   });
 }
 
+async function deleteTypeOfProduct(id?: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('deleteConfirmMessage'),
+    action: async () => {
+      await deleteProduct(id ?? currentIdProduct.value);
+      await fetchListOfProduct(currentIdType.value);
+
+      dialogProductEdit.value = false;
+
+      stat.value[3].count = stat.value[3].count - 1;
+    },
+    cancel: () => {},
+  });
+}
+
+// type or group
 async function deleteProductById(productId?: string) {
   dialog({
     color: 'negative',
@@ -413,6 +440,7 @@ function clearFormProduct() {
   };
 
   dialogProduct.value = false;
+  dialogProductEdit.value = false;
 }
 
 function clearFormService() {
@@ -443,10 +471,16 @@ async function submitProduct() {
     formDataProduct.value.image = imageProduct.value;
   }
 
-  const res = await createProduct(formDataProduct.value);
+  if (dialogProduct.value) {
+    const res = await createProduct(formDataProduct.value);
 
-  if (res) {
-    stat.value[3].count = stat.value[3].count + 1;
+    if (res) {
+      stat.value[3].count = stat.value[3].count + 1;
+    }
+  }
+
+  if (dialogProductEdit.value) {
+    await editProduct(currentIdProduct.value, formDataProduct.value);
   }
 
   clearFormProduct();
@@ -528,7 +562,7 @@ watch(currentStatus, async () => {
     ></q-fab-action>
     <q-fab-action
       v-if="productMode === 'service'"
-      label="เพิ่มสินค้า"
+      :label="$t('buttonAddProduct')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--green-11-hsl))"
@@ -972,7 +1006,28 @@ watch(currentStatus, async () => {
               :price="i.price"
               :process="i.process"
               :id="i.id"
-              @viewDetail="() => {}"
+              @menuViewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @menuEdit="
+                () => {
+                  currentIdProduct = i.id;
+                  infoProductEdit = true;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @viewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
             />
           </div>
         </div>
@@ -1089,7 +1144,7 @@ watch(currentStatus, async () => {
     v-model:modal="dialogProduct"
     noAddress
     noAppBox
-    title="เพิ่มสินค้า"
+    :title="$t('buttonAddProduct')"
     :submit="
       () => {
         submitProduct();
@@ -1132,10 +1187,19 @@ watch(currentStatus, async () => {
 
   <!-- edit product -->
   <FormDialog
-    v-model:modal="dialogProduct"
+    edit
+    :isEdit="infoProductEdit"
+    v-model:modal="dialogProductEdit"
     noAddress
     noAppBox
-    title="แก้ไข"
+    :title="$t('editProduct')"
+    :editData="() => (infoProductEdit = true)"
+    :undo="() => (infoProductEdit = false)"
+    :deleteData="
+      () => {
+        deleteTypeOfProduct();
+      }
+    "
     :submit="
       () => {
         submitProduct();
@@ -1143,7 +1207,7 @@ watch(currentStatus, async () => {
     "
     :close="
       () => {
-        dialogProduct = false;
+        dialogProductEdit = false;
       }
     "
   >
@@ -1159,6 +1223,7 @@ watch(currentStatus, async () => {
 
     <AppBox class="col-10" bordered>
       <BasicInfoProduct
+        :readonly="!infoProductEdit"
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
         v-model:name="formDataProduct.name"
@@ -1168,6 +1233,7 @@ watch(currentStatus, async () => {
         separator
       />
       <PriceDataComponent
+        :readonly="!infoProductEdit"
         v-model:price="formDataProduct.price"
         v-model:agent-price="formDataProduct.agentPrice"
         v-model:service-charge="formDataProduct.serviceCharge"

src/stores/product-service/index.ts

@@ -326,14 +326,23 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     }
   }
 
-  async function editProduct(productId: string, data: ProductUpdate) {
-    const { ...payload } = data;
+  async function editProduct(productId: string, data: ProductCreate) {
+    const { image, code, ...payload } = data;
 
-    const res = await api.put<ProductGroupUpdate>(`/product/${productId}`, {
-      ...payload,
-    });
+    const res = await api.put<ProductCreate & { imageUploadUrl: string }>(
+      `/product/${productId}`,
+      {
+        ...payload,
+      },
+    );
 
-    if (!res) return false;
+    image &&
+      (await axios
+        .put(res.data.imageUploadUrl, image, {
+          headers: { 'Content-Type': image.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e)));
 
     if (res.status === 200) {
       return res.data;

src/stores/product-service/types.ts

@@ -110,6 +110,7 @@ export interface ProductCreate {
 }
 
 export interface ProductUpdate {
+  productTypeId: string;
   remark: string;
   serviceCharge: number;
   agentPrice: number;