API workflow

src/components/Workflow/DialogSelectPerson.vue

@@ -3,15 +3,22 @@ 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 type { QTableProps } from "quasar";
 
 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, fetchData } = defineProps({
+  stateId: { type: String, require: true },
+  fetchData: { type: Function, require: true },
+});
 
 /** table*/
 const selected = ref<any[]>([]);
@@ -62,14 +69,34 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const isAcknowledge = ref<boolean>(false);
-const isConsider = ref<boolean>(false);
-const isComment = ref<boolean>(false);
+const isAcceptSetting = ref<boolean>(false);
+const isApproveSetting = ref<boolean>(false);
+const isReasonSetting = ref<boolean>(false);
 
 function fetchLists() {}
 
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `add-step`, {
+        stateId: stateId,
+        profileId: selected.value[0].id,
+        isAcceptSetting: isAcceptSetting.value,
+        isApproveSetting: isApproveSetting.value,
+        isReasonSetting: isReasonSetting.value,
+      })
+      .then(async () => {
+        await fetchData?.();
+        onCloseModal();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 function onCloseModal() {
@@ -146,26 +173,28 @@ watch(modal, (val) => {
                 keep-color
                 color="primary"
                 dense
-                v-model="isAcknowledge"
+                v-model="isAcceptSetting"
                 label="ให้เลือกรับทราบ"
-                @update:model-value="(isConsider = false), (isComment = false)"
+                @update:model-value="
+                  (isApproveSetting = false), (isReasonSetting = false)
+                "
               />
             </div>
-            <div v-if="!isAcknowledge">
+            <div v-if="!isAcceptSetting">
               <q-checkbox
                 dense
                 keep-color
                 color="primary"
-                v-model="isConsider"
+                v-model="isApproveSetting"
                 label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
               />
             </div>
-            <div v-if="!isAcknowledge">
+            <div v-if="!isAcceptSetting">
               <q-checkbox
                 dense
                 keep-color
                 color="primary"
-                v-model="isComment"
+                v-model="isReasonSetting"
                 label="ให้แสดงความเห็นในเอกสาร"
               />
             </div>
@@ -181,7 +210,7 @@ watch(modal, (val) => {
             type="submit"
             :disable="
               selected.length === 0 ||
-              (!isAcknowledge && !isConsider && !isComment)
+              (!isAcceptSetting && !isApproveSetting && !isReasonSetting)
             "
           >
           </q-btn>