hrms-checkin/src/components/TableHistory.vue

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

// importStores
import { useChekIn } from '@/stores/chekin'

// importComponent
import Popup from '@/components/PopUp.vue'

const stores = useChekIn()
const selected = ref<string[]>([])

/** props from page */
const props = defineProps({
  paging: {
    type: Boolean,
    defualt: false,
  },
  // selected: {
  //   type: Array,
  //   defualt: [],
  // },
  pageSize: {
    type: Number,
    defualt: 10,
  },
  page: {
    type: Number,
    defualt: 1,
  },
  maxPage: {
    type: Number,
    defualt: 1,
  },
  total: {
    type: Number,
    defualt: 0,
  },
  nornmalData: {
    type: Boolean,
    defualt: false,
  },
  nextPageVisible: {
    type: Boolean,
    defualt: false,
  },
  publicData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  updateData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  statusPayment: {
    type: Boolean,
    required: false,
  },
  setSeat: {
    type: Boolean,
    required: false,
  },
  publicNoBtn: {
    type: Boolean,
    defualt: false,
  },
  fetchData: {
    type: Function,
    default: () => console.log('not function'),
  },
  changePage: {
    type: Function,
    default: () => console.log('not function'),
  },
})

const keyword = ref<string>()

const emit = defineEmits(['update:change-page'])

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

// Pagination - page & change page & get new data
const currentPage = ref<number>(1)
watch(
  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
  () => {
    emit(
      'update:change-page',
      currentPage.value,
      initialPagination.value.rowsPerPage,
      true,
      keyword.value
    )
  }
)

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

async function filterFn() {
  emit(
    'update:change-page',
    1,
    initialPagination.value.rowsPerPage,
    true,
    keyword.value
  )
}

/** column history table */
const columns = ref<QTableProps['columns']>([
  {
    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%;',
  },
  {
    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%;',
  },
])
const visibleColumns = ref<string[]>([
  'checkInDate',
  'checkInTime',
  'checkInLocation',
  'checkInStatus',
  'checkOutTime',
  'checkOutLocation',
  'checkOutStatus',
])
// popup
const modalPopup = ref<boolean>(false)
const titlePopup = ref<string>('')
const dataRow = ref<any>()
function openPopup(data: any) {
  const title = 'แก้ไขลงเวลา'
  modalPopup.value = true
  titlePopup.value = title
  dataRow.value = data
}

function closePopup() {
  modalPopup.value = false
}

function classStatus(status: string) {
  switch (status) {
    case 'ขาดราชการ':
      return 'text-red'
    case 'ปกติ':
      return 'text-blue'
    case 'สาย':
      return 'text-yellow-8'
    default:
      break
  }
}

const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
  if (
    checkInStatus === 'ขาด' ||
    checkInStatus === 'สาย' ||
    checkOutStatus === 'ขาด' ||
    checkOutStatus === 'สาย'
  )
    return true
  else false
}
</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="ค้นหา"
        debounce="300"
        @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"
        options-cover
      />
    </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>
          <q-btn
            v-if="
              checkRequestEdit(
                props.row.checkInStatus,
                props.row.checkOutStatus
              )
            "
            style="min-width: 110px"
            outline
            icon="edit"
            size="12px"
            label="ขอแก้ไข"
            color="cyan-6"
            @click="openPopup(props.row)"
          />
          <!-- <q-chip
            v-else
            :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
            :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
            >{{ props.row.statusEdit }}</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">
              <div
                class="col"
                v-if="
                  checkRequestEdit(
                    props.row.checkInStatus,
                    props.row.checkOutStatus
                  )
                "
              >
                <q-btn
                  class="full-width text-cen"
                  outline
                  icon="edit"
                  label="ขอแก้ไข"
                  color="info"
                  size="sm"
                  @click="openPopup(props.row)"
                />
              </div>
              <div class="col" v-else>
                <q-chip
                  :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
                  :text-color="`${stores.classColorStatus(
                    props.row.statusEdit
                  )}-7`"
                >
                  {{ props.row.statusEdit }}
                </q-chip>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </template>
    <!-- <template v-slot:pagination="scope">
      <q-pagination
        v-model="currentPage"
        active-color="primary"
        color="dark"
        :max="scope.pagesNumber"
        :max-pages="5"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template> -->
    <template v-slot:pagination="scope">
      ทั้งหมด {{ 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>

  <Popup
    :fetchData="props.fetchData"
    :modal="modalPopup"
    :clickClose="closePopup"
    :title="titlePopup"
    :dataById="dataRow"
  />
</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>