แสดงข้อมูลที่เปลี่ยนแปลง

src/modules/03_logs/components/LogTable.vue

@@ -5,8 +5,13 @@ 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);
@@ -90,6 +95,7 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
     name: "responseDescription",
     align: "left",
@@ -101,8 +107,27 @@ const columns = ref<QTableProps["columns"]>([
     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 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,
@@ -118,6 +143,7 @@ const visibleColumns = ref<string[]>([
   "responseCode",
   "logType",
   "responseDescription",
+  "dataDiff",
 ]);
 
 function handleScroll(event: any) {
@@ -302,6 +328,36 @@ onMounted(() => {
                   {{ col.value ?? "-" }}
                 </div>
 
+                <div v-else-if="col.name === 'dataDiff' && !!col.value">
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    icon="mdi-eye-outline"
+                    color="primary"
+                    size="12px"
+                    @click.petvent="
+                      () => {
+                        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,
+                          dataDiff: props.row.dataDiff,
+                        };
+                        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>
@@ -313,6 +369,94 @@ onMounted(() => {
       </div>
     </div>
   </div>
+
+  <DialogDataDiff
+    v-model:open-dialog="openDialog"
+    title="รายละเอียดข้อมูล"
+    :close="
+      () => {
+        openDialog = false;
+      }
+    "
+    style="max-width: 100%"
+  >
+    <div class="column" style="border: #f0ecec 1px solid">
+      <div
+        class="col row items-center"
+        :class="{ 'bg-grey-3': i % 2 }"
+        v-for="(item, index, i) in currentlogData"
+        :key="index"
+        style="border-bottom: #f0ecec 1px solid; min-height: 40px"
+      >
+        <div
+          class="col q-pl-sm"
+          style="max-width: 150px; border-right: #f0ecec 1px solid"
+        >
+          {{
+            {
+              startTimeStamp: "เวลา",
+              username: "ผู้ใช้",
+              host: "Host",
+              endpoint: "Endpoint",
+              method: "Method",
+              responseCode: "Response Code",
+              logType: "สถานะ",
+              responseDescription: "ข้อความ",
+              dataDiff: "ข้อมูลที่เปลี่ยนแปลง",
+            }[index] || index
+          }}
+        </div>
+
+        <div v-if="index === 'startTimeStamp' && typeof item === 'string'">
+          {{ date2Thai(new Date(item), false, true) }}
+        </div>
+
+        <div v-if="index === 'method'">
+          <q-badge text-color="blue" style="background-color: #f0ecec">{{
+            item ?? "-"
+          }}</q-badge>
+        </div>
+
+        <div v-else-if="index === 'logType'">
+          <q-badge
+            text-color="white"
+            :color="
+              item === 'error' ? 'red' : item === 'info' ? 'primary' : 'warning'
+            "
+            >{{ item ?? "-" }}</q-badge
+          >
+        </div>
+
+        <div
+          class="col"
+          v-if="
+            index !== 'dataDiff' &&
+            index !== 'method' &&
+            index !== 'logType' &&
+            index !== 'startTimeStamp'
+          "
+        >
+          {{ 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>
+    </div>
+  </DialogDataDiff>
 </template>
 
 <style scoped></style>