hrms-checkin/src/components/TableHistory.vue

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

// importStores
import { useChekIn } from "@/stores/chekin";

// importComponent
import Popup from "@/components/PopUp.vue";

const stores = useChekIn();

const columns = ref<QTableProps["columns"]>([
  {
    name: "date",
    align: "left",
    label: "วัน/เดือน/ปี",
    sortable: true,
    field: "date",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "in",
    align: "left",
    label: "เวลาเข้างาน",
    sortable: true,
    field: "in",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "out",
    align: "left",
    label: "เวลาออกงาน",
    sortable: true,
    field: "out",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "Morningstatus",
    align: "left",
    label: "สถานะช่วงเช้า",
    sortable: true,
    field: "Morningstatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "AfternoonStatus",
    align: "left",
    label: "สถานะช่วงบ่าย",
    sortable: true,
    field: "AfternoonStatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  // {
  //   name: "loIn",
  //   align: "left",
  //   label: "พิกัด",
  //   sortable: true,
  //   field: "loIn",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },

  // {
  //   name: "loOut",
  //   align: "left",
  //   label: "พิกัด",
  //   sortable: true,
  //   field: "loOut",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "status",
  //   align: "left",
  //   label: "สถานะ",
  //   sortable: true,
  //   field: "status",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px; width:10%;",
  // },
]);
// 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 pagination = ref({
  page: 1,
  rowsPerPage: 10,
});
</script>
<template>
  <q-table
    flat
    bordered
    class="custom-table2"
    :columns="columns"
    :rows="stores.rows"
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
    :grid="$q.screen.gt.xs ? false : true"
    v-model:pagination="pagination"
  >
    <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 === 'Morningstatus'"
            :class="classStatus(props.row.Morningstatus)"
          >
            {{ props.row.Morningstatus }}
          </div>
          <div
            v-else-if="col.name === 'AfternoonStatus'"
            :class="classStatus(props.row.AfternoonStatus)"
          >
            {{ props.row.AfternoonStatus }}
          </div>
          <div v-else>
            {{ col.value }}
          </div>
        </q-td>
        <q-td>
          <q-btn
            v-if="props.row.statusEdit === 'edit'"
            outline
            icon="edit"
            label="ขอแก้ไข"
            color="info"
            @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.statusEditName }}</q-chip
          >
        </q-td>
      </q-tr>
    </template>
    <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 == 'Morningstatus'"
                    :class="classStatus(props.row.Morningstatus)"
                    >{{ col.value }}</span
                  >
                  <span
                    v-else-if="col.name == 'AfternoonStatus'"
                    :class="classStatus(props.row.AfternoonStatus)"
                    >{{ 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="props.row.statusEdit === 'edit'">
                <q-btn
                  class="full-width text-cen"
                  outline
                  rounded
                  icon="edit"
                  label="ขอแก้ไข"
                  color="info"
                  size="sm"
                  @click="openPopup(props.row)"
                />
              </div>
              <div class="col" v-else>
                <q-chip
                  class="full-width"
                  :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
                  :text-color="`${stores.classColorStatus(
                    props.row.statusEdit
                  )}-7`"
                >
                  {{ props.row.statusEditName }}
                </q-chip>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </template>
    <template v-slot:pagination="scope">
      <q-pagination
        v-model="pagination.page"
        active-color="primary"
        color="dark"
        :max="scope.pagesNumber"
        :max-pages="5"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template>
  </q-table>

  <Popup
    :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>