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:
hyojun.choi 2024-10-17 17:04:37 +09:00
commit 02b71f40d6
11 changed files with 358 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Playground.jsx
View File

@ -30,7 +30,7 @@ export default function Playground() {
const fileRef = useRef(null)
const queryRef = useRef(null)
const [zoom, setZoom] = useState(20)
const { get, promisePost } = useAxios()
const { get, promiseGet, promisePost } = useAxios()
const testVar = process.env.NEXT_PUBLIC_TEST
const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
const { getMessage } = useMessage()
@ -43,6 +43,8 @@ export default function Playground() {
const [checkboxInput, setCheckboxInput] = useState([])
const [selectedValue, setSelectedValue] = useState('')
const [users, setUsers] = useState([])
useEffect(() => {
console.log('textInput:', textInput)
}, [textInput])
@ -142,6 +144,10 @@ export default function Playground() {
},
}
useEffect(() => {
console.log('users:', users)
}, [users])
return (
<>
<div className="container mx-auto p-4 m-4 border">
@ -305,6 +311,32 @@ export default function Playground() {
<div className="my-2">
<QPagination {...paginationProps} />
</div>
<div className="my-2">
<Button
onClick={() => {
promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
}}
>
axios get test
</Button>
</div>
<div className="my-2">
<Button
onClick={() => {
const result = promisePost({
url: 'http://localhost:8080/api/user',
data: {
firstName: 'Yoo',
lastName: 'Sangwook',
email: 'yoo1757@naver.com',
age: 46,
},
}).then((res) => console.log('res', res))
}}
>
axios post test
</Button>
</div>
</div>
</>
)

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

@ -1,124 +1,28 @@
'use client'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useRecoilValue } from 'recoil'
import CanvasFrame from './CanvasFrame'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom'
import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { sessionStore } from '@/store/commonAtom'
export default function CanvasLayout() {
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const [planNum, setPlanNum] = useState(0)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const [plans, setPlans] = useRecoilState(plansState)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const sessionState = useRecoilValue(sessionStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan()
const handleCurrentPlan = (newCurrentId) => {
// console.log('currentPlan newCurrentId: ', newCurrentId)
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: async () => {
await saveCanvas(sessionState.userId)
updateCurrentPlan(newCurrentId)
},
denyFn: () => {
updateCurrentPlan(newCurrentId)
},
})
} else {
updateCurrentPlan(newCurrentId)
}
}
}
const updateCurrentPlan = (newCurrentId) => {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
useEffect(() => {
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
}, [plans])
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('common.message.delete') })
// 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)
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('common.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) {
handleCurrentPlan(lastPlan.id)
}
}
const addEmptyPlan = () => {
setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
handleCurrentPlan(planNum)
setPlanNum(planNum + 1)
}
const addCopyPlan = () => {
const copyPlan = {
id: planNum,
name: `Plan ${planNum + 1}`,
objectNo: `${objectNo}`,
userId: sessionState.userId,
canvasStatus: currentCanvasData(),
}
setPlans((plans) => [...plans, copyPlan])
handleCurrentPlan(planNum)
setPlanNum(planNum + 1)
}
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
if (!currentCanvasPlan) {
getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
setPlanNum(res.length)
} else {
addEmptyPlan()
}
})
}
console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
loadCanvasPlanData(sessionState.userId, objectNo)
}, [])
return (
<div className="canvas-layout">
<div className="canvas-page-list">
@ -127,7 +31,7 @@ export default function CanvasLayout() {
<button
key={`plan-${plan.id}`}
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(plan.id)}
onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
>
<span>{plan.name}</span>
<i
@ -146,23 +50,7 @@ export default function CanvasLayout() {
))}
</div>
{plans.length < 10 && (
<button
className="plane-add"
onClick={() =>
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
html: `${currentCanvasPlan.name} 을 복제하시겠습니까?`,
type: 'confirm',
confirmFn: () => {
addCopyPlan()
},
denyFn: () => {
addEmptyPlan()
},
})
: addEmptyPlan()
}
>
<button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
<span></span>
</button>
)}

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

@ -127,8 +127,8 @@ export default function CanvasMenu(props) {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: () => {
saveCanvas(sessionState.userId)
confirmFn: async () => {
await saveCanvas(sessionState.userId)
},
})
}

10
src/components/management/Stuff.jsx
View File

