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

2024-07-24 17:57:25 +07:00 · 2024-07-24 17:57:25 +07:00 · ff93b49bc0
commit ff93b49bc0
parent 7b3a4c18ba 9f110ccc0c
7 changed files with 289 additions and 7 deletions
--- a/package.json
+++ b/package.json
@ -26,12 +26,14 @@
    "@vuepic/vue-datepicker": "^3.6.3",
    "axios": "^1.6.7",
    "bma-org-chart": "^0.0.8",
+    "highlight.js": "^11.10.0",
    "keycloak-js": "^20.0.2",
    "moment": "^2.29.4",
    "pinia": "^2.0.29",
    "quasar": "^2.11.1",
    "socket.io-client": "^4.7.4",
    "structure-chart": "^0.0.9",
+    "v-code-diff": "^1.12.0",
    "vue": "^3.4.15",
    "vue-currency-input": "^3.0.5",
    "vue-router": "^4.1.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -44,6 +44,9 @@ importers:
      bma-org-chart:
        specifier: ^0.0.8
        version: 0.0.8(typescript@4.7.4)
+      highlight.js:
+        specifier: ^11.10.0
+        version: 11.10.0
      keycloak-js:
        specifier: ^20.0.2
        version: 20.0.5
@ -62,6 +65,9 @@ importers:
      structure-chart:
        specifier: ^0.0.9
        version: 0.0.9(typescript@4.7.4)
+      v-code-diff:
+        specifier: ^1.12.0
+        version: 1.12.0(vue@3.4.31(typescript@4.7.4))
      vue:
        specifier: ^3.4.15
        version: 3.4.31(typescript@4.7.4)
@ -524,6 +530,18 @@ packages:
    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
    deprecated: Use @eslint/object-schema instead

+  '@intlify/core-base@9.13.1':
+    resolution: {integrity: sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@9.13.1':
+    resolution: {integrity: sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@9.13.1':
+    resolution: {integrity: sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==}
+    engines: {node: '>= 16'}
+
  '@isaacs/cliui@8.0.2':
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}
@ -1369,6 +1387,13 @@ packages:
    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
    engines: {node: '>=8'}

+  diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+
+  diff@5.2.0:
+    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
+    engines: {node: '>=0.3.1'}
+
  dir-glob@3.0.1:
    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
    engines: {node: '>=8'}
@ -1853,6 +1878,10 @@ packages:
    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
    hasBin: true

+  highlight.js@11.10.0:
+    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
+    engines: {node: '>=12.0.0'}
+
  hosted-git-info@2.8.9:
    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}

@ -3302,6 +3331,15 @@ packages:
    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
    hasBin: true

+  v-code-diff@1.12.0:
+    resolution: {integrity: sha512-vvdCBG02mIIiW6Gx6jF119hzxELt+6TlJIwchglR1JYzboHePNxIkVBjR/aoAOVlsGa+5Vtb77cd/N84nrXWPA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.9
+      vue: ^2.6.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  validate-npm-package-license@3.0.4:
    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}

@ -3384,6 +3422,12 @@ packages:
    peerDependencies:
      eslint: '>=6.0.0'

+  vue-i18n@9.13.1:
+    resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
  vue-router@4.4.0:
    resolution: {integrity: sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==}
    peerDependencies:
@ -3939,6 +3983,18 @@ snapshots:

  '@humanwhocodes/object-schema@2.0.3': {}

+  '@intlify/core-base@9.13.1':
+    dependencies:
+      '@intlify/message-compiler': 9.13.1
+      '@intlify/shared': 9.13.1
+
+  '@intlify/message-compiler@9.13.1':
+    dependencies:
+      '@intlify/shared': 9.13.1
+      source-map-js: 1.2.0
+
+  '@intlify/shared@9.13.1': {}
+
  '@isaacs/cliui@8.0.2':
    dependencies:
      string-width: 5.1.2
@ -4941,6 +4997,10 @@ snapshots:
  detect-libc@2.0.3:
    optional: true

+  diff-match-patch@1.0.5: {}
+
+  diff@5.2.0: {}
+
  dir-glob@3.0.1:
    dependencies:
      path-type: 4.0.0
@ -5580,6 +5640,8 @@ snapshots:

  he@1.2.0: {}

+  highlight.js@11.10.0: {}
+
  hosted-git-info@2.8.9: {}

  hosted-git-info@4.1.0:
@ -7124,6 +7186,15 @@ snapshots:

  uuid@8.3.2: {}

+  v-code-diff@1.12.0(vue@3.4.31(typescript@4.7.4)):
+    dependencies:
+      diff: 5.2.0
+      diff-match-patch: 1.0.5
+      highlight.js: 11.10.0
+      vue: 3.4.31(typescript@4.7.4)
+      vue-demi: 0.14.8(vue@3.4.31(typescript@4.7.4))
+      vue-i18n: 9.13.1(vue@3.4.31(typescript@4.7.4))
+
  validate-npm-package-license@3.0.4:
    dependencies:
      spdx-correct: 3.2.0
@ -7195,6 +7266,13 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  vue-i18n@9.13.1(vue@3.4.31(typescript@4.7.4)):
+    dependencies:
+      '@intlify/core-base': 9.13.1
+      '@intlify/shared': 9.13.1
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.31(typescript@4.7.4)
+
  vue-router@4.4.0(vue@3.4.31(typescript@4.7.4)):
    dependencies:
      '@vue/devtools-api': 6.6.3
--- a/src/main.ts
+++ b/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);
--- a/src/modules/03_logs/components/DialogDataDiff.vue
+++ b/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>
--- a/src/modules/03_logs/components/LogTable.vue
+++ b/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>
--- a/src/modules/03_logs/interface/response/Main.ts
+++ b/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;
 }

--- a/src/modules/04_system/components/formSchedule
+++ b/src/modules/04_system/components/formSchedule
@ -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"