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>