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

Merge branch 'dev' into feature/Q-CAST-III-T-22

Browse Source
This commit is contained in:
yoosangwook 2024-11-05 17:25:59 +09:00
commit f581fdc5dd
14 changed files with 3285 additions and 14016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10656
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
src/components/Playground.jsx
View File

@ -39,6 +39,7 @@ export default function Playground() {
const [color, setColor] = useState('#ff0000')
const [textInput, setTextInput] = useState('')
const [numberInput, setNumberInput] = useState(null)
const [radioInput, setRadioInput] = useState('')
const [checkboxInput, setCheckboxInput] = useState([])
const [selectedValue, setSelectedValue] = useState('')
@ -48,6 +49,9 @@ export default function Playground() {
useEffect(() => {
console.log('textInput:', textInput)
}, [textInput])
useEffect(() => {
console.log('numberInput:', numberInput)
}, [numberInput])
useEffect(() => {
console.log('radioInput:', radioInput)
}, [radioInput])
@ -161,8 +165,19 @@ export default function Playground() {
>
QInput TextInput DATA RESET
</button>
<QInput type="text" value={textInput} onChange={setTextInput} />
<QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
<QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
<QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
<br />
<button
className="btn-frame deepgray"
onClick={() => {
setNumberInput(null)
}}
>
QInput NumberInput DATA RESET
</button>
<QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
<QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
<br />
<button
className="btn-frame deepgray"
@ -185,7 +200,7 @@ export default function Playground() {
<button
className="btn-frame deepgray"
onClick={() => {
setCheckboxInput('')
setCheckboxInput([])
}}
>
QInput Checkbox DATA RESET

71
src/components/common/input/QInput.jsx
View File

@ -2,7 +2,7 @@
import { useCallback } from 'react'
export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
// options = options || [
// {
// id: 'one',
@ -21,11 +21,11 @@ export default function QInput({ type, readOnly = false, options = [], value, on
// },
// ]
const handleChange = useCallback(
const handleRadioCheckboxChange = useCallback(
(e, optionValue) => {
if (type === 'radio') {
onChange(e.target.value)
} else {
} else if (type === 'checkbox') {
const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
onChange(newValue)
}
@ -33,21 +33,61 @@ export default function QInput({ type, readOnly = false, options = [], value, on
[type, value, onChange],
)
const handleTextChange = useCallback(
const handleTextNumberChange = useCallback(
(e) => {
if (type === 'text') {
onChange(e.target.value)
} else if (type === 'number') {
onChange(Number(e.target.value))
}
},
[onChange],
[type, onChange],
)
// type=number 정수 부호, 소수점 검사, 일부 키 허용
const checkInputNumber = (e) => {
const value = e.target.value
const key = e.key
const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
if (key >= '0' && key <= '9') {
return
}
if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
return
}
if (key === '-' && !value.includes('-') && value.length > 0) {
return
}
if (allowKeys.includes(key)) {
return
}
if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
return
}
e.preventDefault()
}
// input type : text, number
const inputTextNumber = () => {
return (
<>
{type === 'text' ? (
<div className="mb5">
<input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
</div>
) : type === 'radio' || type === 'checkbox' ? (
<div className="flx mb5">
<input
type={type}
className={`input-light ${className ? className : ''}`}
ref={ref}
id={id}
readOnly={readOnly ? true : false}
placeholder={placeholder}
value={value === 0 ? 0 : value || ''}
onChange={handleTextNumberChange}
onKeyDown={type === 'number' ? checkInputNumber : undefined}
/>
)
}
// input type : radio, checkbox
const inputRadioCheckbox = () => {
return (
<div className="flx">
{options?.map((option) => (
<div key={option.name} className={`d-${type}-radio light mr5`}>
<input
@ -56,13 +96,14 @@ export default function QInput({ type, readOnly = false, options = [], value, on
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleChange(e, option.value)}
onChange={(e) => handleRadioCheckboxChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
) : null}
</>
)
}
return <>{type === 'text' || type === 'number' ? inputTextNumber() : type === 'radio' || type === 'checkbox' ? inputRadioCheckbox() : null}</>
}

6
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useEffect, useState } from 'react'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useRecoilValue } from 'recoil'
@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
}, [compasDeg])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx mount`}>
<div className={`modal-pop-wrap ml mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
@ -103,6 +103,7 @@ export default function FlowDirectionSetting(props) {
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
</div>
</div>
<div className="draw-flow-wrap">
<div className="compas-box">
<div className="compas-box-inner">
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
@ -130,6 +131,7 @@ export default function FlowDirectionSetting(props) {
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>

2
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'

2
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'

2
src/components/floor-plan/modal/module/row/RowInsert.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import Image from 'next/image'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'

2
src/components/floor-plan/modal/module/row/RowRemove.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import Image from 'next/image'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'

2
src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
View File

@ -2,7 +2,7 @@
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
export default function PanelBatchStatistics() {
const { getMessage } = useMessage()

4
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -197,8 +197,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
</tr>
<tr>
<th>
<div className="tip-wrap">
{getMessage('modal.placement.initial.setting.size')}
<button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
</div>
</th>
<td>
<div className="pop-form-radio">
@ -269,8 +271,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
</tr>
<tr>
<th>
<div className="tip-wrap">
{getMessage('modal.placement.initial.setting.roof.material')}
<button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
</div>
</th>
<td>
<div className="placement-option">

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

@ -228,7 +228,8 @@ export default function Stuff() {
if (isObjectNotEmpty(session)) {
if (stuffSearchParams?.code === 'S') {
const params = {
saleStoreId: stuffSearchParams.schSelSaleStoreId,
// saleStoreId: stuffSearchParams.schSelSaleStoreId,
saleStoreId: session.storeId,
schObjectNo: stuffSearchParams?.schObjectNo,
schAddress: stuffSearchParams?.schAddress,
schObjectName: stuffSearchParams?.schObjectName,
@ -245,7 +246,6 @@ export default function Stuff() {
: stuffSearchParams.schSelSaleStoreId,
schSortType: stuffSearchParams.schSortType,
}
async function fetchData() {
const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
await get({
@ -299,8 +299,7 @@ export default function Stuff() {
async function fetchData() {
let saleStoreId
saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
// const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
await get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -333,8 +332,7 @@ export default function Stuff() {
setPageNo(1)
let saleStoreId
saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
// const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -368,8 +366,7 @@ export default function Stuff() {
setPageNo(1)
let saleStoreId
saleStoreId = stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : session?.storeId
// const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${saleStoreId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })

126
src/hooks/roofcover/useMovementSetting.js
View File

@ -1,10 +1,11 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useRef, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE } from '@/common/common'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
//동선이동 형 올림 내림
export function useMovementSetting(id) {
@ -16,6 +17,7 @@ export function useMovementSetting(id) {
const { initEvent, addCanvasMouseEventListener } = useEvent()
const { closePopup } = usePopup()
const { getMessage } = useMessage()
const currentObject = useRecoilValue(currentObjectState)
const buttonType = [
{ id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
{ id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
@ -39,18 +41,47 @@ export function useMovementSetting(id) {
useEffect(() => {
typeRef.current = type
}, [type])
useEffect(() => {
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
wallLines.forEach((line) => {
line.set({ visible: false })
})
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
outerLines.forEach((line) => {
line.set({ stroke: 'black' })
line.set({ visible: false })
})
canvas.getObjects().forEach((obj) => {
obj.set({ selectable: false })
})
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // 기존 wallLine의 visible false
roofs.forEach((roof) => {
roof.innerLines.forEach((line) => {
line.bringToFront()
line.set({ selectable: false })
line.set({ strokeWidth: 1 })
})
})
if (type === TYPE.FLOW_LINE) {
roofs.forEach((roof) => {
roof.innerLines.forEach((line) => {
line.bringToFront()
line.set({ selectable: true })
line.set({ strokeWidth: 4 })
})
})
} else if (type === TYPE.UP_DOWN) {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
outerLines.forEach((line) => {
line.set({ stroke: 'black' })
line.set({ visible: true })
line.bringToFront()
line.set({ selectable: true })
})
}
canvas.renderAll()
}, [type])
useEffect(() => {
/*const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
wallLines.forEach((line) => {
line.set({ visible: false })
})*/
canvas.renderAll()
addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
@ -60,10 +91,49 @@ export function useMovementSetting(id) {
wallLines.forEach((line) => {
line.set({ visible: true })
})
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
outerLines.forEach((line) => {
line.set({ stroke: 'black' })
line.set({ visible: false })
})
canvas.renderAll()
}
}, [])
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
outerLines.forEach((line) => {
line.set({ stroke: 'black' })
})
clearRef()
if (!currentObject) {
return
}
if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
currentObject.set({ stroke: '#EA10AC' })
currentObject.bringToFront()
}
canvas.renderAll()
}, [currentObject])
const clearRef = () => {
if (type === TYPE.FLOW_LINE) {
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = false
FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
}
if (type === TYPE.UP_DOWN) {
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
UP_DOWN_REF.UP_RADIO_REF.current.checked = false
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
}
}
const mouseMoveEvent = (e) => {
if (typeRef.current === TYPE.FLOW_LINE) {
flowLineEvent(e)
@ -71,7 +141,45 @@ export function useMovementSetting(id) {
updownEvent(e)
}
}
const flowLineEvent = (e) => {}
const flowLineEvent = (e) => {
const target = canvas.getActiveObject()
if (!target) {
return
}
const direction = target.direction
const { top: targetTop, left: targetLeft } = target
const currentX = canvas.getPointer(e.e).x
const currentY = Math.floor(canvas.getPointer(e.e).y)
if (direction === 'left' || direction === 'right') {
if (targetTop > currentY) {
console.log('targetTop > currentY')
FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
} else {
FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
}
} else {
if (targetLeft > currentX) {
FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
} else {
FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
}
}
canvas?.renderAll()
}
const updownEvent = (e) => {
const target = canvas.getActiveObject()

843
src/styles/_contents.scss
View File

File diff suppressed because it is too large Load Diff

1159
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff