roofMaterials recoil 추가
This commit is contained in:
parent
75d116ad98
commit
9736e7ed58
@ -8,68 +8,37 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { roofMaterialsAtom } from '@/store/settingAtom'
|
||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||
|
||||
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
|
||||
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
|
||||
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
|
||||
const { closePopup } = usePopup()
|
||||
const { getMessage } = useMessage()
|
||||
const roofMaterials = useRecoilValue(roofMaterialsAtom)
|
||||
|
||||
const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
|
||||
const [currentRoofMaterial, setCurrentRoofMaterial] = useState(
|
||||
isObjectNotEmpty(basicSetting.selectedRoofMaterial) ? basicSetting.selectedRoofMaterial : roofMaterials[0],
|
||||
)
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
fetchBasicSettings()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(currentRoofMaterial)
|
||||
}, [roofMaterials])
|
||||
|
||||
// Function to update the roofType and corresponding values
|
||||
const handleRoofTypeChange = (index, value) => {
|
||||
const updatedRoofs = [...basicSetting.roofs]
|
||||
const roofType = parseInt(value, 10)
|
||||
|
||||
// Reset other values based on the selected roofType
|
||||
if (roofType === 1) {
|
||||
updatedRoofs[index] = {
|
||||
...updatedRoofs[index],
|
||||
roofType: 1,
|
||||
roofWidth: 265,
|
||||
roofHeight: 235,
|
||||
roofGap: 455,
|
||||
roofHajebichi: 0,
|
||||
}
|
||||
} else if (roofType === 2) {
|
||||
updatedRoofs[index] = {
|
||||
...updatedRoofs[index],
|
||||
roofType: 2,
|
||||
roofGap: 265,
|
||||
roofHajebichi: 265,
|
||||
roofWidth: 0,
|
||||
roofHeight: 0,
|
||||
}
|
||||
} else if (roofType === 3) {
|
||||
updatedRoofs[index] = {
|
||||
...updatedRoofs[index],
|
||||
roofType: 3,
|
||||
roofHajebichi: 265,
|
||||
roofGap: 0,
|
||||
roofWidth: 0,
|
||||
roofHeight: 0,
|
||||
}
|
||||
} else if (roofType === 4) {
|
||||
updatedRoofs[index] = {
|
||||
...updatedRoofs[index],
|
||||
roofType: 4,
|
||||
roofHeight: 265,
|
||||
roofGap: 265,
|
||||
roofHajebichi: 0,
|
||||
roofWidth: 0,
|
||||
}
|
||||
}
|
||||
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: updatedRoofs,
|
||||
})
|
||||
const handleRoofTypeChange = (value) => {
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
|
||||
setCurrentRoofMaterial(selectedRoofMaterial)
|
||||
/*const newBasicSetting = { ...basicSetting }
|
||||
setBasicSettings({ ...newBasicSetting, selectedRoofMaterial: selectedRoofMaterial })*/
|
||||
}
|
||||
|
||||
return (
|
||||
@ -180,16 +149,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofType"
|
||||
value={basicSetting.roofs[0].roofType}
|
||||
onChange={(e) => handleRoofTypeChange(0, e.target.value)}
|
||||
value={currentRoofMaterial.roofMatlCd}
|
||||
onChange={(e) => handleRoofTypeChange(e.target.value)}
|
||||
>
|
||||
<option value="1">瓦 type A</option>
|
||||
<option value="2">瓦 type B</option>
|
||||
<option value="3">瓦 type C</option>
|
||||
<option value="4">瓦 type D</option>
|
||||
{roofMaterials.map((roof, index) => {
|
||||
return (
|
||||
<option key={index} value={roof.roofMatlCd}>
|
||||
{roof.roofMatlNm}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
{basicSetting.roofs[0].roofType === 1 ? (
|
||||
{['R', 'C'].includes(currentRoofMaterial.widAuth) && (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
@ -197,204 +169,67 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofWidth"
|
||||
value={basicSetting.roofs[0].roofWidth}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofWidth: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, roofWidth: e.target.value })
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHeight"
|
||||
value={basicSetting.roofs[0].roofHeight}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofHeight: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>235</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofGap"
|
||||
value={basicSetting.roofs[0].roofGap}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofGap: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>455</option>
|
||||
<option value={parseInt(currentRoofMaterial.widBase)}>{parseInt(currentRoofMaterial.widBase)}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : basicSetting.roofs[0].roofType === 2 ? (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHajebichi"
|
||||
value={basicSetting.roofs[0].roofHajebichi}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofHajebichi: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHeight"
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, roofHeight: e.target.value })
|
||||
}}
|
||||
>
|
||||
<option value={parseInt(currentRoofMaterial.lenBase)}>{parseInt(currentRoofMaterial.lenBase)}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="grid-select no-flx right" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofGap"
|
||||
value={basicSetting.roofs[0].roofGap}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofGap: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{['C', 'R'].includes(currentRoofMaterial.raftAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofGap"
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, roofGap: e.target.value })
|
||||
}}
|
||||
>
|
||||
<option>455</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
) : basicSetting.roofs[0].roofType === 3 ? (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHajebichi"
|
||||
value={basicSetting.roofs[0].roofHajebichi}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofHajebichi: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHajebichi"
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, roofHajebichi: e.target.value })
|
||||
}}
|
||||
>
|
||||
<option value={parseInt(currentRoofMaterial.roofPchBase)}>{parseInt(currentRoofMaterial.roofPchBase)}</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
) : basicSetting.roofs[0].roofType === 4 ? (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofHeight"
|
||||
value={basicSetting.roofs[0].roofHeight}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofHeight: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="grid-select no-flx right" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofGap"
|
||||
value={basicSetting.roofs[0].roofGap}
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofs: [
|
||||
{
|
||||
...basicSetting.roofs[0],
|
||||
roofGap: e.target.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -20,6 +20,7 @@ import {
|
||||
settingModalGridOptionsState,
|
||||
basicSettingState,
|
||||
settingsState,
|
||||
roofMaterialsAtom,
|
||||
} from '@/store/settingAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { globalFontAtom } from '@/store/fontAtom'
|
||||
@ -91,6 +92,8 @@ export function useCanvasSetting() {
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
|
||||
const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
|
||||
|
||||
const SelectOptions = [
|
||||
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
|
||||
{ id: 2, name: '1/2', value: 1 / 2 },
|
||||
@ -98,6 +101,12 @@ export function useCanvasSetting() {
|
||||
{ id: 4, name: '1/10', value: 1 / 10 },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
get({ url: `/api/v1/master/getRoofMaterialList` }).then((res) => {
|
||||
setRoofMaterials(res.data)
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!canvas) {
|
||||
return
|
||||
|
||||
@ -203,21 +203,16 @@ export const basicSettingState = atom({
|
||||
default: {
|
||||
roofSizeSet: 1,
|
||||
roofAngleSet: 'slope',
|
||||
roofs: [
|
||||
{
|
||||
roofApply: true,
|
||||
roofSeq: 1,
|
||||
roofType: 1,
|
||||
roofWidth: 200,
|
||||
roofHeight: 200,
|
||||
roofHajebichi: 200,
|
||||
roofGap: 0,
|
||||
roofLayout: 'parallel',
|
||||
},
|
||||
],
|
||||
selectedRoofMaterial: {},
|
||||
},
|
||||
})
|
||||
|
||||
// db에 등록된 지붕재 목록
|
||||
export const roofMaterialsAtom = atom({
|
||||
key: 'roofMaterialState',
|
||||
default: [],
|
||||
})
|
||||
|
||||
/**
|
||||
* 현재 선택된 물건 번호
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user