feat: history dialog

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

@@ -1,12 +1,189 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { QTableColumn } from 'quasar';
+
+const { t } = useI18n();
+
+const columns: QTableColumn[] = [
+  {
+    name: 'time',
+    label: t('time'),
+    field: 'time',
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'editBy',
+    align: 'center',
+    label: t('editBy'),
+    field: 'editBy',
+    headerStyle: 'font-weight: bold',
+  },
+
+  {
+    name: 'history',
+    align: 'center',
+    label: '',
+    field: 'history',
+  },
+  {
+    name: 'valueAfter',
+    align: 'center',
+    label: t('valueAfter'),
+    field: 'valueAfter',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'valueBefore',
+    align: 'center',
+    label: t('valueBefore'),
+    field: 'valueBefore',
+    headerStyle: 'font-weight: bold',
+  },
+];
+
+const rows = [
+  {
+    time: '17:00:29',
+    editBy: 'สุขใจ แสนดี',
+    history: [
+      { title: 'ข้อมูลส่วนตัว', caption: 'อัพโหลดรูปภาพ' },
+      { title: 'ข้อมูลผลตรวจสุขภาพ', caption: 'ผลตรวจสุขภาพ' },
+    ],
+    valueBefore: [{ title: 'ผิดปกติ' }, { title: 'ผิดปกติ' }],
+    valueAfter: [{ title: 'ปกติ' }, { title: 'ปกติ' }],
+  },
+  {
+    time: '15:20:01',
+    editBy: 'สุขใจ แสนดี',
+    history: [{ title: 'ข้อมูลส่วนตัว', caption: 'อัพโหลดรูปภาพ' }],
+    valueBefore: [{ title: '-' }],
+    valueAfter: [{ title: '1.jpg' }],
+  },
+];
+</script>
 
 <template>
