fix: history updatedBy i18n

src/components/03_customer-management/HistoryEditComponent.vue

@@ -23,10 +23,10 @@ const columns: QTableColumn[] = [
     headerStyle: 'font-weight: bold',
   },
   {
-    name: 'editBy',
+    name: 'updatedBy',
     align: 'center',
     label: t('editBy'),
-    field: 'editBy',
+    field: 'updatedBy',
     headerStyle: 'font-weight: bold',
   },
 
@@ -258,7 +258,6 @@ async function groupEmployeeHistory(
           masterId: curr.masterId,
           updatedBy: curr.updatedBy,
           updatedByUserId: curr.updatedByUserId,
-          timestamp: curr.timestamp,
           updatedAt: updatedAt,
           id: curr.id,
           history: [
@@ -278,7 +277,6 @@ async function groupEmployeeHistory(
             masterId: curr.masterId,
             updatedBy: curr.updatedBy,
             updatedByUserId: curr.updatedByUserId,
-            timestamp: curr.timestamp,
             updatedAt: updatedAt,
             id: curr.id,
             history: [
@@ -319,7 +317,7 @@ watch(
 </script>
 
 <template>
-  <div class="full-width">
+  <div class="col-12">
     <div
       class="row full-width justify-center q-py-sm header-border"
       style="background: hsla(var(--info-bg) / 0.1)"
@@ -366,84 +364,92 @@ watch(
       </div>
     </div>
 
-    <q-table
-      v-if="isHistoryData && currentData?.length > 0"
-      flat
-      class="table-border"
-      table-header-class="surface-2"
-      :rows="currentData"
-      :columns="columns"
-      row-key="name"
-    >
-      <template v-slot:body="props">
-        <q-tr
-          :props="props"
-          :style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`"
-        >
-          <q-td key="updatedAt" :props="props">
-            {{ dateFormat(props.row.updatedAt, false, true, true) }}
-          </q-td>
+    <div v-if="isHistoryData && currentData?.length > 0">
+      <q-table
+        flat
+        class="table-border"
+        table-header-class="surface-2"
+        :rows="currentData"
+        :columns="columns"
+        row-key="name"
+      >
+        <template v-slot:body="props">
+          <q-tr
+            :props="props"
+            :style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`"
+          >
+            <q-td key="updatedAt" :props="props">
+              {{ dateFormat(props.row.updatedAt, false, true, true) }}
+            </q-td>
 
-          <q-td key="editBy" :props="props">
-            <div class="row items-center no-wrap">
-              <q-avatar class="surface-tab">
-                <img v-if="false" src="https://cdn.quasar.dev/img/avatar.png" />
-                <q-icon v-else name="mdi-account"></q-icon>
-              </q-avatar>
-              <div class="column q-pl-md items-start">
-                <span class="text-weight-bold">
-                  {{ props.row.editBy ?? '-' }}
-                </span>
-                <!-- <span class="text-caption">นักบริหาร</span> -->
+            <q-td key="updatedBy" :props="props">
+              <div class="row items-center no-wrap">
+                <q-avatar class="surface-tab">
+                  <img
+                    v-if="false"
+                    src="https://cdn.quasar.dev/img/avatar.png"
+                  />
+                  <q-icon v-else name="mdi-account"></q-icon>
+                </q-avatar>
+                <div class="column q-pl-md items-start">
+                  <span class="text-weight-bold">
+                    {{
+                      $i18n.locale === 'en-US'
+                        ? `${props.row.updatedBy.firstNameEN} ${props.row.updatedBy.lastNameEN}`
+                        : `${props.row.updatedBy.firstName} ${props.row.updatedBy.lastName}` ??
+                          '-'
+                    }}
+                  </span>
+                  <!-- <span class="text-caption">นักบริหาร</span> -->
+                </div>
               </div>
-            </div>
-          </q-td>
+            </q-td>
 
-          <q-td key="history" :props="props">
-            <q-stepper vertical flat>
-              <q-step
-                v-for="(item, index) in props.row.history"
+            <q-td key="history" :props="props">
+              <q-stepper vertical flat>
+                <q-step
+                  v-for="(item, index) in props.row.history"
+                  :key="index"
+                  :name="1"
+                  :title="$t(mapName(item.field).title)"
+                  :caption="$t(mapName(item.field).i18n)"
+                  :icon="`mdi-numeric-${props.row.history.length - index}`"
+                ></q-step>
+              </q-stepper>
+            </q-td>
+
+            <q-td key="valueBefore" :props="props">
+              <div
+                v-for="(i, index) in props.row.history"
                 :key="index"
-                :name="1"
-                :title="$t(mapName(item.field).title)"
-                :caption="$t(mapName(item.field).i18n)"
-                :icon="`mdi-numeric-${props.row.history.length - index}`"
+                class="q-py-md"
               >
-                asd
-              </q-step>
-            </q-stepper>
-          </q-td>
+                {{
+                  isValidDate(i.valueBefore) === true
+                    ? dateFormat(i.valueBefore)
+                    : optionStore.mapOption(i.valueBefore)
+                }}
+              </div>
+            </q-td>
 
-          <q-td key="valueBefore" :props="props">
-            <div
-              v-for="(i, index) in props.row.history"
-              :key="index"
-              class="q-py-md"
-            >
-              {{
-                isValidDate(i.valueBefore) === true
-                  ? dateFormat(i.valueBefore)
-                  : optionStore.mapOption(i.valueBefore)
-              }}
-            </div>
-          </q-td>
+            <q-td key="valueAfter" :props="props">
+              <div
+                v-for="(i, index) in props.row.history"
+                :key="index"
+                class="q-py-md"
+              >
+                {{
+                  isValidDate(i.valueAfter) === true
+                    ? dateFormat(i.valueAfter)
+                    : optionStore.mapOption(i.valueAfter)
+                }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
 
-          <q-td key="valueAfter" :props="props">
-            <div
-              v-for="(i, index) in props.row.history"
-              :key="index"
-              class="q-py-md"
-            >
-              {{
-                isValidDate(i.valueAfter) === true
-                  ? dateFormat(i.valueAfter)
-                  : optionStore.mapOption(i.valueAfter)
-              }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </q-table>
     <div v-else class="table-border flex items-center justify-center q-py-lg">
       <NoData />
     </div>

src/i18n/en-US/form-dialog.ts

@@ -179,5 +179,6 @@ export default {
   formDialogEmployerRanchCode: 'Branch Code',
 
   formTitleCustomer: 'Company {msg}',
+  formTitleCustomerNaturalPerson: 'Name {msg}',
   formTitleBranch: 'Branch {msg}',
 };