qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

Browse Source
This commit is contained in:
yoosangwook 2024-12-03 16:29:54 +09:00
commit eae52410e7
7 changed files with 52 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/QcastProvider.js
View File

@ -34,7 +34,7 @@ export const QcastProvider = ({ children }) => {
const targetElement = document.getElementById('canvas')
if (!targetElement && currentCanvasPlan?.id && planSave) {
setPlanSave((prev) => !prev)
checkUnsavedCanvasPlan(currentCanvasPlan.userId)
checkUnsavedCanvasPlan()
} else if (targetElement && currentCanvasPlan?.id) {
setPlanSave(true)
}

10
src/components/floor-plan/CanvasLayout.jsx
View File

@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) {
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { plans, initCanvasPlans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
loadCanvasPlanData(session.userId, objectNo, pid)
@ -34,10 +34,9 @@ export default function CanvasLayout({ children }) {
<button
key={`plan-${plan.id}`}
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(session.userId, plan.id)}
onClick={() => handleCurrentPlan(plan.id)}
>
<span>
{!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) && 'New '}
{`Plan ${plan.ordering}`}
{modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
</span>
@ -45,10 +44,7 @@ export default function CanvasLayout({ children }) {
className="close"
onClick={(e) =>
swalFire({
text:
(!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
`Plan ${plan.ordering} ` +
getMessage('plan.message.confirm.delete'),
text: `Plan ${plan.ordering} ` + getMessage('plan.message.confirm.delete'),
type: 'confirm',
confirmFn: () => {
handleDeletePlan(e, plan.id)

10
src/components/floor-plan/CanvasMenu.jsx
View File

@ -68,7 +68,7 @@ export default function CanvasMenu(props) {
const [estimateCopyPopupOpen, setEstimateCopyPopupOpen] = useState(false)
const { getMessage } = useMessage()
const { currentCanvasPlan, saveCanvas } = usePlan()
const { saveCanvas } = usePlan()
const { swalFire } = useSwal()
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
// const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
@ -118,13 +118,7 @@ export default function CanvasMenu(props) {
// 저장버튼(btn08) 클릭 시 호출되는 함수
const handleSaveCanvas = async () => {
// swalFire({
// text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
// type: 'confirm',
// confirmFn: async () => {
await saveCanvas(sessionState.userId)
// },
// })
await saveCanvas()
}
const [placementInitialId, setPlacementInitialId] = useState(uuidv4())

127
src/hooks/usePlan.js
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
@ -15,8 +15,7 @@ export function usePlan() {
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag
@ -109,22 +108,22 @@ export function usePlan() {
setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus }))
}
}, [currentCanvasStatus])
/**
* 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = (planId) => {
const canvasStatus = currentCanvasData()
if (isValidUUID(planId)) {
// 새로운 캔버스
return JSON.parse(canvasStatus).objects.length > 0
} else {
// 저장된 캔버스
// 각각 object들의 uuid 목록을 추출하여 비교
const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects)
const initPlanData = initCanvasPlans.find((plan) => plan.id === planId)
const dbObjsUuids = getObjectUuids(JSON.parse(initPlanData.canvasStatus).objects)
return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
const planData = plans.find((plan) => plan.id === planId)
if (planData.canvasStatus === '') {
// 빈 상태로 저장된 캔버스
return true
}
// 각각 object들의 uuid 목록을 추출하여 비교
const canvasStatus = currentCanvasData()
const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects)
const dbObjsUuids = getObjectUuids(JSON.parse(planData.canvasStatus).objects)
return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
}
const getObjectUuids = (objects) => {
return objects
@ -141,16 +140,12 @@ export function usePlan() {
/**
* 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장
*/
const checkUnsavedCanvasPlan = async (userId) => {
const checkUnsavedCanvasPlan = async () => {
swalFire({
text:
(!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
`Plan ${currentCanvasPlan.ordering}의 변경 사항을 저장하시겠습니까?`,
text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.save.modified'),
type: 'confirm',
confirmFn: async () => {
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
? await putCanvasStatus(currentCanvasPlan.canvasStatus)
: await postCanvasStatus(userId, currentCanvasPlan.canvasStatus)
await putCanvasStatus(currentCanvasPlan.canvasStatus)
},
})
resetModifiedPlans()
@ -173,11 +168,9 @@ export function usePlan() {
/**
* 페이지 내 캔버스를 저장
*/
const saveCanvas = async (userId) => {
const saveCanvas = async () => {
const canvasStatus = currentCanvasData('save')
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
? await putCanvasStatus(canvasStatus)
: await postCanvasStatus(userId, canvasStatus)
await putCanvasStatus(canvasStatus)
}
/**
@ -200,29 +193,19 @@ export function usePlan() {
/**
* 신규 canvas 데이터를 저장
*/
const postCanvasStatus = async (userId, canvasStatus) => {
const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
const planData = {
userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: currentCanvasPlan.objectNo,
objectNo: objectNo,
mapPositionAddress: currentCanvasPlan.mapPositionAddress,
canvasStatus: canvasToDbFormat(canvasStatus),
}
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
setPlans((plans) =>
plans.map((plan) =>
plan.id === currentCanvasPlan.id
? {
...plan,
id: res.data,
canvasStatus: canvasStatus,
}
: plan,
),
)
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
setPlans([...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }])
handleCurrentPlan(res.data)
setPlanNum(planNum + 1)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
@ -240,9 +223,6 @@ export function usePlan() {
}
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
)
setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
})
@ -269,21 +249,10 @@ export function usePlan() {
* plan 이동
* 현재 plan의 작업상태를 확인, 저장 후 이동
*/
const handleCurrentPlan = async (userId, newCurrentId) => {
const handleCurrentPlan = async (newCurrentId) => {
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) {
// swalFire({
// text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
// type: 'confirm',
// confirmFn: async () => {
// await saveCanvas(userId)
// updateCurrentPlan(newCurrentId)
// },
// denyFn: () => {
// updateCurrentPlan(newCurrentId)
// },
// })
await saveCanvas(userId)
await saveCanvas()
}
updateCurrentPlan(newCurrentId)
}
@ -313,20 +282,21 @@ export function usePlan() {
const handleAddPlan = (userId, objectNo) => {
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
text:
(!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
`Plan ${currentCanvasPlan.ordering} ` +
getMessage('plan.message.confirm.copy'),
text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
type: 'confirm',
confirmFn: () => {
addPlan(userId, objectNo, currentCanvasData())
postCanvasStatus(userId, objectNo, currentCanvasData())
},
denyFn: () => {
addPlan(userId, objectNo, '')
postCanvasStatus(userId, objectNo, '')
},
})
: addPlan(userId, objectNo, '')
: postCanvasStatus(userId, objectNo, '')
}
/**
* DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수
*/
const addPlan = (userId, objectNo, canvasStatus) => {
const id = uuidv4()
const newPlan = {
@ -337,7 +307,7 @@ export function usePlan() {
ordering: planNum + 1,
}
setPlans([...plans, newPlan])
handleCurrentPlan(userId, id)
handleCurrentPlan(id)
setPlanNum(planNum + 1)
}
@ -347,22 +317,15 @@ export function usePlan() {
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.delete') })
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.delete') })
}
delCanvasById(id)
.then((res) => {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.delete') })
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
// 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
@ -381,12 +344,11 @@ export function usePlan() {
getCanvasByObjectNo(userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
updateCurrentPlan(res[pid - 1].id)
setPlanNum(res.length)
} else {
addPlan(userId, objectNo, '')
postCanvasStatus(userId, objectNo, '')
}
})
}
@ -394,7 +356,6 @@ export function usePlan() {
return {
canvas,
plans,
initCanvasPlans,
selectedPlan,
currentCanvasPlan,
modifiedPlans,

1
src/locales/ja.json
View File

@ -294,6 +294,7 @@
"modal.actual.size.setting.plane.size.length": "廊下の寸法の長さ",
"modal.actual.size.setting.actual.size.length": "実寸長",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
"plan.message.save": "저장되었습니다.",

1
src/locales/ko.json
View File

@ -299,6 +299,7 @@
"modal.actual.size.setting.plane.size.length": "복도치수 길이",
"modal.actual.size.setting.actual.size.length": "실제치수 길이",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
"plan.message.save": "저장되었습니다.",

6
src/store/canvasAtom.js
View File

@ -260,12 +260,6 @@ export const dotLineIntervalSelector = selector({
},
})
// canvas plan 초기 목록
export const initCanvasPlansState = atom({
key: 'initCanvasPlans',
default: [],
})
// 현재 canvas plan
export const currentCanvasPlanState = atom({
key: 'currentCanvasPlan',