hrms-recruit/src/views/MainLayout.vue

<script setup lang="ts">
import { useQuasar } from 'quasar'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useExamDataStore } from '@/modules/01_exam/store'
import { useDataStore } from '@/stores/data'
import { useCounterMixin } from '@/stores/mixin'
import { storeToRefs } from 'pinia'
import keycloak from '@/plugins/keycloak'
import http from '@/plugins/http'
import config from '@/app.config'

const route = useRoute()
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { statusCandidate, messageError } = mixin
const storeExam = useExamDataStore()
const store = useDataStore()
const { loader } = storeToRefs(store)
const dataStore = useDataStore()
const { loaderPage } = dataStore
const status = ref<string>('register')
const examId = ref<string>('')
const positionId = ref<string>('')

onMounted(async () => {
  examId.value = route.params.id ? route.params.id.toString() : ''
  positionId.value = route.params.positionId ? route.params.positionId.toString() : ''
  await fetchStatus()
})

/**
 * logout keycloak
 * confirm ก่อนออกจากระบบ
 */
const doLogout = () => {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช่หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true
  }).onOk(() => {
    keycloak.logout()
  })
}

const fetchStatus = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateStatus(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      status.value = data
    })
    .catch((e) => {
      //   messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const getFontColor = (val: string) => {
  switch (val) {
    case 'register':
      return 'text-blue'
    case 'checkRegister':
      return 'text-orange'
    case 'payment':
      return 'text-blue'
    case 'rejectRegister':
      return 'text-red-12'
    case 'checkPayment':
      return 'text-orange'
    case 'rejectPayment':
      return 'text-red-12'
    case 'checkSeat':
      return 'text-blue'
    case 'checkPoint':
      return 'text-blue'
    case 'done':
      return 'text-green'
    case 'waiver':
      return 'text-orange'
    default:
      return '-'
  }
}
</script>

<!-- โครงเว็บ -->
<template>
  <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
  <q-layout view="lHh LpR lff" class="bgColor text-dark">
    <!-- header -->
    <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
      <q-toolbar style="padding: 0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
        <q-toolbar-title shrink class="row items-center no-wrap">
          <q-btn flat class="bg-white" dense round>
            <q-avatar size="35px">
              <img src="../assets/logo.png" />
            </q-avatar>
          </q-btn>
          <div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
            <div class="col-12 textline1">ระบบทรัพยากรบุคคล</div>
            <div class="text-caption textline2">กรุงเทพมหานคร</div>
          </div>
        </q-toolbar-title>
        <q-space />
        <div class="q-mr-md text-bold" :class="getFontColor(storeExam.status)">
          {{ statusCandidate(storeExam.status) }}&nbsp;&nbsp;
        </div>
        <q-btn
          v-if="$q.screen.gt.xs"
          class="bg-amber-1 text-amber-9"
          icon="mdi-logout-variant"
          size="12px"
          label="ออกจากระบบ"
          flat
          v-close-popup
          @click="doLogout"
        />
        <q-btn
          v-else
          class="bg-amber-1 text-amber-9"
          icon="mdi-logout-variant"
          flat
          v-close-popup
          @click="doLogout"
        />
      </q-toolbar>
    </q-header>
    <!-- end header -->
    <q-page-container class="row justify-center">
      <q-page style="padding: 1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
    <full-loader :visibility="loader" />
  </q-layout>
</template>

<style>
.bgColor {
  background: #f6f9fa;
}

.tabNative {
  color: grey;
  padding-left: 8%;
  border-radius: 100px 0px 0px 100px;
}

.tabActive {
  padding-left: 8%;
  background: #e4f2ff;
  border-radius: 100px 0px 0px 100px;
}

.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
}
.q-card--bordered {
  border: 1px solid #92b4c847;
  box-shadow: none !important;
}
.q-stepper {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
}
.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
}

.q-field--outlined .q-field__control {
  border-radius: 5px;
}

.q-field--outlined .q-field__control:before,
.q-field .q-field__control:before {
  border-color: #c8d3db;
}
.q-field--outlined .q-icon {
  color: #7474747f;
}
/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

.header {
  border-bottom: 1px solid #92b4c847;
  height: 50px;
}
.textline1 {
  font-size: 0.9rem;
  line-height: 1.2rem !important;
  font-weight: 500;
}
.textline2 {
  line-height: 1rem !important;
  font-weight: 400;
  color: #96a9ad;
}
</style>