hrms-mgt/src/modules/04_registryPerson/components/detail/DialogHistory.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";

import type { QTableColumn } from "quasar";
import type { DataHistory } from "@/modules/04_registryPerson/interface/index/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const { onSearchDataTable, findOrgNameHtml } = useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
const columns = defineModel<QTableColumn[]>("columns", {
  required: true,
});
const visibleColumnsMain = defineModel<string[]>("visibleColumns", {
  required: true,
});

const props = defineProps({
  fetchData: { type: Function, required: true },
});

const filter = ref<string>("");
const rows = ref<DataHistory[]>([]);
const dataMain = ref<DataHistory[]>([]);
const visibleColumns = ref<string[]>([]);
const pagination = ref({
  sortBy: "lastUpdatedAt",
});

async function fetchDataTable() {
  visibleColumns.value = visibleColumnsMain.value;
  const data = await props?.fetchData?.();
  dataMain.value = data;
  rows.value = data;
}

/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
function serchDataTable() {
  rows.value = onSearchDataTable(filter.value, dataMain.value, columns.value);
}

watch(
  () => modal.value,
  () => {
    if (modal.value) {
      fetchDataTable();
    } else {
      filter.value = "";
      dataMain.value = [];
      rows.value = [];
      pagination.value.sortBy = "lastUpdatedAt";
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 80%">
      <DialogHeader :tittle="title" :close="() => (modal = false)" />

      <q-separator />
      <q-card-section style="max-height: 50vh" class="scroll">
        <div class="row q-gutter-sm q-mb-sm">
          <q-space />
          <q-input
            dense
            v-model="filter"
            outlined
            placeholder="ค้นหา"
            @keydown.enter.prevent="serchDataTable"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
          <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"
            style="min-width: 140px"
          />
        </div>

        <d-table
          ref="table"
          flat
          bordered
          dense
          :columns="columns"
          :rows="rows"
          class="custom-header-table"
          :visible-columns="visibleColumns"
          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-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.id">
                <div v-if="col.name === 'no'">
                  {{ props.rowIndex + 1 }}
                </div>
                <div v-else-if="col.name == 'organization'" class="text-html">
                  {{
                    props.row
                      ? findOrgNameHtml({
                          root: props.row.orgRoot,
                          child1: props.row.orgChild1,
                          child2: props.row.orgChild2,
                          child3: props.row.orgChild3,
                          child4: props.row.orgChild4,
                        })
                      : "-"
                  }}
                </div>
                <div v-else>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped></style>