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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import keycloak from "@/plugins/keycloak";

import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter, useRoute } from "vue-router";
import genReport from "@/plugins/genreport";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

const store = useEvaluateDetailStore();

const modalView = ref<boolean>(false);
const fullName = ref<string>(
  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
);

const router = useRouter();
const route = useRoute();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
const AnnouncementStartDate = ref<string | null>();
const AnnouncementEndDate = ref<string | null>();
const id = ref<string>(route.params.id as string);
const pdfSrc = ref<any>();
const fileEvaluation5 = ref<any>();
const status = ref<string>("ANNOUNCE_WEB");
const website = ref<string>("https://bma-ehr.frappet.com/");

const files = [
  {
    id: "file1",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    id: "file2",
    fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    pathName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
  },
  {
    id: "file3",
    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
];

const listFile = [
  {
    id: "x1",
    fileName: "เอกสาร 1",
    pathName: "12",
  },
  {
    id: "x2",
    fileName: "เอกสาร 2",
    pathName: "12",
  },
];

function downloadFile(name: string) {
  console.log("download");
}

function deleteFile(name: string) {
  console.log("delete");
}

function save() {
  showLoader();
  http
    .put(config.API.evaluationNext5To6(id.value))
    // .then((res) => {})
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
      store.step = 6;
      store.currentStep = 6;
      hideLoader();
    });
}

function upLoadFile() {
  showLoader();
  http
    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
      fileList: {
        fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
        metadata: {
          tag: "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);
    })
    .finally(() => {
      hideLoader();
    });
}

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

function getFileName(fileName: string) {
  if (fileName && fileName.lastIndexOf(".") !== -1) {
    const index = fileName.indexOf("(");
    if (index !== -1) {
      return fileName.substring(0, index).trim();
    } else {
      // กรณีไม่มีวงเล็บ
      return fileName.split(".").slice(0, -1).join(".");
    }
  } else {
    // ในกรณีที่ไม่มีนามสกุล
    return fileName;
  }
}

/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

function copyLink(name: string) {
  console.log(name);
  showLoader();
  http
    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
    .then((res) => {
      console.log(res.data);
      const link = res.data.downloadUrl;
      navigator.clipboard.writeText(link);
    })
    .catch((e) => {})
    .finally(() => {
      success($q, "คัดลอก URL สำเร็จ");
      hideLoader();
    });
}

function getDate() {
  showLoader();
  http
    .get(config.API.evaluationDateAnnounce(id.value))
    .then((res) => {
      const data = res.data.result;
      AnnouncementStartDate.value = date2Thai(data.dateStartAnnounce);
      const endDate = new Date(data.dateStartAnnounce);
      endDate.setDate(endDate.getDate() + 30);
      AnnouncementEndDate.value = date2Thai(endDate);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
// function linkCopy(link: string) {
//   navigator.clipboard
//     .writeText(link)
//     .then(() => {
//       console.log(`Copied link for file: ${link}`);
//     })
//     .catch((e) => {
//       messageError($q, e);
//     })
//     .finally(() => {
//       success($q, "คัดลอกสำเร็จ");
//     });
// }

async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  const data = Object.assign(
    { fullName: fullName.value },
    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
    tp === "EV1_007" ? { positionName: "-" } : null,
    tp === "EV1_007" ? { positionLeaveName: "-" } : null
  );
  const body = {
    template: tp,
    reportName: templateName,
    data: data,
  };
  console.log(body);
  await genReport(body, fileName);
}

function onClickViewPDF(file: any) {
  // pdfSrc.value = file.webkitRelativePath;
  modalView.value = true;
}

onMounted(() => {
  getDate();
});
</script>

<template>
  <div class="row q-gutter-sm">
    <div class="col-12">
      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
        <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>{{ file.fileName }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    flat
                    round
                    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 bg-grey-1 q-py-sm q-px-md">
          บันทึกแจ้งผลการประกาศคัดเลือก
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <!-- <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_005',
                      'template-1',
                      'แบบพิจารณาคุณสมบัติบุคคล'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation5"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                  @click="onClickViewPDF(fileEvaluation5)"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div> -->
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation1Ref"
                  v-model="fileEvaluation5"
                  class="col-12"
                  outlined
                  dense
                  label="อัปโหลดไฟล์"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="upLoadFile"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </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>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12 q-mb-xs">
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation5"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                  label="อัปโหลดไฟล์"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="upLoadFile"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
            <div v-if="listFile.length > 0">
              <q-list
                v-for="file in listFile"
                :key="file.id"
                class="full-width"
                bordered
                separator
              >
                <q-item clickable v-ripple>
                  <q-item-section>{{ file.fileName }}</q-item-section>
                  <q-item-section avatar>
                    <div class="row">
                      <div>
                        <q-btn
                          dense
                          flat
                          round
                          size="12px"
                          color="blue"
                          icon="mdi-download-outline"
                          @click="downloadFile(file.pathName)"
                        >
                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                        </q-btn>
                        <q-btn
                          dense
                          flat
                          round
                          size="12px"
                          color="red"
                          icon="mdi-trash-can-outline"
                          @click="deleteFile(file.pathName)"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </div>
                  </q-item-section>
                </q-item>
              </q-list>
            </div>
            <div class="col-12" v-else>
              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
            </div>
          </div>
        </div>
      </q-card>
    </div> -->
    <div class="col-12">
      <div class="q-mt-xs q-gutter-md" align="right">
        <q-btn
          unelevated
          label="บันทึกแจ้งผลการประกาศคัดเลือก"
          color="public"
          @click="save"
        />
      </div>
    </div>
  </div>

  <q-dialog
    v-model="modalView"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-white">
      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
        <q-btn
          icon="close"
          unelevated
          round
          dense
          style="color: #ff8080; background-color: #ffdede"
          size="12px"
          v-close-popup
        />
      </div>
      <div class="q-pa-md">
        <div class="row items-start items-center">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
        <div class="row items- items-center">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
        <div class="row items- items-end">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>