hrms-admin/src/modules/03_logs/components/LogTable.vue

<script setup lang="ts">
import { ref } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const { date2Thai } = useCounterMixin();
const columns = ref<QTableProps["columns"]>([
  {
    name: "timestamp",
    align: "left",
    label: "เวลา",
    sortable: true,
    field: "timestamp",
    headerStyle: "font-size: 14px",
    format: (v) => date2Thai(v, false, true),
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "username",
    align: "left",
    label: "username",
    sortable: true,
    field: "username",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "host",
    align: "left",
    label: "host",
    sortable: true,
    field: "host",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "endpoint",
    align: "left",
    label: "endpoint",
    sortable: true,
    field: "endpoint",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "method",
    align: "left",
    label: "method",
    sortable: true,
    field: "method",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "responseCode",
    align: "left",
    label: "responseCode",
    sortable: true,
    field: "responseCode",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "message",
    align: "left",
    label: "ข้อความ",
    sortable: true,
    field: "message",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

const selectDate = ref<Date>(new Date());
const pagination = ref({
  page: 1,
  rowsPerPage: 10,
});
const inputSearch = ref<string>("");
const visibleColumns = ref<string[]>([
  "timestamp",
  "username",
  "host",
  "endpoint",
  "method",
  "responseCode",
  "status",
  "message",
]);
const rows = [
  {
    timestamp: new Date(),
    username: "สมรักษ์ จงใจรักชาติ",
    host: "http://localhost:3005/lists",
    endpoint: "registry-employee",
    method: "Put",
    responseCode: 401,
    status: "Error",
    message: "Unknow value Found",
  },
  {
    timestamp: new Date(),
    username: "สมรักษ์ จงใจรักชาติ",
    host: "http://localhost:3005/lists",
    endpoint: "registry-employee",
    method: "Delete",
    responseCode: 200,
    status: "Warning",
    message: "Balance getting below",
  },
  {
    timestamp: new Date(),
    username: "สมรักษ์ จงใจรักชาติ",
    host: "http://localhost:3005/lists",
    endpoint: "registry-employee",
    method: "Get",
    responseCode: 200,
    status: "Info",
    message: "Backup success",
  },
];
</script>

<template>
  <div class="bg-white">
    <div class="row q-pa-md">
      <datepicker
        menu-class-name="modalfix"
        v-model="selectDate"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        @update:modelValue="console.log('test')"
        week-start="0"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            outlined
            dense
            :model-value="date2Thai(selectDate)"
            hide-bottom-space
          >
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer" color="primary">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
      <q-space />
      <div class="items-center q-gutter-md" style="display: flex">
        <!-- ค้นหาข้อความใน table -->
        <q-input
          standout
          dense
          clearable
          :model-value="inputSearch"
          ref="filterRef"
          @update:model-value="console.log('update')"
          outlined
          debounce="300"
          placeholder="ค้นหา"
          style="max-width: 200px"
          class="q-ml-sm"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
        <!-- แสดงคอลัมน์ใน table -->
        <q-select
          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
          style="min-width: 150px"
        />
      </div>
    </div>
    <d-table
      ref="table"
      :columns="columns"
      :rows="rows"
      row-key="name"
      flat
      bordered
      :paging="true"
      :filter="inputSearch"
      dense
      v-model:pagination="pagination"
      :rows-per-page-options="[20, 50, 100]"
      class="custom-header-table"
      :visible-columns="visibleColumns"
    >
      <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-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props" class="cursor-pointer">
          <q-td v-for="col in props.cols" :key="col.id">
            <div v-if="col.name === 'username'">
              {{ col.value }}
              <div class="text-grey">{{ 12421321334 }}</div>
            </div>
            <div v-else-if="col.name === 'method'">
              <q-badge text-color="blue" style="background-color: #f0ecec">{{
                col.value
              }}</q-badge>
            </div>
            <div v-else-if="col.name === 'status'">
              <q-badge
                text-color="white"
                :color="
                  col.value === 'Error'
                    ? 'red'
                    : col.value === 'Info'
                    ? 'primary'
                    : 'warning'
                "
                >{{ col.value }}</q-badge
              >
            </div>
            <div
              v-else-if="col.name === 'message'"
              :class="`text-${
                props.row.status === 'Error'
                  ? 'red'
                  : props.row.status === 'Info'
                  ? 'primary'
                  : 'warning'
              }`"
            >
              {{ col.value }}
            </div>
            <div v-else>
              {{ col.value === "" || col.value === null ? "-" : col.value }}
            </div>
          </q-td>
        </q-tr>
      </template>
    </d-table>
  </div>
</template>

<style scoped></style>