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

<script setup lang="ts">
import { cloneVNode, onMounted, ref } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/03_logs/stores/main";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";

import DialogDataDiff from "@/modules/03_logs/components/DialogDataDiff.vue";

const route = useRoute();

import type { ResLog } from "@/modules/03_logs/interface/response/Main";

/** importStore*/
const storeData = useDataStore();
const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
const { date2Thai } = useCounterMixin();
const columns = ref<QTableProps["columns"]>([
  {
    name: "startTimeStamp",
    align: "left",
    label: "เวลา",
    field: "startTimeStamp",
    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: "ผู้ใช้",
    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",
    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",
    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",
    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: "Response Code",
    field: "responseCode",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "logType",
    align: "left",
    label: "สถานะ",
    field: "logType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },

  {
    name: "responseDescription",
    align: "left",
    label: "ข้อความ",
    field: "responseDescription",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dataDiff",
    align: "left",
    label: "รายละเอียด",
    field: "dataDiff",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const startTime = ref<Date | null>(null);
const endTime = ref<Date | null>(null);
const startDate = ref<string>("");
const endDate = ref<string>("");
const sortTime = ref<"desc" | "asc">("desc");
const openDialog = ref<boolean>(false);
const currentlogData =
  ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
const currentDataDiff = ref<{
  before: string;
  after: string;
}>({
  before: "",
  after: "",
});

const inputSearch = defineModel<string>("inputSearch");
const pagination = ref({
  page: 1,
  rowsPerPage: 0,
});

const labelDropdown = ref<string>("วันนี้");
const valDropdown = ref<string>("");
const searchStatus = ref<string>("");

const itemsDropdown = ref<any[]>([
  {
    labal: "วันนี้",
    val: "today",
  },
  {
    labal: "เมื่อวาน",
    val: "yesterday",
  },
  {
    labal: "ย้อนหลัง 24 ชั่วโมง",
    val: "past24hours",
  },
  {
    labal: "ย้อนหลัง 7 วัน",
    val: "past7days",
  },
  {
    labal: "ย้อนหลัง 30 วัน",
    val: "past30days",
  },
  {
    labal: "กำหนดเอง",
    val: "customized",
  },
]);

const statusOpt = ref<any[]>(["info", "warning", "error"]);

const visibleColumns = ref<string[]>([
  "startTimeStamp",
  "username",
  "host",
  "endpoint",
  "method",
  "responseCode",
  "logType",
  "responseDescription",
  "sequence",
  "dataDiff",
]);

function handleScroll() {
  let scrollFlag = false;

  return async (e: Event) => {
    if (scrollFlag) return;

    const element = e.target as HTMLElement;

    if (
      Math.abs(
        element.scrollHeight - element.clientHeight - element.scrollTop
      ) <= 1
    ) {
      scrollFlag = true;
      await storeData.fetchLog(
        {
          size: size.value ?? undefined,
          search: inputSearch.value ?? undefined,
          systemName: systemName.value ?? undefined,
          searchAfter: searchAfter.value ?? undefined,
          sort: sortTime.value,
          // date: new Date(startDate.value),
          startDate: new Date(startDate.value) ?? undefined,
          endDate: new Date(endDate.value) ?? undefined,
        },
        true
      );
      await new Promise((resolve) => setTimeout(resolve, 1000));
      scrollFlag = false;
    }
  };
}

const infiniteScroll = handleScroll();

function selectedDate() {
  if (!startDate.value) {
    const startDateToday = new Date();
    startDateToday.setHours(0, 0, 0, 0);

    // ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
    const endDateToday = new Date();
    endDateToday.setHours(23, 59, 59, 999);

    startDate.value = startDateToday.toISOString();
    endDate.value = endDateToday.toISOString();
  }
  // startDate.value = date.value[0].toISOString();
  // endDate.value = date.value[1].toISOString();

  // if (!!startTime.value) {
  //   replaceTimeInISOString(startDate.value, startTime.value, "start");
  // } else {
  //   const date = new Date(startDate.value);
  //   date.setHours(0, 0, 0, 0);
  //   startDate.value = date.toISOString();
  // }
  // if (!!endTime.value) {
  //   replaceTimeInISOString(endDate.value, endTime.value, "end");
  // } else {
  //   const date = new Date(endDate.value);
  //   date.setHours(23, 59, 59, 999);
  //   endDate.value = date.toISOString();
  // }

  logData.value = [];
  searchAfter.value = undefined;
  storeData.fetchLog(
    {
      size: size.value ?? undefined,
      search: inputSearch.value ?? undefined,
      systemName: systemName.value ?? undefined,
      searchAfter: searchAfter.value ?? undefined,
      sort: sortTime.value,
      searchStatus: searchStatus.value ?? undefined,
      // date: new Date(startDate.value),
      startDate: new Date(startDate.value),
      endDate: new Date(endDate.value),
    },
    true
  );
}

function classColorMethod(val: any) {
  switch (val) {
    case "GET":
      return "blue";
    case "PUT":
      return "warning";
    case "POST":
      return "primary";
    case "PATCH":
      return "teal-12";
    case "DELETE":
      return "red";

    default:
      break;
  }
}

function onItemClick(labal: string, type: string) {
  labelDropdown.value = labal;
  valDropdown.value = type;

  const setDateRange = (daysAgo: number = 0, endOfDay = false) => {
    const date = new Date();
    if (daysAgo) date.setDate(date.getDate() - daysAgo);
    date.setHours(
      endOfDay ? 23 : 0,
      endOfDay ? 59 : 0,
      endOfDay ? 59 : 0,
      endOfDay ? 999 : 0
    );
    return date.toISOString();
  };

  if (type === "today") {
    startDate.value = setDateRange(0);
    endDate.value = setDateRange(0, true);
  } else if (type === "yesterday") {
    startDate.value = setDateRange(1);
    endDate.value = setDateRange(1, true);
  } else if (type === "past24hours") {
    // ตั้งค่า startDate เป็น 24 ชั่วโมงที่แล้ว
    const startDatePast24Hours = new Date();
    startDatePast24Hours.setHours(startDatePast24Hours.getHours() - 24);
    startDate.value = startDatePast24Hours.toISOString();

    // ตั้งค่า endDate เป็นเวลาปัจจุบัน
    endDate.value = new Date().toISOString();
  } else if (["past7days", "past30days"].includes(type)) {
    const days = { past7days: 7, past30days: 30 }[type];
    startDate.value = setDateRange(days);
    endDate.value = new Date().toISOString();
  }

  type !== "customized" && selectedDate();

  startTime.value = null;
  endTime.value = null;
}

function updateDate() {
  if (startTime.value && endTime.value) {
    startDate.value = startTime.value.toISOString();
    endDate.value = endTime.value.toISOString();

    selectedDate();
  }
}

onMounted(() => {
  systemName.value = route.query.system as string;
  const date = new Date();
  date.setHours(0, 0, 0, 0); // ตั้งเวลาเป็น 00:00:00.000

  startDate.value = date.toISOString(); // แปลงเป็น ISO string
  endDate.value = new Date().toISOString();
});
</script>

<template>
  <div class="bg-white q-pa-md">
    <div class="row no-wrap">
      <div class="row col-7 q-col-gutter-md">
        <div>
          <q-btn-dropdown outline color="grey-5">
            <template v-slot:label>
              <div class="row items-center no-wrap">
                <div class="text-black">{{ labelDropdown }}</div>
              </div>
            </template>
            <q-list>
              <q-item
                dense
                v-for="(item, index) in itemsDropdown"
                clickable
                v-close-popup
                @click="onItemClick(item.labal, item.val)"
              >
                <q-item-section>
                  <q-item-label>{{ item.labal }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </div>

      <q-space />
      <div
        class="items-center justify-end q-gutter-md col-5"
        style="display: flex"
      >
        <!-- ค้นหาข้อความใน table -->
        <q-input
          standout
          dense
          clearable
          v-model="inputSearch"
          ref="filterRef"
          @update:model-value="
            storeData.fetchLog({
              size: size ?? undefined,
              search: inputSearch ?? undefined,
              systemName: systemName ?? undefined,
              sort: sortTime,
              // date: new Date(startDate),
              startDate: new Date(startDate),
              endDate: new Date(endDate),
            })
          "
          outlined
          debounce="500"
          placeholder="ค้นหา"
          style="max-width: 200px"
          class="q-ml-sm"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>

        <q-select
          v-model="searchStatus"
          label="ค้นหาสถานะ"
          dense
          emit-value
          map-options
          :options="statusOpt"
          option-value="id"
          option-label="name"
          lazy-rules
          hide-bottom-space
          borderless
          outlined
          style="width: 150px"
          :hide-dropdown-icon="false"
          @update:modelValue="selectedDate()"
          clearable
        >
          <template v-slot:selected-item="scope">
            <q-chip
              dense
              :tabindex="scope.tabindex"
              :color="
                scope.opt === 'info'
                  ? 'primary'
                  : scope.opt === 'warning'
                  ? 'warning'
                  : scope.opt === 'error'
                  ? 'red'
                  : 'white'
              "
              text-color="white"
              class="q-ma-none text-caption"
              style="border-radius: 3px; max-width: 60vw; word-wrap: break-word"
            >
              {{ scope.opt }}
            </q-chip>
          </template>
        </q-select>
        <!-- แสดงคอลัมน์ใน 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>
    <div
      v-if="valDropdown === 'customized'"
      class="row q-col-gutter-md q-mt-xs"
    >
      <div class="col-3">
        <datepicker
          v-model="startTime"
          :locale="'th'"
          :max-date="endTime"
          selectText="เลือก"
          cancelText="ยกเลิก"
          @update:modelValue="updateDate()"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
            parseInt(value + 543)
          }}</template>
          <template #trigger>
            <q-input
              dense
              outlined
              :model-value="
                startTime ? date2Thai(startTime, false, true) : null
              "
              :label="`${'วันเริ่มต้น'}`"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>

          <template #action-preview="{ value }">
            {{ date2Thai(value, false, true) }}
          </template>
        </datepicker>
      </div>
      <div class="col-3">
        <datepicker
          v-model="endTime"
          :locale="'th'"
          :enableTimePicker="true"
          selectText="เลือก"
          cancelText="ยกเลิก"
          @update:modelValue="updateDate()"
          :min-date="startTime"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
            parseInt(value + 543)
          }}</template>
          <template #trigger>
            <q-input
              dense
              outlined
              :model-value="endTime ? date2Thai(endTime, false, true) : null"
              :label="`${'วันสิ้นสุด'}`"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input>
          </template>
          <template #action-preview="{ value }">
            {{ date2Thai(value, false, true) }}
          </template>
        </datepicker>
      </div>
    </div>

    <div
      class="q-mt-md"
      style="max-height: 70vh; overflow: scroll"
      @scroll="infiniteScroll"
    >
      <d-table
        ref="table"
        :columns="columns"
        :rows="storeData.logData"
        row-key="name"
        flat
        bordered
        hide-pagination
        v-model:pagination="pagination"
        dense
        :rows-per-page-options="[0]"
        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">
              <div
                v-if="col.name === 'startTimeStamp'"
                class="text-weight-medium"
              >
                {{ col.label }}
                <q-btn
                  v-if="sortTime === 'desc'"
                  flat
                  round
                  size="8px"
                  icon="mdi-arrow-up"
                  @click="
                    () => {
                      sortTime = 'asc';
                      selectedDate();
                    }
                  "
                />
                <q-btn
                  v-else
                  flat
                  round
                  size="8px"
                  icon="mdi-arrow-down"
                  @click="
                    () => {
                      sortTime = 'desc';
                      selectedDate();
                    }
                  "
                />
              </div>
              <span v-else class="text-weight-medium">{{ col.label }}</span>
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" class="cursor-pointer" style="overflow: scroll">
            <q-td v-for="col in props.cols" :key="col.id">
              <div v-if="col.name === 'username'">
                <template v-if="props.row.userName && props.row.user">
                  {{ props.row.userName ?? "-" }}
                  <div class="text-grey" style="font-size: 65%">
                    {{ props.row.user ?? "-" }}
                  </div>
                </template>
                <template v-else> - </template>
              </div>
              <div v-else-if="col.name === 'method'">
                <q-badge
                  :text-color="classColorMethod(col.value)"
                  style="background-color: #f0ecec"
                  >{{ col.value ?? "-" }}</q-badge
                >
              </div>
              <div v-else-if="col.name === 'logType'">
                <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 === 'responseDescription'"
                :class="`text-${
                  props.row.logType === 'Error'
                    ? 'red'
                    : props.row.logType === 'info'
                    ? 'primary'
                    : 'warning'
                }`"
                class="ellipsis"
                style="max-width: 10vw"
              >
                {{ col.value ?? "-" }}
                <q-tooltip> {{ col.value }} </q-tooltip>
              </div>

              <div v-else-if="col.name === 'dataDiff'">
                <q-btn
                  dense
                  flat
                  round
                  icon="mdi-eye"
                  color="info"
                  @click.stop="
                    () => {
                      currentDataDiff = col.value;
                      currentlogData = {
                        startTimeStamp: props.row.startTimeStamp,
                        username: props.row.userName,
                        host: props.row.host,
                        endpoint: props.row.endpoint,
                        method: props.row.method,
                        responseCode: props.row.responseCode,
                        logType: props.row.logType,
                        responseDescription: props.row.responseDescription,
                        sequence: props.row.sequence,
                        dataDiff: props.row.dataDiff,
                        input: props.row.input,
                        output: props.row.output,
                      };
                      openDialog = true;
                    }
                  "
                >
                  <q-tooltip>ดูรายละเอียด </q-tooltip>
                </q-btn>
              </div>

              <div v-else class="ellipsis" style="max-width: 10vw">
                {{ col.value === "" || col.value === null ? "-" : col.value }}
                <q-tooltip> {{ col.value }} </q-tooltip>
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </div>

  <DialogDataDiff
    v-model:open-dialog="openDialog"
    title="รายละเอียดข้อมูล"
    :close="
      () => {
        openDialog = false;
      }
    "
    style="max-width: 100%"
  >
    <div style="border: #f0ecec 1px solid; border-radius: 7px">
      <template :key="key" v-for="(item, key, index) in currentlogData">
        <div
          class="col row row-color"
          style="border-bottom: #f0ecec 1px solid"
          v-if="!!item"
        >
          <div
            class="col q-pl-sm text-bold q-pa-sm"
            :class="{
              'self-center': ![
                'dataDiff',
                'input',
                'output',
                'sequence',
              ].includes(key),
            }"
            style="max-width: 150px"
          >
            {{
              {
                startTimeStamp: "เวลา",
                username: "ผู้ใช้",
                host: "Host",
                endpoint: "Endpoint",
                method: "Method",
                responseCode: "Response Code",
                logType: "สถานะ",
                responseDescription: "ข้อความ",
                sequence: "ลำดับการทำงาน",
                dataDiff: "ข้อมูลที่เปลี่ยนแปลง",
                input: "ข้อมูลเข้า",
                output: "ข้อมูลออก",
              }[key] || key
            }}
          </div>
          <div
            class="self-center"
            v-if="key === 'startTimeStamp' && typeof item === 'string'"
          >
            {{ date2Thai(new Date(item), true, true) }}
          </div>
          <div class="self-center" v-if="key === 'method'">
            <q-badge
              :text-color="classColorMethod(item)"
              style="background-color: #f0ecec"
            >
              {{ item ?? "-" }}
            </q-badge>
          </div>
          <div class="self-center" v-else-if="key === 'logType'">
            <q-badge
              text-color="white"
              :color="
                item === 'error'
                  ? 'red'
                  : item === 'info'
                  ? 'primary'
                  : 'warning'
              "
              >{{ item ?? "-" }}</q-badge
            >
          </div>
          <div class="col q-pr-md" v-else-if="key === 'sequence'">
            <div v-for="(row, index) in item">
              <div class="text-subtitle1 text-bold">
                ลำดับที่ {{ index + 1 }}
              </div>
              <div
                class="q-pa-md q-mb-md"
                style="
                  border: 1px solid hsla(0 0% 0% / 0.1);
                  border-radius: 7px;
                "
              >
                <div class="row" v-for="(value, key) in row" :key="key">
                  <div v-if="typeof key === 'string' && key === 'query'">
                    {{ `${key}: ` }}
                    <div
                      class="q-pa-md q-mt-sm"
                      style="
                        background-color: hsla(0 0% 0% / 0.07);
                        color: hsl(0 0% 30%);
                        border: 1px solid hsla(0 0% 0% / 0.1);
                        border-radius: 7px;
                      "
                      v-for="q in value"
                    >
                      {{ `${q}` }}
                    </div>
                  </div>
                  <div v-else-if="typeof key === 'string' && key === 'request'">
                    {{ `${key}: ` }}
                    <div
                      class="q-pa-md q-mt-sm"
                      style="
                        background-color: hsla(0 0% 0% / 0.07);
                        color: hsl(0 0% 30%);
                        border: 1px solid hsla(0 0% 0% / 0.1);
                        border-radius: 7px;
                        max-width: 60vw;
                        word-wrap: break-word;
                      "
                    >
                      <div v-for="(req, k) in value">
                        {{ `${k}: ${req}` }}
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    {{ `${key}: ${value}` }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="col self-center"
            v-if="
              key !== 'dataDiff' &&
              key !== 'method' &&
              key !== 'logType' &&
              key !== 'startTimeStamp' &&
              key !== 'sequence' &&
              key !== 'input' &&
              key !== 'output'
            "
          >
            {{ item }}
          </div>
          <div
            v-if="
              item &&
              typeof item === 'object' &&
              'before' in item &&
              'after' in item
            "
            class="col"
          >
            <code-diff
              :old-string="JSON.stringify(JSON.parse(item.before), null, 4)"
              :new-string="JSON.stringify(JSON.parse(item.after), null, 4)"
              output-format="side-by-side"
            />
          </div>
          <div
            class="col q-py-sm"
            v-if="(item && key === 'input') || key === 'output'"
          >
            <pre style="margin: 0; max-width: 100%; overflow-x: auto">{{
              item
            }}</pre>
          </div>
        </div>
      </template>
    </div>
  </DialogDataDiff>
</template>

<style>
.row-color:nth-child(2n + 1) {
  background-color: #eeeeee;
}

.dp__action_row {
  padding: 2px !important;
}
</style>