지붕재 선택 작업중
This commit is contained in:
parent
02f3c16241
commit
81d2d25cdf
@ -16,7 +16,13 @@ import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, ver
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
import { outerLinePointsState } from '@/store/outerLineAtom'
|
||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
import {
|
||||
addedRoofsSelector,
|
||||
basicSettingState,
|
||||
roofMaterialsSelector,
|
||||
selectedRoofMaterialSelector,
|
||||
settingModalFirstOptionsState,
|
||||
} from '@/store/settingAtom'
|
||||
|
||||
import KO from '@/locales/ko.json'
|
||||
import JA from '@/locales/ja.json'
|
||||
@ -75,10 +81,14 @@ export default function CanvasMenu(props) {
|
||||
// const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
|
||||
const commonUtils = useRecoilValue(commonUtilsState)
|
||||
const { commonFunctions } = useCommonUtils()
|
||||
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
||||
|
||||
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
|
||||
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
|
||||
const { restoreModuleInstArea } = useModuleBasicSetting()
|
||||
|
||||
const addedRoofs = useRecoilValue(addedRoofsSelector)
|
||||
const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
|
||||
|
||||
//견적서버튼 노출용
|
||||
const [buttonStyle, setButtonStyle] = useState('')
|
||||
|
||||
@ -112,6 +122,10 @@ export default function CanvasMenu(props) {
|
||||
if (pathname !== '/floor-plan') router.push('/floor-plan')
|
||||
}
|
||||
|
||||
const changeSelectedRoofMaterial = (e) => {
|
||||
setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
|
||||
}
|
||||
|
||||
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
|
||||
|
||||
useEffect(() => {
|
||||
@ -292,9 +306,11 @@ export default function CanvasMenu(props) {
|
||||
<button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
||||
<button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
||||
</div>
|
||||
<div className="select-box">
|
||||
<QSelectBox title={'瓦53A'} option={SelectOption} />
|
||||
</div>
|
||||
{addedRoofs.length > 0 && (
|
||||
<div className="select-box">
|
||||
{<QSelectBox value={addedRoofs.find((roof) => roof.selected)} options={addedRoofs} onChange={changeSelectedRoofMaterial} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="btn-from">
|
||||
<button
|
||||
className={`btn10 ${floorPlanState.refFileModalOpen && 'active'}`}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
@ -8,10 +8,15 @@ 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 { useRecoilValue } from 'recoil'
|
||||
import { roofMaterialsAtom } from '@/store/settingAtom'
|
||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
|
||||
export const ROOF_MATERIAL_LAYOUT = {
|
||||
PARALLEL: 'P',
|
||||
STAIRS: 'S',
|
||||
}
|
||||
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
|
||||
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
|
||||
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
|
||||
@ -20,25 +25,59 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
const roofMaterials = useRecoilValue(roofMaterialsAtom)
|
||||
|
||||
const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
|
||||
const { findCommonCode } = useCommonCode()
|
||||
const [raftCodes, setRaftCodes] = useState([])
|
||||
const [currentRoofMaterial, setCurrentRoofMaterial] = useState(
|
||||
isObjectNotEmpty(basicSetting.selectedRoofMaterial) ? basicSetting.selectedRoofMaterial : roofMaterials[0],
|
||||
)
|
||||
|
||||
const [roofLayout, setRoofLayout] = useState(ROOF_MATERIAL_LAYOUT.PARALLEL)
|
||||
|
||||
const roofRef = {
|
||||
roofCd: useRef(null),
|
||||
width: useRef(null),
|
||||
length: useRef(null),
|
||||
rafter: useRef(null),
|
||||
hajebichi: useRef(null),
|
||||
}
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
fetchBasicSettings()
|
||||
const raftCodeList = findCommonCode('203800')
|
||||
setRaftCodes(raftCodeList)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(currentRoofMaterial)
|
||||
}, [roofMaterials])
|
||||
|
||||
// Function to update the roofType and corresponding values
|
||||
const handleRoofTypeChange = (value) => {
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
|
||||
setCurrentRoofMaterial(selectedRoofMaterial)
|
||||
/*const newBasicSetting = { ...basicSetting }
|
||||
setBasicSettings({ ...newBasicSetting, selectedRoofMaterial: selectedRoofMaterial })*/
|
||||
}
|
||||
|
||||
const handleSaveBtn = () => {
|
||||
const roofInfo = {
|
||||
...currentRoofMaterial,
|
||||
roofCd: roofRef.roofCd.current?.value,
|
||||
width: roofRef.width.current?.value,
|
||||
length: roofRef.length.current?.value,
|
||||
hajebichi: roofRef.hajebichi.current?.value,
|
||||
raft: roofRef.rafter.current?.value,
|
||||
selected: true,
|
||||
layout: roofLayout,
|
||||
}
|
||||
|
||||
const addedRoofs = []
|
||||
addedRoofs.push(roofInfo)
|
||||
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
selectedRoofMaterial: {
|
||||
// 선택된 지붕재 정보
|
||||
roofInfo,
|
||||
},
|
||||
roofs: addedRoofs,
|
||||
})
|
||||
basicSettingSave()
|
||||
}
|
||||
|
||||
return (
|
||||
@ -149,8 +188,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofType"
|
||||
ref={roofRef.roofCd}
|
||||
value={currentRoofMaterial.roofMatlCd}
|
||||
onChange={(e) => handleRoofTypeChange(e.target.value)}
|
||||
onChange={(e) => {
|
||||
handleRoofTypeChange(e.target.value)
|
||||
}}
|
||||
>
|
||||
{roofMaterials.map((roof, index) => {
|
||||
return (
|
||||
@ -162,38 +204,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</select>
|
||||
</div>
|
||||
{['R', 'C'].includes(currentRoofMaterial.widAuth) && (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select
|
||||
className="select-light dark"
|
||||
name="roofWidth"
|
||||
onChange={(e) => {
|
||||
// 상태 업데이트 함수 호출
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, roofWidth: e.target.value })
|
||||
}}
|
||||
>
|
||||
<option value={parseInt(currentRoofMaterial.widBase)}>{parseInt(currentRoofMaterial.widBase)}</option>
|
||||
</select>
|
||||
<div className="flex-ment">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">W</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" ref={roofRef.width} value={parseInt(currentRoofMaterial.width)} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</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 className="outline-form">
|
||||
<span className="mr10">L</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input type="text" className="input-origin block" ref={roofRef.length} value={parseInt(currentRoofMaterial.length)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -201,33 +227,30 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<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 className="select-light dark" name="roofGap" ref={roofRef.rafter}>
|
||||
{raftCodes.map((raft, index) => {
|
||||
return (
|
||||
<option key={index} value={raft.clCode}>
|
||||
{raft.clCodeNm}
|
||||
</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 className="outline-form">
|
||||
<span className="mr10">{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '63px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
ref={roofRef.hajebichi}
|
||||
value={parseInt(currentRoofMaterial.hajebichi)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -238,7 +261,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</table>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => basicSettingSave()}>
|
||||
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -3,16 +3,27 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { basicSettingState } from '@/store/settingAtom'
|
||||
import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
||||
|
||||
export default function RoofAllocationSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =
|
||||
useRoofAllocationSetting(id)
|
||||
const {
|
||||
handleSave,
|
||||
onAddRoofMaterial,
|
||||
onDeleteRoofMaterial,
|
||||
roofMaterials,
|
||||
setCurrentRoofMaterial,
|
||||
roofList,
|
||||
handleDefaultRoofMaterial,
|
||||
handleChangeRoofMaterial,
|
||||
} = useRoofAllocationSetting(id)
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
@ -28,7 +39,13 @@ export default function RoofAllocationSetting(props) {
|
||||
<div className="allocation-select-wrap">
|
||||
<span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox options={roofMaterials} value={selectedRoofMaterial} onChange={(e) => setSelectedRoofMaterial(e)} />
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
onChange={(e) => {
|
||||
const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
|
||||
setCurrentRoofMaterial(selected)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="allocation-edit"
|
||||
@ -41,25 +58,34 @@ export default function RoofAllocationSetting(props) {
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-wrap">
|
||||
{values.map((value, index) => (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" />
|
||||
<label htmlFor="ra01"></label>
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select" style={{ width: '248px' }}>
|
||||
<QSelectBox options={roofMaterials} value={value} />
|
||||
</div>
|
||||
{index === 0 && <span className="dec">基本屋根材</span>}
|
||||
{index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(value.id)}></button>}
|
||||
</div>
|
||||
{roofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
</div>
|
||||
<div className="block-box">
|
||||
{value.type === 'A' ? (
|
||||
<>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select" style={{ width: '248px' }}>
|
||||
<QSelectBox
|
||||
options={roofMaterials}
|
||||
value={roofMaterials.find((r) => r.id === roof.id)}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="dec">基本屋根材</span>}
|
||||
{index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="block-box">
|
||||
{roof.widAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
@ -68,6 +94,8 @@ export default function RoofAllocationSetting(props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
@ -76,6 +104,8 @@ export default function RoofAllocationSetting(props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.raftAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="select-wrap" style={{ width: '84px' }}>
|
||||
@ -84,9 +114,8 @@ export default function RoofAllocationSetting(props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : value.type === 'B' ? (
|
||||
<>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
@ -95,63 +124,23 @@ export default function RoofAllocationSetting(props) {
|
||||
</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="" id="">
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : value.type === 'C' ? (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select className="select-light dark" name="" id="">
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : value.type === 'D' ? (
|
||||
<>
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select className="select-light dark" name="" id="">
|
||||
<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="" id="">
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
<div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button className={value.alignType === 'parallel' ? 'act' : ''}>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button className={value.alignType === 'stairs' ? 'act' : ''}>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
|
||||
@ -106,9 +106,25 @@ export function useCanvasSetting() {
|
||||
addRoofMaterials()
|
||||
}, [])
|
||||
|
||||
//지붕재 초기세팅
|
||||
const addRoofMaterials = async () => {
|
||||
const { data } = await getRoofMaterialList()
|
||||
setRoofMaterials(data)
|
||||
const roofLists = data.map((item) => ({
|
||||
...item,
|
||||
id: item.roofMatlCd,
|
||||
name: item.roofMatlNm,
|
||||
selected: false,
|
||||
nameJp: item.roofMatlNmJp,
|
||||
length: item.lenBase && parseInt(item.lenBase),
|
||||
width: item.widBase && parseInt(item.widBase),
|
||||
raft: item.raftBase && parseInt(item.raftBase),
|
||||
hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
|
||||
}))
|
||||
setRoofMaterials(roofLists)
|
||||
const selectedRoofMaterial = roofLists[0]
|
||||
const addRoofs = []
|
||||
addRoofs.push({ ...selectedRoofMaterial, selected: true })
|
||||
setBasicSettings({ ...basicSetting, roofMaterials: selectedRoofMaterial, roofs: addRoofs })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -144,6 +160,7 @@ export function useCanvasSetting() {
|
||||
// 배치면 초기설정 변경 시
|
||||
useEffect(() => {
|
||||
//console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
|
||||
|
||||
if (canvasSetting.flag) {
|
||||
basicSettingSave()
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
|
||||
import { setSurfaceShapePattern } from '@/util/canvas-util'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePolygon } from '@/hooks/usePolygon'
|
||||
import { roofDisplaySelector } from '@/store/settingAtom'
|
||||
import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
@ -26,69 +26,16 @@ export function useRoofAllocationSetting(id) {
|
||||
const { swalFire } = useSwal()
|
||||
const { setMenuNumber } = useCanvasMenu()
|
||||
const setMenuType = useSetRecoilState(menuTypeState)
|
||||
const roofMaterials = [
|
||||
{
|
||||
id: 'A',
|
||||
name: '기와1',
|
||||
type: 'A',
|
||||
width: '200',
|
||||
length: '200',
|
||||
alignType: 'parallel',
|
||||
},
|
||||
{
|
||||
id: 'B',
|
||||
name: '기와2',
|
||||
type: 'B',
|
||||
rafter: '200',
|
||||
alignType: 'parallel',
|
||||
},
|
||||
{
|
||||
id: 'C',
|
||||
name: '기와3',
|
||||
type: 'C',
|
||||
hajebichi: '200',
|
||||
alignType: 'stairs',
|
||||
},
|
||||
{
|
||||
id: 'D',
|
||||
name: '기와4',
|
||||
type: 'D',
|
||||
length: '200',
|
||||
alignType: 'stairs',
|
||||
},
|
||||
]
|
||||
const widths = [
|
||||
{ name: '200', id: 'q' },
|
||||
{ name: '250', id: 'q1' },
|
||||
{ name: '300', id: 'q2' },
|
||||
]
|
||||
const lengths = [
|
||||
{ name: '200', id: 'w' },
|
||||
{ name: '250', id: 'w1' },
|
||||
{ name: '300', id: 'w2' },
|
||||
]
|
||||
const rafters = [
|
||||
{ name: '200', id: 'e' },
|
||||
{ name: '250', id: 'e1' },
|
||||
{ name: '300', id: 'e2' },
|
||||
]
|
||||
|
||||
const [values, setValues] = useState([
|
||||
{
|
||||
id: 'A',
|
||||
type: 'A',
|
||||
roofMaterial: { name: '기와1' },
|
||||
width: { name: '200' },
|
||||
length: { name: '250' },
|
||||
rafter: { name: '300' },
|
||||
alignType: 'stairs',
|
||||
},
|
||||
])
|
||||
|
||||
const [radioValue, setRadioValue] = useState('A')
|
||||
const roofMaterials = useRecoilValue(roofMaterialsSelector)
|
||||
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
|
||||
const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
|
||||
const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
|
||||
const [roofList, setRoofList] = useState([])
|
||||
const [editingLines, setEditingLines] = useState([])
|
||||
|
||||
const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(roofMaterials[0])
|
||||
useEffect(() => {
|
||||
setRoofList(basicSetting.roofs)
|
||||
}, [basicSetting])
|
||||
|
||||
useEffect(() => {
|
||||
const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
|
||||
@ -130,11 +77,15 @@ export function useRoofAllocationSetting(id) {
|
||||
}, [])
|
||||
|
||||
const onAddRoofMaterial = () => {
|
||||
setValues([...values, selectedRoofMaterial])
|
||||
if (roofList.length >= 4) {
|
||||
swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') })
|
||||
return
|
||||
}
|
||||
setRoofList([...roofList, { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }])
|
||||
}
|
||||
|
||||
const onDeleteRoofMaterial = (id) => {
|
||||
setValues(values.filter((value) => value.id !== id))
|
||||
const onDeleteRoofMaterial = (idx) => {
|
||||
setRoofList([...roofList.filter((_, index) => index !== idx)])
|
||||
}
|
||||
|
||||
const { handleMenu } = useMenu()
|
||||
@ -207,6 +158,13 @@ export function useRoofAllocationSetting(id) {
|
||||
canvas.remove(wallLine)
|
||||
})
|
||||
|
||||
setBasicSetting((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
roofs: roofList,
|
||||
}
|
||||
})
|
||||
|
||||
const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
|
||||
|
||||
roofs.forEach((roof) => {
|
||||
@ -246,25 +204,45 @@ export function useRoofAllocationSetting(id) {
|
||||
canvas?.renderAll()
|
||||
}
|
||||
|
||||
const handleRadioOnChange = (e) => {
|
||||
setRadioValue(e.target)
|
||||
//roof input값 변경
|
||||
const handleChangeInput = (type, value, index) => {}
|
||||
|
||||
// 지붕재 변경
|
||||
const handleChangeRoofMaterial = (value, index) => {
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
|
||||
const newRoofList = roofList.map((roof, idx) => {
|
||||
if (idx === index) {
|
||||
return { ...selectedRoofMaterial }
|
||||
}
|
||||
return roof
|
||||
})
|
||||
|
||||
setRoofList(newRoofList)
|
||||
}
|
||||
|
||||
// 기본 지붕재 radio값 변경
|
||||
const handleDefaultRoofMaterial = (index) => {
|
||||
const newRoofList = roofList.map((roof, idx) => {
|
||||
return { ...roof, selected: idx === index }
|
||||
})
|
||||
|
||||
setRoofList(newRoofList)
|
||||
}
|
||||
|
||||
return {
|
||||
handleSave,
|
||||
onAddRoofMaterial,
|
||||
onDeleteRoofMaterial,
|
||||
handleRadioOnChange,
|
||||
handleAlloc,
|
||||
setLineSize,
|
||||
widths,
|
||||
lengths,
|
||||
rafters,
|
||||
values,
|
||||
roofMaterials,
|
||||
selectedRoofMaterial,
|
||||
setSelectedRoofMaterial,
|
||||
radioValue,
|
||||
setRadioValue,
|
||||
basicSetting,
|
||||
setBasicSetting,
|
||||
currentRoofMaterial,
|
||||
setCurrentRoofMaterial,
|
||||
roofList,
|
||||
handleDefaultRoofMaterial,
|
||||
handleChangeRoofMaterial,
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,8 +203,10 @@ export const basicSettingState = atom({
|
||||
default: {
|
||||
roofSizeSet: 1,
|
||||
roofAngleSet: 'slope',
|
||||
selectedRoofMaterial: {},
|
||||
selectedRoofMaterial: {}, // 선택된 지붕재
|
||||
roofs: [], // 지붕면 할당에서 추가된 지붕재 목록
|
||||
},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
// db에 등록된 지붕재 목록
|
||||
@ -213,6 +215,35 @@ export const roofMaterialsAtom = atom({
|
||||
default: [],
|
||||
})
|
||||
|
||||
//현재 선택된 지붕재
|
||||
export const selectedRoofMaterialSelector = selector({
|
||||
key: 'selectedRoofMaterialSelector',
|
||||
get: ({ get }) => {
|
||||
const basicSetting = get(basicSettingState)
|
||||
const roofMaterials = get(roofMaterialsAtom)
|
||||
return basicSetting.selectedRoofMaterial ?? roofMaterials[0]
|
||||
},
|
||||
})
|
||||
|
||||
// QSelectBox에서 사용할 지붕재 목록
|
||||
export const roofMaterialsSelector = selector({
|
||||
key: 'roofMaterialsSelector',
|
||||
get: ({ get }) => {
|
||||
const roofMaterials = get(roofMaterialsAtom)
|
||||
return roofMaterials.map((material) => ({ ...material, id: material.roofMatlCd, name: material.roofMatlNm }))
|
||||
},
|
||||
})
|
||||
|
||||
// 지붕면 할당에서 추가된 지붕재 목록
|
||||
export const addedRoofsSelector = selector({
|
||||
key: 'addedRoofsSelector',
|
||||
get: ({ get }) => {
|
||||
const basicSetting = get(basicSettingState)
|
||||
return basicSetting.roofs
|
||||
},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
/**
|
||||
* 현재 선택된 물건 번호
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user