배치면 초기설정 수정
This commit is contained in:
changkyu choi
parent
e12b3eb8d9
commit
e1eae2ae45
@ -1,113 +1,26 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRecoilState } from 'recoil'
|
||||
|
||||
import { canvasSettingState } from '@/store/canvasAtom'
|
||||
import { basicSettingState } from '@/store/settingAtom'
|
||||
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
|
||||
import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
|
||||
import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
|
||||
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
|
||||
const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
|
||||
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
|
||||
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
|
||||
const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const { closePopup } = usePopup()
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
const { swalFire } = useSwal()
|
||||
|
||||
const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('PlacementShapeSetting useEffect 실행')
|
||||
|
||||
fetchSettings()
|
||||
}, [objectNo])
|
||||
|
||||
// PlacementShapeSetting 조회 및 초기화
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
await 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 {
|
||||
roofSizeSet: item.roofSizeSet,
|
||||
roofAngleSet: item.roofAngleSet,
|
||||
}
|
||||
})
|
||||
|
||||
const roofsArray = res.some((item) => !item.roofSeq)
|
||||
? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
|
||||
res.map(() => ({
|
||||
roofApply: true,
|
||||
roofSeq: 1,
|
||||
roofType: 1,
|
||||
roofWidth: 200,
|
||||
roofHeight: 200,
|
||||
roofHajebichi: 200,
|
||||
roofGap: 0,
|
||||
roofLayout: 'parallel',
|
||||
}))
|
||||
: res.map((item) => ({
|
||||
roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
|
||||
roofSeq: item.roofSeq,
|
||||
roofType: item.roofType,
|
||||
roofWidth: item.roofWidth,
|
||||
roofHeight: item.roofHeight,
|
||||
roofHajebichi: item.roofHajebichi,
|
||||
roofGap: item.roofGap,
|
||||
roofLayout: item.roofLayout,
|
||||
}))
|
||||
console.log('roofsArray ', roofsArray)
|
||||
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
||||
const patternData = {
|
||||
roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
|
||||
roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
|
||||
roofs: roofsArray, // 만들어진 roofs 배열
|
||||
}
|
||||
|
||||
// 데이터 설정
|
||||
setBasicSettings({ ...patternData })
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
|
||||
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
||||
setBasicSettings({ ...canvasSetting })
|
||||
}
|
||||
}
|
||||
|
||||
const submitCanvasConfig = async () => {
|
||||
try {
|
||||
const patternData = {
|
||||
objectNo,
|
||||
roofSizeSet: basicSetting.roofSizeSet,
|
||||
roofAngleSet: basicSetting.roofAngleSet,
|
||||
roofMaterialsAddList: basicSetting.roofs,
|
||||
}
|
||||
|
||||
await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
|
||||
swalFire({ text: getMessage(res.returnMessage) })
|
||||
})
|
||||
|
||||
//Recoil 설정
|
||||
setCanvasSetting({ ...basicSetting })
|
||||
} catch (error) {
|
||||
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||
}
|
||||
}
|
||||
fetchBasicSettings()
|
||||
}, [])
|
||||
|
||||
// Function to update the roofType and corresponding values
|
||||
const handleRoofTypeChange = (index, value) => {
|
||||
@ -122,7 +35,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
roofWidth: 265,
|
||||
roofHeight: 235,
|
||||
roofGap: 455,
|
||||
hajebichi: 0,
|
||||
roofHajebichi: 0,
|
||||
}
|
||||
} else if (roofType === 2) {
|
||||
updatedRoofs[index] = {
|
||||
@ -490,7 +403,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={() => submitCanvasConfig()}>
|
||||
<button className="btn-frame modal act" onClick={() => basicSettingSave()}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ export default function SizeGuide({ setShowSizeGuidModal }) {
|
||||
<div className="placement-table light">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '60px' }} />
|
||||
<col style={{ width: '65px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
|
||||
import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
|
||||
import {
|
||||
adsorptionPointModeState,
|
||||
adsorptionRangeState,
|
||||
canvasState,
|
||||
planSizeSettingState,
|
||||
dotLineGridSettingState,
|
||||
canvasSettingState,
|
||||
} from '@/store/canvasAtom'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
@ -11,6 +18,7 @@ import {
|
||||
settingModalFirstOptionsState,
|
||||
settingModalSecondOptionsState,
|
||||
settingModalGridOptionsState,
|
||||
basicSettingState,
|
||||
} from '@/store/settingAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { globalFontAtom } from '@/store/fontAtom'
|
||||
@ -70,6 +78,9 @@ export function useCanvasSetting() {
|
||||
const [color, setColor] = useColor(gridColor ?? '#FF0000')
|
||||
const [colorTemp, setColorTemp] = useState()
|
||||
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
|
||||
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 },
|
||||
@ -112,6 +123,14 @@ export function useCanvasSetting() {
|
||||
console.log('useCanvasSetting 실행1', correntObjectNo)
|
||||
}, [])
|
||||
|
||||
// 배치면 초기설정 변경 시
|
||||
useEffect(() => {
|
||||
//console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
|
||||
if (canvasSetting.flag) {
|
||||
basicSettingSave()
|
||||
}
|
||||
}, [canvasSetting])
|
||||
|
||||
//흡착점 ON/OFF 변경 시
|
||||
useEffect(() => {
|
||||
//console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
|
||||
@ -232,6 +251,95 @@ export function useCanvasSetting() {
|
||||
}
|
||||
}
|
||||
|
||||
// 기본설정(PlacementShapeSetting) 조회 및 초기화
|
||||
const fetchBasicSettings = async () => {
|
||||
try {
|
||||
await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
|
||||
console.log('fetchBasicSettings res ', res)
|
||||
if (res.length == 0) return
|
||||
|
||||
// 'roofs' 배열을 생성하여 각 항목을 추가
|
||||
const roofsRow = res.map((item) => {
|
||||
return {
|
||||
roofSizeSet: item.roofSizeSet,
|
||||
roofAngleSet: item.roofAngleSet,
|
||||
}
|
||||
})
|
||||
|
||||
const roofsArray = res.some((item) => !item.roofSeq)
|
||||
? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
|
||||
res.map(() => ({
|
||||
flag: false,
|
||||
roofApply: true,
|
||||
roofSeq: 1,
|
||||
roofType: 1,
|
||||
roofWidth: 265,
|
||||
roofHeight: 235,
|
||||
roofHajebichi: 0,
|
||||
roofGap: 455,
|
||||
// roofType: 1,
|
||||
// roofWidth: 200,
|
||||
// roofHeight: 200,
|
||||
// roofHajebichi: 200,
|
||||
// roofGap: 0,
|
||||
roofLayout: 'parallel',
|
||||
}))
|
||||
: res.map((item) => ({
|
||||
flag: false,
|
||||
roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
|
||||
roofSeq: item.roofSeq,
|
||||
roofType: item.roofType,
|
||||
roofWidth: item.roofWidth,
|
||||
roofHeight: item.roofHeight,
|
||||
roofHajebichi: item.roofHajebichi,
|
||||
roofGap: item.roofGap,
|
||||
roofLayout: item.roofLayout,
|
||||
}))
|
||||
console.log('roofsArray ', roofsArray)
|
||||
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
||||
const patternData = {
|
||||
roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
|
||||
roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
|
||||
roofs: roofsArray, // 만들어진 roofs 배열
|
||||
}
|
||||
|
||||
//console.error('patternData', patternData)
|
||||
|
||||
// 데이터 설정
|
||||
setBasicSettings({ ...patternData })
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
|
||||
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
||||
setBasicSettings({ ...canvasSetting })
|
||||
}
|
||||
//setCanvasSetting({ ...basicSetting })
|
||||
}
|
||||
|
||||
// 기본설정(PlacementShapeSetting) 저장
|
||||
const basicSettingSave = async () => {
|
||||
try {
|
||||
const patternData = {
|
||||
objectNo: correntObjectNo,
|
||||
roofSizeSet: basicSetting.roofSizeSet,
|
||||
roofAngleSet: basicSetting.roofAngleSet,
|
||||
roofMaterialsAddList: basicSetting.roofs,
|
||||
}
|
||||
|
||||
await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
|
||||
swalFire({ text: getMessage(res.returnMessage) })
|
||||
})
|
||||
|
||||
//Recoil 설정
|
||||
setCanvasSetting({ ...basicSetting, flag: false })
|
||||
} catch (error) {
|
||||
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
// CanvasSetting 조회 및 초기화
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
|
||||
@ -382,7 +490,7 @@ export function useCanvasSetting() {
|
||||
}
|
||||
}
|
||||
|
||||
// 옵션 클릭 후 저장
|
||||
// CanvasSetting 옵션 클릭 후 저장
|
||||
const onClickOption2 = useCallback(async () => {
|
||||
// 서버에 전송할 데이터
|
||||
const dataToSend = {
|
||||
@ -592,7 +700,6 @@ export function useCanvasSetting() {
|
||||
adsorptionRange,
|
||||
setAdsorptionRange,
|
||||
fetchSettings,
|
||||
//onClickOption,
|
||||
frontSettings,
|
||||
globalFont,
|
||||
setGlobalFont,
|
||||
@ -621,5 +728,11 @@ export function useCanvasSetting() {
|
||||
setGridColor,
|
||||
color,
|
||||
setColor,
|
||||
canvasSetting,
|
||||
setCanvasSetting,
|
||||
basicSetting,
|
||||
setBasicSettings,
|
||||
fetchBasicSettings,
|
||||
basicSettingSave,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user