배치면 초기설정, 지붕면 할당 - 지붕재 선택 수정
This commit is contained in:
김민식
parent
a4af0dc006
commit
d5c2ecb6f0
@ -4,7 +4,7 @@ import { useOnClickOutside } from 'usehooks-ts'
|
||||
|
||||
export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
|
||||
const [openSelect, setOpenSelect] = useState(false)
|
||||
const [selected, setSelected] = useState(title === '' ? options[0].name : title)
|
||||
const [selected, setSelected] = useState(title === '' && value ? value.name : title)
|
||||
const ref = useRef(null)
|
||||
|
||||
const handleClickSelectOption = (option) => {
|
||||
@ -17,8 +17,8 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
value && handleClickSelectOption(value)
|
||||
}, [value])
|
||||
if (value) handleClickSelectOption(value)
|
||||
}, [])
|
||||
|
||||
useOnClickOutside(ref, handleClose)
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useOrientation } from '@/hooks/module/useOrientation'
|
||||
import { getDegreeInOrientation } from '@/util/canvas-util'
|
||||
import { numberCheck } from '@/util/common-utils'
|
||||
|
||||
export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||||
const { getMessage } = useMessage()
|
||||
@ -18,6 +19,14 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||||
nextStep()
|
||||
}
|
||||
|
||||
const checkDegree = (e) => {
|
||||
if (numberCheck(Number(e)) && Number(e) >= -180 && Number(e) <= 180) {
|
||||
setCompasDeg(Number(e))
|
||||
} else {
|
||||
setCompasDeg(compasDeg)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="properties-setting-wrap">
|
||||
@ -65,10 +74,15 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||||
className="input-origin block"
|
||||
value={compasDeg}
|
||||
readOnly={hasAnglePassivity}
|
||||
onChange={(e) =>
|
||||
setCompasDeg(
|
||||
e.target.value !== '' && parseInt(e.target.value) <= 360 && parseInt(e.target.value) >= 0 ? Number.parseInt(e.target.value) : 0,
|
||||
)
|
||||
placeholder={0}
|
||||
onChange={
|
||||
(e) => checkDegree(e.target.value)
|
||||
// setCompasDeg(
|
||||
|
||||
// e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
|
||||
// ? e.target.value
|
||||
// : 0,
|
||||
// )
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,7 @@ import { roofMaterialsAtom } from '@/store/settingAtom'
|
||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
|
||||
export const ROOF_MATERIAL_LAYOUT = {
|
||||
PARALLEL: 'P',
|
||||
@ -24,12 +25,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
const { closePopup } = usePopup()
|
||||
const { getMessage } = useMessage()
|
||||
const roofMaterials = useRecoilValue(roofMaterialsAtom)
|
||||
|
||||
const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
|
||||
const { findCommonCode } = useCommonCode()
|
||||
const [raftCodes, setRaftCodes] = useState([])
|
||||
const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
|
||||
|
||||
const globalLocale = useRecoilValue(globalLocaleStore)
|
||||
const [roofLayout, setRoofLayout] = useState(basicSetting.selectedRoofMaterial.layout)
|
||||
|
||||
const roofRef = {
|
||||
@ -40,6 +40,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
hajebichi: useRef(null),
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('🚀 ~ useEffect ~ currentRoofMaterial:', currentRoofMaterial)
|
||||
}, [currentRoofMaterial])
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
fetchBasicSettings()
|
||||
@ -49,10 +53,18 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
|
||||
// Function to update the roofType and corresponding values
|
||||
const handleRoofTypeChange = (value) => {
|
||||
console.log('🚀 ~ handleRoofTypeChange ~ value:', value)
|
||||
console.log('🚀 ~ handleRoofTypeChange ~ roofMaterials:', roofMaterials)
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
|
||||
setCurrentRoofMaterial(selectedRoofMaterial)
|
||||
}
|
||||
|
||||
const handleRafterChange = (value) => {
|
||||
console.log('🚀 ~ handleRafterChange ~ value:', value)
|
||||
const selectedRafter = raftCodes.find((raft) => raft.clCode === value)
|
||||
setCurrentRoofMaterial({ ...currentRoofMaterial, raft: selectedRafter })
|
||||
}
|
||||
|
||||
const handleSaveBtn = () => {
|
||||
const roofInfo = {
|
||||
...currentRoofMaterial,
|
||||
@ -81,7 +93,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap l mount`}>
|
||||
<div className={`modal-pop-wrap ll mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
@ -184,17 +196,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<td>
|
||||
<div className="placement-option">
|
||||
<div className="grid-select no-flx" style={{ width: '171px' }}>
|
||||
{/* <QSelectBox
|
||||
<QSelectBox
|
||||
ref={roofRef.roofCd}
|
||||
options={roofMaterials.map((roof, index) => {
|
||||
return { name: roof.roofMatlNm, value: roof.roofMatlCd }
|
||||
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
|
||||
})}
|
||||
value={currentRoofMaterial.roofMatlCd}
|
||||
onChange={(e) => {
|
||||
handleRoofTypeChange(e)
|
||||
}}
|
||||
/> */}
|
||||
<select
|
||||
value={currentRoofMaterial}
|
||||
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
|
||||
/>
|
||||
{/* <select
|
||||
className="select-light dark"
|
||||
name="roofType"
|
||||
ref={roofRef.roofCd}
|
||||
@ -210,9 +220,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</select> */}
|
||||
</div>
|
||||
{['R', 'C'].includes(currentRoofMaterial.widAuth) && (
|
||||
{currentRoofMaterial && ['R', 'C'].includes(currentRoofMaterial.widAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
@ -220,7 +230,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
ref={roofRef.width}
|
||||
defaultValue={parseInt(currentRoofMaterial.width)}
|
||||
value={parseInt(currentRoofMaterial.width)}
|
||||
onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, width: e.target.value })}
|
||||
readOnly={currentRoofMaterial.widAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
@ -234,7 +245,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
{['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
|
||||
{currentRoofMaterial && ['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
@ -242,7 +253,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
ref={roofRef.length}
|
||||
defaultValue={parseInt(currentRoofMaterial.length)}
|
||||
value={parseInt(currentRoofMaterial.length)}
|
||||
onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, length: e.target.value })}
|
||||
readOnly={currentRoofMaterial.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
@ -256,11 +268,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
{['C', 'R'].includes(currentRoofMaterial.raftAuth) && (
|
||||
{currentRoofMaterial && ['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" ref={roofRef.rafter}>
|
||||
<div className="select-wrap" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
ref={roofRef.rafter}
|
||||
options={raftCodes.map((raft, index) => {
|
||||
return { ...raft, name: globalLocale === 'ko' ? raft.clCodeNm : raft.clCodeNmJp }
|
||||
})}
|
||||
value={currentRoofMaterial}
|
||||
onChange={(e) => handleRafterChange(e.clCode)}
|
||||
/>
|
||||
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
|
||||
{raftCodes.map((raft, index) => {
|
||||
return (
|
||||
<option key={index} value={raft.clCode}>
|
||||
@ -268,11 +288,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</select> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
|
||||
{currentRoofMaterial && ['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
@ -281,6 +301,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
className="input-origin block"
|
||||
ref={roofRef.hajebichi}
|
||||
value={parseInt(currentRoofMaterial.hajebichi)}
|
||||
onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, hajebichi: e.target.value })}
|
||||
readOnly={currentRoofMaterial.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -3,13 +3,13 @@ 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 { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { 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'
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
|
||||
export default function RoofAllocationSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
@ -29,6 +29,7 @@ export default function RoofAllocationSetting(props) {
|
||||
const { fetchBasicSettings } = useCanvasSetting()
|
||||
const { findCommonCode } = useCommonCode()
|
||||
const [raftCodes, setRaftCodes] = useState([])
|
||||
const globalLocale = useRecoilValue(globalLocaleStore)
|
||||
useEffect(() => {
|
||||
fetchBasicSettings()
|
||||
const raftCodeList = findCommonCode('203800')
|
||||
@ -37,7 +38,7 @@ export default function RoofAllocationSetting(props) {
|
||||
}, [])
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ml mount`}>
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
@ -90,71 +91,62 @@ export default function RoofAllocationSetting(props) {
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="dec">基本屋根材</span>}
|
||||
{index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</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="input-grid" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={roof.width} readOnly />
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<div className="block-box">
|
||||
{roof.widAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select className="select-light dark" name="" id="">
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={roof.length} readOnly />
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="select-wrap" style={{ width: '84px' }}>
|
||||
<select className="select-light dark" name="" id="">
|
||||
<option>235</option>
|
||||
</select>
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
{roof.raftAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="grid-select" style={{ width: '84px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
|
||||
value={raftCodes.find((r) => r.id === roof.id)}
|
||||
/>
|
||||
{/* <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>
|
||||
)}
|
||||
{(roof.raftAuth || roof.roofPchAuth) && (
|
||||
<div className="block-box">
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
<div className="grid-select" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes.map((raft) => ({ ...raft, name: globalLocale === 'ko' ? raft.clCodeNm : raft.clCodeNmJp }))}
|
||||
value={raftCodes.find((r) => r.id === roof.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input type="text" className="input-origin block" value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} />
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="grid-select no-flx" style={{ width: '84px' }}>
|
||||
<select className="select-light dark" name="" id="">
|
||||
<option>265</option>
|
||||
</select>
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>
|
||||
|
||||
@ -156,6 +156,7 @@
|
||||
"plan.menu.estimate": "見積",
|
||||
"plan.menu.estimate.roof.alloc": "屋根面の割り当て",
|
||||
"modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。",
|
||||
"modal.roof.alloc.default.roof.material": "基本屋根材",
|
||||
"modal.roof.alloc.select.roof.material": "屋根材の選択",
|
||||
"modal.roof.alloc.select.parallel": "並列式",
|
||||
"modal.roof.alloc.select.stairs": "カスケード",
|
||||
|
||||
@ -160,6 +160,7 @@
|
||||
"plan.menu.estimate": "견적서",
|
||||
"plan.menu.estimate.roof.alloc": "지붕면 할당",
|
||||
"modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나, 지붕재를 추가하여 할당할 수 있습니다.",
|
||||
"modal.roof.alloc.default.roof.material": "기본지붕재",
|
||||
"modal.roof.alloc.select.roof.material": "지붕재 선택",
|
||||
"modal.roof.alloc.select.parallel": "병렬식",
|
||||
"modal.roof.alloc.select.stairs": "계단식",
|
||||
|
||||
@ -81,6 +81,9 @@ $alert-color: #101010;
|
||||
&.l{
|
||||
width: 800px;
|
||||
}
|
||||
&.ll{
|
||||
width: 900px;
|
||||
}
|
||||
&.mount{
|
||||
animation: mountpop .17s ease-in-out forwards;
|
||||
}
|
||||
@ -457,6 +460,14 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
// 2024-12-11
|
||||
// .placement-roof-btn-wrap{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-left: auto;
|
||||
// max-width: 250px;
|
||||
// }
|
||||
|
||||
.pop-form-radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user