hrms-mgt/src/modules/05_placement/components/PersonalList/PersonalListPage.vue

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

import { tokenParsed } from "@/plugins/auth";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { usePlacementDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";

import CardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
import AddTablePosition from "@/modules/05_placement/components/PersonalList/Table.vue";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const DataStore = usePlacementDataStore();
const { messageError, showLoader, hideLoader } = mixin;

const examId = route.params.examId;
const year = ref<string>("");
const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
const roleAdmin = ref<boolean>(false);
const stat = ref<any>({
  total: 0,
  unContain: 0,
  prepareContain: 0,
  contain: 0,
  disclaim: 0,
});

/**
 * เรียกข้อมูล Stat
 */
async function getStat() {
  const examIdString = Array.isArray(examId) ? examId[0] : examId;
  await http
    .get(config.API.getStatCard(examIdString))
    .then((res) => {
      const statCard = res.data.result;
      // อัปเดตค่าในตัวแปร stat
      stat.value = {
        total: statCard.total,
        unContain: statCard.unContain,
        prepareContain: statCard.prepareContain,
        contain: statCard.contain,
        disclaim: statCard.disclaim,
      };
      DataStore.checkLoad(1);
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * get รายละเอียด ของการสอบ
 */
async function fetchPlacementData() {
  await http
    .get(config.API.MainDetail(0))
    .then(async (res) => {
      DataStore.DataMainOrig = await res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}

/** เมื่อเริ่มโหลดหน้า ให้ ใช้ฟังชั่น get stat
 * เเละหา ชื่อรอบ รอบ ปี
 */
onMounted(async () => {
  if (DataStore.DataMainOrig.length == 0) {
    await fetchPlacementData();
  }

  const user = await tokenParsed();
  if (user) {
    roleAdmin.value = await user.role.includes("placement1");
  }

  await getStat();

  examData.value = await DataStore.DataMainOrig.find(
    (x: any) => x.id == examId
  );

  title.value = examData.value == null ? null : examData.value.examRound;
  round.value = examData.value == null ? null : examData.value.examOrder;
  year.value = examData.value == null ? null : examData.value.fiscalYear;
});
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
    <div class="toptitle">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push(`/placement`)"
      />
      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
    </div>
    <q-card bordered class="q-py-sm row col-12">
      <div class="col-12 row bg-white">
        <div class="fit q-px-md q-py-sm">
          <div class="row col-12 q-col-gutter-md fit">
            <CardTop
              :amount="stat.total"
              label="จำนวนทั้งหมด"
              color="#016987"
            />
            <CardTop
              v-if="roleAdmin"
              :amount="stat.unContain"
              label="จำนวนที่ยังไม่บรรจุ"
              color="#02A998"
            />
            <CardTop
              :amount="stat.prepareContain"
              label="จำนวนที่เตรียมบรรจุ"
              color="#2EA0FF"
            />
            <CardTop
              :amount="stat.contain"
              label="จำนวนที่บรรจุแล้ว"
              color="#4154B3"
            />
            <CardTop
              :amount="stat.disclaim"
              label="จำนวนที่สละสิทธิ์"
              color="#FF5C5F"
            />
          </div>
        </div>
      </div>
    </q-card>
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
    <div>
      <AddTablePosition :statCard="getStat" class="q-pa-none" />
    </div>
  </q-card>
</template>

<style lang="scss">
.cardNum {
  border-radius: 5px;
  padding-left: 8px;
}
</style>