343 lines
13 KiB
JavaScript
343 lines
13 KiB
JavaScript
'use client'
|
|
import { useEffect, useState, useContext, useRef } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import Select from 'react-select'
|
|
import { SessionContext } from '@/app/SessionProvider'
|
|
import { isEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
|
|
import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
|
|
|
|
export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
|
|
const { getMessage } = useMessage()
|
|
const { get } = useAxios()
|
|
const globalLocale = useRecoilValue(globalLocaleStore)
|
|
const { handleEstimateCopy, estimateContextState } = useEstimateController(planNo, true)
|
|
|
|
const { session } = useContext(SessionContext)
|
|
|
|
// storeLvl 기반 동적 라벨
|
|
const lvl = session?.storeLvl || '1'
|
|
const nextLvl = Number(lvl) + 1
|
|
const saleStoreLabel = globalLocale === 'ko'
|
|
? `${lvl}차 판매점명 / ID`
|
|
: `${lvl}次販売店名/ID`
|
|
const otherSaleStoreLabel = globalLocale === 'ko'
|
|
? `${nextLvl}차+하위 판매점명 / ID`
|
|
: `${nextLvl}次下位販売店名/ID`
|
|
|
|
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
|
|
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
|
|
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
|
|
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
|
|
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
|
|
|
|
const [saleStoreId, setSaleStoreId] = useState('') //선택한 상위점
|
|
const [saleStoreName, setSaleStoreName] = useState('') //선택한 상위점명
|
|
const [otherSaleStoreId, setOtherSaleStoreId] = useState('') //선택한 하위점
|
|
|
|
const [sendPlanNo, setSendPlanNo] = useState('1')
|
|
const [copyReceiveUser, setCopyReceiveUser] = useState('')
|
|
|
|
const ref = useRef() //하위점 자동완성 초기화용
|
|
|
|
useEffect(() => {
|
|
let url
|
|
let firstList
|
|
let favList
|
|
let otherList
|
|
if (session.storeId === 'T01') {
|
|
url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
|
|
} else {
|
|
if (session.storeLvl === '1') {
|
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
|
|
} else {
|
|
// 2차+ 판매점: 자기 자신이 상위점, 하위점 목록 조회
|
|
setSaleStoreId(session?.storeId)
|
|
url = `/api/object/saleStore/${session?.storeId}/childList?storeLvl=${session?.storeLvl}&userId=${session?.userId}`
|
|
}
|
|
}
|
|
|
|
get({ url: url }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
res.map((row) => {
|
|
//자동완성 검색을 위한 필드명 셋팅
|
|
row.value = row.saleStoreId
|
|
row.label = row.saleStoreName
|
|
})
|
|
|
|
if (session.storeId === 'T01') {
|
|
firstList = res
|
|
//T01을 첫번째로 정렬
|
|
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
|
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
|
|
|
setSaleStoreList(firstList)
|
|
setFavoriteStoreList(favList)
|
|
setShowSaleStoreList(favList)
|
|
setSaleStoreId(session?.storeId)
|
|
|
|
// T01때 디폴트로 T01셋팅하고 하위 2차목록 조회하기 바꾸면(onSelectionChange..) 바꾼거로 2차목록 조회하기
|
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
|
|
get({ url: url }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
res.map((row) => {
|
|
row.value = row.saleStoreId
|
|
row.label = row.saleStoreName
|
|
})
|
|
otherList = res
|
|
setOtherSaleStoreList(otherList)
|
|
setOriginOtherSaleStoreList(otherList)
|
|
} else {
|
|
setOtherSaleStoreList([])
|
|
}
|
|
})
|
|
} else {
|
|
if (session.storeLvl === '1') {
|
|
firstList = res
|
|
favList = res.filter((row) => row.priority !== 'B')
|
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
|
setSaleStoreList(firstList)
|
|
setFavoriteStoreList(firstList)
|
|
setShowSaleStoreList(firstList)
|
|
setSaleStoreId(firstList[0].saleStoreId)
|
|
|
|
setOtherSaleStoreList(otherList)
|
|
} else {
|
|
// 2차+ 판매점: 자기 자신은 상위점명으로, 나머지는 하위점 선택 목록으로 설정
|
|
const myself = res.find((row) => row.saleStoreId === session?.storeId)
|
|
if (myself) {
|
|
setSaleStoreName(myself.saleStoreName)
|
|
}
|
|
otherList = res.filter((row) => row.saleStoreId !== session?.storeId)
|
|
setOtherSaleStoreList(otherList)
|
|
setOriginOtherSaleStoreList(otherList)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (planNo) {
|
|
setSendPlanNo(planNo)
|
|
}
|
|
}, [planNo])
|
|
|
|
useEffect(() => {
|
|
if (estimateContextState?.charger) {
|
|
setCopyReceiveUser(session?.userNm)
|
|
}
|
|
}, [estimateContextState?.charger])
|
|
|
|
//T01 1차점 자동완성 인풋때 목록 변환
|
|
const onInputChange = (key) => {
|
|
if (key !== '') {
|
|
setShowSaleStoreList(saleStoreList)
|
|
} else {
|
|
setShowSaleStoreList(favoriteStoreList)
|
|
}
|
|
}
|
|
|
|
// 상위점 변경 이벤트
|
|
const onSelectionChange = (key) => {
|
|
if (isObjectNotEmpty(key)) {
|
|
if (key.saleStoreId === saleStoreId) {
|
|
return
|
|
}
|
|
}
|
|
|
|
if (isObjectNotEmpty(key)) {
|
|
setSaleStoreId(key.saleStoreId)
|
|
const url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
|
let otherList
|
|
get({ url: url }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
res.map((row) => {
|
|
row.value = row.saleStoreId
|
|
row.label = row.saleStoreName
|
|
})
|
|
|
|
otherList = res
|
|
setOtherSaleStoreList(otherList)
|
|
setOtherSaleStoreId('')
|
|
} else {
|
|
setOtherSaleStoreId('')
|
|
setOtherSaleStoreList([])
|
|
}
|
|
})
|
|
} else {
|
|
setSaleStoreId('')
|
|
//otherSaleStoreId는 onSelectionChange2에서 초기화됨
|
|
setOtherSaleStoreList(originOtherSaleStoreList)
|
|
handleClear()
|
|
}
|
|
}
|
|
|
|
// 하위점 변경 이벤트
|
|
const onSelectionChange2 = (key) => {
|
|
if (isObjectNotEmpty(key)) {
|
|
if (key.saleStoreId === otherSaleStoreId) {
|
|
return
|
|
}
|
|
}
|
|
|
|
if (isObjectNotEmpty(key)) {
|
|
setOtherSaleStoreId(key.saleStoreId)
|
|
} else {
|
|
setOtherSaleStoreId('')
|
|
}
|
|
}
|
|
|
|
//하위점 자동완성 초기화
|
|
const handleClear = () => {
|
|
if (ref.current) {
|
|
ref.current.clearValue()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="title">{getMessage('estimate.detail.estimateCopyPopup.title')}</h1>
|
|
<button
|
|
type="button"
|
|
className="modal-close"
|
|
onClick={() => {
|
|
setEstimateCopyPopupOpen(false)
|
|
}}
|
|
>
|
|
{getMessage('estimate.detail.estimateCopyPopup.close')}
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-body-inner">
|
|
<div className="explane">{getMessage('estimate.detail.estimateCopyPopup.explane')}</div>
|
|
<div className="estimate-copy-info-wrap">
|
|
<div className="estimate-copy-info-item">
|
|
<div className="estimate-copy-info-tit">
|
|
{saleStoreLabel} <span className="red">*</span>
|
|
</div>
|
|
{session.storeId === 'T01' && (
|
|
<div className="estimate-copy-info-box">
|
|
<div className="estimate-copy-sel">
|
|
<Select
|
|
id="long-value-select1"
|
|
instanceId="long-value-select1"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
placeholder="Select"
|
|
options={showSaleStoreList}
|
|
onInputChange={onInputChange}
|
|
onChange={onSelectionChange}
|
|
getOptionLabel={(x) => x.saleStoreName}
|
|
getOptionValue={(x) => x.saleStoreId}
|
|
isClearable={true}
|
|
isDisabled={false}
|
|
value={saleStoreList.filter(function (option) {
|
|
return option.saleStoreId === saleStoreId
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className="estimate-copy-id">{saleStoreId}</div>
|
|
</div>
|
|
)}
|
|
{session.storeId !== 'T01' && session.storeLvl === '1' && (
|
|
<div className="estimate-copy-info-box">
|
|
<div className="estimate-copy-sel">
|
|
<Select
|
|
id="long-value-select1"
|
|
instanceId="long-value-select1"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
placeholder="Select"
|
|
options={showSaleStoreList[0]}
|
|
onChange={onSelectionChange}
|
|
getOptionLabel={(x) => x.saleStoreName}
|
|
getOptionValue={(x) => x.saleStoreId}
|
|
isClearable={false}
|
|
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
|
|
value={showSaleStoreList.filter(function (option) {
|
|
return option.saleStoreId === saleStoreId
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className="estimate-copy-id">{saleStoreId}</div>
|
|
</div>
|
|
)}
|
|
{session.storeId !== 'T01' && session.storeLvl !== '1' && (
|
|
<div className="estimate-copy-info-box">
|
|
<div className="estimate-copy-sel">
|
|
<input type="text" className="input-light" value={saleStoreName || ''} disabled />
|
|
</div>
|
|
<div className="estimate-copy-id">{saleStoreId}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="estimate-copy-info-item">
|
|
<div className="estimate-copy-info-tit">{otherSaleStoreLabel}</div>
|
|
<div className="estimate-copy-info-box">
|
|
<div className="estimate-copy-sel">
|
|
<Select
|
|
id="long-value-select2"
|
|
instanceId="long-value-select2"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
placeholder="Select"
|
|
ref={ref}
|
|
options={otherSaleStoreList}
|
|
onChange={onSelectionChange2}
|
|
getOptionLabel={(x) => x.saleStoreName}
|
|
getOptionValue={(x) => x.saleStoreId}
|
|
isClearable={true}
|
|
isDisabled={otherSaleStoreList.length > 0 ? false : true}
|
|
value={otherSaleStoreList.filter(function (option) {
|
|
return option.saleStoreId === otherSaleStoreId
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className="estimate-copy-id">{otherSaleStoreId}</div>
|
|
</div>
|
|
</div>
|
|
<div className="estimate-copy-info-item">
|
|
<div className="estimate-copy-info-tit">
|
|
{getMessage('estimate.detail.estimateCopyPopup.label.receiveUser')} <span className="red">*</span>
|
|
</div>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
required
|
|
defaultValue={session?.userNm}
|
|
onChange={(e) => {
|
|
setCopyReceiveUser(e.target.value)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer-btn-wrap">
|
|
<button
|
|
type="button"
|
|
className="btn-origin navy mr5"
|
|
onClick={() => {
|
|
handleEstimateCopy(sendPlanNo, copyReceiveUser, saleStoreId, otherSaleStoreId, setEstimateCopyPopupOpen)
|
|
}}
|
|
>
|
|
{getMessage('estimate.detail.estimateCopyPopup.copyBtn')}
|
|
</button>
|
|
<button type="button" className="btn-origin grey" onClick={() => setEstimateCopyPopupOpen(false)}>
|
|
{getMessage('estimate.detail.estimateCopyPopup.close')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|