hrms-mgt/src/components/Workflow/DialogApprove.vue

<script setup lang="ts">
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, showLoader, hideLoader, messageError } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const { stateId } = defineProps({
  stateId: { type: String, require: true },
});

const isAcceptSetting = ref<boolean>(false);
const isApproveSetting = ref<boolean>(false);
const isReasonSetting = ref<boolean>(false);

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, 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;
  isAccept.value = false;
  isApprove.value = "";
  reason.value = "";
}

watch(modal, (val) => {
  if (val) {
    fetchData();
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 700px">
      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
          :close="onCloseModal"
        />
        <q-separator />

        <q-card-section>
          <div class="q-gutter-xs">
            <div v-if="isAcceptSetting">
              <q-checkbox
                keep-color
                color="primary"
                dense
                v-model="isAccept"
                label="รับทราบ"
              />
            </div>
            <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="isApprove"
                  label="อนุมัติ"
                  val="approve"
                />
                <q-radio
                  dense
                  keep-color
                  color="primary"
                  v-model="isApprove"
                  label="ไม่อนุมัติ"
                  val="reject"
                />
              </div>
            </div>

            <div v-if="!isAcceptSetting && isReasonSetting">
              <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
              <div class="q-pa-sm q-gutter-sm">
                <div class="col-12">
                  <q-input
                    dense
                    outlined
                    label="ความเห็น"
                    v-model="reason"
                    type="textarea"
                    lazy-rules
                    :rules="[
                      (val:string) => !!val || `${'กรุณากรอกความเห็น'}`,
                    ]"
                    hide-bottom-space
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            label="บันทึก"
            color="public"
            type="submit"
            :disable="!isAcceptSetting && !isApproveSetting && !isReasonSetting"
          >
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>