API จัดการตำแหน่งติดเงื่อนไข

src/modules/19_condition/components/DialogCondition.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import type { PropType } from "vue";
+import type { DataPositionCondition } from "@/modules/19_condition/interface/response/Main";
+import type { FormPositionCondition } from "@/modules/19_condition/interface/request/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
@@ -15,10 +19,13 @@ const { showLoader, hideLoader, messageError, success, dialogConfirm } =
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   fetchData: { type: Function, required: true },
-  dataCondition: { type: Object, required: true },
+  dataCondition: {
+    type: Object as PropType<DataPositionCondition | undefined>,
+    required: true,
+  },
 });
 
-const formData = reactive({
+const formData = reactive<FormPositionCondition>({
   isCondition: false,
   conditionReason: "",
 });
@@ -31,22 +38,34 @@ function onCloseDialog() {
 
 function onSubmit() {
   dialogConfirm($q, async () => {
-    // showLoader();
-    // await http
-    //   .put(config.API.รอAPI, formData)
-    //   .then(async () => {
-    //     await props.fetchData?.();
-    //     onCloseDialog();
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    await http
+      .put(
+        config.API.positionCondition + `/${props?.dataCondition?.id}`,
+        formData
+      )
+      .then(async () => {
+        await props.fetchData?.();
+        onCloseDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
+
+watch(modal, () => {
+  if (modal.value) {
+    if (props.dataCondition) {
+      formData.isCondition = props.dataCondition.isCondition;
+      formData.conditionReason = props.dataCondition.conditionReason;
+    }
+  }
+});
 </script>
 
 <template>