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-25 16:35:43 +09:00
commit e65b765b10
15 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/community/modal/BoardDetailModal.jsx
View File

@ -3,8 +3,11 @@
import { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { handleFileDown } from '@/util/board-utils'
import { useMessage } from '@/hooks/useMessage'
export default function BoardDetailModal({ noticeNo, setOpen }) {
const { getMessage } = useMessage()
// api 조회 관련
const { get } = useAxios()
const [boardDetail, setBoardDetail] = useState({})
@ -46,7 +49,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) {
setOpen(false)
}}
>
닫기
{getMessage('board.sub.btn.close')}
</button>
</div>
<div className="modal-body">
@ -55,7 +58,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) {
{boardDetail.listFile && (
<dl className="community_detail-file-wrap">
<dt>첨부파일 목록</dt>
<dt>{getMessage('board.sub.fileList')}</dt>
{boardDetail.listFile.map((boardFile) => (
<dd key={boardFile.encodeFileNo}>
<button type="button" className="down" onClick={() => handleFileDown(boardFile)}>

2
src/components/fabric/QPolygon.js
View File

@ -172,7 +172,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
addLengthText() {
this.canvas
?.getObjects()
.filter((obj) => obj.name === 'lengthText' && obj.parent === this)
.filter((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
.forEach((text) => {
this.canvas.remove(text)
})

15
src/components/floor-plan/CanvasFrame.jsx
View File

@ -2,18 +2,20 @@
import { useEffect, useRef } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useCanvas } from '@/hooks/useCanvas'
import { useEvent } from '@/hooks/useEvent'
import { usePlan } from '@/hooks/usePlan'
import { useContextMenu } from '@/hooks/useContextMenu'
import { useRecoilValue } from 'recoil'
import { currentObjectState } from '@/store/canvasAtom'
import { currentObjectState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import QContextMenu from '@/components/common/context-menu/QContextMenu'
import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
const { canvas } = useCanvas('canvas')
const { handleZoomClear } = useCanvasEvent()
const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
@ -21,7 +23,7 @@ export default function CanvasFrame({ plan }) {
handleZoomClear,
},
})
const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
const { checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
const currentObject = useRecoilValue(currentObjectState)
@ -40,8 +42,15 @@ export default function CanvasFrame({ plan }) {
}
}
useEffect(() => {
if (modifiedPlanFlag && plan?.id) {
checkCanvasObjectEvent(plan.id)
}
}, [modifiedPlanFlag])
useEffect(() => {
loadCanvas()
resetModifiedPlans()
}, [plan, canvas])
const onClickContextMenu = (index) => {}

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

@ -1,11 +1,12 @@
'use client'
import { useContext, useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { useRecoilState, useRecoilValue } from 'recoil'
import CanvasFrame from './CanvasFrame'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { usePlan } from '@/hooks/usePlan'
import { modifiedPlansState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { SessionContext } from '@/app/SessionProvider'
@ -13,11 +14,12 @@ export default function CanvasLayout(props) {
const { menuNumber } = props
const { session } = useContext(SessionContext)
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
loadCanvasPlanData(session.userId, objectNo)

10
src/components/main/MainContents.jsx
View File

@ -136,7 +136,7 @@ export default function MainContents() {
})}
</ul>
) : (
<MainSkeleton />
<MainSkeleton count={6} />
)}
</ProductItem>
<ProductItem num={2} name={getMessage('main.content.notice')}>
@ -147,7 +147,9 @@ export default function MainContents() {
<div className="notice-title">{recentNoticeList[0]?.title}</div>
<div className="notice-contents">{recentNoticeList[0]?.contents}</div>
</>
) : null}
) : (
<MainSkeleton count={5} />
)}
</div>
</ProductItem>
</div>
@ -168,7 +170,9 @@ export default function MainContents() {
)
})}
</>
) : null}
) : (
<MainSkeleton count={2} />
)}
</ul>
</ProductItem>
<ProductItem num={4} name={'Data Download'}>

5
src/components/management/StuffQGrid.jsx
View File

