물건 저장시 focus
nextui-org/react Button onClick -> onPress
This commit is contained in:
parent
67ba090993
commit
11667c90ad
@ -3,7 +3,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
||||
import { Button } from '@nextui-org/react'
|
||||
import Select from 'react-select'
|
||||
import Select, { components } from 'react-select'
|
||||
import Link from 'next/link'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
@ -19,6 +19,13 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
import StuffPlanQGrid from './StuffPlanQGrid'
|
||||
|
||||
export default function StuffDetail() {
|
||||
const inputReceiveUserEl = useRef(null) //담당자ref
|
||||
const inputObjectNameEl = useRef(null) //물건명ref
|
||||
const inputZipNoEl = useRef(null) //우편번호ref
|
||||
const inputAddressEl = useRef(null) //주소ref
|
||||
const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
|
||||
const inputInstallHeightEl = useRef(null) //설치높이ref
|
||||
|
||||
//공통코드
|
||||
const { commonCode, findCommonCode } = useCommonCode()
|
||||
const [selOptions, setSelOptions] = useState('') //선택한 1차점
|
||||
@ -54,7 +61,7 @@ export default function StuffDetail() {
|
||||
address: '', //주소
|
||||
areaId: '', //발전량시뮬레이션지역id
|
||||
standardWindSpeedId: '', //기준풍속
|
||||
verticalSnowCover: '', //수직적설량NEW
|
||||
verticalSnowCover: '', //수직적설량
|
||||
coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0)
|
||||
surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
|
||||
saltAreaFlg: false, //염해지역용아이템사용 (true : 1 / false : 0)
|
||||
@ -890,6 +897,7 @@ export default function StuffDetail() {
|
||||
form.setValue('areaName', e.prefName)
|
||||
}
|
||||
|
||||
// 저장
|
||||
const onValid = async () => {
|
||||
const formData = form.getValues()
|
||||
|
||||
@ -899,11 +907,13 @@ export default function StuffDetail() {
|
||||
if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
|
||||
fieldNm = getMessage('stuff.detail.receiveUser')
|
||||
errors = fieldNm
|
||||
inputReceiveUserEl.current.focus()
|
||||
}
|
||||
//물건명
|
||||
if (!formData.objectName || formData.objectName.trim().length === 0) {
|
||||
fieldNm = getMessage('stuff.detail.objectStatusId')
|
||||
errors = fieldNm
|
||||
inputObjectNameEl.current.focus()
|
||||
}
|
||||
//경칭
|
||||
if (!formData.objectNameOmit) {
|
||||
@ -919,11 +929,13 @@ export default function StuffDetail() {
|
||||
if (!formData.zipNo) {
|
||||
fieldNm = getMessage('stuff.detail.zipNo')
|
||||
errors = fieldNm
|
||||
inputZipNoEl.current.focus()
|
||||
}
|
||||
//주소
|
||||
if (!formData.address) {
|
||||
fieldNm = getMessage('stuff.detail.address')
|
||||
errors = fieldNm
|
||||
inputAddressEl.current.focus()
|
||||
}
|
||||
//도도부현
|
||||
if (!formData.prefId || formData.prefId === '0') {
|
||||
@ -944,6 +956,7 @@ export default function StuffDetail() {
|
||||
if (!formData.verticalSnowCover) {
|
||||
fieldNm = getMessage('stuff.detail.verticalSnowCover')
|
||||
errors = fieldNm
|
||||
inputVerticalSnowCoverEl.current.focus()
|
||||
}
|
||||
|
||||
//면조도구분
|
||||
@ -955,10 +968,9 @@ export default function StuffDetail() {
|
||||
if (!formData.installHeight) {
|
||||
fieldNm = getMessage('stuff.detail.installHeight')
|
||||
errors = fieldNm
|
||||
inputInstallHeightEl.current.focus()
|
||||
}
|
||||
|
||||
//계약조건
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return alert(getMessage('stuff.detail.save.valierror3', [errors]))
|
||||
}
|
||||
@ -1110,6 +1122,7 @@ export default function StuffDetail() {
|
||||
workName: null,
|
||||
}
|
||||
|
||||
return
|
||||
//1차점 or 2차점 안고르고 임시저장하면
|
||||
if (params.saleStoreId == '') {
|
||||
params.saleStoreId = sessionState.storeId
|
||||
@ -1125,6 +1138,7 @@ export default function StuffDetail() {
|
||||
if (height === '0') {
|
||||
return alert(getMessage('stuff.detail.save.valierror2'))
|
||||
}
|
||||
|
||||
await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
|
||||
if (res.status === 201) {
|
||||
alert(getMessage('stuff.detail.tempSave.message1'))
|
||||
@ -1153,6 +1167,17 @@ export default function StuffDetail() {
|
||||
input.value = input.value.replace(/[^0-9]/g, '')
|
||||
}
|
||||
|
||||
//자동완성 옵션 없을때 메세지 컴포넌트..
|
||||
const NoOptionsMessage = (props) => {
|
||||
return (
|
||||
<components.NoOptionsMessage {...props}>
|
||||
<span style={{ background: 'red' }} className="custom-css-class">
|
||||
TEXTTTTTTT
|
||||
</span>
|
||||
</components.NoOptionsMessage>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{(editMode === 'NEW' && (
|
||||
@ -1186,7 +1211,7 @@ export default function StuffDetail() {
|
||||
)) ||
|
||||
null}
|
||||
</div>
|
||||
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
|
||||
<Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
||||
{getMessage('stuff.planReqPopup.title')}
|
||||
</Button>
|
||||
</div>
|
||||
@ -1198,7 +1223,7 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '500px' }}>
|
||||
<input type="text" className="input-light" {...form.register('receiveUser')} />
|
||||
<input type="text" className="input-light" {...form.register('receiveUser')} ref={inputReceiveUserEl} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -1227,7 +1252,7 @@ export default function StuffDetail() {
|
||||
})}
|
||||
{/* 라디오끝 */}
|
||||
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
||||
<input type="text" className="input-light" {...form.register('objectName')} />
|
||||
<input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
|
||||
</div>
|
||||
<div className="select-wrap" style={{ width: '120px' }}>
|
||||
<Select
|
||||
@ -1317,6 +1342,7 @@ export default function StuffDetail() {
|
||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||
<Select
|
||||
id="long-value-select2"
|
||||
// components={{ NoOptionsMessage }}
|
||||
instanceId="long-value-select2"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
@ -1352,9 +1378,9 @@ export default function StuffDetail() {
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
|
||||
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
|
||||
</div>
|
||||
<Button className="btn-origin grey" onClick={onSearchPostNumberPopOpen}>
|
||||
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
|
||||
{getMessage('stuff.detail.btn.addressPop')}
|
||||
</Button>
|
||||
<div className="guide">{getMessage('stuff.detail.btn.addressPop.guide')}</div>
|
||||
@ -1368,7 +1394,7 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap" style={{ width: '200px' }}>
|
||||
<div className="select-wrap mr5" style={{ width: '200px' }}>
|
||||
{prefCodeList?.length > 0 && (
|
||||
<Select
|
||||
id="long-value-select3"
|
||||
@ -1388,7 +1414,13 @@ export default function StuffDetail() {
|
||||
)}
|
||||
</div>
|
||||
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
|
||||
<input
|
||||
type="text"
|
||||
className="input-light"
|
||||
value={form.watch('address') || ''}
|
||||
{...form.register('address')}
|
||||
ref={inputAddressEl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -1444,7 +1476,7 @@ export default function StuffDetail() {
|
||||
></Select>
|
||||
</div>
|
||||
<span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
|
||||
<Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
|
||||
<Button type="button" className="btn-origin grey" onPress={onSearchWindSpeedPopOpen}>
|
||||
{getMessage('stuff.detail.btn.windSpeedPop')}
|
||||
</Button>
|
||||
</div>
|
||||
@ -1463,6 +1495,7 @@ export default function StuffDetail() {
|
||||
onKeyUp={handleKeyUp}
|
||||
value={form.watch('verticalSnowCover') || ''}
|
||||
{...register('verticalSnowCover')}
|
||||
ref={inputVerticalSnowCoverEl}
|
||||
/>
|
||||
</div>
|
||||
<span className="mr10">cm</span>
|
||||
@ -1510,6 +1543,7 @@ export default function StuffDetail() {
|
||||
onKeyUp={handleKeyUp}
|
||||
value={form.watch('installHeight') || ''}
|
||||
{...register('installHeight')}
|
||||
ref={inputInstallHeightEl}
|
||||
/>
|
||||
</div>
|
||||
<span>m</span>
|
||||
@ -1544,7 +1578,7 @@ export default function StuffDetail() {
|
||||
</div>
|
||||
<div className="sub-right-footer">
|
||||
{!isFormValid ? (
|
||||
<Button className="btn-origin grey mr5" onClick={onTempSave}>
|
||||
<Button className="btn-origin grey mr5" onPress={onTempSave}>
|
||||
{getMessage('stuff.detail.btn.tempSave')}
|
||||
</Button>
|
||||
) : (
|
||||
@ -1595,7 +1629,7 @@ export default function StuffDetail() {
|
||||
{/* {detailData?.tempFlg === '1' ? ( */}
|
||||
{objectNo.substring(0, 1) === 'T' ? (
|
||||
<>
|
||||
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
|
||||
<Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
||||
{getMessage('stuff.planReqPopup.title')}
|
||||
</Button>
|
||||
</>
|
||||
@ -1609,7 +1643,13 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '500px' }}>
|
||||
<input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
|
||||
<input
|
||||
type="text"
|
||||
className="input-light"
|
||||
{...form.register('receiveUser')}
|
||||
value={form.watch('receiveUser') || ''}
|
||||
ref={inputReceiveUserEl}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -1638,7 +1678,7 @@ export default function StuffDetail() {
|
||||
})}
|
||||
{/* 상세라디오끝 */}
|
||||
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
||||
<input type="text" className="input-light" {...form.register('objectName')} />
|
||||
<input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
|
||||
</div>
|
||||
<div className="select-wrap" style={{ width: '120px' }}>
|
||||
<Select
|
||||
@ -1763,9 +1803,9 @@ export default function StuffDetail() {
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
|
||||
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
|
||||
</div>
|
||||
<Button className="btn-origin grey" onClick={onSearchPostNumberPopOpen}>
|
||||
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
|
||||
{getMessage('stuff.detail.btn.addressPop')}
|
||||
</Button>
|
||||
<div className="guide">{getMessage('stuff.detail.btn.addressPop.guide')}</div>
|
||||
@ -1780,7 +1820,7 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap" style={{ width: '200px' }}>
|
||||
<div className="select-wrap mr5" style={{ width: '200px' }}>
|
||||
{prefCodeList?.length > 0 && (
|
||||
<Select
|
||||
id="long-value-select3"
|
||||
@ -1800,7 +1840,13 @@ export default function StuffDetail() {
|
||||
)}
|
||||
</div>
|
||||
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
|
||||
<input
|
||||
type="text"
|
||||
className="input-light"
|
||||
value={form.watch('address') || ''}
|
||||
{...form.register('address')}
|
||||
ref={inputAddressEl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -1860,7 +1906,7 @@ export default function StuffDetail() {
|
||||
></Select>
|
||||
</div>
|
||||
<span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
|
||||
<Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
|
||||
<Button type="button" className="btn-origin grey" onPress={onSearchWindSpeedPopOpen}>
|
||||
{getMessage('stuff.detail.btn.windSpeedPop')}
|
||||
</Button>
|
||||
</div>
|
||||
@ -1881,6 +1927,7 @@ export default function StuffDetail() {
|
||||
onKeyUp={handleKeyUp}
|
||||
value={form.watch('verticalSnowCover') || ''}
|
||||
{...register('verticalSnowCover')}
|
||||
ref={inputVerticalSnowCoverEl}
|
||||
/>
|
||||
</div>
|
||||
<span className="mr10">cm</span>
|
||||
@ -1932,6 +1979,7 @@ export default function StuffDetail() {
|
||||
onKeyUp={handleKeyUp}
|
||||
value={form.watch('installHeight') || ''}
|
||||
{...register('installHeight')}
|
||||
ref={inputInstallHeightEl}
|
||||
/>
|
||||
</div>
|
||||
<span>m</span>
|
||||
@ -2005,13 +2053,13 @@ export default function StuffDetail() {
|
||||
<div className="sub-right-footer">
|
||||
<Link href="/management/stuff" scroll={false}>
|
||||
<button type="button" className="btn-origin grey mr5">
|
||||
R상세: {getMessage('stuff.detail.btn.moveList')}
|
||||
{getMessage('stuff.detail.btn.moveList')}
|
||||
</button>
|
||||
</Link>
|
||||
<Button type="submit" className="btn-origin navy mr5">
|
||||
R상세:{getMessage('stuff.detail.btn.save')}
|
||||
{getMessage('stuff.detail.btn.save')}
|
||||
</Button>
|
||||
<Button type="button" className="btn-origin grey" onClick={onDelete}>
|
||||
<Button type="button" className="btn-origin grey" onPress={onDelete}>
|
||||
{getMessage('stuff.detail.btn.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
@ -2020,17 +2068,17 @@ export default function StuffDetail() {
|
||||
<>
|
||||
<div className="sub-right-footer">
|
||||
{!isFormValid ? (
|
||||
<Button className="btn-origin grey mr5" onClick={onTempSave}>
|
||||
TEMP상세:{getMessage('stuff.detail.btn.tempSave')}
|
||||
<Button className="btn-origin grey mr5" onPress={onTempSave}>
|
||||
{getMessage('stuff.detail.btn.tempSave')}
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" className="btn-origin navy mr5">
|
||||
TEMP상세:{getMessage('stuff.detail.btn.save')}
|
||||
{getMessage('stuff.detail.btn.save')}
|
||||
</Button>
|
||||
)}
|
||||
<Link href="/management/stuff" scroll={false}>
|
||||
<button type="button" className="btn-origin grey">
|
||||
TEMP상세:{getMessage('stuff.detail.btn.moveList')}
|
||||
{getMessage('stuff.detail.btn.moveList')}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user