@ -406,14 +406,14 @@ export default function Stuff() {
<div className="sub-table-box">
<div className="table-box-title-wrap">
<div className="title-wrap">
<h3>물건목록</h3>
<h3>{getMessage('stuff.search.grid.title')}</h3>
<ul className="info-wrap">
<li>
전체
{getMessage('stuff.search.grid.all')}
<span>{convertNumberToPriceDecimal(totalCount)}</span>
</li>
<li>
선택
{getMessage('stuff.search.grid.selected')}
<span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
</li>
</ul>
@ -421,8 +421,8 @@ export default function Stuff() {
<div className="left-unit-box">
<div className="select-box mr5" style={{ width: '110px' }}>
<select className="select-light black" name="" id="" onChange={onChangeSortType}>
<option value="R">최근 등록일</option>
<option value="U">최근 수정일</option>
<option value="R">{getMessage('stuff.search.grid.schSortTypeR')}</option>
<option value="U">{getMessage('stuff.search.grid.schSortTypeU')}</option>
</select>
</div>
<div className="select-box" style={{ width: '80px' }}>

6
src/components/management/StuffSearchCondition.jsx
View File

@ -99,7 +99,6 @@ export default function StuffSearchCondition() {
useEffect(() => {
if (isObjectNotEmpty(sessionState)) {
// console.log('판매대리점 리스트 가져오기 위한 세션정보::::::::', sessionState)
// storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
// get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
@ -190,7 +189,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건번호 입력"
value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
onChange={(e) => {
setObjectNo(e.target.value)
@ -205,7 +203,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="판매대리점명 입력"
value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreName(e.target.value)
@ -220,7 +217,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건주소 입력"
value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
onChange={(e) => {
setAddress(e.target.value)
@ -237,7 +233,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건명 입력"
value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
onChange={(e) => {
setobjectName(e.target.value)
@ -252,7 +247,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="견적처 입력"
value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
onChange={(e) => {
setDispCompanyName(e.target.value)

96
src/components/management/popup/PlanRequestPop.jsx
View File

@ -12,6 +12,9 @@ import dayjs from 'dayjs'
import PlanRequestPopQGrid from './PlanRequestPopQGrid'
import { sessionStore } from '@/store/commonAtom'
import { planReqSearchState } from '@/store/planReqAtom'
import { isObjectNotEmpty } from '@/util/common-utils'
import Select from 'react-select'
export default function PlanRequestPop(props) {
const sessionState = useRecoilValue(sessionStore)
@ -20,6 +23,7 @@ export default function PlanRequestPop(props) {
const { get } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
const ref = useRef()
// 검색조건 달력 셋팅
const [startDate, setStartDate] = useState(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
@ -34,7 +38,6 @@ export default function PlanRequestPop(props) {
setStartDate: setEndDate,
}
const ref = useRef()
const resetPlanReqRecoil = useResetRecoilState(planReqSearchState)
const [planReqSearch, setPlanReqSearch] = useRecoilState(planReqSearchState)
@ -47,14 +50,42 @@ export default function PlanRequestPop(props) {
const [schDateGbn, setSchDateGbn] = useState('S') //기간구분코드(S/R)
//초기화
const resetRecoil = () => {}
const resetRecoil = () => {
console.log('초기화')
setSchPlanReqNo('')
setSchTitle('')
setSchAddress('')
setSchSaleStoreName('')
setSchPlanReqName('')
setSchDateGbn('S')
setStartDate(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
setSchPlanStatCd('')
handleClear() //셀렉트 자동완성 초기화
resetPlanReqRecoil()
}
//초기화 눌렀을 때 자동완성도..
//셀렉트 자동완성 초기화
const handleClear = () => {
if (ref.current.state.dropDown) {
ref.current.methods.dropDown()
if (ref.current) {
ref.current.clearValue()
}
}
// 상태 검색조건 변경
const onSelectionChange = (key) => {
//임시작업
console.log('E::::::::', key)
if (isObjectNotEmpty(key)) {
setSchPlanStatCd(key.value)
setPlanReqSearch({
...planReqSearch,
schPlanStatCd: key.value,
})
} else {
ref.current.state.values = []
//X누름
setSchPlanStatCd('')
setPlanReqSearch({ ...planReqSearch, schPlanStatCd: '' })
}
}
@ -63,6 +94,11 @@ export default function PlanRequestPop(props) {
setEndDate(planReqSearch?.schEndDt ? planReqSearch.schEndDt : dayjs(new Date()).format('YYYY-MM-DD'))
}, [planReqSearch])
// 조회
const onSubmit = () => {
console.log('조회!!!!', planReqSearch)
}
const [gridProps, setGridProps] = useState({
gridData: [],
isPageable: false,
@ -117,6 +153,25 @@ export default function PlanRequestPop(props) {
],
})
const tempList = [
{
label: '완료',
value: 'C',
},
{
label: '저장',
value: 'I',
},
{
label: '접수',
value: 'R',
},
{
label: '제출',
value: 'S',
},
]
return (
<div className="modal-popup">
<div className="modal-dialog big">
@ -132,8 +187,12 @@ export default function PlanRequestPop(props) {
<div className="design-tit-wrap">
<h3>{getMessage('stuff.planReqPopup.popTitle')}</h3>
<div className="design-search-wrap">
<button className="btn-origin grey mr5">{getMessage('stuff.planReqPopup.btn1')}</button>
<button className="btn-origin navy ">{getMessage('stuff.planReqPopup.btn2')}</button>
<button className="btn-origin navy mr5" onClick={onSubmit}>
{getMessage('stuff.planReqPopup.btn1')}
</button>
<button className="btn-origin grey" onClick={resetRecoil}>
{getMessage('stuff.planReqPopup.btn2')}
</button>
</div>
</div>
<div className="design-request-table">
@ -223,13 +282,22 @@ export default function PlanRequestPop(props) {
</td>
<th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
<td>
<div className="select-wrap">
<select className="select-light" name="" id="">
<div className="">
{/* <select className="select-light" name="" id="" onChange={onSelectionChange}>
<option value={''}>All</option>
<option value={'SAVE'}>저장</option>
<option value={'SUBMIT'}>제출</option>
<option value={'RECEIPT'}>접수</option>
</select>
<option value={'C'}>완료</option>
<option value={'I'}>저장</option>
<option value={'R'}>접수</option>
<option value={'S'}>제출</option>
</select> */}
<Select
ref={ref}
options={tempList}
onChange={onSelectionChange}
isSearchable={false}
placeholder="선택하세요."
isClearable={true}
/>
</div>
</td>
</tr>

40
src/hooks/useAxios.js
View File

@ -40,59 +40,59 @@ export function useAxios(lang = '') {
// response 추가 로직
axios.interceptors.request.use(undefined, (error) => {})
const get = async ({ url }) => {
const get = async ({ url, option = {} }) => {
return await getInstances(url)
.get(url)
.get(url, option)
.then((res) => res.data)
.catch(console.error)
}
const promiseGet = async ({ url }) => {
return await getInstances(url).get(url)
const promiseGet = async ({ url, option = {} }) => {
return await getInstances(url).get(url, option)
}
const post = async ({ url, data }) => {
const post = async ({ url, data, option = {} }) => {
return await getInstances(url)
.post(url, data)
.post(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePost = async ({ url, data }) => {
return await getInstances(url).post(url, data)
const promisePost = async ({ url, data, option = {} }) => {
return await getInstances(url).post(url, data, option)
}
const put = async ({ url, data }) => {
const put = async ({ url, data, option = {} }) => {
return await getInstances(url)
.put(url, data)
.put(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePut = async ({ url, data }) => {
return await getInstances(url).put(url, data)
const promisePut = async ({ url, data, option = {} }) => {
return await getInstances(url).put(url, data, option)
}
const patch = async ({ url, data }) => {
const patch = async ({ url, data, option = {} }) => {
return await getInstances(url)
.patch(url, data)
.patch(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePatch = async ({ url, data }) => {
return await getInstances(url).patch(url, data)
const promisePatch = async ({ url, data, option = {} }) => {
return await getInstances(url).patch(url, data, option)
}
const del = async ({ url }) => {
const del = async ({ url, option = {} }) => {
return await getInstances(url)
.delete(url)
.delete(url, option)
.then((res) => res.data)
.catch(console.error)
}
const promiseDel = async ({ url }) => {
return await getInstances(url).delete(url)
const promiseDel = async ({ url, option = {} }) => {
return await getInstances(url).delete(url, option)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }

286
src/hooks/usePlan.js
View File

@ -1,3 +1,4 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
export function usePlan() {
const [planNum, setPlanNum] = useState(0)
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const [plans, setPlans] = useRecoilState(plansState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
const { swalFire } = useSwal()
const { getMessage } = useMessage()
const { get, promisePost, promisePut, promiseDel } = useAxios()
@ -72,6 +76,9 @@ export function usePlan() {
// }, 1000)
}
/**
* 현재 캔버스에 그려진 데이터를 추출
*/
const currentCanvasData = () => {
removeMouseLines()
return addCanvas()
@ -81,8 +88,7 @@ export function usePlan() {
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = () => {
removeMouseLines()
const canvasStatus = addCanvas()
const canvasStatus = currentCanvasData()
const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
if (!initPlanData) {
@ -90,15 +96,10 @@ export function usePlan() {
return JSON.parse(canvasStatus).objects.length > 0
} else {
// 저장된 캔버스
if (canvasStatus === initPlanData.canvasStatus) {
return false
} else {
// 각각 object들의 id 목록을 추출하여 비교
const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
}
// 각각 object들의 id 목록을 추출하여 비교
const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
}
}
const getObjectIds = (objects) => {
@ -112,9 +113,6 @@ export function usePlan() {
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
*/
const dbToCanvasFormat = (cs) => {
// return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
// JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
// canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
return cs.replace(/##/g, '"')
}
@ -122,8 +120,6 @@ export function usePlan() {
* canvas의 데이터를 DB에 저장할 수 있도록 포맷화
*/
const canvasToDbFormat = (cs) => {
// return JSON.stringify(cs).replace(/"/g, '##')
// addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
return cs.replace(/"/g, '##')
}
@ -136,78 +132,17 @@ export function usePlan() {
* param(body) : id, canvasStatus
*/
const saveCanvas = async (userId) => {
removeMouseLines()
const canvasStatus = addCanvas()
if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
// canvas 수정
const planData = {
id: currentCanvasPlan.id,
canvasStatus: canvasToDbFormat(canvasStatus),
}
return 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)
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)))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
// console.error('[PUT] canvas-statuses error :::::::: %o', error)
})
} else {
// canvas 신규 등록
const planData = {
userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: currentCanvasPlan.objectNo,
canvasStatus: canvasToDbFormat(canvasStatus),
}
return 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) => [
...initCanvasPlans,
{
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
userId: userId,
canvasStatus: canvasStatus,
isNew: currentCanvasPlan.id,
},
])
setPlans((plans) =>
plans.map((plan) =>
plan.id === currentCanvasPlan.id
? {
...plan,
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
userId: userId,
canvasStatus: canvasStatus,
isNew: currentCanvasPlan.id,
}
: plan,
),
)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
// console.error('[POST] canvas-statuses res error :::::::: %o', error)
})
}
const canvasStatus = currentCanvasData()
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
? await putCanvasStatus(canvasStatus)
: await postCanvasStatus(userId, canvasStatus)
}
/**
* objectNo에 해당하는 canvas 목록을 조회하는 함수
* objectNo에 해당하는 canvas 목록을 조회
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
// console.log(`[GET] objectNo: ${objectNo} / userId: ${userId}`)
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item) => ({
id: item.id,
@ -220,27 +155,192 @@ export function usePlan() {
}
/**
* id에 해당하는 canvas 데이터를 삭제하는 함수
* canvas 데이터를 추가
*/
const postCanvasStatus = async (userId, canvasStatus) => {
const planData = {
userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: currentCanvasPlan.objectNo,
canvasStatus: canvasToDbFormat(canvasStatus),
}
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('common.message.save') })
setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
setPlans((plans) =>
plans.map((plan) =>
plan.id === currentCanvasPlan.id
? {
...plan,
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
canvasStatus: canvasStatus,
}
: plan,
),
)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
}
/**
* id에 해당하는 canvas 데이터를 수정
*/
const putCanvasStatus = async (canvasStatus) => {
const planData = {
id: currentCanvasPlan.id,
canvasStatus: canvasToDbFormat(canvasStatus),
}
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('common.message.save') })
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)))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
}
/**
* id에 해당하는 canvas 데이터를 삭제
*/
const delCanvasById = (id) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
}
/**
* objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
* objectNo에 해당하는 canvas 데이터들을 삭제
*/
const delCanvasByObjectNo = (objectNo) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
}
/**
* plan 이동
* 현재 plan의 작업상태를 확인, 저장 후 이동
*/
const handleCurrentPlan = (userId, newCurrentId) => {
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: async () => {
await saveCanvas(userId)
updateCurrentPlan(newCurrentId)
},
denyFn: () => {
updateCurrentPlan(newCurrentId)
},
})
} else {
updateCurrentPlan(newCurrentId)
}
}
}
const updateCurrentPlan = (newCurrentId) => {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
useEffect(() => {
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
}, [plans])
/**
* 새로운 plan 생성
* 현재 plan의 데이터가 있을 경우 복제 여부를 확인
*/
const handleAddPlan = (userId, objectNo) => {
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
html: `${currentCanvasPlan.name} PLAN을 복사하시겠습니까?`,
type: 'confirm',
confirmFn: () => {
addPlan(userId, objectNo, currentCanvasData())
},
denyFn: () => {
addPlan(userId, objectNo)
},
})
: addPlan(userId, objectNo)
}
const addPlan = (userId, objectNo, canvasStatus = '') => {
const newPlan = {
id: planNum,
name: `Plan ${planNum + 1}`,
objectNo: objectNo,
userId: userId,
canvasStatus: canvasStatus,
}
setPlans([...plans, newPlan])
handleCurrentPlan(userId, planNum)
setPlanNum(planNum + 1)
}
/**
* plan 삭제
*/
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('common.message.delete') })
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
setPlans((plans) => plans.filter((plan) => plan.id !== id))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('common.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) {
updateCurrentPlan(lastPlan.id)
}
}
/**
* plan 조회
*/
const loadCanvasPlanData = (userId, objectNo) => {
getCanvasByObjectNo(userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
setPlanNum(res.length)
} else {
addPlan(userId, objectNo)
}
})
}
return {
canvas,
removeMouseLines,
currentCanvasData,
plans,
saveCanvas,
addCanvas,
checkModifiedCanvasPlan,
getCanvasByObjectNo,
delCanvasById,
handleCurrentPlan,
handleAddPlan,
handleDeletePlan,
loadCanvasPlanData,
}
}

7
src/locales/ja.json
View File

@ -335,7 +335,7 @@
"common.message.writeToConfirm": "作成解除を実行しますか？",
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
"common.message.no.edit.save": "この文書は変更できません。",
"common.require": "필수",
"common.require": "必須",
"commons.west": "立つ",
"commons.east": "ドン",
"commons.south": "立つ",
@ -511,6 +511,11 @@
"stuff.search.period": "期間検索",
"stuff.search.schDateTypeU": "更新日",
"stuff.search.schDateTypeR": "登録日",
"stuff.search.grid.title": "商品リスト",
"stuff.search.grid.all": "全体",
"stuff.search.grid.selected": "選択",
"stuff.search.grid.schSortTypeR": "最近の登録日",
"stuff.search.grid.schSortTypeU": "最近の更新日",
"stuff.windSelectPopup.title": "風速選択",
"stuff.windSelectPopup.table.selected": "選択",
"stuff.windSelectPopup.table.windspeed": "風速",

5
src/locales/ko.json
View File

@ -516,6 +516,11 @@
"stuff.search.period": "기간검색",
"stuff.search.schDateTypeU": "갱신일",
"stuff.search.schDateTypeR": "등록일",
"stuff.search.grid.title": "물건목록",
"stuff.search.grid.all": "전체",
"stuff.search.grid.selected": "선택",
"stuff.search.grid.schSortTypeR": "최근 등록일",
"stuff.search.grid.schSortTypeU": "최근 갱신일",
"stuff.windSelectPopup.title": "풍속선택",
"stuff.windSelectPopup.table.selected": "선택",
"stuff.windSelectPopup.table.windspeed": "풍속",

6
src/util/board-utils.js
View File

@ -8,8 +8,10 @@ export const handleFileDown = async (file) => {
const params = new URLSearchParams({
encodeFileNo: file.encodeFileNo,
})
const options = { responseType: 'blob' }
const apiUrl = `${url}?${params.toString()}`
await promiseGet({ url: apiUrl, responseType: 'blob' })
await promiseGet({ url: apiUrl, option: options })
.then((resultData) => {
if (resultData) {
const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
@ -25,7 +27,7 @@ export const handleFileDown = async (file) => {
}
})
.catch((error) => {
alert(error.response.data.message)
alert('File does not exist.')
})
}