@ -1,11 +1,14 @@
import React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { useMessage } from '@/hooks/useMessage'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-quartz.css'
export default function StuffQGrid(props) {
const { getMessage } = useMessage()
const { gridData, gridColumns, isPageable = true, count, gridRef } = props
/**
* 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
@ -95,7 +98,7 @@ export default function StuffQGrid(props) {
onSelectionChanged={onSelectionChanged}
onCellDoubleClicked={onCellDoubleClicked}
pagination={isPageable}
overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
getRowClass={getRowClass}
autoSizeAllColumns={true}
/>

6
src/components/management/popup/FindAddressPopQGrid.jsx
View File

@ -1,11 +1,14 @@
import React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { useMessage } from '@/hooks/useMessage'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-quartz.css'
export default function FindAddressPopGrid(props) {
const { getMessage } = useMessage()
const { gridData, gridColumns, isPageable = true } = props
const [rowData, setRowData] = useState(null)
@ -46,7 +49,7 @@ export default function FindAddressPopGrid(props) {
}
return (
<div className="ag-theme-quartz" style={{ height: 500 }}>
<div className="ag-theme-quartz" style={{ height: 400 }}>
<AgGridReact
onGridReady={onGridReady}
rowBuffer={rowBuffer}
@ -56,6 +59,7 @@ export default function FindAddressPopGrid(props) {
rowSelection={'singleRow'}
pagination={isPageable}
onSelectionChanged={onSelectionChanged}
overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
/>
</div>
)

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

@ -253,6 +253,12 @@ export default function PlanRequestPop(props) {
}
}, [commonCode])
// 숫자만 입력 가능
const handleKeyUp = (e) => {
let input = e.target
input.value = input.value.replace(/[^0-9]/g, '')
}
return (
<div className="modal-popup">
<div className="modal-dialog big">
@ -301,6 +307,7 @@ export default function PlanRequestPop(props) {
type="text"
className="input-light"
value={schPlanReqNo}
onKeyUp={handleKeyUp}
onChange={(e) => {
setSchPlanReqNo(e.target.value)
}}

4
src/components/management/popup/PlanRequestPopQGrid.jsx
View File

@ -1,11 +1,14 @@
import React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { useMessage } from '@/hooks/useMessage'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-quartz.css'
export default function PlanRequestPopQGrid(props) {
const { getMessage } = useMessage()
const { gridData, gridColumns, isPageable = true } = props
const [rowData, setRowData] = useState(null)
@ -56,6 +59,7 @@ export default function PlanRequestPopQGrid(props) {
rowSelection={'singleRow'}
pagination={isPageable}
onSelectionChanged={onSelectionChanged}
overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
/>
</div>
)

4
src/components/ui/MainSkeleton.jsx
View File

@ -1,13 +1,13 @@
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
export default function MainSkeleton() {
export default function MainSkeleton({ count }) {
return (
<>
<div className="mb-6">
<Skeleton height={`50px`} />
</div>
<Skeleton count={5} />
<Skeleton count={count} />
</>
)
}

34
src/hooks/useCanvasEvent.js
View File

@ -1,7 +1,15 @@
import { useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
import {
canvasSizeState,
canvasState,
canvasZoomState,
currentObjectState,
fontFamilyState,
fontSizeState,
modifiedPlanFlagState,
} from '@/store/canvasAtom'
import { QPolygon } from '@/components/fabric/QPolygon'
// 캔버스에 필요한 이벤트
@ -13,6 +21,7 @@ export function useCanvasEvent() {
const fontSize = useRecoilValue(fontSizeState)
const fontFamily = useRecoilValue(fontFamilyState)
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
// 기본적인 이벤트 필요시 추가
const attachDefaultEventOnCanvas = () => {
@ -34,14 +43,32 @@ export function useCanvasEvent() {
onChange: (e) => {
const target = e.target
if (target.name !== 'mouseLine') {
if (!modifiedPlanFlag) {
setModifiedPlanFlag((prev) => !prev)
}
}
if (target) {
target.uuid = uuidv4()
// settleDown(target)
}
},
addEvent: (e) => {
const target = e.target
if (!target.id) {
target.id = uuidv4()
}
if (!target.uuid) {
target.uuid = uuidv4()
}
if (target.name !== 'mouseLine') {
if (!modifiedPlanFlag) {
setModifiedPlanFlag((prev) => !prev)
}
}
if (target.type === 'QPolygon' || target.type === 'QLine') {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
textObjs.forEach((obj) => {
@ -141,6 +168,9 @@ export function useCanvasEvent() {
})*/
target.on('moving', (e) => {
target.uuid = uuidv4()
setModifiedPlanFlag((prev) => !prev)
if (target.parentDirection === 'left' || target.parentDirection === 'right') {
const minX = target.minX
const maxX = target.maxX

32
src/hooks/usePlan.js
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState } from '@/store/canvasAtom'
import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
@ -14,6 +14,7 @@ export function usePlan() {
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag
const { swalFire } = useSwal()
const { getMessage } = useMessage()
@ -90,30 +91,29 @@ export function usePlan() {
}
/**
* 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 판단
* 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리
*/
const checkCanvasObjectEvent = (e, planId) => {
const checkCanvasObjectEvent = (planId) => {
if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
setModifiedPlans([...modifiedPlans, planId])
setModifiedPlans((prev) => [...prev, planId])
setModifiedPlanFlag(false)
}
}
/**
* 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = (planId) => {
const canvasStatus = currentCanvasData()
const initPlanData = initCanvasPlans.find((plan) => plan.id === planId)
if (!initPlanData) {
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((id, index) => id === dbObjsUuids[index])
return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
}
}
const getObjectUuids = (objects) => {
@ -122,10 +122,12 @@ export function usePlan() {
.map((obj) => obj.uuid)
.sort()
}
/**
* 캔버스에 저장되지 않은 변경사항이 있는 경우 저장 여부를 확인 후 저장
*/
const checkUnsavedCanvasPlan = async () => {
const resetModifiedPlans = () => {
setModifiedPlans([])
setModifiedPlanFlag(false)
}
const checkUnsavedCanvasPlan = (str) => {
if (modifiedPlans.length > 0) {
swalFire({
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
@ -365,7 +367,7 @@ export function usePlan() {
plans,
modifiedPlans,
checkCanvasObjectEvent,
checkUnsavedCanvasPlan,
resetModifiedPlans,
saveCanvas,
handleCurrentPlan,
handleAddPlan,

2
src/locales/ja.json
View File

@ -376,6 +376,7 @@
"board.sub.total": "全体",
"board.sub.fileList": "添付ファイル一覧",
"board.sub.updDt": "更新日",
"board.sub.btn.close": "閉じる",
"myinfo.title": "マイプロフィール",
"myinfo.info.userId": "ユーザーID",
"myinfo.info.nameKana": "担当者名ふりがな",
@ -587,6 +588,7 @@
"stuff.detail.planGridHeader.management": "管理",
"stuff.detail.planGrid.btn1": "見積書の照会",
"stuff.detail.planGrid.btn2": "Excel",
"stuff.grid.noData": "照会されたデータがありません",
"length": "長さ",
"height": "高さ",
"output": "出力",

2
src/locales/ko.json
View File

@ -381,6 +381,7 @@
"board.sub.total": "전체",
"board.sub.fileList": "첨부파일 목록",
"board.sub.updDt": "업데이트",
"board.sub.btn.close": "닫기",
"myinfo.title": "My profile",
"myinfo.info.userId": "사용자ID",
"myinfo.info.nameKana": "담당자명 후리가나",
@ -592,6 +593,7 @@
"stuff.detail.planGridHeader.management": "관리",
"stuff.detail.planGrid.btn1": "견적서 조회",
"stuff.detail.planGrid.btn2": "Excel",
"stuff.grid.noData": "조회된 데이터가 없습니다",
"length": "길이",
"height": "높이",
"output": "출력",

5
src/store/canvasAtom.js
View File

@ -275,6 +275,11 @@ export const modifiedPlansState = atom({
key: 'modifiedPlansState',
default: [],
})
// 변경감지 flag
export const modifiedPlanFlagState = atom({
key: 'modifiedPlanFlagState',
default: false,
})
export const tempGridModeState = atom({
key: 'tempGridModeState',