hrms-user/src/modules/10_registry/views/main.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useRouter } from "vue-router";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";

/** import components */
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";

const $q = useQuasar();
const router = useRouter();
const store = useRegistryInFormationStore();
const dataStore = useDataStore();
const { messageError, showLoader, hideLoader } = useCounterMixin();

const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์

/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
const salaryText = computed(() => {
  return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
});

/**
 * ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
 * @param size ขนาดที่ได้จาก q-resize-observer
 */
function onResize(size: { width: number; height: number }) {
  const width = size.width > 100 ? 100 : size.width;
  sizeImg.value = `${width}px`;
}

/**
 * ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
 * @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
 * FULL: ก.พ.7/ก.ก.1
 * SHORT: ประวัติแบบย่อ
 */
async function onClickDownloadKp7(type: string) {
  showLoader();
  const url =
    type === "FULL"
      ? config.API.profileReportId(
          store.profileId,
          dataStore.officerType == "OFFICER" ? "profile" : "profile-employee",
        )
      : config.API.profileKp7ShortId(
          store.profileId,
          dataStore.officerType == "OFFICER" ? "profile" : "profile-employee",
        );
  const fileName = type === "FULL" ? "ทปอ. สามัญ" : "ประวัติแบบย่อ";
  await http
    .get(url)
    .then(async (res) => {
      const data = await res.data.result;
      await genReport(data, fileName, "pdf");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังชั่นกลับหน้าหลัก*/
const clickBack = () => {
  router.push(`/`);
};

function onMobile(type: string) {
  router.push(`/registry/${type}`);
}
</script>

<template>
  <div class="row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="clickBack"
        />
        ข้อมูลทะเบียนประวัติ <q-space />
        <q-btn
          color="blue-6"
          icon="mdi-eye"
          label="ตรวจสอบข้อมูลตำแหน่งและเงินเดือน"
          class="q-mr-sm"
          @click="() => router.push('/registry/position-review')"
        >
          <q-tooltip>ไปยังหน้าตรวจสอบข้อมูลตำแหน่งและเงินเดือน</q-tooltip>
        </q-btn>

        <q-btn
          color="primary"
          label="ยื่นคำร้องขอแก้ไขข้อมูล"
          @click="() => router.push('/registry/request-edit')"
        >
          <q-tooltip>ยื่นคำร้องขอแก้ไขข้อมูล</q-tooltip>
        </q-btn>
      </div>
      <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
        <div class="col-3">
          <q-card v-if="dataStore.isLoadingProfile" bordered>
            <q-resize-observer @resize="onResize" />
            <q-card-section>
              <div class="relative-position" style="height: 120px">
                <div class="absolute-center">
                  <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
                </div>
              </div>
              <div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
                <q-skeleton type="text" width="120px" />
                <q-skeleton type="text" width="150px" />
                <q-skeleton type="text" width="100px" />
                <q-skeleton type="text" width="50px" />
              </div>
            </q-card-section>

            <q-list separator class="q-mt-md">
              <q-item v-for="i in 2" :key="i">
                <q-item-section>
                  <q-skeleton type="text" />
                </q-item-section>
                <q-item-section>
                  <q-skeleton type="text" />
                </q-item-section>
              </q-item>
            </q-list>

            <q-card-section class="q-gutter-y-sm">
              <q-skeleton type="QBtn" class="full-width" height="48px" />
              <q-skeleton type="QBtn" class="full-width" height="48px" />
            </q-card-section>
          </q-card>

          <q-card v-else bordered>
            <q-resize-observer @resize="onResize" />
            <q-card-section>
              <div class="relative-position" style="height: 120px">
                <div class="absolute-center">
                  <q-avatar size="120px" class="bg-grey-2">
                    <q-img :src="dataStore.profileImg" />
                  </q-avatar>
                </div>
              </div>

              <div class="column text-center q-mt-md q-mb-sm">
                <span class="text-teal text-weight-medium">{{
                  dataStore.formData.firstName
                    ? `${
                        dataStore.formData.rank
                          ? dataStore.formData.rank
                          : dataStore.formData.prefix
                      }${dataStore.formData.firstName} ${
                        dataStore.formData.lastName
                      }`
                    : "-"
                }}</span>
                <span class="text-grey text-weight-medium">{{
                  dataStore.officerType == "OFFICER"
                    ? `ข้าราชการกรุงเทพมหานครสามัญ`
                    : dataStore.officerType == "PERM"
                    ? "ลูกจ้างประจำกรุงเทพมหานคร"
                    : "ลูกจ้างชั่วคราว"
                }}</span>
                <span class="text-grey text-weight-medium">{{
                  dataStore.formData.position
                    ? `${dataStore.formData.position}`
                    : "-"
                }}</span>

                <div class="text-grey">{{ dataStore.formData.posNo }}</div>
              </div>
            </q-card-section>

            <q-list separator class="q-mt-md">
              <!-- <q-separator />
              <q-item>
                <q-item-section class="text-grey-6">{{
                  dataStore.officerType == "OFFICER" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง"
                }}</q-item-section>
                <q-item-section>{{ formData.posExecutiveName }}</q-item-section>
              </q-item> -->
              <q-item>
                <q-item-section class="text-grey-6">{{
                  dataStore.officerType == "OFFICER"
                    ? "ตำแหน่งประเภท"
                    : "กลุ่มงาน"
                }}</q-item-section>
                <q-item-section>{{
                  dataStore.formData.posTypeName
                    ? dataStore.formData.posTypeName
                    : "-"
                }}</q-item-section>
              </q-item>
              <q-item>
                <q-item-section class="text-grey-6">{{
                  dataStore.officerType == "OFFICER" ? "ระดับ" : "ระดับชั้นงาน"
                }}</q-item-section>
                <q-item-section>{{
                  dataStore.formData.posLevelName
                    ? dataStore.formData.posLevelName
                    : "-"
                }}</q-item-section>
              </q-item>
            </q-list>

            <q-card-section class="q-gutter-y-sm">
              <q-btn
                class="full-width"
                unelevated
                color="blue-6"
                @click="onClickDownloadKp7('SHORT')"
                ><q-icon left size="2em" name="mdi-file-download-outline" />
                <div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
              >
              <q-btn
                class="full-width"
                unelevated
                color="primary"
                @click="onClickDownloadKp7('FULL')"
                ><q-icon left size="2em" name="mdi-folder-download-outline" />
                <div>ดาวน์โหลด ทปอ. สามัญ</div></q-btn
              >
            </q-card-section>
          </q-card>
        </div>
        <div class="col-9">
          <q-card bordered>
            <q-tabs
              v-model="tab"
              inline-label
              active-color="blue-6"
              class="bg-grey-1 text-grey-6 shadow-2"
              align="left"
            >
              <q-tab
                name="information"
                label="ข้อมูลส่วนตัว"
                class="bg-active"
              />
              <q-tab name="government" label="ข้อมูลราชการ" />
              <q-tab name="salary" :label="`ข้อมูล${salaryText}`" />
              <q-tab name="insignia" label="ข้อมูลผลงาน" />
              <q-tab name="other" label="ข้อมูลอื่นๆ" />
            </q-tabs>

            <q-separator />

            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="information">
                <InformationPage />
              </q-tab-panel>

              <q-tab-panel name="government">
                <GovernmentPage />
              </q-tab-panel>

              <q-tab-panel name="salary">
                <SalaryPage />
              </q-tab-panel>

              <q-tab-panel name="insignia">
                <Certificate />
              </q-tab-panel>

              <q-tab-panel name="other">
                <OtherPage />
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </div>
      </div>

      <div v-else>
        <q-card v-if="dataStore.isLoadingProfile" bordered>
          <q-resize-observer @resize="onResize" />
          <q-card-section>
            <div class="relative-position" style="height: 120px">
              <div class="absolute-center">
                <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
              </div>
            </div>

            <div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
              <q-skeleton type="text" width="120px" />
              <q-skeleton type="text" width="150px" />
              <q-skeleton type="text" width="100px" />
              <q-skeleton type="text" width="50px" />
            </div>

            <div class="row justify-center q-gutter-x-lg">
              <q-skeleton type="QRadio" size="48px" />
              <q-skeleton type="QRadio" size="48px" />
            </div>

            <q-list separator class="q-mt-md">
              <q-item v-for="i in 5" :key="i">
                <q-item-section>
                  <q-skeleton type="text" width="120px" height="16px" />
                </q-item-section>
                <q-item-section avatar>
                  <q-skeleton type="QIcon" size="24px" />
                </q-item-section>
              </q-item>
            </q-list>
          </q-card-section>
        </q-card>

        <q-card v-else bordered>
          <q-resize-observer @resize="onResize" />
          <q-card-section>
            <div class="text-center q-mt-md">
              <q-avatar :size="sizeImg">
                <img
                  :src="dataStore.profileImg"
                  style="border-radius: 50%; object-fit: cover"
                />
              </q-avatar>
            </div>
            <div class="column text-center q-mt-md q-mb-lg">
              <span class="text-teal text-weight-medium">{{
                dataStore.formData.firstName
                  ? `${dataStore.formData.prefix}${dataStore.formData.firstName} ${dataStore.formData.lastName}`
                  : "-"
              }}</span>
              <span class="text-grey text-weight-medium">{{
                dataStore.officerType == "OFFICER"
                  ? `ข้าราชการกรุงเทพมหานครสามัญ`
                  : "ลูกจ้างประจำกรุงเทพมหานคร"
              }}</span>
              <span class="text-grey text-weight-medium">{{
                dataStore.formData.position
                  ? `${dataStore.formData.position}`
                  : "-"
              }}</span>
              <div class="text-grey">{{ dataStore.formData.posNo }}</div>
            </div>
            <div class="row justify-center q-gutter-x-lg">
              <q-btn
                color="light-blue-1"
                dense
                round
                unelevated
                text-color="light-blue-5"
                size="14px"
                icon="mdi-file-download-outline"
                @click="onClickDownloadKp7('SHORT')"
              >
                <q-tooltip>ดาวน์โหลดประวัติแบบย่อ </q-tooltip></q-btn
              >
              <q-btn
                color="teal-1"
                text-color="primary"
                dense
                unelevated
                round
                size="14px"
                icon="mdi-folder-download-outline"
                @click="onClickDownloadKp7('FULL')"
              >
                <q-tooltip>ดาวน์โหลด ทปอ. สามัญ</q-tooltip>
              </q-btn>
            </div>
          </q-card-section>

          <q-list separator class="q-mt-md">
            <q-item clickable v-ripple @click="onMobile('information')">
              <q-item-section>ข้อมูลส่วนตัว</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('government')">
              <q-item-section>ข้อมูลราชการ</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('salary')">
              <q-item-section>{{ `ข้อมูล${salaryText}` }}</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('achievement')">
              <q-item-section>ข้อมูลผลงาน</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple @click="onMobile('other')">
              <q-item-section>ข้อมูลอื่นๆ</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item>
            <!-- <q-item clickable v-ripple disabled>
              <q-item-section>เปลี่ยนรหัสผ่าน</q-item-section>
              <q-item-section avatar>
                <q-avatar text-color="info" icon="mdi-chevron-right" />
              </q-item-section>
            </q-item> -->
          </q-list>
        </q-card>
      </div>
    </div>
  </div>
</template>