556 lines
21 KiB
JavaScript
556 lines
21 KiB
JavaScript
import { GlobalDataContext } from '@/app/GlobalDataProvider'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
|
|
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
|
|
import { roofsState } from '@/store/roofAtom'
|
|
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
|
|
import { isObjectNotEmpty } from '@/util/common-utils'
|
|
import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
|
|
const Trestle = forwardRef((props, ref) => {
|
|
const { setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData } = props
|
|
const { getMessage } = useMessage()
|
|
// const [selectedTrestle, setSelectedTrestle] = useState()
|
|
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
|
const pitchText = useRecoilValue(pitchTextSelector)
|
|
const [selectedRoof, setSelectedRoof] = useState()
|
|
const {
|
|
trestleState,
|
|
trestleDetail,
|
|
dispatch,
|
|
raftBaseList,
|
|
trestleList,
|
|
constMthdList,
|
|
roofBaseList,
|
|
constructionList,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
setEavesMargin,
|
|
setRidgeMargin,
|
|
setKerabaMargin,
|
|
cvrYn,
|
|
cvrChecked,
|
|
snowGdPossYn,
|
|
snowGdChecked,
|
|
setCvrYn,
|
|
setCvrChecked,
|
|
setSnowGdPossYn,
|
|
setSnowGdChecked,
|
|
} = useModuleTrestle({
|
|
selectedRoof,
|
|
})
|
|
const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
|
|
// const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
|
|
const [lengthBase, setLengthBase] = useState(0)
|
|
const [hajebichi, setHajebichi] = useState(0)
|
|
const [selectedRaftBase, setSelectedRaftBase] = useState(null)
|
|
const [selectedTrestle, setSelectedTrestle] = useState(null)
|
|
const [selectedConstMthd, setSelectedConstMthd] = useState(null)
|
|
const [selectedConstruction, setSelectedConstruction] = useState(null)
|
|
const [selectedRoofBase, setSelectedRoofBase] = useState(null)
|
|
const { managementState } = useContext(GlobalDataContext)
|
|
const { restoreModuleInstArea } = useModuleBasicSetting()
|
|
|
|
useEffect(() => {
|
|
if (roofs && !selectedRoof) {
|
|
setSelectedRoof(roofs[0])
|
|
}
|
|
|
|
//모듈 설치 영역 복구
|
|
restoreModuleInstArea()
|
|
}, [roofs])
|
|
|
|
useEffect(() => {
|
|
if (selectedRoof) {
|
|
dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, moduleTpCd: selectedModules.itemTp } })
|
|
}
|
|
}, [selectedRoof])
|
|
|
|
useEffect(() => {
|
|
if (raftBaseList.length > 0) setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
|
|
}, [raftBaseList])
|
|
|
|
useEffect(() => {
|
|
if (trestleList.length > 0) setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
|
|
}, [trestleList])
|
|
|
|
useEffect(() => {
|
|
if (roofBaseList.length > 0) setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
|
|
}, [roofBaseList])
|
|
|
|
useEffect(() => {
|
|
if (constMthdList.length > 0) setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
|
|
}, [constMthdList])
|
|
|
|
useEffect(() => {
|
|
if (constructionList.length > 0) {
|
|
setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.constTp) ?? null)
|
|
}
|
|
}, [constructionList])
|
|
|
|
const getConstructionState = (index) => {
|
|
if (constructionList && constructionList.length > 0) {
|
|
if (constructionList[index].constPossYn === 'Y') {
|
|
if (trestleState && trestleState.constTp === constructionList[index].constTp) {
|
|
return 'blue'
|
|
}
|
|
return 'white'
|
|
}
|
|
return 'no-click'
|
|
}
|
|
return 'no-click'
|
|
}
|
|
|
|
const onChangeRaftBase = (e) => {
|
|
setSelectedRaftBase(e)
|
|
dispatch({
|
|
type: 'SET_RAFT_BASE',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raftBaseCd: e.clCode,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeTrestleMaker = (e) => {
|
|
setSelectedTrestle(e)
|
|
dispatch({
|
|
type: 'SET_TRESTLE_MAKER',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raftBaseCd: selectedRaftBase.clCode,
|
|
trestleMkrCd: e.trestleMkrCd,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeConstMthd = (e) => {
|
|
setSelectedConstMthd(e)
|
|
dispatch({
|
|
type: 'SET_CONST_MTHD',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raftBaseCd: selectedRaftBase.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: e.constMthdCd,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeRoofBase = (e) => {
|
|
setSelectedRoofBase(e)
|
|
dispatch({
|
|
type: 'SET_ROOF_BASE',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raftBaseCd: selectedRaftBase.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: selectedConstMthd.constMthdCd,
|
|
roofBaseCd: e.roofBaseCd,
|
|
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
|
instHt: managementState?.installHeight ?? '',
|
|
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
|
stdSnowLd: managementState?.verticalSnowCover ?? '',
|
|
inclCd: selectedRoof?.pitch ?? 0,
|
|
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
|
},
|
|
})
|
|
}
|
|
const handleChangeRoofMaterial = (index) => {
|
|
const newAddedRoofs = roofs.map((roof, i) => {
|
|
if (i === selectedRoof.index) {
|
|
return {
|
|
...selectedRoof,
|
|
...trestleState,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
cvrYn,
|
|
snowGdPossYn,
|
|
cvrChecked,
|
|
snowGdChecked,
|
|
}
|
|
}
|
|
return { ...roof }
|
|
})
|
|
setRoofs(newAddedRoofs)
|
|
setSelectedRoof(newAddedRoofs[index])
|
|
}
|
|
|
|
const handleConstruction = (index) => {
|
|
if (constructionList[index]?.constPossYn === 'Y') {
|
|
dispatch({
|
|
type: 'SET_CONSTRUCTION',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raftBaseCd: selectedRaftBase.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: selectedConstMthd.constMthdCd,
|
|
roofBaseCd: selectedRoofBase.roofBaseCd,
|
|
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
|
instHt: managementState?.installHeight ?? '',
|
|
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
|
stdSnowLd: +managementState?.verticalSnowCover ?? '',
|
|
inclCd: selectedRoof?.pitch.toString() ?? 0,
|
|
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
|
constTp: constructionList[index].constTp,
|
|
mixMatlNo: selectedModules.mixMatlNo,
|
|
workingWidth: selectedRoof?.length.toString() ?? '',
|
|
// snowGdPossYn: constructionList[index].snowGdPossYn,
|
|
// cvrYn: constructionList[index].cvrYn,
|
|
},
|
|
})
|
|
|
|
setCvrYn(constructionList[index].cvrYn)
|
|
setSnowGdPossYn(constructionList[index].snowGdPossYn)
|
|
setCvrChecked(false)
|
|
setSnowGdChecked(false)
|
|
}
|
|
}
|
|
|
|
const isComplete = () => {
|
|
const newAddedRoofs = roofs.map((roof, i) => {
|
|
if (i === selectedRoof?.index) {
|
|
return {
|
|
...selectedRoof,
|
|
trestle: trestleState,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
cvrYn,
|
|
snowGdPossYn,
|
|
cvrChecked,
|
|
snowGdChecked,
|
|
trestleDetail,
|
|
}
|
|
}
|
|
return { ...roof }
|
|
})
|
|
|
|
let result = true
|
|
newAddedRoofs.forEach((roof) => {
|
|
if (roof.eavesMargin && roof.ridgeMargin && roof.kerabaMargin) {
|
|
return true
|
|
}
|
|
|
|
if (!roof.trestleMkrCd) result = false
|
|
if (!roof.constMthdCd) result = false
|
|
if (!roof.roofBaseCd) result = false
|
|
if (!roof.constTp) result = false
|
|
|
|
if (selectedRoof.lenAuth === 'C') {
|
|
if (!trestleState?.lengthBase) result = false
|
|
}
|
|
if (['C', 'R'].includes(selectedRoof.raftAuth)) {
|
|
if (!roof.raftBaseCd) result = false
|
|
}
|
|
|
|
if (['C', 'R'].includes(selectedRoof.roofPchAuth)) {
|
|
if (!roof.roofPchBase) result = false
|
|
}
|
|
})
|
|
|
|
console.log('newAddedRoofs', newAddedRoofs)
|
|
|
|
if (result) {
|
|
setRoofs(newAddedRoofs)
|
|
setModuleSelectionData({
|
|
...moduleSelectionData,
|
|
roofConstructions: newAddedRoofs.map((roof, index) => {
|
|
return {
|
|
addRoof: {
|
|
...moduleSelectionData.roofConstructions[index]?.addRoof,
|
|
...roof.addRoof,
|
|
},
|
|
trestle: {
|
|
...moduleSelectionData.roofConstructions[index]?.trestle,
|
|
...roof.trestle,
|
|
},
|
|
construction: {
|
|
...roof.construction,
|
|
...moduleSelectionData.roofConstructions[index]?.construction,
|
|
},
|
|
trestleDetail: {
|
|
...roof.trestleDetail,
|
|
},
|
|
}
|
|
}),
|
|
})
|
|
trestleTrigger({
|
|
roofConstruction: newAddedRoofs.map((roof) => {
|
|
return {
|
|
roofIndex: roof.index,
|
|
addRoof: {
|
|
...roof,
|
|
},
|
|
trestle: {
|
|
...selectedTrestle,
|
|
raftBaseCd: roof.raftBaseCd,
|
|
},
|
|
construction: {
|
|
...constructionList.find((construction) => trestleState.constTp === construction.constTp),
|
|
roofIndex: roof.index,
|
|
setupCover: roof.cvrYn === 'Y',
|
|
setupSnowCover: roof.snowGdYn === 'Y',
|
|
selectedIndex: roof.index,
|
|
},
|
|
}
|
|
}),
|
|
})
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
isComplete,
|
|
}))
|
|
|
|
return (
|
|
<div className="roof-module-tab2-overflow">
|
|
<div className="module-table-box mb10">
|
|
<div className="module-box-tab">
|
|
{roofs &&
|
|
roofs.map((roof, index) => (
|
|
<button
|
|
key={index}
|
|
className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
|
|
onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
|
|
>
|
|
{roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="module-table-inner">
|
|
<div className="module-table-flex-wrap tab2">
|
|
<div className="module-flex-item">
|
|
<div className="eaves-keraba-table">
|
|
{selectedRoof && selectedRoof.lenAuth === 'C' && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">L</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={trestleState?.lengthBase}
|
|
onChange={(e) => setLengthBase(e.target.value)}
|
|
disabled={selectedRoof.lenAuth === 'R'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{raftBaseList.length > 0 && (
|
|
<QSelectBox
|
|
options={raftBaseList}
|
|
value={selectedRaftBase}
|
|
sourceKey={'clCode'}
|
|
targetKey={'clCode'}
|
|
showKey={'clCodeNm'}
|
|
disabled={selectedRoof.raftAuth === 'R'}
|
|
onChange={(e) => onChangeRaftBase(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
disabled={selectedRoof.roofPchAuth === 'R'}
|
|
onChange={(e) => handleHajebichiAndLength(e, 'hajebichi')}
|
|
value={hajebichi}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{trestleList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={trestleList}
|
|
value={selectedTrestle}
|
|
sourceKey={'trestleMkrCd'}
|
|
targetKey={'trestleMkrCd'}
|
|
showKey={'trestleMkrCdJp'}
|
|
onChange={(e) => onChangeTrestleMaker(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{constMthdList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={constMthdList}
|
|
value={selectedConstMthd}
|
|
sourceKey={'constMthdCd'}
|
|
targetKey={'constMthdCd'}
|
|
showKey={'constMthdCdJp'}
|
|
onChange={(e) => onChangeConstMthd(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{roofBaseList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={roofBaseList}
|
|
sourceKey={'roofBaseCd'}
|
|
targetKey={'roofBaseCd'}
|
|
showKey={'roofBaseCdJp'}
|
|
value={selectedRoofBase}
|
|
onChange={(e) => onChangeRoofBase(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="module-flex-item non-flex">
|
|
<div className="flex-item-btn-wrap">
|
|
<button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
|
|
{getMessage('modal.module.basic.setting.module.standard.construction')}(I)
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
|
|
{getMessage('modal.module.basic.setting.module.multiple.construction')}
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
|
|
{getMessage('modal.module.basic.setting.module.standard.construction')}
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
|
|
{getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
|
|
{getMessage('modal.module.basic.setting.module.enforce.construction')}
|
|
</button>
|
|
</div>
|
|
<div className="grid-check-form-flex">
|
|
<div className="d-check-box pop">
|
|
<input
|
|
type="checkbox"
|
|
id={`ch01`}
|
|
disabled={!cvrYn || cvrYn === 'N'}
|
|
checked={cvrChecked || false}
|
|
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
|
|
onChange={() => setCvrChecked(!cvrChecked)}
|
|
/>
|
|
<label htmlFor={`ch01`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
|
|
</div>
|
|
<div className="d-check-box pop">
|
|
<input
|
|
type="checkbox"
|
|
id={`ch02`}
|
|
disabled={!trestleState?.snowGdPossYn || trestleState?.snowGdPossYn === 'N'}
|
|
checked={snowGdChecked || false}
|
|
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
|
|
onChange={() => setSnowGdChecked(!snowGdChecked)}
|
|
/>
|
|
<label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="module-area mt10">
|
|
<div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
|
|
<div className="outline-form mr15">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={eavesMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
|
|
onChange={(e) => setEavesMargin(e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
<div className="outline-form mr15">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={ridgeMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
|
|
onChange={(e) => setRidgeMargin(e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
<div className="outline-form ">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={kerabaMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
|
|
onChange={(e) => setKerabaMargin(e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="module-bottom">
|
|
<div className="module-table-box ">
|
|
<div className="warning-guide">
|
|
<div className="warning">
|
|
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
|
<br />
|
|
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default Trestle
|