วิธีใช้งาน

import React, { useEffect, useState } from "react"
import _ from "lodash"
import { Grid, Box } from "@mui/material"
import { ExcelReader } from "excel-reader-toolkit"
import "./App.css"
import RUIDropDown from "./Shared/RUIDropDown"
import RUIErrorDialog from "./Shared/RUIErrorDialog"
import RUIFieldArray from "./Shared/RUIFieldArray"
import RUIForm from "./Shared/RUIForm"
import RUIMultiTextFields from "./Shared/RUIMultiTextFields"
import RUITextField from "./Shared/RUITextField"
import RUITitle from "./Shared/RUITitle"
import { Computer } from "@mui/icons-material"
import { ruiTheme } from "./Shared/theme"
import { RUIThemeProvider } from "./Shared/ThemeContext"

const INITIAL_DATA = {
  deviceName: { label: "Device name", value: "", placeholder: "Device name" },
  os: { label: "OS", value: "Android 9", options: ["Android 9", "Android 10", "Android 11"] },
  model: { label: "Model", value: "", placeholder: "Model" },
  iccids: { label: "ICCID", value: [] },
  imsis: { label: "IMSI", value: [] },
  sims: {
    label: "SIM",
    members: [
      { name: "ISP", label: "ISP", size: 4 },
      { name: "ICCID", label: "ICCID", size: 4 },
      { name: "IMSI", label: "IMSI", size: 4 },
    ],
    value: [],
  },
}

export default function App() {
  const [isError, setIsError] = useState(false)
  const [excelData, setExcelData] = useState([])

  const loadFormData = () => {
    try {
      const saved = localStorage.getItem("formData")
      if (!saved) return INITIAL_DATA
      const parsed = JSON.parse(saved)
      return _.mapValues(INITIAL_DATA, (field, key) => ({
        ...field,
        value: _.get(parsed, [key, "value"], field.value),
      }))
    } catch {
      return INITIAL_DATA
    }
  }

  const [formData, setFormData] = useState(loadFormData)

  const saveFormData = (updated) => {
    localStorage.setItem("formData", JSON.stringify(updated))
    return updated
  }

  useEffect(() => {
    if (!excelData?.length) return

    const managedData = _.chain(excelData)
      .map((item) => ({
        name: item.__EMPTY_1,
        value: item.__EMPTY_2,
      }))
      .groupBy("name")
      .value()

    const deviceName = _.chain(managedData).get("Device Name", []).map("value").first().value()
    const os = _.chain(managedData).get("OS", []).map("value").first().value()
    const iccids = _.chain(managedData).get("ICCID", []).map("value").filter(Boolean).uniq().value()
    const imsis = _.chain(managedData).get("IMSI", []).map("value").filter(Boolean).uniq().value()

    setFormData((prev) => {
      const updated = {
        ...prev,
        deviceName: { ...prev.deviceName, value: deviceName || prev.deviceName.value },
        os: { ...prev.os, value: os || prev.os.value },
        iccids: { ...prev.iccids, value: _.uniq([...prev.iccids.value, ...iccids]) },
        imsis: { ...prev.imsis, value: _.uniq([...prev.imsis.value, ...imsis]) },
      }
      return saveFormData(updated)
    })
  }, [excelData])

  const handleChange = (target) => (e) => {
    setFormData((prev) => {
      const updated = _.set({ ...prev }, [target, "value"], e.target.value)
      return saveFormData(updated)
    })
  }

  const handleReset = () => {
    localStorage.removeItem("formData")
    setFormData(_.cloneDeep(INITIAL_DATA))
  }

  const handleSubmit = () => {
    try {
      console.log(formData)
      alert("Submit Success")
    } catch (error) {
      console.error(error)
      setIsError(true)
    }
  }

  return (
    <Box sx={{ p: 3 }}>
      <RUIThemeProvider defaultTheme="light">
        <RUIForm title="User Information" icon={<Computer />} color="#fff" onReset={handleReset} onSubmit={handleSubmit}>
          <RUITitle title="Sample Form" subtitle="Report Component Toolkit Demo" />
          <Grid item xs={12}>
            <ExcelReader text="กรุณาเลือกไฟล์ Excel" setData={setExcelData} />
          </Grid>
          <RUITextField sm={6} {...formData.deviceName} handleChange={handleChange("deviceName")} />
          <RUIDropDown sm={6} {...formData.os} handleChange={handleChange("os")} />
          <RUITextField sm={12} {...formData.model} handleChange={handleChange("model")} />
          <RUIMultiTextFields sm={12} {...formData.iccids} handleChange={handleChange("iccids")} />
          <RUIMultiTextFields sm={12} {...formData.imsis} handleChange={handleChange("imsis")} />
          <RUIFieldArray sm={12} {...formData.sims} handleChange={handleChange("sims")} />
          <RUIErrorDialog isDialogOpen={isError} error="An error has occurred." setIsDialogOpen={setIsError} />
        </RUIForm>
      </RUIThemeProvider>
    </Box>
  )
}