hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue

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

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import http from "@/plugins/http";
import config from "@/app.config";

/** importStore*/
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

/** use*/
const $q = useQuasar();
const route = useRoute();
const store = useEvaluateDetailStore();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
} = mixin;

const id = ref<string>(route.params.id as string); //id ประเมิน
const author = ref<string>(""); //เจ้าของผลงาน
const subject = ref<string>(""); //ชื่อผลงาน
const AnnouncementStartDate = ref<string | null>(); //ประกาศเมื่อวันที่
const AnnouncementEndDate = ref<string | null>(); //ถึงวันที่
const fileEvaluation5 = ref<any>();
const fileEvaluation5Ref = ref<any>();
const files = [
  {
    id: "file1",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    id: "file2",
    fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    pathName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
  },
  {
    id: "file3",
    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
  {
    id: "file4",
    fileName:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
    pathName:
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
  },
];

/**
 * function บันทึกแจ้งผลการประกาศคัดเลือก
 */
async function save() {
  download10Url.value === ""
    ? (fileEvaluation5.value = "")
    : fileEvaluation5.value;
  fileEvaluation5Ref.value.validate();
  if (
    fileEvaluation5Ref.value.hasError === false &&
    download10Url.value !== ""
  ) {
    dialogConfirm($q, async () => {
      showLoader();
      http
        .put(config.API.evaluationNext5To6(id.value))
        .then(() => {
          success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          store.step = 6;
          store.currentStep = 6;
          hideLoader();
        });
    });
  }
}

/**
 * function เรียก link อัปโหลด
 * @param file ไฟล์
 */
function upLoadFile(file: any) {
  if (file) {
    showLoader();
    http
      .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
        fileList: {
          fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
          metadata: {
            tag: "value",
            author: author.value,
            subject: subject.value,
          },
        },
      })
      .then((res) => {
        const foundKey: any = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        const link = res.data[foundKey]?.uploadUrl;
        fileUpLoad(link);
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      });
  }
}

/**
 * function อัปโหลดไฟล์
 * @param url link อัปโหลด
 */
function fileUpLoad(url: string) {
  axios
    .put(url, fileEvaluation5.value, {
      headers: { "Content-Type": fileEvaluation5.value?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .then(async () => {
      await checkDocResult();
      await success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function คัดลอก URL
 * @param name ชื่อไฟล์
 */
async function copyLink(name: string) {
  await http
    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
    .then((res) => {
      const link = res.data.downloadUrl;
      navigator.clipboard.writeText(link);
      success($q, "คัดลอกลิงก์สำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * function เรียกข้อมูลวันที่ประกาศ
 */
async function getDate() {
  showLoader();
  await http
    .get(config.API.evaluationDateAnnounce(id.value))
    .then((res) => {
      const data = res.data.result;
      AnnouncementStartDate.value = date2Thai(data.dateStartAnnounce);
      AnnouncementEndDate.value = date2Thai(data.dateEndAnnounce);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 1500);
    });
}

const download10Url = ref<string>("");
/**
 * function เช็คไฟล์อัปโหลด
 */
async function checkDocResult() {
  showLoader();
  await http
    .get(
      config.API.evaluationPatchData(
        "เล่ม 1",
        id.value,
        "บันทึกแจ้งผลการประกาศคัดเลือก"
      )
    )
    .then((res: any) => {
      download10Url.value = res.data.downloadUrl;
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 1500);
    });
}

/**
 * function เรียกข้อมูลผลงาน
 */
async function fetchDataSigner() {
  showLoader();
  await http
    .get(config.API.evaluationSigner(id.value, 1))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        author.value = data.author;
        subject.value = data.subject;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 1500);
    });
}

onMounted(async () => {
  await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
});
</script>

<template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <div class="col-12">
      <q-banner
        class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders"
      >
        <div class="text-weight-bold">
          <q-icon name="info_outline" color="red-14" size="24px" />
          ประกาศเมื่อวันที่ {{ AnnouncementStartDate }} ถึงวันที่
          {{ AnnouncementEndDate }}
        </div>
      </q-banner>
    </div>

    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารประกาศผลการคัดเลือกบุคคล
        </div>
        <div class="col-12"><q-separator /></div>

        <q-list
          v-for="file in files"
          :key="file.id"
          class="full-width"
          bordered
          separator
        >
          <q-item clickable v-ripple>
            <q-item-section class="text-grey-9">{{
              file.fileName
            }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-clipboard-outline"
                    @click="copyLink(file.pathName)"
                  >
                    <q-tooltip>คัดลอกลิงก์</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>

    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div
          class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
        >
          <div>บันทึกแจ้งผลการประกาศคัดเลือก</div>
          <q-space />
          <div>
            <q-btn
              :href="download10Url"
              target="_blank"
              class="col-12"
              icon="visibility"
              color="blue"
              flat
              dense
              round
            >
              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
            >
          </div>
        </div>
        <div class="col-12" v-if="store.currentStep == 5"><q-separator /></div>
        <div
          class="col-12 q-pa-sm"
          v-if="store.currentStep == 5 && checkPermission($route)?.attrIsUpdate"
        >
          <q-file
            ref="fileEvaluation5Ref"
            v-model="fileEvaluation5"
            class="col-12"
            outlined
            dense
            label="อัปโหลดไฟล์"
            hide-bottom-space
            lazy-rules
            accept=".pdf"
            :rules="
              download10Url === '' ? [(val:string) => !!val || 'กรุณาเลือกไฟล์'] : []
            "
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" />
            </template>
            <template v-slot:after>
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="mdi-upload"
                @click="upLoadFile(fileEvaluation5)"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </template>
          </q-file>
        </div>
      </q-card>
    </div>

    <div
      class="col-12"
      v-if="store.currentStep == 5 && checkPermission($route)?.attrIsUpdate"
    >
      <div class="q-mr-sm" align="right">
        <q-btn
          unelevated
          label="บันทึกแจ้งผลการประกาศคัดเลือก"
          color="public"
          @click="save"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>