API workflow

src/components/Workflow/DialogApprove.vue

@@ -1,34 +1,90 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const { stateId } = defineProps({
+  stateId: { type: String, require: true },
+});
 
-const isAcknowledge = ref<boolean>(false);
-const isConsider = ref<boolean>(true);
-const isComment = ref<boolean>(true);
+const isAcceptSetting = ref<boolean>(false);
+const isApproveSetting = ref<boolean>(false);
+const isReasonSetting = ref<boolean>(false);
 
-const acknowledge = ref<boolean>(false);
-const consider = ref<string>("");
-const comment = ref<string>("");
+const isAccept = ref<boolean>(false);
+const isApprove = ref<string>("");
+const reason = ref<string>("");
+
+async function fetchData() {
+  showLoader();
+  await http
+    .post(config.API.workflow + `comment-state-user`, { stateId: stateId })
+    .then(async (res) => {
+      const data = res.data.result;
+      isAcceptSetting.value = data.isAcceptSetting;
+      isApproveSetting.value = data.isApproveSetting;
+      isReasonSetting.value = data.isReasonSetting;
+
+      isAccept.value = data.isAccept;
+      isApprove.value = data.isApprove ? "approve" : "";
+      reason.value = data.reason;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `comment`, {
+        stateId: stateId,
+        isAccept: isAcceptSetting.value ? isAccept.value : undefined,
+        isApprove: isApproveSetting.value
+          ? isApprove.value === "approve"
+            ? true
+            : false
+          : undefined,
+        reason: isReasonSetting.value ? reason.value : undefined,
+      })
+      .then(async () => {
+        onCloseModal();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 function onCloseModal() {
   modal.value = false;
-  acknowledge.value = false;
-  consider.value = "";
-  comment.value = "";
+  isAccept.value = false;
+  isApprove.value = "";
+  reason.value = "";
 }
+
+watch(modal, (val) => {
+  if (val) {
+    fetchData();
+  }
+});
 </script>
 
 <template>
@@ -43,23 +99,23 @@ function onCloseModal() {
 
         <q-card-section>
           <div class="q-gutter-xs">
-            <div v-if="isAcknowledge">
+            <div v-if="isAcceptSetting">
               <q-checkbox
                 keep-color
                 color="primary"
                 dense
-                v-model="acknowledge"
+                v-model="isAccept"
                 label="รับทราบ"
               />
             </div>
-            <div v-if="!isAcknowledge && isConsider">
+            <div v-if="!isAcceptSetting && isApproveSetting">
               <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
               <div class="q-pa-sm q-gutter-sm">
                 <q-radio
                   dense
                   keep-color
                   color="primary"
-                  v-model="consider"
+                  v-model="isApprove"
                   label="อนุมัติ"
                   val="approve"
                 />
@@ -67,14 +123,14 @@ function onCloseModal() {
                   dense
                   keep-color
                   color="primary"
-                  v-model="consider"
+                  v-model="isApprove"
                   label="ไม่อนุมัติ"
                   val="reject"
                 />
               </div>
             </div>
 
-            <div v-if="!isAcknowledge && isComment">
+            <div v-if="!isAcceptSetting && isReasonSetting">
               <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
               <div class="q-pa-sm q-gutter-sm">
                 <div class="col-12">
@@ -82,7 +138,7 @@ function onCloseModal() {
                     dense
                     outlined
                     label="ความเห็น"
-                    v-model="comment"
+                    v-model="reason"
                     type="textarea"
                     lazy-rules
                     :rules="[
@@ -103,7 +159,7 @@ function onCloseModal() {
             label="บันทึก"
             color="public"
             type="submit"
-            :disable="!isAcknowledge && !isConsider && !isComment"
+            :disable="!isAcceptSetting && !isApproveSetting && !isReasonSetting"
           >
           </q-btn>
         </q-card-actions>