hrms-user/src/components/DialogDebug.vue

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import { storeToRefs } from "pinia";

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

import type { MenuMainList } from "@/modules/01_dashboard/interface/Main";

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

const $q = useQuasar();
const store = usePositionKeycloakStore();
const dataStore = useDataStore();
const { findOrgName } = store;
const { dataprofilePosition, menuList } = storeToRefs(dataStore);

const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", {
  default: false,
});

interface OptionSelect {
  label: string;
  value: string;
}

const title = computed(() => "แจ้งปัญหาการใช้งานระบบ");
const orgName = computed(() => findOrgName(dataprofilePosition.value) || "");
const optionData = computed(() => {
  return menuList.value.map((menu: MenuMainList) => ({
    label: menu.title,
    value: menu.title,
  }));
});

const optionsMenu = ref(optionData.value);
const formData = reactive({
  title: "",
  description: "",
  system: "user",
  fileAttachments: [] as File[],
  menu: "",
  email: "",
  phone: "",
});

/** ฟังก์ชันบันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, async () => {
    try {
      showLoader();
      const payload = {
        title: formData.title,
        description: formData.description,
        system: formData.system,
        menu: formData.menu,
        org: orgName.value,
        email: formData.email,
        phone: formData.phone,
      };

      const res = await http.post(config.API.orgIssues, payload);

      const issueCode = res.data.result.codeIssue;
      await uploadProfile(issueCode);
      success($q, "บันทึกข้อมูลเรียบร้อย");

      onClose();
    } catch (error) {
      messageError($q, error);
    } finally {
      hideLoader();
    }
  });
}

/**
 * ฟังก์ชันเพิ่มไฟล์
 * @param files ไฟล์ที่ต้องการเพิ่ม
 */
async function onAddfile(files: any) {
  files.forEach((file: any) => {
    formData.fileAttachments.push(file);
  });
}

/**
 * ฟังก์ชันลบไฟล์
 * @param files ไฟล์ที่ต้องการลบ
 */
async function onRemoveFile(files: any) {
  files.forEach((file: any) => {
    const index = formData.fileAttachments.findIndex(
      (x: any) => x.__key == file.__key,
    );
    if (index > -1) {
      formData.fileAttachments.splice(index, 1);
    }
  });
}

/**
 * ฟังก์ชันสร้าง url อัปโหลดไฟล์
 * @param code รหัส issue
 */
async function uploadProfile(code: string) {
  if (formData.fileAttachments.length === 0) {
    return;
  }
  try {
    const fileName = formData.fileAttachments.map((file) => ({
      fileName: file.name,
    }));
    const res = await http.post(
      config.API.file("issueAttachments", formData.system, code),
      {
        replace: false,
        fileList: fileName,
      },
    );

    for (const file of formData.fileAttachments) {
      const fileInfo = res.data[file.name];
      if (fileInfo && fileInfo.uploadUrl) {
        await uploadFileDoc(fileInfo.uploadUrl, file);
      }
    }
  } catch (e) {
    messageError($q, e);
  }
}

/**
 * ฟังก์ชันอัปโหลดไฟล์เอกสาร
 * @param uploadUrl ลิงก์อัปโหลดไฟล์
 * @param file ไฟล์ที่ต้องการอัปโหลด
 */
async function uploadFileDoc(uploadUrl: string, file: any) {
  try {
    await axios.put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    });
  } catch (e) {
    messageError($q, e);
  }
}

/**
 * ฟังก์ชันกรองข้อมูลใน select
 * @param val ค่าที่กรอง
 * @param update ฟังก์ชันอัปเดตค่าหลังกรอง
 */
function filterSelector(val: string, update: Function) {
  update(() => {
    if (!val) {
      optionsMenu.value = optionData.value;
      return;
    }
    optionsMenu.value = optionData.value.filter((item: OptionSelect) =>
      item.label.toLowerCase().includes(val.toLowerCase()),
    );
  });
}

