hrms-user/src/modules/05_leave/views/Main.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";

import CalendarView from "@/modules/05_leave/componenst/Calendar.vue";
import ListView from "@/modules/05_leave/componenst/ListCalendar.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";

const mixin = useCounterMixin();
const leaveStore = useLeaveStore();
const { showLoader, hideLoader, messageError } = mixin;

const router = useRouter();
const $q = useQuasar();

const itemPie = ref([
  {
    text: "ลาป่วย",
    color: "text-pink-5",
    value: 90,
    all: "10",
    use: "9",
    remain: "1",
  },
  {
    text: "ลากิจส่วนตัว",
    color: "text-deep-purple",
    value: 80,
    all: "12",
    use: "9",
    remain: "3",
  },
  {
    text: "ลาพักผ่อน",
    color: "text-indigo",
    value: 78,
    all: "20",
    use: "17",
    remain: "3",
  },
]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "id",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "id",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:5%;",
  },
  {
    name: "name",
    align: "left",
    label: "ประเภทการลา",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "numDate",
    align: "left",
    label: "โควตาวันลา",
    sortable: true,
    field: "numDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "extend",
    align: "left",
    label: "ทดวันลา",
    sortable: true,
    field: "extend",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "use",
    align: "left",
    label: "ใช้ไป (%)",
    sortable: true,
    field: "use",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "numAll",
    align: "left",
    label: "จำนวนยื่นขอลา (วัน)",
    sortable: true,
    field: "numAll",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "numDone",
    align: "left",
    label: "จำนวนที่อนุมัติ (วัน)",
    sortable: true,
    field: "numDone",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "numNot",
    align: "left",
    label: "จำนวนที่ไม่อนุมัติ (วัน)",
    sortable: true,
    field: "numNot",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "numCancel",
    align: "left",
    label: "จำนวนที่ยกเลิก (วัน)",
    sortable: true,
    field: "numCancel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
]);
const pagination = ref({ rowsPerPage: 10 });

const modalStatsTable = ref<boolean>(false);

/** function เรียกข้อมูลตารางสถิติการลา*/
async function fetchStatsTable() {
  modalStatsTable.value = true;
  // showLoader();
  // await http
  //   .get(config.API.leaveStats())
  //   .then((res) => {
  //     console.log(res);
  //   })
  //   .catch((err) => {
  //     messageError($q, err);
  //   })
  //   .finally(() => {
  //     hideLoader();
  //   });
}

/** function redirectTo  ยื่นใบลา*/
async function addAbsence() {
  router.push(`/leave/add`);
}

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

<template>
  <div class="col-12 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="router.go(-1)"
        />
        <div>รายการลา</div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
      <!-- สถิติการลา -->
      <div class="col-12 row">
        <q-card bordered class="col-12 row caedNone">
          <q-card class="row col-12 items-center q-px-md q-py-sm">
            <div class="text-weight-bold">สถิติการลา</div>
            <q-space />
            <q-btn
              dense
              flat
              class="text-blue"
              icon="mdi-chart-line-variant"
              @click="fetchStatsTable"
              label="ตารางสถิติการลา"
            />
          </q-card>
          <div
            bordered
            class="col-4 row justify-center q-px-md q-pb-md"
            v-for="(item, index) in itemPie"
            :key="index"
          >
            <q-card
              bordered
              flat
              class="col-12 row q-pt-md justify-center shadow-0"
            >
              <q-knob
                readonly
                v-model="item.value"
                show-value
                size="70px"
                :thickness="0.15"
                track-color="grey-3"
                :class="`${item.color}`"
              >
                <span class="text-subtitle2 text-weight-bold"
                  >{{ item.value }}%</span
                >
              </q-knob>
              <div class="col-12 text-center text-weight-medium q-py-xs">
                {{ item.text }}
              </div>
              <div
                class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop"
              >
                <div class="col-4 column q-pa-xs text-center">
                  <span class="text-weight-bold">{{ item.all }}</span>
                  <span class="text-grey-7 text-caption">ได้รับ</span>
                </div>
                <q-separator vertical />
                <div class="col-4 column q-pa-xs text-center">
                  <span class="text-weight-bold">{{ item.use }}</span>
                  <span class="text-grey-7 text-caption">ใช้ไป</span>
                </div>
                <q-separator vertical />
                <div class="col-4 column q-pa-xs text-center">
                  <span class="text-weight-bold">{{ item.remain }}</span>
                  <span class="text-grey-7 text-caption">คงเหลือ</span>
                </div>
              </div>
            </q-card>
          </div>
        </q-card>
      </div>

      <div class="row col-12 q-col-gutter-sm">
        <!-- แสดงปฏิทิน -->
        <div class="col-12 row">
          <q-card bordered class="q-pa-md col-12">
            <div class="row col-12">
              <div class="row items-center">
                <div class="q-ml-sm">
                  <q-btn
                    round
                    dense
                    flat
                    size="13px"
                    class="q-px-sm"
                    @click="addAbsence"
                  >
                    <q-icon name="mdi-plus" size="22px" color="blue" />
                    <q-tooltip>ยื่นใบลา</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <q-space />
              <div class="justify-center row items-center">
                <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
                <q-tabs
                  v-model="leaveStore.tabValue"
                  indicator-color="transparent"
                  align="left"
                  active-color="activetab"
                  class="text-nativetab"
                  inline-label
                  dense
                >
                  <q-btn
                    name="calendar"
                    round
                    size="12px"
                    flat
                    icon="mdi-calendar-month"
                    @click="leaveStore.tabValue = 'calendar'"
                    :color="
                      leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
                    "
                    class="q-mr-sm"
                  >
                    <q-tooltip>ปฏิทิน</q-tooltip>
                  </q-btn>
                  <q-separator vertical inset />
                  <q-btn
                    name="list"
                    round
                    size="12px"
                    flat
                    icon="mdi-format-list-bulleted"
                    @click="leaveStore.tabValue = 'list'"
                    :color="
                      leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
                    "
                    class="q-ml-sm"
                  >
                    <q-tooltip>รายการ</q-tooltip>
                  </q-btn>
                </q-tabs>
              </div>
            </div>
            <div class="col-12">
              <CalendarView v-if="leaveStore.tabValue === 'calendar'" />
            </div>

            <div class="col-12">
              <ListView v-if="leaveStore.tabValue === 'list'" />
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </div>

  <!-- modal ตารางสถิติการลา -->
  <q-dialog v-model="modalStatsTable" persistent>
    <q-card style="min-width: 85%">
      <q-card-section class="row items-center q-pa-sm">
        <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          v-close-popup
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-card-section>
      <q-separator />
      <q-card-section class="q-p-md row">
        <q-table
          flat
          bordered
          dense
          :rows="leaveStore.options"
          :columns="columns"
          row-key="name"
          class="col-12"
          hide-bottom
          v-model:pagination="pagination"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.borderTop {
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}
</style>