feat: canvas plan의 저장되지 않은 변경사항을 확인하는 로직 추가
TODO: 신규 canvas plan 저장 시 데이터 동기화 필요
This commit is contained in:
Daseul Kim
parent
7fd9ded5f8
commit
5f4b178506
@ -12,7 +12,7 @@ import { sessionStore } from '@/store/commonAtom'
|
||||
|
||||
export default function CanvasLayout() {
|
||||
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
|
||||
const [addCanvasPlans, setAddCanvasPlans] = useState([])
|
||||
const [plans, setPlans] = useState([])
|
||||
const [planNum, setPlanNum] = useState(0)
|
||||
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
||||
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
|
||||
@ -21,25 +21,54 @@ export default function CanvasLayout() {
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { swalFire } = useSwal()
|
||||
const { getCanvasByObjectNo, delCanvasById } = usePlan()
|
||||
const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas } = usePlan()
|
||||
|
||||
const handleCurrentPlan = (newCurrentId) => {
|
||||
// console.log('currentPlan newCurrentId: ', newCurrentId)
|
||||
|
||||
if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
|
||||
setInitCanvasPlans((plans) =>
|
||||
plans.map((plan) => {
|
||||
return { ...plan, isCurrent: plan.id === newCurrentId }
|
||||
}),
|
||||
)
|
||||
setAddCanvasPlans((plans) =>
|
||||
plans.map((plan) => {
|
||||
return { ...plan, isCurrent: plan.id === newCurrentId }
|
||||
}),
|
||||
)
|
||||
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
|
||||
swalFire({
|
||||
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
|
||||
type: 'confirm',
|
||||
confirmFn: async () => {
|
||||
saveCanvas(sessionState.userId)
|
||||
/**
|
||||
* TODO: 신규 canvas plan 저장 시 id, name 등 데이터 동기화 필요 (40~51Line)
|
||||
*/
|
||||
initCanvasPlans.map((initPlan) => {
|
||||
if ('isNew' in initPlan) {
|
||||
// console.log('================ isNew initPlan: ', initPlan)
|
||||
setPlans((plans) =>
|
||||
plans.map((plan) => {
|
||||
initPlan.isNew === plan.id
|
||||
? { ...plan, id: initPlan.id, name: initPlan.name, canvasStatus: initPlan.canvasStatus, isCurrent: plan.id === newCurrentId }
|
||||
: { ...plan, isCurrent: plan.id === newCurrentId }
|
||||
}),
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
denyFn: () => {
|
||||
setPlans((plans) =>
|
||||
plans.map((plan) => {
|
||||
return { ...plan, isCurrent: plan.id === newCurrentId }
|
||||
}),
|
||||
)
|
||||
},
|
||||
})
|
||||
} else {
|
||||
setPlans((plans) =>
|
||||
plans.map((plan) => {
|
||||
return { ...plan, isCurrent: plan.id === newCurrentId }
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
setCurrentCanvasPlan([...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent) || null)
|
||||
}, [initCanvasPlans, addCanvasPlans])
|
||||
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
|
||||
}, [plans])
|
||||
|
||||
const handleDeletePlan = (e, id) => {
|
||||
e.stopPropagation() // 이벤트 버블링 방지
|
||||
@ -48,20 +77,21 @@ export default function CanvasLayout() {
|
||||
delCanvasById(id)
|
||||
.then((res) => {
|
||||
swalFire({ text: getMessage('common.message.delete') })
|
||||
console.log('[DELETE] canvas-statuses res :::::::: %o', res)
|
||||
// console.log('[DELETE] canvas-statuses res :::::::: %o', res)
|
||||
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
|
||||
setPlans((plans) => plans.filter((plan) => plan.id !== id))
|
||||
})
|
||||
.catch((error) => {
|
||||
swalFire({ text: error.message, icon: 'error' })
|
||||
console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
|
||||
// console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
|
||||
})
|
||||
} else {
|
||||
setAddCanvasPlans(addCanvasPlans.filter((plan) => plan.id !== id))
|
||||
setPlans(plans.filter((plan) => plan.id !== id))
|
||||
swalFire({ text: getMessage('common.message.delete') })
|
||||
}
|
||||
|
||||
// 삭제 후 last 데이터에 포커싱
|
||||
const lastPlan = [...initCanvasPlans, ...addCanvasPlans].filter((plan) => plan.id !== id).at(-1)
|
||||
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
|
||||
if (!lastPlan) {
|
||||
setPlanNum(0)
|
||||
setCurrentCanvasPlan(null)
|
||||
@ -71,7 +101,7 @@ export default function CanvasLayout() {
|
||||
}
|
||||
|
||||
const addNewPlan = () => {
|
||||
setAddCanvasPlans([...addCanvasPlans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
|
||||
setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
|
||||
handleCurrentPlan(planNum)
|
||||
setPlanNum(planNum + 1)
|
||||
}
|
||||
@ -81,6 +111,7 @@ export default function CanvasLayout() {
|
||||
console.log('canvas 목록 ', res)
|
||||
if (res.length > 0) {
|
||||
setInitCanvasPlans(res)
|
||||
setPlans(res)
|
||||
handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
|
||||
setPlanNum(res.length)
|
||||
} else {
|
||||
@ -93,7 +124,7 @@ export default function CanvasLayout() {
|
||||
<div className="canvas-layout">
|
||||
<div className="canvas-page-list">
|
||||
<div className="canvas-plane-wrap">
|
||||
{[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
|
||||
{plans.map((plan) => (
|
||||
<button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
|
||||
<span>{plan.name}</span>
|
||||
<i
|
||||
@ -115,7 +146,7 @@ export default function CanvasLayout() {
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
<CanvasFrame plan={[...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent === true)} />
|
||||
<CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import { useSwal } from '@/hooks/useSwal'
|
||||
|
||||
export function usePlan() {
|
||||
const [canvas, setCanvas] = useRecoilState(canvasState)
|
||||
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
||||
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
||||
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
|
||||
const { swalFire } = useSwal()
|
||||
const { getMessage } = useMessage()
|
||||
@ -70,6 +70,24 @@ export function usePlan() {
|
||||
// }, 1000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
|
||||
*/
|
||||
const checkModifiedCanvasPlan = () => {
|
||||
removeMouseLines()
|
||||
const canvasStr = addCanvas()
|
||||
const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr))
|
||||
if (JSON.parse(canvasStr).objects.length === 0 && currentCanvasPlan.canvasStatus === undefined) {
|
||||
// 빈 캔버스
|
||||
return false
|
||||
} else if (canvasStatus === currentCanvasPlan.canvasStatus) {
|
||||
// 변경사항 없는 캔버스
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
|
||||
*/
|
||||
@ -106,14 +124,14 @@ export function usePlan() {
|
||||
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
|
||||
.then((res) => {
|
||||
swalFire({ text: getMessage('common.message.save') })
|
||||
console.log('[PUT] canvas-statuses res :::::::: %o', res)
|
||||
// console.log('[PUT] canvas-statuses res :::::::: %o', res)
|
||||
setInitCanvasPlans((initCanvasPlans) =>
|
||||
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
|
||||
)
|
||||
})
|
||||
.catch((error) => {
|
||||
swalFire({ text: error.message, icon: 'error' })
|
||||
console.error('[PUT] canvas-statuses error :::::::: %o', error)
|
||||
// console.error('[PUT] canvas-statuses error :::::::: %o', error)
|
||||
})
|
||||
} else {
|
||||
// canvas 신규 등록
|
||||
@ -127,11 +145,15 @@ export function usePlan() {
|
||||
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
|
||||
.then((res) => {
|
||||
swalFire({ text: getMessage('common.message.save') })
|
||||
console.log('[POST] canvas-statuses response :::::::: %o', res)
|
||||
setInitCanvasPlans([
|
||||
...initCanvasPlans,
|
||||
{ id: res.data, name: currentCanvasPlan.objectNo + '-' + res.data, userId: userId, canvasStatus: canvasStatus, isNew: currentCanvasPlan.id },
|
||||
])
|
||||
// console.log('[POST] canvas-statuses response :::::::: %o', res)
|
||||
})
|
||||
.catch((error) => {
|
||||
swalFire({ text: error.message, icon: 'error' })
|
||||
console.error('[POST] canvas-statuses res error :::::::: %o', error)
|
||||
// console.error('[POST] canvas-statuses res error :::::::: %o', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -170,6 +192,7 @@ export function usePlan() {
|
||||
removeMouseLines,
|
||||
saveCanvas,
|
||||
addCanvas,
|
||||
checkModifiedCanvasPlan,
|
||||
getCanvasByObjectNo,
|
||||
delCanvasById,
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user