From 079a1c1972097b23d6aae7cf8a6a45597106ffc4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 16 Oct 2024 18:10:55 +0700
Subject: [PATCH] API workflow

---
 src/api/org/api.org.ts                        |   6 +
 .../Workflow/DialogSelectPerson.vue           |  54 +++--
 src/components/Workflow/Main.vue              | 184 +++++++++++-------
 .../Workflow/interface/response/Main.ts       |  27 +++
 src/modules/02_transfer/views/AddTransfer.vue |   9 +-
 5 files changed, 190 insertions(+), 90 deletions(-)
 create mode 100644 src/components/Workflow/interface/response/Main.ts

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index ec9c7e9..af57985 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -4,6 +4,7 @@ const metadata = `${env.API_URI}/org/metadata/`;
 const org = `${env.API_URI}/org`;
 const profileOrg = `${env.API_URI}/org/profile`;
 const report = `${env.API_URI}/report/profile/`;
+const workflow = `${env.API_URI}/org/workflow`;
 export default {
   profilePosition: () => `${org}/profile/keycloak/position`,
 
@@ -82,4 +83,9 @@ export default {
    */
   requestEdit: `${profileOrg}/edit/`,
   developmentUser: `${profileOrg}/development/user`,
+
+  /**
+   * workflow
+   */
+  workflow: `${workflow}/`,
 };
diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index d392c62..9b24387 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -3,20 +3,28 @@ 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[]>([]);
 const rows = ref<any[]>([
   {
+    id: "1",
     fullName: "นายศรัณย์ ศิลาดี",
     position: "นักบริหาร",
     posType: "บริหาร(สูง)",
@@ -62,14 +70,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 +174,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 +211,7 @@ watch(modal, (val) => {
             type="submit"
             :disable="
               selected.length === 0 ||
-              (!isAcknowledge && !isConsider && !isComment)
+              (!isAcceptSetting && !isApproveSetting && !isReasonSetting)
             "
           >
           </q-btn>
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 3451940..e091b8d 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -3,74 +3,102 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
-import DialogApprove from "@/components/Workflow/DialogApprove.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
 
 const { id, sysName } = defineProps({
   id: { type: String, require: true },
   sysName: { type: String, require: true },
 });
 
-const state = ref<number>(1);
-const isChangeState = ref<boolean>(false);
-const isOperate = ref<boolean>(false);
+const stateId = ref<string>(""); //id state ปัจุบัน
+const state = ref<number>(1); //state ปัจุบัน
 
-const rowsOperate = ref<any[]>([
-  {
-    fullName: "ชื่อนาม - สกุล",
-    comment: "ความเห็น",
-    position: " บริหาร - ต้น ",
-    status: "อนุมัติ",
-  },
-]);
-const modalSelectPerson = ref<boolean>(false);
-const modalApprove = ref<boolean>(false);
+const isChangeState = ref<boolean>(false); //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
+const isOperate = ref<boolean>(true); //เปลี่ยนสถานะ (state) เอกสารได้
+const isView = ref<boolean>(true); //ดูเอกสารได้
+const isUpdate = ref<boolean>(true); //แก้ไขเอกสารได้
+const isDelete = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
+const isCancel = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
 
-const itemState = ref<any[]>([
-  {
-    stateNo: 1,
-    stateName: "Darft",
-  },
-  {
-    stateNo: 2,
-    stateName: "Operate",
-  },
-  {
-    stateNo: 3,
-    stateName: "Finish",
-  },
-]);
+const modalSelectPerson = ref<boolean>(false); //เลือกรายชื่อ ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ
+const itemState = ref<DataListState[]>([]);
 
-function fetchData() {
-  console.log(id, sysName);
-  const data = {
-    stateNo: 1,
-    step: 1,
-    can_view: true,
-    can_update: true,
-    can_operate: true,
-    can_change_state: true,
-    can_delete: false,
-    can_cancel: false,
-  };
-
-  state.value = data.stateNo;
-  isChangeState.value = data.can_change_state;
-  isOperate.value = data.can_operate;
+/** ฟังก์ชันเรียกข้อมูล Workflow ทั้งหมด*/
+async function fetchData() {
+  await http
+    .post(config.API.workflow + `check-state-all`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      itemState.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-function onConfirmDraft() {
-  dialogConfirm($q, () => {
-    state.value++;
+/** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
+async function fetchCheckState() {
+  await http
+    .post(config.API.workflow + `check-user-now`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      stateId.value = data.stateId;
+      state.value = data.stateNo;
+      isChangeState.value = data.can_change_state;
+      isOperate.value = data.can_operate;
+      isView.value = data.can_view;
+      isUpdate.value = data.can_update;
+      isDelete.value = data.can_delete;
+      isCancel.value = data.can_cancel;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** ฟังก์ชันยืนยันการ NextStep*/
+function onChangeState() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `state-next`, {
+        refId: id,
+        system: sysName,
+      })
+      .then(async () => {
+        await Promise.all([fetchData(), fetchCheckState()]);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-onMounted(() => {
-  fetchData();
+/** ฟังก์ชันเรียกใช้งานฟังก์ชัน fetchData, fetchCheckState*/
+async function fetchAllFunction() {
+  await Promise.all([fetchData(), fetchCheckState()]);
+}
+
+onMounted(async () => {
+  await fetchAllFunction();
 });
 </script>
 
@@ -78,12 +106,6 @@ onMounted(() => {
   <q-card bordered class="row col-12">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
-      <q-space />
-      <!-- <q-btn
-        @click.prevent="modalApprove = true"
-        label="DialogApprove"
-        color="public"
-      /> -->
     </div>
     <div class="col-12"><q-separator /></div>
     <q-card-section>
@@ -103,14 +125,11 @@ onMounted(() => {
             :color="state < index + 1 ? 'grey-4' : ''"
           >
             <!-- Darft -->
-            <div
-              class="row q-col-gutter-sm"
-              v-if="step.stateName === 'Darft' && state === 1"
-            >
+            <div class="row q-col-gutter-sm" v-if="state === 1">
               <div>
                 <q-btn
                   v-if="isChangeState"
-                  @click.prevent="onConfirmDraft"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -120,31 +139,44 @@ onMounted(() => {
             <!-- Operate -->
             <div
               class="q-col-gutter-sm"
-              v-if="step.stateName === 'Operate' && state > 1"
+              v-if="index > 0 && index < itemState.length - 1 && state > index"
             >
-              <div>
+              <div v-if="step.stateUserComments.length !== 0">
                 <q-list bordered separator style="min-width: 20vw">
-                  <q-item v-for="(item, index) in rowsOperate" :key="index">
+                  <q-item
+                    v-for="(item, index) in step.stateUserComments"
+                    :key="index"
+                  >
                     <q-item-section>
                       <q-item-label
-                        >{{ item.fullName }}
-                        {{ `(${item.position})` }}</q-item-label
-                      >
+                        >{{ item.createdFullName }}
+                        <!-- {{ `(${item.position})` }} -->
+                      </q-item-label>
                       <q-item-label caption lines="2">{{
-                        item.comment
+                        item.isReasonSetting ? item.reason : ""
                       }}</q-item-label>
                     </q-item-section>
 
                     <q-item-section side top>
                       <q-item-label class="text-green">
-                        {{ item.status }}</q-item-label
+                        {{
+                          item.isAcceptSetting
+                            ? item.isAccept
+                              ? "รับทราบ"
+                              : ""
+                            : item.isApproveSetting
+                            ? item.isApprove
+                              ? "อนุมันติ"
+                              : ""
+                            : ""
+                        }}</q-item-label
                       >
                     </q-item-section>
                   </q-item>
                 </q-list>
               </div>
 
-              <div v-if="isOperate && state === 2">
+              <div v-if="isOperate">
                 <q-btn
                   @click.prevent="modalSelectPerson = true"
                   label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@@ -152,9 +184,9 @@ onMounted(() => {
                 />
               </div>
 
-              <div v-if="isChangeState && state === 2">
+              <div v-if="isChangeState">
                 <q-btn
-                  @click.prevent="onConfirmDraft"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -166,7 +198,9 @@ onMounted(() => {
     </q-card-section>
   </q-card>
 
-  <DialogSelectPerson v-model:modal="modalSelectPerson" />
-
-  <DialogApprove v-model:modal="modalApprove" />
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :state-id="stateId"
+    :fetch-data="fetchAllFunction"
+  />
 </template>
diff --git a/src/components/Workflow/interface/response/Main.ts b/src/components/Workflow/interface/response/Main.ts
new file mode 100644
index 0000000..976afe0
--- /dev/null
+++ b/src/components/Workflow/interface/response/Main.ts
@@ -0,0 +1,27 @@
+interface DataListState {
+  stateId: string;
+  stateName: string;
+  stateNo: number;
+  stateUserComments: StateUserComments[];
+}
+
+interface StateUserComments {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isAccept: boolean | null;
+  isAcceptSetting: boolean | null;
+  isApprove: boolean | null;
+  isApproveSetting: boolean | null;
+  isReasonSetting: boolean | null;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  order: null;
+  profileId: string;
+  reason: string;
+  stateId: string;
+}
+
+export type { DataListState };
diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index f537501..5bcdd05 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -17,7 +17,11 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-const id = ref<string>(""); //id path
+const id = ref<string>(
+  router.currentRoute.value.name === "addTransfer"
+    ? ""
+    : route.params.id.toString()
+); //id path
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -91,7 +95,6 @@ function fileOpen(url: string) {
  */
 onMounted(() => {
   if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
     fecthDataTransfer(id.value);
   }
 });
@@ -199,7 +202,7 @@ onMounted(() => {
 
                 <!-- Workflow -->
                 <div class="col-12" v-if="routeName != 'addTransfer'">
-                  <Workflow :id="id" :sys-name="`transfer`" />
+                  <Workflow :id="id" :sys-name="`PLACEMENT_TRANSFER`" />
                 </div>
               </div>
             </div>