Canvas 설정 컬럼 변경에 따른 수정
This commit is contained in:
changkyu choi
parent
5c0e3bbf4b
commit
b26f7a07ee
@ -27,11 +27,9 @@ export default function FirstOption() {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
|
||||
// 데이터 설정
|
||||
setSettingModalFirstOptions({
|
||||
@ -39,7 +37,7 @@ export default function FirstOption() {
|
||||
option2: optionData2,
|
||||
dimensionDisplay: optionData5,
|
||||
})
|
||||
console.log('optionData5', optionData5)
|
||||
|
||||
setSettingModalSecondOptions({
|
||||
option3: optionData3,
|
||||
option4: optionData4,
|
||||
@ -66,6 +64,10 @@ export default function FirstOption() {
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
firstOption3: dimensionDisplay.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
// secondOption1: secondOptions[0].option1.map((item) => ({
|
||||
// name: item.id,
|
||||
// name: item.name,
|
||||
@ -80,17 +82,19 @@ export default function FirstOption() {
|
||||
const patternData = {
|
||||
objectNo,
|
||||
//디스플레이 설정(다중)
|
||||
assignDisplay: dataToSend.firstOption1[0].selected,
|
||||
drawDisplay: dataToSend.firstOption1[1].selected,
|
||||
allocDisplay: dataToSend.firstOption1[0].selected,
|
||||
outlineDisplay: dataToSend.firstOption1[1].selected,
|
||||
gridDisplay: dataToSend.firstOption1[2].selected,
|
||||
charDisplay: dataToSend.firstOption1[3].selected,
|
||||
flowDisplay: dataToSend.firstOption1[4].selected,
|
||||
hallwayDimenDisplay: dataToSend.firstOption1[5].selected,
|
||||
actualDimenDisplay: dataToSend.firstOption1[6].selected,
|
||||
noDimenDisplay: dataToSend.firstOption1[7].selected,
|
||||
trestleDisplay: dataToSend.firstOption1[8].selected,
|
||||
coordiDisplay: dataToSend.firstOption1[9].selected,
|
||||
drawConverDisplay: dataToSend.firstOption1[10].selected,
|
||||
lineDisplay: dataToSend.firstOption1[3].selected,
|
||||
wordDisplay: dataToSend.firstOption1[4].selected,
|
||||
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
||||
flowDisplay: dataToSend.firstOption1[6].selected,
|
||||
trestleDisplay: dataToSend.firstOption1[7].selected,
|
||||
totalDisplay: dataToSend.firstOption1[8].selected,
|
||||
//차수 표시(다건)
|
||||
corridorDimension: dataToSend.firstOption3[0].selected,
|
||||
realDimension: dataToSend.firstOption3[1].selected,
|
||||
noneDimension: dataToSend.firstOption3[2].selected,
|
||||
//화면 표시(다중)
|
||||
onlyBorder: dataToSend.firstOption2[0].selected,
|
||||
lineHatch: dataToSend.firstOption2[1].selected,
|
||||
@ -112,13 +116,75 @@ export default function FirstOption() {
|
||||
}
|
||||
}
|
||||
|
||||
const onClickDimension = (item) => {
|
||||
const onClickDimension = async (item) => {
|
||||
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
||||
option.selected = option.id === item.id
|
||||
return option
|
||||
})
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options })
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
||||
|
||||
try {
|
||||
// 서버에 전송할 데이터
|
||||
const dataToSend = {
|
||||
firstOption1: option1.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
firstOption2: option2.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
firstOption3: dimensionDisplay.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
// secondOption1: secondOptions[0].option1.map((item) => ({
|
||||
// name: item.id,
|
||||
// name: item.name,
|
||||
// // 필요한 경우 데이터 항목 추가
|
||||
// })),
|
||||
secondOption2: option4.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
}
|
||||
|
||||
const patternData = {
|
||||
objectNo,
|
||||
//디스플레이 설정(다중)
|
||||
allocDisplay: dataToSend.firstOption1[0].selected,
|
||||
outlineDisplay: dataToSend.firstOption1[1].selected,
|
||||
gridDisplay: dataToSend.firstOption1[2].selected,
|
||||
lineDisplay: dataToSend.firstOption1[3].selected,
|
||||
wordDisplay: dataToSend.firstOption1[4].selected,
|
||||
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
||||
flowDisplay: dataToSend.firstOption1[6].selected,
|
||||
trestleDisplay: dataToSend.firstOption1[7].selected,
|
||||
totalDisplay: dataToSend.firstOption1[8].selected,
|
||||
//차수 표시(다건)
|
||||
corridorDimension: dataToSend.firstOption3[0].selected,
|
||||
realDimension: dataToSend.firstOption3[1].selected,
|
||||
noneDimension: dataToSend.firstOption3[2].selected,
|
||||
//화면 표시(다중)
|
||||
onlyBorder: dataToSend.firstOption2[0].selected,
|
||||
lineHatch: dataToSend.firstOption2[1].selected,
|
||||
allPainted: dataToSend.firstOption2[2].selected,
|
||||
//흡착범위 설정(단건)
|
||||
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
|
||||
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
||||
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
||||
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
||||
}
|
||||
|
||||
// HTTP POST 요청 보내기
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
||||
//toastUp({ message: res.returnMessage, type: 'success' })
|
||||
toastUp({ message: getMessage(res.returnMessage), type: 'success' })
|
||||
})
|
||||
} catch (error) {
|
||||
toastUp({ message: getMessage(res.returnMessage), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@ -126,34 +192,37 @@ export default function FirstOption() {
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
|
||||
<div className="flex-check-box for2">
|
||||
{settingModalFirstOptions?.option1.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.option1.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{settingModalFirstOptions?.dimensionDisplay?.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.dimensionDisplay.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{settingModalFirstOptions?.option2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.option2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{getMessage(item.name)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -13,7 +13,7 @@ export default function SecondOption() {
|
||||
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
|
||||
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
|
||||
|
||||
const { option1, option2 } = settingModalFirstOptions
|
||||
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
||||
const { option3, option4 } = settingModalSecondOptions
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
@ -30,12 +30,10 @@ export default function SecondOption() {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
// 데이터 설정
|
||||
|
||||
setSettingModalFirstOptions({
|
||||
option1: optionData1,
|
||||
option2: optionData2,
|
||||
@ -52,16 +50,9 @@ export default function SecondOption() {
|
||||
|
||||
const onClickOption = async (option) => {
|
||||
// option4에서 한 개만 선택 가능하도록 처리
|
||||
const updatedOption4 = option4.map((item) =>
|
||||
item.id === option.id
|
||||
? { ...item, selected: true }
|
||||
: {
|
||||
...item,
|
||||
selected: false,
|
||||
},
|
||||
)
|
||||
const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2 })
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
||||
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
|
||||
|
||||
try {
|
||||
@ -75,6 +66,10 @@ export default function SecondOption() {
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
firstOption3: dimensionDisplay.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
// secondOption1: secondOptions[0].option3.map((item) => ({
|
||||
// name: item.id,
|
||||
// name: item.name,
|
||||
@ -88,17 +83,19 @@ export default function SecondOption() {
|
||||
const patternData = {
|
||||
objectNo,
|
||||
//디스플레이 설정(다중)
|
||||
assignDisplay: dataToSend.firstOption1[0].selected,
|
||||
drawDisplay: dataToSend.firstOption1[1].selected,
|
||||
allocDisplay: dataToSend.firstOption1[0].selected,
|
||||
outlineDisplay: dataToSend.firstOption1[1].selected,
|
||||
gridDisplay: dataToSend.firstOption1[2].selected,
|
||||
charDisplay: dataToSend.firstOption1[3].selected,
|
||||
flowDisplay: dataToSend.firstOption1[4].selected,
|
||||
hallwayDimenDisplay: dataToSend.firstOption1[5].selected,
|
||||
actualDimenDisplay: dataToSend.firstOption1[6].selected,
|
||||
noDimenDisplay: dataToSend.firstOption1[7].selected,
|
||||
trestleDisplay: dataToSend.firstOption1[8].selected,
|
||||
coordiDisplay: dataToSend.firstOption1[9].selected,
|
||||
drawConverDisplay: dataToSend.firstOption1[10].selected,
|
||||
lineDisplay: dataToSend.firstOption1[3].selected,
|
||||
wordDisplay: dataToSend.firstOption1[4].selected,
|
||||
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
||||
flowDisplay: dataToSend.firstOption1[6].selected,
|
||||
trestleDisplay: dataToSend.firstOption1[7].selected,
|
||||
totalDisplay: dataToSend.firstOption1[8].selected,
|
||||
//차수 표시(다건)
|
||||
corridorDimension: dataToSend.firstOption3[0].selected,
|
||||
realDimension: dataToSend.firstOption3[1].selected,
|
||||
noneDimension: dataToSend.firstOption3[2].selected,
|
||||
//화면 표시(다중)
|
||||
onlyBorder: dataToSend.firstOption2[0].selected,
|
||||
lineHatch: dataToSend.firstOption2[1].selected,
|
||||
|
||||
@ -4,29 +4,18 @@ export const settingModalFirstOptionsState = atom({
|
||||
key: 'settingModalFirstOptions',
|
||||
default: {
|
||||
option1: [
|
||||
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
|
||||
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
|
||||
{ id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
{
|
||||
id: 10,
|
||||
column: 'drawConverDisplay',
|
||||
name: 'modal.canvas.setting.first.option.corridor.dimension',
|
||||
selected: false,
|
||||
},
|
||||
{ id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
|
||||
{ id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
|
||||
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 4, column: 'lineDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 5, column: 'wordDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
],
|
||||
dimensionDisplay: [
|
||||
{
|
||||
id: 1,
|
||||
column: 'corridorDimension',
|
||||
name: 'modal.canvas.setting.first.option.corridor.dimension',
|
||||
selected: false,
|
||||
},
|
||||
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
|
||||
{ id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
|
||||
{ id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user