hrms-checkin/src/components/TableHistory.vue

<script setup lang="ts">
import { ref, watch } from 'vue'

import { useCounterMixin } from '@/stores/mixin'
import { useChekIn } from '@/stores/chekin'

import type { QTableProps } from 'quasar'
import type { Pagination, DataCheckIn } from '@/interface/index/Main'

import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
const { date2Thai } = useCounterMixin()

const stores = useChekIn()

/**
 * props ข้อมูลจาก Components Page HistoryView
 */
const props = defineProps({
  paging: {
    type: Boolean,
    defualt: false,
  },
  pageSize: {
    type: Number,
    defualt: 10,
  },
  page: {
    type: Number,
    defualt: 1,
  },
  maxPage: {
    type: Number,
    defualt: 1,
  },
  total: {
    type: Number,
    defualt: 0,
  },
  tab: {
    type: String,
    defualt: '',
    required: true,
  },
  fetchData: {
    type: Function,
    default: () => console.log('not function'),
  },
  changePage: {
    type: Function,
    default: () => console.log('not function'),
  },
})
const emit = defineEmits(['update:change-page'])

const keyword = ref<string>('')
const tab = ref<string>(props.tab?.toString())
const selected = ref<string[]>([])

// column history table
const columns = ref<QTableProps['columns']>(
  props.tab == 'history'
    ? [
        {
          name: 'checkInDate',
          align: 'left',
          label: 'วัน/เดือน/ปี',
          sortable: true,
          field: 'checkInDate',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
        {
          name: 'checkInTime',
          align: 'left',
          label: 'เวลาเข้างาน',
          sortable: true,
          field: 'checkInTime',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
        {
          name: 'checkInLocation',
          align: 'left',
          label: 'พิกัด',
          sortable: true,
          field: 'checkInLocation',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px',
        },
        {
          name: 'checkInStatus',
          align: 'left',
          label: 'สถานะช่วงเช้า',
          sortable: true,
          field: 'checkInStatus',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
        {
          name: 'checkOutTime',
          align: 'left',
          label: 'เวลาออกงาน',
          sortable: true,
          field: 'checkOutTime',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
          format: (val: string, row: DataCheckIn) => {
            return row.checkOutStatus != '-' && val ? val : '-'
          },
        },
        {
          name: 'checkOutLocation',
          align: 'left',
          label: 'พิกัด',
          sortable: true,
          field: 'checkOutLocation',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px',
        },
        {
          name: 'checkOutStatus',
          align: 'left',
          label: 'สถานะช่วงบ่าย',
          sortable: true,
          field: 'checkOutStatus',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
      ]
    : [
        {
          name: 'checkInDateTime',
          align: 'left',
          label: 'วัน/เดือน/ปี',
          sortable: true,
          field: (v) => date2Thai(v.checkInDateTime),
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
        {
          name: 'checkInTime',
          align: 'left',
          label: 'เวลาเข้างาน',
          sortable: true,
          field: 'checkInTime',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
        },
        {
          name: 'checkInLocation',
          align: 'left',
          label: 'พิกัด',
          sortable: true,
          field: 'checkInLocation',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px',
        },
        {
          name: 'checkOutTime',
          align: 'left',
          label: 'เวลาออกงาน',
          sortable: true,
          field: 'checkOutTime',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px; width:15%;',
          format: (val: string, row: DataCheckIn) => {
            return row.checkOutStatus != '-' && val ? val : '-'
          },
        },
        {
          name: 'checkOutLocation',
          align: 'left',
          label: 'พิกัด',
          sortable: true,
          field: 'checkOutLocation',
          headerStyle: 'font-size: 14px',
          style: 'font-size: 14px',
        },
      ]
)
const visibleColumns = ref<string[]>([
  'checkInDateTime',
  'checkInDate',
  'checkInTime',
  'checkInLocation',
  'checkInStatus',
  'checkOutTime',
  'checkOutLocation',
  'checkOutStatus',
])

const currentPage = ref<number>(1) //หน้าปัจจุบัน
// Pagination - initial pagination
const initialPagination = ref<Pagination>({
  sortBy: null,
  descending: false,
  page: 1,
  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
})

// Pagination - update rowsPerPage
async function updatePagination(newPagination: Pagination) {
  initialPagination.value = newPagination
  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
}

async function filterFn() {
  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
  emit(
    'update:change-page',
    1,
    initialPagination.value.rowsPerPage,
    keyword.value
  )
}
const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา

/**
 * เปิด popup แก้ไขลงเวลา
 * กำหนดค่า titlePopup เป็น แก้ไขลงเวลา
 * @param data ข้อมูลการลงเวลา
 */
function openPopup(data: DataCheckIn) {
  const title = 'แก้ไขลงเวลา'
  modalPopup.value = true
  titlePopup.value = title
  dataRow.value = data
}

/**
 * ปิด popup แก้ไขลงเวลา
 */
function closePopup() {
  modalPopup.value = false
}

/**
 * ฟังก์ชั่นสำหรับ convert ข้อความสถานะของการลงเวลา ปกติ, ขาดราชการ หรือสาย
 * @param status ฟิลด์สถานะ
 * @returns ข้อความสถานะ ปกติ, ขาดราชการ ,สาย หรือปฏิบัติงานไม่ครบตามกำหนดเวลา
 */
function classStatus(status: string) {
  switch (status) {
    case 'ขาดราชการ':
      return 'text-red'
    case 'ปกติ':
      return 'text-blue'
    case 'สาย':
      return 'text-yellow-8'
    case 'ปฏิบัติงานไม่ครบตามกำหนดเวลา':
      return 'text-orange-8'
    default:
      break
  }
}

const modalReject = ref<boolean>(false) // modal popup หมายเหตุการไม่อนุมัติ
const reasonRejrct = ref<string>('') // หมายเหตุการไม่อนุมัติ

/**
 * เปิด popup หมายเหตุการไม่อนุมัติ
 * @param data  ข้อมูลการลงเวลา
 */
function onClickOpenPopupRejrct(data: DataCheckIn) {
  if (data.editStatus === 'ไม่อนุมัติ') {
    reasonRejrct.value = data.editReason
    modalReject.value = true
  }
}

/**
 * watch currentPage และ rowsPerPage
 */
watch(
  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
  () => {
    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
    emit(
      'update:change-page',
      currentPage.value,
      initialPagination.value.rowsPerPage,
      keyword.value
    )
  }
)
</script>

<template>
  <div class="row col-12 q-col-gutter-sm q-mb-sm">
    <q-space />
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="keyword"
        label="ค้นหา"
        @keydown.enter.prevent="filterFn"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="visibleColumns"
        v-model="visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="columns"
        option-value="name"
        style="min-width: 140px"
      />
    </div>
  </div>

  <q-table
    flat
    bordered
    class="custom-table2"
    :columns="columns"
    :rows="stores.rows"
    :visible-columns="visibleColumns"
    virtual-scroll
    v-model:selected="selected"
    :virtual-scroll-sticky-size-start="48"
    :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
    :rows-per-page-options="[10, 25, 50, 100]"
    :grid="$q.screen.gt.xs ? false : true"
    :pagination="initialPagination"
    @update:pagination="updatePagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
        <q-th auto-width> </q-th>
      </q-tr>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props" class="cursor-pointer">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div
            v-if="col.name === 'checkInStatus'"
            :class="classStatus(props.row.checkInStatus)"
          >
            {{ props.row.checkInStatus }}
          </div>
          <div
            v-else-if="col.name === 'checkOutStatus'"
            :class="classStatus(props.row.checkOutStatus)"
          >
            {{ props.row.checkOutStatus }}
          </div>
          <div v-else>
            {{ col.value ?? '-' }}
          </div>
        </q-td>
        <q-td v-if="tab === 'history'">
          <q-btn
            v-if="
              !props.row.isEdit &&
              props.row.checkInStatus != '-' &&
              props.row.checkOutStatus != '-' &&
              (props.row.checkInStatus != 'ปกติ' ||
                props.row.checkOutStatus != 'ปกติ')
            "
            style="min-width: 110px"
            outline
            icon="edit"
            size="12px"
            label="ขอแก้ไข"
            color="cyan-6"
            @click="openPopup(props.row)"
          />
        </q-td>
        <q-td
          v-else-if="tab === 'time'"
          @click="onClickOpenPopupRejrct(props.row)"
        >
          <q-chip
            :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
            :text-color="`${stores.classColorStatus(props.row.editStatus)}-7`"
            >{{ props.row.editStatus }}</q-chip
          >
        </q-td>
      </q-tr>
    </template>

    <!-- กรณีแสดงผลบน mobile -->
    <template #item="props">
      <div
        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
      >
        <q-card bordered flat class="q-py-sm shadow-0">
          <q-list dense>
            <q-item v-for="col in props.cols" :key="col.name" :props="props">
              <q-item-section>
                <q-item-label caption>{{ col.label }}</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-item-label>
                  <span
                    v-if="col.name == 'checkInStatus'"
                    :class="classStatus(props.row.checkInStatus)"
                    >{{ col.value }}</span
                  >
                  <span
                    v-else-if="col.name == 'checkOutStatus'"
                    :class="classStatus(props.row.checkOutStatus)"
                    >{{ col.value }}</span
                  >
                  <span v-else class="text-black">{{ col.value }} </span>
                </q-item-label>
              </q-item-section>
              <q-separator />
            </q-item>
          </q-list>
          <q-card-section>
            <div class="row" v-if="tab === 'history'">
              <div
                class="col"
                v-if="
                  !props.row.isEdit &&
                  props.row.checkInStatus != '-' &&
                  props.row.checkOutStatus != '-' &&
                  (props.row.checkInStatus != 'ปกติ' ||
                    props.row.checkOutStatus != 'ปกติ')
                "
              >
                <q-btn
                  class="full-width text-cen"
                  outline
                  icon="edit"
                  label="ขอแก้ไข"
                  color="info"
                  size="12px"
                  @click="openPopup(props.row)"
                />
              </div>
            </div>

            <div
              class="row"
              v-else-if="tab === 'time'"
              @click="onClickOpenPopupRejrct(props.row)"
            >
              <div>
                <q-chip
                  :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
                  :text-color="`${stores.classColorStatus(
                    props.row.editStatus
                  )}-7`"
                >
                  {{ props.row.editStatus }}
                </q-chip>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </template>
    <template v-slot:pagination>
      ทั้งหมด {{ props.total }} รายการ
      <q-pagination
        v-model="currentPage"
        active-color="primary"
        color="dark"
        :max-pages="5"
        size="sm"
        boundary-links
        direction-links
        :max="Number(props.maxPage)"
      ></q-pagination>
    </template>
  </q-table>

  <!-- หมายเหตุการไม่อนุมัติ -->
  <q-dialog v-model="modalReject">
    <q-card style="width: 35vw; max-width: 35vw">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle2 text-bold"
          >หมายเหตุการไม่อนุมัติ</q-toolbar-title
        >
        <q-btn
          icon="close"
          unelevated
          round
          dense
          style="color: #ff8080; background-color: #ffdede"
          v-close-popup
        />
      </q-toolbar>
      <q-form ref="myForm">
        <q-separator />
        <q-card-section class="q-pa-md bg-grey-1">
          <div class="row col-12">{{ reasonRejrct }}</div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>

  <!-- แก้ไขลงเวลา -->
  <Popup
    :fetch-data="props.fetchData"
    :modal="modalPopup"
    :click-close="closePopup"
    :title="titlePopup"
    :data-ById="dataRow"
    action="edit"
  />
</template>

<style scoped lang="scss">
.icon-color {
  color: #4154b3;
}

.items-center {
  align-items: center;
  justify-content: center;
}

.custom-table2 {
  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
  .text-caption {
    text-align: left;
  }
}
.q-card-section-last {
  display: flex;
  justify-content: flex-end;
}
</style>