/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
function onClose() {
  modal.value = false;
  formData.menu = "";
  formData.title = "";
  formData.description = "";
  formData.fileAttachments = [];
  formData.email = "";
  formData.phone = "";
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="title" :close="onClose" />
        <q-separator />

        <q-card-section>
          <div class="row col q-col-gutter-md">
            <div class="col-12">
              <q-select
                dense
                outlined
                label="ระบบ"
                v-model="formData.menu"
                :options="optionsMenu"
                class="inputgreen"
                :rules="[ (val: string) => !!val || 'กรุณาเลือกระบบ' ]"
                hide-bottom-space
                emit-value
                map-options
                use-input
                @filter="(inputValue: string,
              doneFn: Function) => filterSelector(inputValue, doneFn, 
              )"
              />
            </div>
            <div class="col-12">
              <q-input
                dense
                outlined
                label="หัวข้อปัญหา"
                v-model="formData.title"
                class="inputgreen"
                :rules="[ (val: string) => !!val || 'กรุณากรอกหัวข้อปัญหา' ]"
                hide-bottom-space
              />
            </div>
            <div class="col-12">
              <q-input
                dense
                outlined
                type="textarea"
                label="รายละเอียดปัญหา"
                v-model="formData.description"
                class="inputgreen"
                :rules="[ (val: string) => !!val || 'กรุณากรอกรายละเอียดปัญหา' ]"
                hide-bottom-space
              />
            </div>
            <div class="col-12">
              <q-uploader
                color="gray"
                type="file"
                flat
                ref="uploader"
                class="full-width"
                text-color="dark"
                accept=".jpg,.png,.pdf,.csv,.doc"
                bordered
                label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]"
                multiple
                max-file-size="5000000"
                @added="onAddfile"
                @removed="onRemoveFile"
              >
                <template v-slot:header="scope">
                  <div
                    class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                  >
                    <q-btn
                      v-if="scope.queuedFiles.length > 0"
                      icon="clear_all"
                      @click="scope.removeQueuedFiles"
                      round
                      dense
                      flat
                    >
                      <q-tooltip>ลบทั้งหมด</q-tooltip>
                    </q-btn>
                    <q-btn
                      v-if="scope.uploadedFiles.length > 0"
                      icon="done_all"
                      @click="scope.removeUploadedFiles"
                      round
                      dense
                      flat
                    >
                      <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
                    </q-btn>
                    <q-spinner
                      v-if="scope.isUploading"
                      class="q-uploader__spinner"
                    />
                    <div class="col">
                      <div class="q-uploader__title">
                        {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]" }}
                      </div>
                      <div class="q-uploader__subtitle">
                        {{ scope.uploadSizeLabel }}
                        /
                        {{ scope.uploadProgressLabel }}
                      </div>
                    </div>
                    <q-btn
                      v-if="scope.canAddFiles"
                      type="a"
                      icon="add_box"
                      @click="scope.pickFiles"
                      round
                      dense
                      flat
                    >
                      <q-uploader-add-trigger />
                      <q-tooltip>เลือกไฟล์</q-tooltip>
                    </q-btn>
                    <q-btn
                      v-if="scope.isUploading"
                      icon="clear"
                      @click="scope.abort"
                      round
                      dense
                      flat
                    >
                      <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
                    </q-btn>
                  </div>
                </template>
              </q-uploader>
            </div>
            <div class="col-12">
              <div class="text-caption text-grey-7 q-mb-sm">
                ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
              </div>
              <div class="row col-12 q-col-gutter-sm">
                <div class="col-xs-12 col-md-6 col-lg-6">
                  <q-input
                    dense
                    outlined
                    label="อีเมลติดต่อกลับ"
                    v-model="formData.email"
                    class="inputgreen"
                    hide-bottom-space
                    :rules="[
                      (val: string) => !!val || 'กรุณากรอกที่อยู่อีเมล',
                      (val: string) => {
                        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        return emailPattern.test(val) || 'กรุณากรอกที่อยู่อีเมลในรูปแบบที่ถูกต้อง';
                      }
                    ]"
                  />
                </div>
                <div class="col-xs-12 col-md-6 col-lg-6">
                  <q-input
                    dense
                    outlined
                    label="เบอร์โทรติดต่อกลับ"
                    v-model="formData.phone"
                    class="inputgreen"
                    hide-bottom-space
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions class="q-px-md items-center">
          <FooterContact />
          <q-space />
          <q-btn
            type="submit"
            for="#submitForm"
            class="q-px-md items-center"
            color="public"
            label="บันทึก"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>