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

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { QTableColumn } from 'quasar';
import { EmployeeHistory, NewEmployeeHistory } from 'src/stores/employee/types';
import { dateFormat } from 'src/utils/datetime';
import NoData from '../NoData.vue';
import { computed, onMounted, ref, watch } from 'vue';
import useOptionStore from 'src/stores/options';

const { t } = useI18n();
const optionStore = useOptionStore();

const historyList = defineModel<EmployeeHistory[]>('historyList', {
  required: true,
});

const columns: QTableColumn[] = [
  {
    name: 'updatedAt',
    label: t('time'),
    field: 'updatedAt',
    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 currentDate = ref();
const currentData = ref();
const currentIndex = ref(0);
const formatList = ref<NewEmployeeHistory[]>([]);

const fieldName = [
  {
    name: 'customerBranchId',
    title: 'formDialogTitleInformation',
    i18n: 'formDialogEmployerID',
  },
  {
    name: 'nrcNo',
    title: 'formDialogTitleInformation',
    i18n: 'formDialogEmployeeNRCNo',
  },

  {
    name: 'firstName',
    title: 'personalInfo',
    i18n: 'formDialogInputFirstName',
  },
  {
    name: 'firstNameEN',
    title: 'personalInfo',
    i18n: 'formDialogInputFirstNameEN',
  },
  { name: 'lastName', title: 'personalInfo', i18n: 'formDialogInputLastName' },
  {
    name: 'lastNameEN',
    title: 'personalInfo',
    i18n: 'formDialogInputLastNameEN',
  },
  {
    name: 'dateOfBirth',
    title: 'personalInfo',
    i18n: 'formDialogInputBirthDate',
  },
  { name: 'gender', title: 'personalInfo', i18n: 'formDialogInputGender' },
  {
    name: 'nationality',
    title: 'personalInfo',
    i18n: 'formDialogInputNationality',
  },

  {
    name: 'address',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'formDialogTitleAddressPure',
  },
  {
    name: 'addressEN',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'formDialogTitleAddressPureEN',
  },
  {
    name: 'provinceId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'province',
  },
  {
    name: 'districtId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'district',
  },
  {
    name: 'subDistrictId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'subDistrict',
  },

  {
    name: 'passportType',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportType',
  },
  {
    name: 'passportNumber',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportNo',
  },
  {
    name: 'previousPassportReference',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportRef',
  },
  {
    name: 'passportIssuingPlace',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputWPassportPlace',
  },
  {
    name: 'passportIssuingCountry',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportCountry',
  },
  {
    name: 'passportIssueDate',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportIssuance',
  },
  {
    name: 'passportExpiryDate',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportExpire',
  },

  {
    name: 'visaType',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaType',
  },
  {
    name: 'visaNumber',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaNo',
  },
  {
    name: 'visaIssueDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaIssuance',
  },
  {
    name: 'visaExpiryDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaExpire',
  },
  {
    name: 'visaIssuingPlace',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaPlace',
  },
  {
    name: 'visaStayUntilDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaStayUntil',
  },
  {
    name: 'tm6Number',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaTM6',
  },
  {
    name: 'entryDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaEnter',
  },
];

function isValidDate(dateString: string): boolean {
  if (typeof dateString !== 'string' || dateString.length < 24) {
    return false;
  }

  const date = new Date(dateString);

  return !isNaN(date.getTime()) && dateString === date.toISOString();
}

function mapName(field: string): { title: string; i18n: string } {
  const fieldData = fieldName.find((item) => item.name === field);
  if (fieldData) {
    return { title: fieldData.title, i18n: fieldData.i18n };
  }
  return { title: '-', i18n: '-' };
}

async function groupEmployeeHistory(
  historyList: EmployeeHistory[],
): Promise<NewEmployeeHistory[]> {
  const grouped = historyList.reduce((acc, curr) => {
    const updatedAt = new Date(curr.updatedAt);
    const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;

    const existingEntry = acc.find((entry) => entry.date === dateKey);

    if (existingEntry) {
      const existingData = existingEntry.data.find(
        (data) => data.updatedAt.getTime() === updatedAt.getTime(),
      );

      if (existingData) {
        existingData.history.push({
          valueAfter: curr.valueAfter,
          valueBefore: curr.valueBefore,
          field: curr.field,
        });
      } else {
        existingEntry.data.push({
          masterId: curr.masterId,
          updatedBy: curr.updatedBy,
          updatedByUserId: curr.updatedByUserId,
          timestamp: curr.timestamp,
          updatedAt: updatedAt,
          id: curr.id,
          history: [
            {
              valueAfter: curr.valueAfter,
              valueBefore: curr.valueBefore,
              field: curr.field,
            },
          ],
        });
      }
    } else {
      acc.push({
        date: dateKey,
        data: [
          {
            masterId: curr.masterId,
            updatedBy: curr.updatedBy,
            updatedByUserId: curr.updatedByUserId,
            timestamp: curr.timestamp,
            updatedAt: updatedAt,
            id: curr.id,
            history: [
              {
                valueAfter: curr.valueAfter,
                valueBefore: curr.valueBefore,
                field: curr.field,
              },
            ],
          },
        ],
      });
    }

    return acc;
  }, [] as NewEmployeeHistory[]);

  return grouped;
}

onMounted(async () => {
  const newList = await groupEmployeeHistory(historyList.value);
  formatList.value = newList;

  currentDate.value = formatList.value[currentIndex.value].date;
  currentData.value = formatList.value[currentIndex.value].data;
});

watch(
  () => currentIndex.value,
  (i) => {
    currentDate.value = formatList.value[i].date;
    currentData.value = formatList.value[i].data;
  },
);
</script>

<template>
  <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
          :disable="currentIndex === formatList.length - 1"
          color="info"
          padding="0"
          icon="mdi-chevron-left"
          @click="currentIndex++"
        />
        <span class="text-weight-medium q-px-xl">
          {{ dateFormat(currentDate) }}
        </span>
        <q-btn
          flat
          :disable="currentIndex === 0"
          color="info"
          padding="0"
          icon="mdi-chevron-right"
          @click="currentIndex--"
        />
      </div>
    </div>

    <q-table
      v-if="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>

          <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> -->
              </div>
            </div>
          </q-td>

          <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}`"
              >
                asd
              </q-step>
            </q-stepper>
          </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 v-else class="table-border flex items-center justify-center q-py-lg">
      <NoData />
    </div>
  </div>
</template>

<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>