ปรับทะเบียนประวัตื ข้อมูลส่วนตัว

src/modules/04_registryPerson/components/detail/DialogHistory.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableColumn, QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const { onSearchDataTable } = 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<any[]>([]);
+const dataMain = ref<any[]>([]);
+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.pervent="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>
+                  {{ 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>