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

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { usePlacementDataStore } from "@/modules/05_placement/store";

const DataStore = usePlacementDataStore();

const $q = useQuasar
const mixin = useCounterMixin()
const { messageError, showLoader, hideLoader } = mixin
let roleAdmin = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
const examId = route.params.examId;
const year = ref<string>("");
const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
const AddTablePosition = defineAsyncComponent(
  () => import("@/modules/05_placement/components/PersonalList/Table.vue")
);
const stat = ref<any>({
  total: 0,
  unContain: 0,
  prepareContain: 0,
  contain: 0,
  disclaim: 0,
});

const getStat = async () => {
  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,
      };

      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
    })
    .catch((e) => {
      messageError($q, e);
    })
};

onMounted(async () => {
  if (DataStore.DataMainOrig.length == 0) {
    await fetchPlacementData();
  }

  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
  }

  await getStat()

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

  title.value = examData.value.examRound;
  round.value = examData.value.examOrder;
  year.value = examData.value.fiscalYear;

});

const fetchPlacementData = async () => {
  showLoader();
  http
    .get(config.API.MainDetail(0))
    .then(async (res) => {
      DataStore.DataMainOrig = res.data.result;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
</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.go(-1)" />
      รายชื่อผู้สอบในรอบ {{ 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" @get-stat="getStat" />
    </div>
  </q-card>
</template>

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