339 lines
11 KiB
JavaScript
339 lines
11 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState, memo, useCallback } from 'react'
|
|
import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { modalContent, modalState } from '@/store/modalAtom'
|
|
import { canvasSettingState } from '@/store/canvasAtom'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { get, post } from '@/lib/Axios'
|
|
|
|
export default function InitSettingsModal(props) {
|
|
const [objectNo, setObjectNo] = useState('test123240909002') // 후에 삭제 필요
|
|
const [lastRoofSeq, setLastRoofSeq] = useState(0) // 마지막 roofSeq를 추적
|
|
const [open, setOpen] = useRecoilState(modalState)
|
|
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
|
const [roofMaterials, setRoofMaterials] = useState([])
|
|
const [basicSetting, setBasicSettings] = useState({
|
|
roofDrawingSet: '1',
|
|
roofSizeSet: '1',
|
|
roofAngleSet: 'slope',
|
|
roofs: [],
|
|
})
|
|
|
|
const modelProps = {
|
|
open,
|
|
setOpen,
|
|
}
|
|
|
|
//const { get, post } = useAxios()
|
|
|
|
useEffect(() => {
|
|
get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
|
|
//TODO: error handling
|
|
if (!res) return
|
|
|
|
setRoofMaterials(res)
|
|
})
|
|
|
|
get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
|
|
if (res.length == 0) return
|
|
|
|
// 'roofs' 배열을 생성하여 각 항목을 추가
|
|
const roofsRow = res.map((item) => {
|
|
return {
|
|
roofDrawingSet: String(item.roofDrawingSet),
|
|
roofSizeSet: String(item.roofSizeSet),
|
|
roofAngleSet: item.roofAngleSet,
|
|
}
|
|
})
|
|
|
|
const roofsArray = res.some((item) => !item.roofSeq)
|
|
? null //지붕재 추가 정보가 없다면 roofsArray를 null 처리하여 지붕재 추가 정보가 보이지 않게 한다.
|
|
: res.map((item) => ({
|
|
roofSeq: String(item.roofSeq),
|
|
roofType: String(item.roofType),
|
|
roofWidth: String(item.roofWidth),
|
|
roofHeight: String(item.roofHeight),
|
|
roofGap: String(item.roofGap),
|
|
roofLayout: item.roofLayout,
|
|
}))
|
|
|
|
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
|
const patternData = {
|
|
roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
|
|
roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
|
|
roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
|
|
roofs: roofsArray, // 만들어진 roofs 배열
|
|
}
|
|
|
|
// 데이터 설정
|
|
setBasicSettings({ ...patternData })
|
|
|
|
// 초기 roofSeq 값을 업데이트
|
|
if (roofsArray == null) {
|
|
//roofs(지붕재추가) 값이 없으면 lastRoofSeq는 1 설정
|
|
setLastRoofSeq(1)
|
|
} else {
|
|
setLastRoofSeq(roofsArray.length + 1)
|
|
}
|
|
})
|
|
|
|
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
|
setBasicSettings({ ...canvasSetting })
|
|
}
|
|
}, [])
|
|
|
|
//기본 설정값 변경 함수
|
|
const handleBasicSetting = (event) => {
|
|
const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value }
|
|
setBasicSettings(newBasicSetting)
|
|
}
|
|
|
|
//배열 추가 함수
|
|
const addRoofSetting = () => {
|
|
if (basicSetting.roofs != null && basicSetting.roofs.length === 4) {
|
|
alert('지붕재는 최대 4종까지 선택할 수 있습니다.')
|
|
return
|
|
}
|
|
|
|
//roofs가 null인 경우 배열 생성
|
|
if (basicSetting.roofs == null) {
|
|
basicSetting.roofs = []
|
|
}
|
|
|
|
//기본값
|
|
const newRoofSettings = {
|
|
//roofSeq: basicSetting.roofs.length + 1,
|
|
roofSeq: lastRoofSeq, // 마지막 roofSeq를 1 증가
|
|
roofType: '3',
|
|
roofWidth: '200',
|
|
roofHeight: '200',
|
|
roofGap: '0',
|
|
roofLayout: 'parallel',
|
|
}
|
|
|
|
setBasicSettings((prevState) => ({
|
|
...prevState,
|
|
roofs: [...prevState.roofs, newRoofSettings],
|
|
}))
|
|
|
|
setLastRoofSeq(newRoofSettings.roofSeq + 1) // roofSeq 값을 업데이트
|
|
}
|
|
|
|
//배열 값 변경 함수
|
|
const handleRoofSettings = (id, event) => {
|
|
console.log(id)
|
|
|
|
// 기본 세팅에서 roofs 배열을 복사
|
|
const updatedRoofs = [...basicSetting.roofs]
|
|
|
|
// roofSeq가 id와 일치하는 항목의 인덱스 찾기
|
|
const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)
|
|
|
|
if (index !== -1) {
|
|
// 해당 인덱스의 항목을 수정
|
|
updatedRoofs[index] = {
|
|
...updatedRoofs[index],
|
|
[event.target.name]: event.target.value,
|
|
}
|
|
|
|
// 수정된 배열을 상태에 반영
|
|
setBasicSettings((prevState) => ({
|
|
...prevState,
|
|
roofs: updatedRoofs,
|
|
}))
|
|
}
|
|
|
|
// const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
|
|
|
|
// setBasicSettings((prevState) => ({
|
|
// ...prevState,
|
|
// roofs: [...roof],
|
|
// }))
|
|
}
|
|
|
|
//저장
|
|
const submitCanvasConfig = async () => {
|
|
if (!objectNo) {
|
|
alert('object_no를 입력하세요.')
|
|
return
|
|
}
|
|
|
|
const patternData = {
|
|
objectNo,
|
|
roofDrawingSet: basicSetting.roofDrawingSet,
|
|
roofSizeSet: basicSetting.roofSizeSet,
|
|
roofAngleSet: basicSetting.roofAngleSet,
|
|
roofMaterialsAddList: basicSetting.roofs,
|
|
}
|
|
await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
|
|
|
|
//Recoil 설정
|
|
setCanvasSetting({ ...basicSetting })
|
|
|
|
// 저장 후 재조회
|
|
//await handleSelect()
|
|
}
|
|
|
|
// 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
|
|
const onRemove = async (targetId) => {
|
|
console.log(targetId)
|
|
|
|
setBasicSettings((prevState) => ({
|
|
...prevState,
|
|
roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId),
|
|
}))
|
|
// setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
|
|
<div className="text-lg font-semibold mb-4">배치면 초기설정</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="도면 작성방법"
|
|
name="roofDrawingSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofDrawingSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="1">치수 입력에 의한 물건작성</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="치수 입력방법"
|
|
name="roofSizeSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofSizeSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="1">복사도 입력</Radio>
|
|
<Radio value="2">실측값 입력</Radio>
|
|
<Radio value="3">육지붕</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="지붕각도 설정"
|
|
name="roofAngleSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofAngleSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="slope">경사</Radio>
|
|
<Radio value="angle">각도</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex space-x-4">지붕재 추가(단위 : mm)</div>
|
|
<div className="flex items-center mb-4">
|
|
<button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
|
|
Add
|
|
</button>
|
|
<span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
|
|
</div>
|
|
|
|
{/* Roofs Array Rendering */}
|
|
{basicSetting.roofs &&
|
|
basicSetting.roofs.map((roof, index) => {
|
|
return (
|
|
<div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
|
|
<span> 타입 : </span>
|
|
<Select
|
|
aria-label="roofMaterial"
|
|
className={'w-52'}
|
|
name="roofType"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
items={roofMaterials}
|
|
defaultSelectedKeys={roof.roofType ? roof.roofType : ''}
|
|
selectedKeys={roof.roofType}
|
|
value={roof.roofType}
|
|
>
|
|
{(roofMaterial) => (
|
|
<SelectItem key={roofMaterial.id} value={roofMaterial.id}>
|
|
{roofMaterial.name}
|
|
</SelectItem>
|
|
)}
|
|
</Select>
|
|
<span> 너비 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofWidth"
|
|
placeholder="너비"
|
|
value={roof.roofWidth}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<span> 높이 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofHeight"
|
|
placeholder="높이"
|
|
value={roof.roofHeight}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<span> 서까래 간격 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofGap"
|
|
placeholder="간격"
|
|
value={roof.roofGap}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
orientation="horizontal"
|
|
name="roofLayout"
|
|
value={roof.roofLayout}
|
|
defaultValue="parallel"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
>
|
|
<Radio value="parallel">병렬식</Radio>
|
|
<Radio value="cascade">계단식</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
<div className="flex space-x-4">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
onRemove(roof.roofSeq)
|
|
}}
|
|
>
|
|
삭제
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
<div className="flex gap-4 items-right">
|
|
<Button size="sm" color="secondary" onClick={submitCanvasConfig}>
|
|
저장
|
|
</Button>
|
|
<Button size="sm" onClick={() => setOpen(!open)}>
|
|
취소
|
|
</Button>
|
|
<input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|