เพิ่ม sequence ใน log + ลดความกว้าง res message

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

@@ -143,6 +143,7 @@ const visibleColumns = ref<string[]>([
   "responseCode",
   "logType",
   "responseDescription",
+  "sequence",
   "dataDiff",
 ]);
 
@@ -324,8 +325,11 @@ onMounted(() => {
                       ? 'primary'
                       : 'warning'
                   }`"
+                  class="ellipsis"
+                  style="max-width: 10vw"
                 >
                   {{ col.value ?? "-" }}
+                  <q-tooltip> {{ col.value }} </q-tooltip>
                 </div>
 
                 <div v-else-if="col.name === 'dataDiff' && !!col.value">
@@ -336,7 +340,7 @@ onMounted(() => {
                     icon="mdi-eye-outline"
                     color="primary"
                     size="12px"
-                    @click.petvent="
+                    @click.stop="
                       () => {
                         currentDataDiff = col.value;
                         currentlogData = {
@@ -348,6 +352,7 @@ onMounted(() => {
                           responseCode: props.row.responseCode,
                           logType: props.row.logType,
                           responseDescription: props.row.responseDescription,
+                          sequence: props.row.sequence,
                           dataDiff: props.row.dataDiff,
                         };
                         openDialog = true;
@@ -383,18 +388,18 @@ onMounted(() => {
     <div class="column" style="border: #f0ecec 1px solid">
       <div
         class="col row"
-        :class="{ 'bg-grey-3': i % 2 }"
+        :class="{ 'bg-grey-3': index % 2 }"
-        v-for="(item, index, i) in currentlogData"
+        v-for="(item, key, index) in currentlogData"
-        :key="index"
+        :key="key"
         style="border-bottom: #f0ecec 1px solid; min-height: 40px"
       >
         <div
           class="col q-pl-sm"
           :class="{
-            'self-center': index !== 'dataDiff',
+            'self-center': key !== 'dataDiff' && key !== 'sequence',
-            'q-pt-md': index === 'dataDiff',
+            'q-pt-md': key === 'dataDiff',
           }"
-          style="max-width: 150px; border-right: #f0ecec 1px solid"
+          style="max-width: 150px"
         >
           {{
             {
@@ -406,25 +411,26 @@ onMounted(() => {
               responseCode: "Response Code",
               logType: "สถานะ",
               responseDescription: "ข้อความ",
+              sequence: "ลำดับการทำงาน",
               dataDiff: "ข้อมูลที่เปลี่ยนแปลง",
-            }[index] || index
+            }[key] || key
           }}
         </div>
 
         <div
           class="self-center"
-          v-if="index === 'startTimeStamp' && typeof item === 'string'"
+          v-if="key === 'startTimeStamp' && typeof item === 'string'"
         >
           {{ date2Thai(new Date(item), false, true) }}
         </div>
 
-        <div class="self-center" v-if="index === 'method'">
+        <div class="self-center" v-if="key === 'method'">
           <q-badge text-color="blue" style="background-color: #f0ecec">{{
             item ?? "-"
           }}</q-badge>
         </div>
 
-        <div class="self-center" v-else-if="index === 'logType'">
+        <div class="self-center" v-else-if="key === 'logType'">
           <q-badge
             text-color="white"
             :color="
@@ -433,14 +439,61 @@ onMounted(() => {
             >{{ item ?? "-" }}</q-badge
           >
         </div>
+        <div class="col q-pr-md" v-else-if="key === 'sequence'">
+          <div v-for="(row, index) in item">
+            <div class="text-subtitle1 text-bold">ลำดับที่ {{ index + 1 }}</div>
+            <div
+              class="q-pa-md q-mb-md"
+              style="border: 1px solid hsla(0 0% 0% / 0.1); border-radius: 7px"
+            >
+              <div class="row" v-for="(value, key) in row" :key="key">
+                <div v-if="typeof key === 'string' && key === 'query'">
+                  {{ `${key}: ` }}
+                  <div
+                    class="q-pa-md q-mt-sm"
+                    style="
+                      background-color: hsla(0 0% 0% / 0.07);
+                      color: hsl(0 0% 30%);
+                      border: 1px solid hsla(0 0% 0% / 0.1);
+                      border-radius: 7px;
+                    "
+                    v-for="q in value"
+                  >
+                    {{ `${q}` }}
+                  </div>
+                </div>
+                <div v-else-if="typeof key === 'string' && key === 'request'">
+                  {{ `${key}: ` }}
 
+                  <div
+                    class="q-pa-md q-mt-sm"
+                    style="
+                      background-color: hsla(0 0% 0% / 0.07);
+                      color: hsl(0 0% 30%);
+                      border: 1px solid hsla(0 0% 0% / 0.1);
+                      border-radius: 7px;
+                    "
+                  >
+                    <div v-for="(req, k) in value">
+                      {{ `${k}: ${req}` }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  {{ `${key}: ${value}` }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           class="col self-center"
           v-if="
-            index !== 'dataDiff' &&
+            key !== 'dataDiff' &&
-            index !== 'method' &&
+            key !== 'method' &&
-            index !== 'logType' &&
+            key !== 'logType' &&
-            index !== 'startTimeStamp'
+            key !== 'startTimeStamp' &&
+            key !== 'sequence'
           "
         >
           {{ item }}