start commit for admin system

src/modules/01_metadata/components/Indicators/DialogHistory.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any[]>("rows", { required: true });
+
+const visibleColumns = ref<string[]>(["createdFullName", "lastUpdatedAt"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "เวลาที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+function close() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 30vw">
+      <DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :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.name" :props="props">
+                <div v-if="col.name == 'lastUpdatedAt'" class="table_ellipsis">
+                  {{ col.value ? date2Thai(col.value, false, true) : "-" }}
+                </div>
+                <div v-else class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>