129 lines
3.7 KiB
JavaScript
129 lines
3.7 KiB
JavaScript
'use client'
|
|
|
|
import { Select, SelectItem } from '@nextui-org/react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
|
|
export default function RoofSelect() {
|
|
const [roofMaterials, setRoofMaterials] = useState([])
|
|
const [manufacturers, setManufacturers] = useState([])
|
|
const [trestles, setTrestles] = useState([])
|
|
const [modules, setModules] = useState([])
|
|
const [originTrestles, setOriginTrestles] = useState([])
|
|
|
|
const [roofMaterialId, setRoofMaterialId] = useState(null)
|
|
const [manufacturerId, setManufacturerId] = useState(null)
|
|
const [trestleId, setTrestleId] = useState(null)
|
|
|
|
const { get } = useAxios()
|
|
|
|
useEffect(() => {
|
|
get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
|
|
//TODO: error handling
|
|
if (!res) return
|
|
|
|
setRoofMaterials(res)
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!roofMaterialId) {
|
|
return
|
|
}
|
|
|
|
get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => {
|
|
if (res.length === 0) {
|
|
return
|
|
}
|
|
setOriginTrestles(res)
|
|
const manufactural = res.map((trestle) => {
|
|
return { id: trestle.manufacturerId, name: trestle.manufacturerName }
|
|
})
|
|
// Remove duplicates
|
|
const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
|
|
return manufactural.find((a) => a.id === id)
|
|
})
|
|
|
|
setManufacturers(uniqueManufactural)
|
|
})
|
|
}, [roofMaterialId])
|
|
|
|
useEffect(() => {
|
|
if (!manufacturerId) {
|
|
return
|
|
}
|
|
|
|
const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
|
|
setTrestles(trestles)
|
|
}, [manufacturerId])
|
|
|
|
useEffect(() => {
|
|
if (!trestleId) {
|
|
return
|
|
}
|
|
get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => {
|
|
if (res.length === 0) {
|
|
return
|
|
}
|
|
setModules(res)
|
|
})
|
|
}, [trestleId])
|
|
|
|
const handleRoofMaterialOnChange = (e) => {
|
|
const roofMaterialId = e.target.value
|
|
setRoofMaterialId(roofMaterialId)
|
|
setManufacturers([])
|
|
setManufacturerId(null)
|
|
setTrestleId(null)
|
|
setTrestles([])
|
|
setModules([])
|
|
}
|
|
|
|
const handleManufacturersOnChange = (e) => {
|
|
const manufacturerId = Number(e.target.value)
|
|
setTrestles([])
|
|
setManufacturerId(manufacturerId)
|
|
setTrestleId(null)
|
|
setModules([])
|
|
}
|
|
|
|
const handleTrestlesOnChange = (e) => {
|
|
const trestleId = Number(e.target.value)
|
|
setTrestleId(trestleId)
|
|
setModules([])
|
|
}
|
|
|
|
return (
|
|
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
|
|
{roofMaterials.length > 0 && (
|
|
<Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
|
|
{roofMaterials.map((roofMaterial) => (
|
|
<SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
|
|
))}
|
|
</Select>
|
|
)}
|
|
{manufacturers.length > 0 && (
|
|
<Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
|
|
{manufacturers.map((manufacturer) => (
|
|
<SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
|
|
))}
|
|
</Select>
|
|
)}
|
|
{trestles.length > 0 && (
|
|
<Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
|
|
{trestles.map((trestle) => (
|
|
<SelectItem key={trestle.id}>{trestle.name}</SelectItem>
|
|
))}
|
|
</Select>
|
|
)}
|
|
{modules.length > 0 && (
|
|
<Select label="설치가능 모듈" className="max-w-xs">
|
|
{modules.map((module) => (
|
|
<SelectItem key={module.id}>{module.name}</SelectItem>
|
|
))}
|
|
</Select>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|