hrms-mgt/src/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import moment from "moment";
import {
  parseExcelFile,
  formatFileSize,
  type ExcelPreviewData,
} from "@/modules/04_registryPerson/utils/excelParser";

interface Props {
  modal: boolean;
  file: File | null;
}

interface Emits {
  (e: "update:modal", value: boolean): void;
  (e: "confirm", file: File): void;
  (e: "cancel"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const isLoading = ref(false);
const isUploading = ref(false);
const previewData = ref<Record<string, any>[]>([]);
const excelHeaders = ref<string[]>([]); // Headers จาก Excel

const fileName = computed(() => props.file?.name ?? "");
const fileSize = computed(() => props.file?.size ?? 0);
const totalRows = computed(() => previewData.value.length);
const previewRows = computed(() => previewData.value.length);

const pagination = ref({
  page: 1,
  rowsPerPage: 50,
});

// ฟังก์ชันแปลงวันที่เป็นภาษาไทย (ไม่บวก 543 เพราะ Excel เป็น พ.ศ. อยู่แล้ว)
function formatDateForDisplay(value: any): string {
  if (!value) return "-";

  // ถ้าเป็น string format dd/mm/yyyy (จาก Excel ที่เป็น พ.ศ.)
  if (typeof value === "string") {
    const parts = value.split("/");
    if (parts.length === 3) {
      const day = parts[0];
      const monthNum = parseInt(parts[1], 10);
      const year = parts[2];

      // แปลงเลขเดือนเป็นชื่อเดือนภาษาไทย
      const thaiMonths = [
        "ม.ค.",
        "ก.พ.",
        "มี.ค.",
        "เม.ย.",
        "พ.ค.",
        "มิ.ย.",
        "ก.ค.",
        "ส.ค.",
        "ก.ย.",
        "ต.ค.",
        "พ.ย.",
        "ธ.ค.",
      ];
      const thaiMonth = thaiMonths[monthNum - 1] || parts[1];

      return `${day} ${thaiMonth} ${year}`;
    }
    return value;
  }

  // ถ้าเป็น Date object ให้แปลงโดยไม่บวก 543 (เพราะ Excel serial date แปลงเป็น ค.ศ. แล้วแต่เดิมเป็น พ.ศ.)
  const dateMoment = moment(value);
  const day = dateMoment.format("DD");
  const month = dateMoment.format("MMM");
  const year = +dateMoment.format("YYYY"); // ไม่บวก 543
  return `${day} ${month} ${year}`;
}

// Headers ที่เป็นวันที่
const DATE_HEADERS = ["วันที่คำสั่งมีผล", "วันที่ลงนาม"];
const SALARY_HEADERS = [
  "เงินเดือน",
  "ค่าจ้าง",
  "เงินค่าตอบแทนรายเดือน",
  "เงินประจำตำแหน่ง",
  "เงินค่าตอบแทนพิเศษ",
];

// สร้าง columns จาก Excel headers
const tableColumns = computed(() => {
  if (excelHeaders.value.length === 0) return [];
  return excelHeaders.value.map((header, index) => {
    const isDateColumn = DATE_HEADERS.includes(header);
    const isSalaryColumn = SALARY_HEADERS.includes(header);

    return {
      name: `col_${index}`,
      label: header,
      field: header,
      align: "left" as const,
      sortable: false,
      style: "white-space: nowrap;",
      headerStyle: "font-size: 13px; font-weight: bold;",
      format: (val: any) => {
        // ถ้าค่าว่าง แสดง -
        if (val == null || val === "") return "-";

        // ถ้าเป็น column วันที่
        if (isDateColumn) {
          // ถ้าเป็น string วันที่ format dd/mm/yyyy (จาก Excel)
          if (
            typeof val === "string" &&
            val.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)
          ) {
            return formatDateForDisplay(val);
          }
          // ถ้าเป็น number (Excel serial date) ให้แปลงเป็น Date object ก่อน
          if (typeof val === "number") {
            return formatDateForDisplay((val - 25569) * 86400 * 1000);
          }
        }

        // ถ้าเป็น column เงินให้ format มี comma separator (ตรวจสอบชื่อ label)
        if (isSalaryColumn) {
          const numericValue = Number(val);
          if (typeof numericValue === "number" && !isNaN(numericValue)) {
            return numericValue.toLocaleString("en-US");
          }
        }

        return val;
      },
    };
  });
});

async function loadPreview() {
  if (!props.file) return;

  isLoading.value = true;
  try {
    const result = await parseExcelFile(props.file, {
      maxPreviewRows: 0, // 0 = แสดงทั้งหมด
      sheetIndex: 0, // ใช้ sheet แรกเสมอ
    });
    previewData.value = result.rows;
    excelHeaders.value = result.headers; // เก็บ headers จาก Excel
  } catch (error) {
    console.error("Error parsing Excel file:", error);
    previewData.value = [];
    excelHeaders.value = [];
  } finally {
    isLoading.value = false;
  }
}

function onConfirm() {
  if (props.file) {
    isUploading.value = true;
    emit("confirm", props.file);
  }
}

function onClose() {
  emit("cancel");
  emit("update:modal", false);
}

function onModalUpdate(value: boolean) {
  emit("update:modal", value);
}

watch(
  () => props.modal,
  (newValue) => {
    if (newValue && props.file) {
      isUploading.value = false;
      loadPreview();
    }
  }
);
</script>

<template>
  <q-dialog :model-value="modal" @update:model-value="onModalUpdate" persistent>
    <q-card style="min-width: 80vw; max-width: 95vw">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">ตัวอย่างข้อมูลไฟล์ Excel</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup @click="onClose" />
      </q-card-section>

      <q-separator />

      <!-- File Info Section -->
      <q-card-section>
        <div class="row q-col-gutter-md">
          <div class="col-12">
            <div class="text-subtitle2 text-grey-7">ข้อมูลไฟล์</div>
          </div>
          <div class="col-md-4 col-sm-6 col-12">
            <div class="flex items-center">
              <q-icon
                name="insert_drive_file"
                class="q-mr-sm"
                color="primary"
              />
              <span class="text-body2">ชื่อไฟล์: {{ fileName }}</span>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-12">
            <div class="flex items-center">
              <q-icon name="folder" class="q-mr-sm" color="primary" />
              <span class="text-body2"
                >ขนาด: {{ formatFileSize(fileSize) }}</span
              >
            </div>
          </div>
          <div class="col-md-4 col-sm-12 col-12">
            <div class="flex items-center">
              <q-icon name="table_chart" class="q-mr-sm" color="primary" />
              <span class="text-body2">จำนวนแถว: {{ totalRows }} แถว</span>
            </div>
          </div>
        </div>
      </q-card-section>

      <q-separator />

      <!-- Preview Table -->
      <q-card-section style="max-height: 70vh" class="scroll">
        <div class="text-subtitle2 q-mb-md">
          รายการตำแหน่ง ({{ previewRows }} รายการ)
        </div>
        <d-table
          :columns="tableColumns"
          :rows="previewData"
          :paging="true"
          :rows-per-page-options="[20, 50, 100, 0]"
          v-model:pagination="pagination"
          :loading="isLoading"
          row-key="id"
          flat
          bordered
          dense
        />
      </q-card-section>

      <!-- Actions -->
      <q-card-actions align="right" class="q-pa-md">
        <q-btn
          type="submit"
          color="public"
          label="ยืนยันการอัปโหลด"
          @click="onConfirm"
          :loading="isUploading"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>