-  <div
-    class="row full-width justify-center"
-    style="background: var(--indigo-0); height: 50px"
-  >
-    <div class="">asdasd</div>
+  <div class="full-width">
+    <div
+      class="row full-width justify-center q-py-sm header-border"
+      style="background: hsla(var(--info-bg) / 0.1)"
+    >
+      <div class="surface-1 q-py-sm q-px-sm row items-center">
+        <q-btn flat padding="0" icon="mdi-chevron-left" />
+        <span class="text-weight-medium q-px-xl">
+          {{ '20 มีนาคม 2567' }}
+        </span>
+        <q-btn flat padding="0" icon="mdi-chevron-right" />
+      </div>
+    </div>
+
+    <q-table
+      flat
+      class="table-border"
+      table-header-class="surface-2"
+      :rows="rows"
+      :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="time" :props="props">
+            {{ props.row.time }}
+          </q-td>
+
+          <q-td key="editBy" :props="props">
+            <div class="row items-center no-wrap">
+              <q-avatar>
+                <img src="https://cdn.quasar.dev/img/avatar.png" />
+              </q-avatar>
+              <div class="column q-pl-md items-start">
+                <span class="text-weight-bold">
+                  {{ props.row.editBy }}
+                </span>
+                <span class="text-caption">นักบริหาร</span>
+              </div>
+            </div>
+          </q-td>
+
+          <q-td key="history" :props="props">
+            <q-stepper vertical flat>
+              <q-step
+                v-for="(item, index) in props.row.history.slice().reverse()"
+                :key="index"
+                :name="1"
+                :title="item.title"
+                :caption="item.caption"
+                :icon="`mdi-numeric-${props.row.history.length - index}`"
+              />
+            </q-stepper>
+          </q-td>
+
+          <q-td key="valueBefore" :props="props">
+            <div
+              v-for="(item, index) in props.row.valueBefore.slice().reverse()"
+              :key="index"
+              class="q-py-md"
+            >
+              {{ item.title }}
+            </div>
+          </q-td>
+
+          <q-td key="valueAfter" :props="props">
+            <div
+              v-for="(item, index) in props.row.valueAfter.slice().reverse()"
+              :key="index"
+              class="q-py-md"
+            >
+              {{ item.title }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header-border {
+  border: 1px solid var(--border-color);
+  border-top-left-radius: var(--radius-2);
+  border-top-right-radius: var(--radius-2);
+}
+
+.table-border {
+  border-bottom: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: var(--radius-2);
+  border-bottom-right-radius: var(--radius-2);
+}
+
+:deep(.q-stepper.q-stepper--vertical.q-stepper--flat) {
+  background-color: transparent;
+  padding: 0;
+  text-align: left;
+}
+
+:deep(.q-stepper__caption) {
+  color: hsl(var(--text-mute-2)) !important;
+}
+
+:deep(.q-stepper__title) {
+  color: hsl(var(--info-bg)) !important;
+}
+
+:deep(i.q-icon.mdi) {
+  font-size: 18px !important;
+}
+
+:deep(.q-stepper__dot.row.flex-center.q-stepper__line.relative-position) {
+  color: hsl(var(--info-bg)) !important;
+}
+</style>

src/components/home/PersonCard.vue

@@ -22,10 +22,12 @@ defineProps<{
   noBg?: boolean;
   detailColumnCount?: number;
   canEditProfile?: boolean;
+  history?: boolean;
 }>();
 
 defineEmits<{
   (e: 'editProfile'): void;
+  (e: 'history', id: string): void;
   (e: 'deleteCard', id: string): void;
   (
     e: 'updateCard',
@@ -68,12 +70,24 @@ defineEmits<{
         <!-- kebab menu -->
         <div class="full-width text-right" v-if="!noAction">
           <q-btn
+            v-if="history"
             flat
             round
-            padding="sm"
+            class="app-text-muted-2"
+            padding="xs"
+            icon="mdi-history"
+            size="sm"
+            @click.stop="$emit('history', v.id)"
+          />
+
+          <q-btn
+            flat
+            round
+            padding="xs"
+            class="app-text-muted-2"
             icon="mdi-dots-vertical"
             size="sm"
-            @click.stop=""
+            @click.stop
           >
             <q-menu class="bordered">
               <q-list v-close-popup>

src/i18n/en-US/customer-main-page.ts

@@ -45,4 +45,10 @@ export default {
   customerBranchName: 'Company/Legal Entity Name',
 
   allEmployee: 'All Employee',
+
+  editHistory: 'Edit History',
+  time: 'Time',
+  editBy: 'Edit by',
+  valueBefore: 'Before',
+  valueAfter: 'After',
 };

src/i18n/th-th/customer-main-page.ts

@@ -53,4 +53,10 @@ export default {
   officeType: '',
 
   allEmployee: 'ลูกจ้างทั้งหมด',
+
+  editHistory: 'ประวัติการแก้ไข',
+  time: 'เวลา',
+  editBy: 'แก้ไขโดย',
+  valueBefore: 'แก้ไขใหม่',
+  valueAfter: 'ค่าเดิม',
 };

src/pages/03_customer-management/MainPage.vue

@@ -31,6 +31,7 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
 import NoData from 'components/NoData.vue';
+import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
 
 import {
   CustomerCreate,
@@ -118,6 +119,7 @@ const formData = ref<CustomerCreate>({
   image: null,
 });
 
+const employeeHistoryDialog = ref(false);
 const inputSearch = ref<string>();
 const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   label: t('all'),
@@ -1089,6 +1091,11 @@ async function checkEmployeeForm() {
   } else return true;
 }
 
+async function openHistory(id: string) {
+  console.log(id);
+  employeeHistoryDialog.value = true;
+}
+
 onMounted(async () => {
   const resultStats = await getStatsCustomer();
 
@@ -1603,6 +1610,7 @@ watch(selectorLabel, async () => {
 
           <div v-if="listEmployee.length !== 0">
             <PersonCard
+              history
               :list="
                 (!!inputSearch ? resultSearchEmployee ?? [] : listEmployee).map(
                   (v: Employee) => ({
@@ -1629,6 +1637,7 @@ watch(selectorLabel, async () => {
                   }),
                 ) || []
               "
+              @history="openHistory"
               @update-card="openDialogInputForm"
               @enter-card="openDialogInputForm"
               @delete-card="onDelete"
@@ -2906,6 +2915,18 @@ watch(selectorLabel, async () => {
       </template>
     </InfoForm>
   </DrawerInfo>
+
+  <!-- employee history -->
+  <FormDialog
+    no-address
+    no-app-box
+    no-footer
+    :title="$t('editHistory')"
+    v-model:modal="employeeHistoryDialog"
+    :close="() => (employeeHistoryDialog = false)"
+  >
+    <HistoryEditComponent />
+  </FormDialog>
 </template>
 
 <style scoped>