hrms-admin/src/components/Dialogs/PopupReplyInbox.vue

<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { showLoader, hideLoader, success, messageError, dialogConfirm } =
  useCounterMixin(); //เรียกฟังก์ชันกลาง

/**
 * props จาก components Dashborad
 */
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  idInbox: {
    type: String,
    default: "",
  },
  clickClose: {
    type: Function,
    default: () => {},
  },
  type: {
    type: String,
    default: "",
  },
});

const subject = ref<string>(""); // หัวข้อ
const body = ref<string>(""); //ข้อความ

/**
 * ยืนยันการจตอบกลับการส่งข้อความ
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const pathAPI =
        props.type === "Administrator"
          ? config.API.msgNotiAdmin
          : config.API.replyMessage(props.idInbox);
      const method = props.type === "Administrator" ? http.post : http.put;

      await method(pathAPI, {
        subject: subject.value,
        body: body.value,
      })
        .then(() => {
          success($q, "ส่งข้อความสำเร็จ");
          onClose();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการส่งข้อความ",
    "คุณต้องการส่งข้อความใช่หรือไม่?"
  );
}

function onClose() {
  subject.value = "";
  body.value = "";
  props.clickClose();
}
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 40vw; max-width: 40vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="
            type === 'Administrator'
              ? 'ส่งข้อความไปยังผู้ดูแลระบบของหน่วยงาน'
              : 'ส่งข้อความ'
          "
          :close="onClose"
        />
        <q-separator />
        <q-card-section class="q-pa-sm bg-grey-1">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <q-input
                  class="full-width inputgreen cursor-pointer bg-white"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
                  v-model="subject"
                  label="หัวข้อ"
                />

                <q-input
                  type="textarea"
                  class="full-width inputgreen cursor-pointer bg-white"
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
                  v-model="body"
                  label="ข้อความ"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="ส่งข้อความ" color="public" type="submit">
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>