Merge branch 'develop' of https://github.com/Frappet/bma-ehr-admin into develop

src/main.ts

@@ -14,6 +14,11 @@ import th from "quasar/lang/th";
 import "@vuepic/vue-datepicker/dist/main.css";
 import http from "./plugins/http";
 import { createPinia } from "pinia";
+
+import CodeDiff from "v-code-diff";
+import json from "highlight.js/lib/languages/json";
+
+CodeDiff.hljs.registerLanguage("json", json);
 // organization
 // position
 // positionEmployee
@@ -31,6 +36,7 @@ const pinia = createPinia();
 // เพิ่ม Global Filters ลงใน App
 app.config.globalProperties.$filters = filters;
 
+app.use(CodeDiff);
 app.use(router);
 app.use(pinia);
 app.use(qDraggableTable);

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const openDialog = defineModel<boolean>("openDialog", {
+  required: true,
+  default: false,
+});
+
+defineProps<{
+  title: string;
+  close?: (...args: unknown[]) => void;
+}>();
+</script>
+
+<template>
+  <q-dialog v-model="openDialog">
+    <q-card style="width: 100%">
+      <!-- header -->
+
+      <DialogHeader :tittle="title" :close="close" />
+
+      <q-separator />
+
+      <!-- body -->
+      <q-card-section class="scroll" style="height: 80vh">
+        <slot />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+@media (min-width: 600px) {
+  .q-dialog__inner--minimized > div {
+    max-width: 80%;
+  }
+}
+</style>

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,101 @@ 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"
+        :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"
+          :class="{
+            'self-center': index !== 'dataDiff',
+            'q-pt-md': index === 'dataDiff',
+          }"
+          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
+          class="self-center"
+          v-if="index === 'startTimeStamp' && typeof item === 'string'"
+        >
+          {{ date2Thai(new Date(item), false, true) }}
+        </div>
+
+        <div class="self-center" v-if="index === 'method'">
+          <q-badge text-color="blue" style="background-color: #f0ecec">{{
+            item ?? "-"
+          }}</q-badge>
+        </div>
+
+        <div class="self-center" 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 self-center"
+          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>

src/modules/03_logs/interface/response/Main.ts

@@ -13,14 +13,21 @@ interface ResRound {
 
 interface ResLog {
   endTimeStamp: Date;
-  endpoint: string;
-  host: string;
-  logType: string;
-  method: string;
+  dataDiff?: {
+    //
+    before: string;
+    after: string;
+  };
+  endpoint: string; //
+  host: string; //
+  logType: string; //
+  method: string; //
   processTime: number;
-  responseCode: number;
+  responseCode: number; //
   startTimeStamp: Date;
   systemName: string;
+  username: string; //
+  responseDescription: string; //
   tId: string;
 }
 

src/modules/04_system/components/formSchedule .vue

@@ -41,7 +41,7 @@ watch(typeTime, () => {
         <div class="col-3">
           <q-radio v-model="typeTime" val="set" label="กำหนดเวลา" />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             v-model="time"
             outlined
@@ -56,7 +56,7 @@ watch(typeTime, () => {
         <div class="col-3">
           <q-radio v-model="typeTime" val="start" label="เริ่มทุก" />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-select
             label="เลือก"
             v-model="timeStartEvery"