refactor: Update Survey components and API routes for improved data handling and structure
This commit is contained in:
parent
09f280644f
commit
eb1f6b23e7
@ -214,6 +214,6 @@ model MS_USR_TRK {
|
||||
OWNER String @db.VarChar(100)
|
||||
TYPE String @db.VarChar(50)
|
||||
URL String? @db.VarChar(200)
|
||||
DATA String? @db.VarChar(200)
|
||||
REG_DT DateTime @default(now())
|
||||
DATA String? @db.VarChar(200)
|
||||
}
|
||||
|
||||
@ -173,23 +173,18 @@ export async function GET(request: Request) {
|
||||
where.AND.push(roleCondition)
|
||||
}
|
||||
|
||||
// 데이터 조회 또는 카운트
|
||||
if (params.offset) {
|
||||
// 페이지네이션 데이터 조회
|
||||
//@ts-ignore
|
||||
const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
|
||||
where,
|
||||
orderBy: params.sort === 'created' ? { REG_DT: 'desc' } : { UPT_DT: 'desc' },
|
||||
skip: Number(params.offset),
|
||||
take: ITEMS_PER_PAGE,
|
||||
})
|
||||
return NextResponse.json(surveys)
|
||||
} else {
|
||||
// 전체 개수만 조회
|
||||
//@ts-ignore
|
||||
const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where })
|
||||
return NextResponse.json(count)
|
||||
}
|
||||
// 페이지네이션 데이터 조회
|
||||
//@ts-ignore
|
||||
const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
|
||||
where,
|
||||
orderBy: params.sort === 'created' ? { REG_DT: 'desc' } : { UPT_DT: 'desc' },
|
||||
skip: Number(params.offset),
|
||||
take: ITEMS_PER_PAGE,
|
||||
})
|
||||
// 전체 개수만 조회
|
||||
//@ts-ignore
|
||||
const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where })
|
||||
return NextResponse.json({ data: { data: surveys, count: count } })
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return NextResponse.json({ error: 'Fail Read Survey' }, { status: 500 })
|
||||
|
||||
@ -1,25 +1,6 @@
|
||||
import DataTable from '@/components/survey-sale/detail/DataTable'
|
||||
import DetailForm from '@/components/survey-sale/detail/DetailForm'
|
||||
import { SurveyBasicInfo } from '@/types/Survey'
|
||||
|
||||
export default function page() {
|
||||
const surveyInfo: SurveyBasicInfo = {
|
||||
ID: 1,
|
||||
REPRESENTATIVE: 'HG',
|
||||
STORE: 'HWJ(T01)',
|
||||
CONSTRUCTION_POINT: '施工点名表示',
|
||||
INVESTIGATION_DATE: '2021-01-01',
|
||||
BUILDING_NAME: 'ビル名表示',
|
||||
CUSTOMER_NAME: '顧客名表示',
|
||||
POST_CODE: '1234567890',
|
||||
ADDRESS: '東京都千代田区永田町1-7-1',
|
||||
ADDRESS_DETAIL: '永田町ビル101号室',
|
||||
SUBMISSION_STATUS: true,
|
||||
SUBMISSION_DATE: '2021-01-01',
|
||||
DETAIL_INFO: null,
|
||||
REG_DT: new Date(),
|
||||
UPT_DT: new Date(),
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<DataTable />
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import BasicForm from '@/components/survey-sale/detail/my/basicForm'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<BasicForm />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
// import RegistForm from '@/components/survey-sale/temp/registForm'
|
||||
import RegistForm from '@/components/survey-sale/RegistForm'
|
||||
import RegistForm from '@/components/survey-sale/detail/RegistForm'
|
||||
|
||||
export default function RegistPage() {
|
||||
return (
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import RoofInfoForm from '@/components/survey-sale/detail/my/roofInfoForm'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<RoofInfoForm />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -32,8 +32,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
|
||||
type="text"
|
||||
className="input-frame"
|
||||
readOnly={mode === 'READ'}
|
||||
value={basicInfo?.REPRESENTATIVE ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, REPRESENTATIVE: e.target.value })}
|
||||
value={basicInfo?.representative ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, representative: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
@ -42,8 +42,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
|
||||
type="text"
|
||||
className="input-frame"
|
||||
readOnly={mode === 'READ'}
|
||||
value={basicInfo?.STORE ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, STORE: e.target.value })}
|
||||
value={basicInfo?.store ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, store: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
@ -52,8 +52,8 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
|
||||
type="text"
|
||||
className="input-frame"
|
||||
readOnly={mode === 'READ'}
|
||||
value={basicInfo?.CONSTRUCTION_POINT ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, CONSTRUCTION_POINT: e.target.value })}
|
||||
value={basicInfo?.constructionPoint ?? ''}
|
||||
onChange={(e) => setBasicInfo({ ...basicInfo, constructionPoint: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,32 +67,32 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
|
||||
<button className="date-btn">
|
||||
<i className="date-icon"></i>
|
||||
</button>
|
||||
<input type="date" className="date-frame" readOnly defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
|
||||
<input type="date" className="date-frame" readOnly defaultValue={basicInfo?.investigationDate?.toString()} />
|
||||
</div>
|
||||
) : (
|
||||
<input type="date" className="input-frame" disabled defaultValue={basicInfo?.INVESTIGATION_DATE?.toString()} />
|
||||
<input type="date" className="input-frame" disabled defaultValue={basicInfo?.investigationDate?.toString()} />
|
||||
)}
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 건물명 */}
|
||||
<div className="data-input-form-tit">建物名</div>
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.BUILDING_NAME ?? ''} />
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.buildingName ?? ''} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 고객명 */}
|
||||
<div className="data-input-form-tit">建物名</div>
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.CUSTOMER_NAME ?? ''} />
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.customerName ?? ''} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">郵便番号/都道府県</div>
|
||||
<div className="form-flex">
|
||||
{/* 우편번호 */}
|
||||
<div className="form-bx">
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.POST_CODE ?? ''} disabled />
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.postCode ?? ''} disabled />
|
||||
</div>
|
||||
{/* 도도부현 */}
|
||||
<div className="form-bx">
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.ADDRESS ?? ''} disabled />
|
||||
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.address ?? ''} disabled />
|
||||
</div>
|
||||
</div>
|
||||
{/* 주소 */}
|
||||
|
||||
@ -11,7 +11,6 @@ export default function DataTable() {
|
||||
const id = params.id
|
||||
|
||||
const searchParams = useSearchParams()
|
||||
const tab = searchParams.get('tab')
|
||||
const isTemp = searchParams.get('isTemporary')
|
||||
|
||||
const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
|
||||
@ -20,8 +19,8 @@ export default function DataTable() {
|
||||
const { validateSurveyDetail } = useServey(Number(id))
|
||||
|
||||
useEffect(() => {
|
||||
if (surveyDetail?.DETAIL_INFO) {
|
||||
const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO)
|
||||
if (surveyDetail?.detailInfo) {
|
||||
const validate = validateSurveyDetail(surveyDetail.detailInfo)
|
||||
if (validate.trim() !== '') {
|
||||
setIsTemporary(false)
|
||||
}
|
||||
@ -48,25 +47,25 @@ export default function DataTable() {
|
||||
<span className="text-red-500">仮保存</span>
|
||||
</td>
|
||||
) : (
|
||||
<td>{surveyDetail?.ID}</td>
|
||||
<td>{surveyDetail?.id}</td>
|
||||
)}
|
||||
</tr>
|
||||
<tr>
|
||||
<th>登録日</th>
|
||||
<td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td>
|
||||
<td>{surveyDetail?.regDt ? new Date(surveyDetail.regDt).toLocaleString() : ''}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>更新日時</th>
|
||||
<td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td>
|
||||
<td>{surveyDetail?.uptDt ? new Date(surveyDetail.uptDt).toLocaleString() : ''}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>提出可否</th>
|
||||
<td>
|
||||
{surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? (
|
||||
{surveyDetail?.submissionStatus && surveyDetail?.submissionDate ? (
|
||||
<>
|
||||
{/* TODO: 제출한 판매점 ID 추가 필요 */}
|
||||
<div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div>
|
||||
<div>{surveyDetail.STORE}</div>
|
||||
<div>{new Date(surveyDetail.submissionDate).toLocaleString()}</div>
|
||||
<div>{surveyDetail.store}</div>
|
||||
</>
|
||||
) : (
|
||||
'-'
|
||||
|
||||
@ -6,55 +6,55 @@ import ButtonForm from './ButtonForm'
|
||||
import BasicForm from './BasicForm'
|
||||
import RoofForm from './RoofForm'
|
||||
const roofInfoForm: SurveyDetailRequest = {
|
||||
CONTRACT_CAPACITY: null,
|
||||
RETAIL_COMPANY: null,
|
||||
SUPPLEMENTARY_FACILITIES: null,
|
||||
SUPPLEMENTARY_FACILITIES_ETC: null,
|
||||
INSTALLATION_SYSTEM: null,
|
||||
INSTALLATION_SYSTEM_ETC: null,
|
||||
CONSTRUCTION_YEAR: null,
|
||||
CONSTRUCTION_YEAR_ETC: null,
|
||||
ROOF_MATERIAL: null,
|
||||
ROOF_MATERIAL_ETC: null,
|
||||
ROOF_SHAPE: null,
|
||||
ROOF_SHAPE_ETC: null,
|
||||
ROOF_SLOPE: null,
|
||||
HOUSE_STRUCTURE: '1',
|
||||
HOUSE_STRUCTURE_ETC: null,
|
||||
RAFTER_MATERIAL: '1',
|
||||
RAFTER_MATERIAL_ETC: null,
|
||||
RAFTER_SIZE: null,
|
||||
RAFTER_SIZE_ETC: null,
|
||||
RAFTER_PITCH: null,
|
||||
RAFTER_PITCH_ETC: null,
|
||||
RAFTER_DIRECTION: '1',
|
||||
OPEN_FIELD_PLATE_KIND: null,
|
||||
OPEN_FIELD_PLATE_KIND_ETC: null,
|
||||
OPEN_FIELD_PLATE_THICKNESS: null,
|
||||
LEAK_TRACE: false,
|
||||
WATERPROOF_MATERIAL: null,
|
||||
WATERPROOF_MATERIAL_ETC: null,
|
||||
INSULATION_PRESENCE: '1',
|
||||
INSULATION_PRESENCE_ETC: null,
|
||||
STRUCTURE_ORDER: null,
|
||||
STRUCTURE_ORDER_ETC: null,
|
||||
INSTALLATION_AVAILABILITY: null,
|
||||
INSTALLATION_AVAILABILITY_ETC: null,
|
||||
MEMO: null,
|
||||
contractCapacity: null,
|
||||
retailCompany: null,
|
||||
supplementaryFacilities: null,
|
||||
supplementaryFacilitiesEtc: null,
|
||||
installationSystem: null,
|
||||
installationSystemEtc: null,
|
||||
constructionYear: null,
|
||||
constructionYearEtc: null,
|
||||
roofMaterial: null,
|
||||
roofMaterialEtc: null,
|
||||
roofShape: null,
|
||||
roofShapeEtc: null,
|
||||
roofSlope: null,
|
||||
houseStructure: '1',
|
||||
houseStructureEtc: null,
|
||||
rafterMaterial: '1',
|
||||
rafterMaterialEtc: null,
|
||||
rafterSize: null,
|
||||
rafterSizeEtc: null,
|
||||
rafterPitch: null,
|
||||
rafterPitchEtc: null,
|
||||
rafterDirection: '1',
|
||||
openFieldPlateKind: null,
|
||||
openFieldPlateKindEtc: null,
|
||||
openFieldPlateThickness: null,
|
||||
leakTrace: false,
|
||||
waterproofMaterial: null,
|
||||
waterproofMaterialEtc: null,
|
||||
insulationPresence: '1',
|
||||
insulationPresenceEtc: null,
|
||||
structureOrder: null,
|
||||
structureOrderEtc: null,
|
||||
installationAvailability: null,
|
||||
installationAvailabilityEtc: null,
|
||||
memo: null,
|
||||
}
|
||||
|
||||
const basicInfoForm: SurveyBasicRequest = {
|
||||
REPRESENTATIVE: '',
|
||||
STORE: null,
|
||||
CONSTRUCTION_POINT: null,
|
||||
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
|
||||
BUILDING_NAME: null,
|
||||
CUSTOMER_NAME: null,
|
||||
POST_CODE: null,
|
||||
ADDRESS: null,
|
||||
ADDRESS_DETAIL: null,
|
||||
SUBMISSION_STATUS: false,
|
||||
SUBMISSION_DATE: null,
|
||||
representative: '',
|
||||
store: null,
|
||||
constructionPoint: null,
|
||||
investigationDate: new Date().toLocaleDateString('en-CA'),
|
||||
buildingName: null,
|
||||
customerName: null,
|
||||
postCode: null,
|
||||
address: null,
|
||||
addressDetail: null,
|
||||
submissionStatus: false,
|
||||
submissionDate: null,
|
||||
}
|
||||
|
||||
export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
|
||||
@ -62,20 +62,12 @@ export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?:
|
||||
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
|
||||
const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
|
||||
|
||||
// useEffect(() => {
|
||||
// // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
|
||||
// }, [props.surveyInfo])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(props.surveyInfo)
|
||||
}, [props.surveyInfo])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.surveyInfo && mode === 'EDIT') {
|
||||
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = props.surveyInfo
|
||||
if (props.surveyInfo && (mode === 'EDIT' || mode === 'READ')) {
|
||||
const { id, uptDt, regDt, detailInfo, ...rest } = props.surveyInfo
|
||||
setBasicInfoData(rest)
|
||||
if (DETAIL_INFO) {
|
||||
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = DETAIL_INFO
|
||||
if (detailInfo) {
|
||||
const { id, uptDt, regDt, basicInfoId, ...rest } = detailInfo
|
||||
setRoofInfoData(rest)
|
||||
}
|
||||
}
|
||||
@ -91,7 +83,6 @@ export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?:
|
||||
return (
|
||||
<>
|
||||
<div className="sale-detail-toggle-wrap">
|
||||
{/* {mode} */}
|
||||
{/* 기본정보 */}
|
||||
<BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
|
||||
{/* 전기/지붕정보 */}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Mode } from '@/types/Survey'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import DetailForm from './detail/DetailForm'
|
||||
import DetailForm from './DetailForm'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { SurveyBasicInfo } from '@/types/Survey'
|
||||
@ -1,8 +1,204 @@
|
||||
import { useState } from 'react'
|
||||
import { Mode, SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
|
||||
import { roof_material, supplementary_facilities } from './form/etcProcess/MultiCheckEtc'
|
||||
import { selectBoxOptions } from './form/etcProcess/SelectBoxEtc'
|
||||
import { radioEtcData } from './form/etcProcess/RadioEtc'
|
||||
import { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
|
||||
|
||||
type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
|
||||
type SelectBoxKeys =
|
||||
| 'installationSystem'
|
||||
| 'constructionYear'
|
||||
| 'roofShape'
|
||||
| 'rafterPitch'
|
||||
| 'rafterSize'
|
||||
| 'openFieldPlateKind'
|
||||
| 'structureOrder'
|
||||
| 'installationAvailability'
|
||||
|
||||
export const supplementary_facilities = [
|
||||
{ id: 1, name: 'エコキュート' }, //에코큐트
|
||||
{ id: 2, name: 'エネパーム' }, //에네팜
|
||||
{ id: 3, name: '蓄電池システム' }, //축전지시스템
|
||||
{ id: 4, name: '太陽光発電' }, //태양광발전
|
||||
]
|
||||
|
||||
export const roof_material = [
|
||||
{ id: 1, name: 'スレート' }, //슬레이트
|
||||
{ id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
|
||||
{ id: 3, name: '瓦' }, //기와
|
||||
{ id: 4, name: '金属屋根' }, //금속지붕
|
||||
]
|
||||
|
||||
export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
|
||||
installationSystem: [
|
||||
{
|
||||
id: 1,
|
||||
name: '太陽光発電', //태양광발전
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '蓄電池システム', //축전지시스템
|
||||
},
|
||||
],
|
||||
constructionYear: [
|
||||
{
|
||||
id: 1,
|
||||
name: '新築', //신축
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '既築', //기존
|
||||
},
|
||||
],
|
||||
roofShape: [
|
||||
{
|
||||
id: 1,
|
||||
name: '切妻', //박공지붕
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '寄棟', //기동
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '片流れ', //한쪽흐름
|
||||
},
|
||||
],
|
||||
rafterSize: [
|
||||
{
|
||||
id: 1,
|
||||
name: '幅35mm以上×高さ48mm以上',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '幅36mm以上×高さ46mm以上',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '幅37mm以上×高さ43mm以上',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '幅38mm以上×高さ40mm以上',
|
||||
},
|
||||
],
|
||||
rafterPitch: [
|
||||
{
|
||||
id: 1,
|
||||
name: '455mm以下',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '500mm以下',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '606mm以下',
|
||||
},
|
||||
],
|
||||
openFieldPlateKind: [
|
||||
{
|
||||
id: 1,
|
||||
name: '構造用合板', //구조용합판
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'OSB', //OSB
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'パーティクルボード', //파티클보드
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '小幅板', //소판
|
||||
},
|
||||
],
|
||||
structureOrder: [
|
||||
{
|
||||
id: 1,
|
||||
name: '屋根材', //지붕재
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '防水材', //방수재
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '屋根の基礎', //지붕의기초
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '垂木', //서까래
|
||||
},
|
||||
],
|
||||
installationAvailability: [
|
||||
{
|
||||
id: 1,
|
||||
name: '確認済み', //확인완료
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '未確認', //미확인
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
|
||||
houseStructure: [
|
||||
{
|
||||
id: 1,
|
||||
label: '木製',
|
||||
},
|
||||
],
|
||||
rafterMaterial: [
|
||||
{
|
||||
id: 1,
|
||||
label: '木製',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '強制',
|
||||
},
|
||||
],
|
||||
waterproofMaterial: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'アスファルト屋根940（22kg以上）',
|
||||
},
|
||||
],
|
||||
insulationPresence: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'なし',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'あり',
|
||||
},
|
||||
],
|
||||
rafterDirection: [
|
||||
{
|
||||
id: 1,
|
||||
label: '垂直垂木',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '水平垂木',
|
||||
},
|
||||
],
|
||||
leakTrace: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'あり',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'なし',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export default function RoofForm(props: {
|
||||
roofInfo: SurveyDetailRequest | SurveyDetailInfo
|
||||
@ -34,7 +230,7 @@ export default function RoofForm(props: {
|
||||
{/* 전기 계약 용량 */}
|
||||
<div className="data-input-form-tit">電気契約容量</div>
|
||||
<div className="data-input mb5">
|
||||
<input type="text" className="input-frame" value={roofInfo?.CONTRACT_CAPACITY ?? ''} readOnly={mode === 'READ'} />
|
||||
<input type="text" className="input-frame" value={roofInfo?.contractCapacity ?? ''} readOnly={mode === 'READ'} />
|
||||
</div>
|
||||
{mode === 'READ' && <input type="text" className="input-frame" defaultValue={'10'} readOnly={mode === 'READ'} />}
|
||||
{mode !== 'READ' && (
|
||||
@ -52,7 +248,7 @@ export default function RoofForm(props: {
|
||||
<div className="data-input-form-bx">
|
||||
{/* 전기 소매 회사사 */}
|
||||
<div className="data-input-form-tit">電気小売会社</div>
|
||||
<input type="text" className="input-frame" value={roofInfo?.RETAIL_COMPANY ?? ''} readOnly={mode === 'READ'} />
|
||||
<input type="text" className="input-frame" value={roofInfo?.retailCompany ?? ''} readOnly={mode === 'READ'} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 전기 부대 설비 */}
|
||||
@ -69,19 +265,19 @@ export default function RoofForm(props: {
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`${item.id}`}
|
||||
checked={makeNumArr(roofInfo?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
|
||||
checked={makeNumArr(roofInfo?.supplementaryFacilities ?? '').includes(String(item.id))}
|
||||
readOnly={mode === 'READ'}
|
||||
/>
|
||||
<label htmlFor={`${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id={`supplementary_facilities_etc`} checked={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC !== null} readOnly />
|
||||
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
|
||||
<input type="checkbox" id={`supplementaryFacilitiesEtc`} checked={roofInfo?.supplementaryFacilitiesEtc !== null} readOnly />
|
||||
<label htmlFor={`supplementaryFacilitiesEtc`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.SUPPLEMENTARY_FACILITIES_ETC ?? ''} />
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.supplementaryFacilitiesEtc ?? ''} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
@ -104,7 +300,7 @@ export default function RoofForm(props: {
|
||||
</div>
|
||||
)} */}
|
||||
<div className="data-input-form-tit">設置希望システム</div>
|
||||
<SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="installationSystem" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,7 +322,7 @@ export default function RoofForm(props: {
|
||||
<option value="">新築</option>
|
||||
</select>
|
||||
)} */}
|
||||
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="constructionYear" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
{/* <div className="data-input flex">
|
||||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||||
@ -141,17 +337,17 @@ export default function RoofForm(props: {
|
||||
<div className="data-check-wrap">
|
||||
{roof_material.map((item) => (
|
||||
<div className="check-form-box" key={item.id}>
|
||||
<input type="checkbox" id={`${item.id}`} checked={makeNumArr(roofInfo?.ROOF_MATERIAL ?? '').includes(String(item.id))} readOnly />
|
||||
<input type="checkbox" id={`${item.id}`} checked={makeNumArr(roofInfo?.roofMaterial ?? '').includes(String(item.id))} readOnly />
|
||||
<label htmlFor={`${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id={`roof_material_etc`} checked={roofInfo?.ROOF_MATERIAL_ETC !== null} readOnly />
|
||||
<label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
|
||||
<input type="checkbox" id={`roofMaterialEtc`} checked={roofInfo?.roofMaterialEtc !== null} readOnly />
|
||||
<label htmlFor={`roofMaterialEtc`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.ROOF_MATERIAL_ETC ?? ''} />
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={roofInfo?.roofMaterialEtc ?? ''} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
@ -168,7 +364,7 @@ export default function RoofForm(props: {
|
||||
<option value="">太陽光発電</option>
|
||||
</select>
|
||||
)} */}
|
||||
<SelectedBox column="ROOF_SHAPE" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="roofShape" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||||
@ -178,46 +374,46 @@ export default function RoofForm(props: {
|
||||
{/* 지붕 경사도도 */}
|
||||
<div className="data-input-form-tit">屋根の斜面</div>
|
||||
<div className="data-input flex">
|
||||
<input type="text" className="input-frame" value={roofInfo?.ROOF_SLOPE ?? ''} readOnly={mode === 'READ'} />
|
||||
<input type="text" className="input-frame" value={roofInfo?.roofSlope ?? ''} readOnly={mode === 'READ'} />
|
||||
<span>寸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 주택구조조 */}
|
||||
<div className="data-input-form-tit">住宅構造</div>
|
||||
<RadioSelected column="HOUSE_STRUCTURE" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="houseStructure" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 서까래 재질 */}
|
||||
<div className="data-input-form-tit">垂木材質</div>
|
||||
<RadioSelected column="RAFTER_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="rafterMaterial" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 서까래 크기 */}
|
||||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||||
<div className="data-input mb5">
|
||||
<SelectedBox column="RAFTER_SIZE" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="rafterSize" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 서까래 피치 */}
|
||||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||||
<div className="data-input mb5">
|
||||
<SelectedBox column="RAFTER_PITCH" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="rafterPitch" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 서까래 방향 */}
|
||||
<div className="data-input-form-tit red-f">垂木の方向</div>
|
||||
<div className="data-check-wrap mb0">
|
||||
<RadioSelected column="RAFTER_DIRECTION" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="rafterDirection" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 노지판 종류류 */}
|
||||
<div className="data-input-form-tit">路地板の種類</div>
|
||||
<div className="data-input mb5">
|
||||
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
@ -226,7 +422,7 @@ export default function RoofForm(props: {
|
||||
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
|
||||
</div>
|
||||
<div className="data-input flex">
|
||||
<input type="text" className="input-frame" value={roofInfo?.OPEN_FIELD_PLATE_THICKNESS ?? ''} readOnly={mode === 'READ'} />
|
||||
<input type="text" className="input-frame" value={roofInfo?.openFieldPlateThickness ?? ''} readOnly={mode === 'READ'} />
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,28 +430,28 @@ export default function RoofForm(props: {
|
||||
{/* 누수 흔적 */}
|
||||
<div className="data-input-form-tit ">水漏れの痕跡</div>
|
||||
<div className="data-check-wrap mb0">
|
||||
<RadioSelected column="LEAK_TRACE" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="leakTrace" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 방수재 종류 */}
|
||||
<div className="data-input-form-tit red-f">防水材の種類</div>
|
||||
<RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="waterproofMaterial" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 단열재 유무 */}
|
||||
<div className="data-input-form-tit red-f">断熱材の有無</div>
|
||||
<RadioSelected column="INSULATION_PRESENCE" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<RadioSelected column="insulationPresence" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 지붕 구조의 순서 */}
|
||||
<div className="data-input-form-tit red-f">屋根構造の順序</div>
|
||||
<SelectedBox column="STRUCTURE_ORDER" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 지붕 제품명 설치 가능 여부 확인 */}
|
||||
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
|
||||
<SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
<SelectedBox column="installationAvailability" detailInfoData={roofInfo as SurveyDetailInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 메모 */}
|
||||
@ -266,7 +462,7 @@ export default function RoofForm(props: {
|
||||
name=""
|
||||
id=""
|
||||
placeholder="TextArea Filed"
|
||||
value={roofInfo?.MEMO ?? ''}
|
||||
value={roofInfo?.memo ?? ''}
|
||||
readOnly={mode === 'READ'}
|
||||
></textarea>
|
||||
</div>
|
||||
@ -280,7 +476,7 @@ export default function RoofForm(props: {
|
||||
|
||||
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo }) => {
|
||||
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
||||
const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
||||
const etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -296,18 +492,18 @@ const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoDat
|
||||
|
||||
const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
|
||||
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
||||
if (column === 'LEAK_TRACE') {
|
||||
if (column === 'leakTrace') {
|
||||
selectedId = Number(selectedId)
|
||||
if (!selectedId) selectedId = 2
|
||||
}
|
||||
|
||||
let etcValue = null
|
||||
if (column !== 'RAFTER_DIRECTION') {
|
||||
etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
||||
if (column !== 'rafterDirection') {
|
||||
etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
|
||||
}
|
||||
const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
|
||||
|
||||
console.log('column: selectedId', column, selectedId)
|
||||
// console.log('column: selectedId', column, selectedId)
|
||||
return (
|
||||
<>
|
||||
{radioEtcData[column as keyof typeof radioEtcData].map((item) => (
|
||||
@ -316,10 +512,10 @@ const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoD
|
||||
<label htmlFor={`${item.id}`}>{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
{column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
|
||||
{column !== 'rafterDirection' && column !== 'leakTrace' && column !== 'insulationPresence' && (
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
|
||||
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
|
||||
<input type="radio" name={column} id={`${column}Etc`} value="etc" disabled checked={etcChecked} />
|
||||
<label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
)}
|
||||
{etcChecked && (
|
||||
|
||||
@ -1,141 +0,0 @@
|
||||
import { SurveyDetailRequest } from '@/types/Survey'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export const supplementary_facilities = [
|
||||
{ id: 1, name: 'エコキュート' }, //에코큐트
|
||||
{ id: 2, name: 'エネパーム' }, //에네팜
|
||||
{ id: 3, name: '蓄電池システム' }, //축전지시스템
|
||||
{ id: 4, name: '太陽光発電' }, //태양광발전
|
||||
]
|
||||
|
||||
export const roof_material = [
|
||||
{ id: 1, name: 'スレート' }, //슬레이트
|
||||
{ id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
|
||||
{ id: 3, name: '瓦' }, //기와
|
||||
{ id: 4, name: '金属屋根' }, //금속지붕
|
||||
]
|
||||
|
||||
export default function MultiCheckbox({
|
||||
column,
|
||||
setDetailInfoData,
|
||||
detailInfoData,
|
||||
}: {
|
||||
column: string
|
||||
setDetailInfoData: (data: any) => void
|
||||
detailInfoData: SurveyDetailRequest
|
||||
}) {
|
||||
const selectList = column === 'SUPPLEMENTARY_FACILITIES' ? supplementary_facilities : roof_material
|
||||
|
||||
const [isOtherChecked, setIsOtherChecked] = useState(false)
|
||||
const [otherValue, setOtherValue] = useState('')
|
||||
|
||||
const makeNumArr = (value: string) => {
|
||||
return value
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v.length > 0)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
|
||||
setIsOtherChecked(true)
|
||||
setOtherValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
|
||||
}
|
||||
}, [detailInfoData])
|
||||
|
||||
const handleCheckbox = (dataIndex: number) => {
|
||||
const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
|
||||
|
||||
let newValue: string[]
|
||||
if (value.includes(String(dataIndex))) {
|
||||
// 체크 해제
|
||||
newValue = value.filter((v) => v !== String(dataIndex))
|
||||
} else {
|
||||
// 체크
|
||||
if (column === 'ROOF_MATERIAL') {
|
||||
// 기타가 체크되어 있는지 확인
|
||||
const isOtherSelected = isOtherChecked
|
||||
// 현재 선택된 항목 수 + 기타 선택 여부
|
||||
const totalSelected = value.length + (isOtherSelected ? 1 : 0)
|
||||
|
||||
if (totalSelected >= 2) {
|
||||
alert('屋根材は最大2個まで選択可能です。')
|
||||
return
|
||||
}
|
||||
}
|
||||
newValue = [...value, String(dataIndex)]
|
||||
}
|
||||
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
[column]: newValue.join(', '),
|
||||
})
|
||||
}
|
||||
|
||||
const handleOtherCheckbox = () => {
|
||||
if (column === 'ROOF_MATERIAL') {
|
||||
const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
|
||||
const currentSelected = value.length
|
||||
if (!isOtherChecked && currentSelected >= 2) {
|
||||
alert('Up to two roofing materials can be selected.')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const newIsOtherChecked = !isOtherChecked
|
||||
setIsOtherChecked(newIsOtherChecked)
|
||||
setOtherValue('')
|
||||
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
[`${column}_ETC`]: newIsOtherChecked ? '' : null,
|
||||
})
|
||||
}
|
||||
|
||||
const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
setOtherValue(value)
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
[`${column}_ETC`]: value,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{column === 'SUPPLEMENTARY_FACILITIES' ? (
|
||||
<>
|
||||
<div className="data-input-form-tit">
|
||||
電気袋設備<span>※複数選択可能</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="data-input-form-tit">
|
||||
屋根材<span>※最大2個まで選択可能</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="data-check-wrap">
|
||||
{selectList.map((item) => (
|
||||
<div className="check-form-box" key={item.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`${column}_ch${item.id}`}
|
||||
checked={makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')).includes(String(item.id))}
|
||||
onChange={() => handleCheckbox(item.id)}
|
||||
/>
|
||||
<label htmlFor={`${column}_ch${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id={`${column}_ch05`} checked={isOtherChecked} onChange={handleOtherCheckbox} />
|
||||
<label htmlFor={`${column}_ch05`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" disabled={!isOtherChecked} value={otherValue} onChange={handleOtherInputChange} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,175 +0,0 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { SurveyDetailRequest } from '@/types/Survey'
|
||||
|
||||
type RadioEtcKeys = 'HOUSE_STRUCTURE' | 'RAFTER_MATERIAL' | 'WATERPROOF_MATERIAL' | 'INSULATION_PRESENCE' | 'RAFTER_DIRECTION' | 'LEAK_TRACE'
|
||||
|
||||
const translateJapanese: Record<RadioEtcKeys, string> = {
|
||||
HOUSE_STRUCTURE: '住宅構造',
|
||||
RAFTER_MATERIAL: '垂木材質',
|
||||
WATERPROOF_MATERIAL: '防水材の種類',
|
||||
INSULATION_PRESENCE: '断熱材の有無',
|
||||
RAFTER_DIRECTION: '垂木の方向',
|
||||
LEAK_TRACE: '水漏れの痕跡',
|
||||
}
|
||||
|
||||
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
|
||||
HOUSE_STRUCTURE: [
|
||||
{
|
||||
id: 1,
|
||||
label: '木製',
|
||||
},
|
||||
],
|
||||
RAFTER_MATERIAL: [
|
||||
{
|
||||
id: 1,
|
||||
label: '木製',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '強制',
|
||||
},
|
||||
],
|
||||
WATERPROOF_MATERIAL: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'アスファルト屋根940（22kg以上）',
|
||||
},
|
||||
],
|
||||
INSULATION_PRESENCE: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'なし',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'あり',
|
||||
},
|
||||
],
|
||||
RAFTER_DIRECTION: [
|
||||
{
|
||||
id: 1,
|
||||
label: '垂直垂木',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '水平垂木',
|
||||
},
|
||||
],
|
||||
LEAK_TRACE: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'あり',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'なし',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export default function RadioEtc({
|
||||
column,
|
||||
setDetailInfoData,
|
||||
detailInfoData,
|
||||
}: {
|
||||
column: RadioEtcKeys
|
||||
setDetailInfoData: (data: any) => void
|
||||
detailInfoData: SurveyDetailRequest
|
||||
}) {
|
||||
const [isEtcSelected, setIsEtcSelected] = useState(false)
|
||||
const [etcValue, setEtcValue] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
|
||||
setIsEtcSelected(true)
|
||||
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
|
||||
}
|
||||
}, [detailInfoData])
|
||||
|
||||
const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// const value = e.target.value
|
||||
// if (column === 'INSULATION_PRESENCE') {
|
||||
// setIsEtcSelected(value === '2')
|
||||
// setDetailInfoData({
|
||||
// ...detailInfoData,
|
||||
// [column]: value,
|
||||
// })
|
||||
// } else if (value === 'etc') {
|
||||
// setIsEtcSelected(true)
|
||||
// setDetailInfoData({
|
||||
// ...detailInfoData,
|
||||
// [column]: null,
|
||||
// })
|
||||
// } else {
|
||||
// setIsEtcSelected(false)
|
||||
// setEtcValue('')
|
||||
// setDetailInfoData({
|
||||
// ...detailInfoData,
|
||||
// [column]: value,
|
||||
// [`${column}_ETC`]: null,
|
||||
// })
|
||||
// }
|
||||
const value = e.target.value
|
||||
const isSpecialCase = column === 'INSULATION_PRESENCE'
|
||||
const isEtc = value === 'etc'
|
||||
const isSpecialEtc = isSpecialCase && value === '2'
|
||||
|
||||
const updatedData: typeof detailInfoData = {
|
||||
...detailInfoData,
|
||||
[column]: isEtc ? null : value,
|
||||
[`${column}_ETC`]: isEtc ? '' : null,
|
||||
}
|
||||
|
||||
if (isSpecialEtc) {
|
||||
updatedData[column] = value
|
||||
}
|
||||
|
||||
setIsEtcSelected(isEtc || isSpecialEtc)
|
||||
if (!isEtc) setEtcValue('')
|
||||
setDetailInfoData(updatedData)
|
||||
}
|
||||
|
||||
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
setEtcValue(value)
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
[`${column}_ETC`]: value,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit red-f">{translateJapanese[column]}</div>
|
||||
{radioEtcData[column].map((item) => (
|
||||
<div className="radio-form-box mb10" key={item.id}>
|
||||
<input
|
||||
type="radio"
|
||||
name={column}
|
||||
id={`${column}_${item.id}`}
|
||||
value={item.id.toString()}
|
||||
onChange={handleRadioChange}
|
||||
checked={detailInfoData[column] === item.id.toString()}
|
||||
/>
|
||||
<label htmlFor={`${column}_${item.id}`}>{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
{column !== 'INSULATION_PRESENCE' && (
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name={column} id={`${column}_ETC`} value="etc" onChange={handleRadioChange} checked={isEtcSelected} />
|
||||
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
)}
|
||||
<div className="data-input">
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
disabled={column === 'INSULATION_PRESENCE' ? !isEtcSelected : !isEtcSelected}
|
||||
value={etcValue}
|
||||
onChange={handleEtcInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,246 +0,0 @@
|
||||
import type { SurveyDetailRequest } from '@/types/Survey'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export type SelectBoxKeys =
|
||||
| 'INSTALLATION_SYSTEM'
|
||||
| 'CONSTRUCTION_YEAR'
|
||||
| 'ROOF_SHAPE'
|
||||
| 'RAFTER_PITCH'
|
||||
| 'RAFTER_SIZE'
|
||||
| 'OPEN_FIELD_PLATE_KIND'
|
||||
| 'STRUCTURE_ORDER'
|
||||
| 'INSTALLATION_AVAILABILITY'
|
||||
|
||||
const font: Record<SelectBoxKeys, string> = {
|
||||
INSTALLATION_SYSTEM: 'data-input-form-tit red-f',
|
||||
CONSTRUCTION_YEAR: 'data-input-form-tit red-f',
|
||||
ROOF_SHAPE: 'data-input-form-tit',
|
||||
RAFTER_PITCH: 'data-input-form-tit red-f',
|
||||
RAFTER_SIZE: 'data-input-form-tit red-f',
|
||||
OPEN_FIELD_PLATE_KIND: 'data-input-form-tit',
|
||||
STRUCTURE_ORDER: 'data-input-form-tit red-f',
|
||||
INSTALLATION_AVAILABILITY: 'data-input-form-tit',
|
||||
}
|
||||
|
||||
const translateJapanese: Record<SelectBoxKeys, string> = {
|
||||
INSTALLATION_SYSTEM: '設置希望システム',
|
||||
CONSTRUCTION_YEAR: '建築年数',
|
||||
ROOF_SHAPE: '屋根の形状',
|
||||
RAFTER_PITCH: '垂木傾斜',
|
||||
RAFTER_SIZE: '垂木サイズ',
|
||||
OPEN_FIELD_PLATE_KIND: '路地板の種類',
|
||||
STRUCTURE_ORDER: '屋根構造の順序',
|
||||
INSTALLATION_AVAILABILITY: '屋根製品名 設置可否確認',
|
||||
}
|
||||
|
||||
export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
|
||||
INSTALLATION_SYSTEM: [
|
||||
{
|
||||
id: 1,
|
||||
name: '太陽光発電', //태양광발전
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '蓄電池システム', //축전지시스템
|
||||
},
|
||||
],
|
||||
CONSTRUCTION_YEAR: [
|
||||
{
|
||||
id: 1,
|
||||
name: '新築', //신축
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '既築', //기존
|
||||
},
|
||||
],
|
||||
ROOF_SHAPE: [
|
||||
{
|
||||
id: 1,
|
||||
name: '切妻', //박공지붕
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '寄棟', //기동
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '片流れ', //한쪽흐름
|
||||
},
|
||||
],
|
||||
RAFTER_SIZE: [
|
||||
{
|
||||
id: 1,
|
||||
name: '幅35mm以上×高さ48mm以上',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '幅36mm以上×高さ46mm以上',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '幅37mm以上×高さ43mm以上',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '幅38mm以上×高さ40mm以上',
|
||||
},
|
||||
],
|
||||
RAFTER_PITCH: [
|
||||
{
|
||||
id: 1,
|
||||
name: '455mm以下',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '500mm以下',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '606mm以下',
|
||||
},
|
||||
],
|
||||
OPEN_FIELD_PLATE_KIND: [
|
||||
{
|
||||
id: 1,
|
||||
name: '構造用合板', //구조용합판
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'OSB', //OSB
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'パーティクルボード', //파티클보드
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '小幅板', //소판
|
||||
},
|
||||
],
|
||||
STRUCTURE_ORDER: [
|
||||
{
|
||||
id: 1,
|
||||
name: '屋根材', //지붕재
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '防水材', //방수재
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '屋根の基礎', //지붕의기초
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '垂木', //서까래
|
||||
},
|
||||
],
|
||||
INSTALLATION_AVAILABILITY: [
|
||||
{
|
||||
id: 1,
|
||||
name: '確認済み', //확인완료
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '未確認', //미확인
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export default function SelectBoxForm({
|
||||
column,
|
||||
setDetailInfoData,
|
||||
detailInfoData,
|
||||
}: {
|
||||
column: SelectBoxKeys
|
||||
setDetailInfoData: (data: any) => void
|
||||
detailInfoData: SurveyDetailRequest
|
||||
}) {
|
||||
const [isEtcSelected, setIsEtcSelected] = useState(false)
|
||||
const [etcValue, setEtcValue] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
|
||||
setIsEtcSelected(true)
|
||||
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
|
||||
}
|
||||
}, [detailInfoData])
|
||||
|
||||
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value
|
||||
const isSpecialCase = column === 'CONSTRUCTION_YEAR' || column === 'INSTALLATION_AVAILABILITY'
|
||||
const isEtc = value === 'etc'
|
||||
const isSpecialEtc = isSpecialCase && value === '2'
|
||||
|
||||
const updatedData: typeof detailInfoData = {
|
||||
...detailInfoData,
|
||||
[column]: isEtc ? null : value,
|
||||
[`${column}_ETC`]: isEtc ? '' : null,
|
||||
}
|
||||
|
||||
// 건축연수 + 설치가능여부는 2번 선택 시 input 활성화
|
||||
if (isSpecialEtc) {
|
||||
updatedData[column] = value
|
||||
}
|
||||
|
||||
setIsEtcSelected(isEtc || isSpecialEtc)
|
||||
if (!isEtc) setEtcValue('')
|
||||
setDetailInfoData(updatedData)
|
||||
}
|
||||
|
||||
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
setEtcValue(value)
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
[`${column}_ETC`]: value,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="data-input-form-bx">
|
||||
<div className={font[column as keyof typeof font]}>{translateJapanese[column as keyof typeof translateJapanese]}</div>
|
||||
<div className="data-input mb5">
|
||||
<select
|
||||
className="select-form"
|
||||
name={column}
|
||||
id={column}
|
||||
onChange={handleSelectChange}
|
||||
value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_ETC`] ? 'etc' : isEtcSelected ? 'etc' : ''}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
{selectBoxOptions[column as keyof typeof selectBoxOptions].map((option) => (
|
||||
<option key={option.id} value={option.id}>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
{column !== 'INSTALLATION_AVAILABILITY' && column !== 'CONSTRUCTION_YEAR' && <option value="etc">その他 (直接入力)</option>}
|
||||
</select>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
value={etcValue ?? ''}
|
||||
onChange={handleEtcInputChange}
|
||||
disabled={
|
||||
column === 'INSTALLATION_AVAILABILITY'
|
||||
? !Boolean(detailInfoData[column])
|
||||
: column === 'CONSTRUCTION_YEAR'
|
||||
? detailInfoData[column] !== '2' // 既築(2)가 아닐 때 비활성화
|
||||
: !isEtcSelected
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,244 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { SurveyBasicRequest } from '@/types/Survey'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
import { useAddressStore } from '@/store/addressStore'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
// import { useUserType } from '@/hooks/useUserType'
|
||||
|
||||
const defaultBasicInfoForm: SurveyBasicRequest = {
|
||||
REPRESENTATIVE: '',
|
||||
STORE: null,
|
||||
CONSTRUCTION_POINT: null,
|
||||
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
|
||||
BUILDING_NAME: null,
|
||||
CUSTOMER_NAME: null,
|
||||
POST_CODE: null,
|
||||
ADDRESS: null,
|
||||
ADDRESS_DETAIL: null,
|
||||
SUBMISSION_STATUS: false,
|
||||
SUBMISSION_DATE: null,
|
||||
}
|
||||
|
||||
const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['REPRESENTATIVE', 'BUILDING_NAME', 'CUSTOMER_NAME']
|
||||
|
||||
export default function BasicForm() {
|
||||
const searchParams = useSearchParams()
|
||||
const id = searchParams.get('id')
|
||||
const router = useRouter()
|
||||
|
||||
const { setBasicInfoSelected } = useSurveySaleTabState()
|
||||
const { surveyDetail, createSurvey, isCreatingSurvey, updateSurvey, isUpdatingSurvey } = useServey(Number(id))
|
||||
|
||||
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
|
||||
|
||||
const { addressData } = useAddressStore()
|
||||
const { session } = useSessionStore()
|
||||
|
||||
const popupController = usePopupController()
|
||||
|
||||
useEffect(() => {
|
||||
if (surveyDetail) {
|
||||
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
|
||||
setBasicInfoData(rest)
|
||||
}
|
||||
if (addressData) {
|
||||
setBasicInfoData({
|
||||
...basicInfoData,
|
||||
POST_CODE: addressData.post_code,
|
||||
ADDRESS: addressData.address,
|
||||
ADDRESS_DETAIL: addressData.address_detail,
|
||||
})
|
||||
}
|
||||
if (session?.isLoggedIn) {
|
||||
setBasicInfoData((prev) => ({
|
||||
...prev,
|
||||
REPRESENTATIVE: session?.userId ?? '',
|
||||
STORE: session?.storeNm ?? '',
|
||||
CONSTRUCTION_POINT: session?.builderNo ?? '',
|
||||
}))
|
||||
}
|
||||
setBasicInfoSelected()
|
||||
}, [surveyDetail, addressData, session?.isLoggedIn, session?.userId, session?.storeNm, session?.builderNo])
|
||||
|
||||
const focusInput = (input: keyof SurveyBasicRequest) => {
|
||||
const inputElement = document.getElementById(input)
|
||||
if (inputElement) {
|
||||
inputElement.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const validateSurvey = (basicInfoData: SurveyBasicRequest) => {
|
||||
const emptyField = REQUIRED_FIELDS.find((field) => !basicInfoData[field])
|
||||
if (emptyField) {
|
||||
focusInput(emptyField)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
|
||||
setBasicInfoData({ ...basicInfoData, [key]: value })
|
||||
}
|
||||
|
||||
const handleSave = async (isTemporary: boolean) => {
|
||||
if (id) {
|
||||
// updateSurvey(basicInfoData)
|
||||
alert('保存しました。')
|
||||
// router.push(`/survey-sale/${id}?tab=basic-info`)
|
||||
}
|
||||
if (isTemporary) {
|
||||
// const saveId = await createSurvey(basicInfoData)
|
||||
alert('一時保存されました。')
|
||||
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
|
||||
} else {
|
||||
if (validateSurvey(basicInfoData)) {
|
||||
// const saveId = await createSurvey(basicInfoData)
|
||||
alert('保存しました。')
|
||||
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isCreatingSurvey || isUpdatingSurvey) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">担当者名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="representative"
|
||||
value={session?.userId ? session?.userId : basicInfoData.REPRESENTATIVE}
|
||||
onChange={(e) => handleChange('REPRESENTATIVE', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
|
||||
<>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">販売店</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="store"
|
||||
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
|
||||
onChange={(e) => handleChange('STORE', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{(session?.role === 'Partner' || session?.role === 'Builder') && (
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">施工店</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="construction_point"
|
||||
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
|
||||
onChange={(e) => handleChange('CONSTRUCTION_POINT', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sale-frame">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">現地調査日</div>
|
||||
<div className="date-input">
|
||||
<button className="date-btn">
|
||||
<i className="date-icon"></i>
|
||||
</button>
|
||||
<input
|
||||
type="date"
|
||||
className="date-frame"
|
||||
id="INVESTIGATION_DATE"
|
||||
value={basicInfoData.INVESTIGATION_DATE ?? ''}
|
||||
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建物名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="BUILDING_NAME"
|
||||
value={basicInfoData.BUILDING_NAME ?? ''}
|
||||
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">顧客名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="CUSTOMER_NAME"
|
||||
value={basicInfoData.CUSTOMER_NAME ?? ''}
|
||||
onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建物の住所</div>
|
||||
<div className="form-flex">
|
||||
<div className="form-bx">
|
||||
<input type="text" className="input-frame" id="POST_CODE" value={basicInfoData.POST_CODE ?? ''} readOnly />
|
||||
</div>
|
||||
<div className="form-bx">
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
name="address"
|
||||
id="ADDRESS"
|
||||
value={basicInfoData.ADDRESS ?? ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-btn">
|
||||
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
|
||||
郵便番号<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="ADDRESS_DETAIL"
|
||||
value={basicInfoData.ADDRESS_DETAIL ?? ''}
|
||||
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-flex-wrap">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
|
||||
一時保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon" onClick={() => handleSave(false)}>
|
||||
保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
'use client'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
import { SurveyBasicInfo } from '@/types/Survey'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function DetailButton({ surveyDetail }: { surveyDetail: SurveyBasicInfo | null }) {
|
||||
const router = useRouter()
|
||||
const { session } = useSessionStore()
|
||||
const { submitSurvey, deleteSurvey } = useServey(surveyDetail?.ID ?? 0)
|
||||
|
||||
const searchParams = useSearchParams()
|
||||
const isTemp = searchParams.get('isTemporary')
|
||||
const [isTemporary, setIsTemporary] = useState(isTemp === 'true')
|
||||
|
||||
const checkRole = () => {
|
||||
switch (session?.role) {
|
||||
case 'T01':
|
||||
return session?.userNm === surveyDetail?.REPRESENTATIVE ? true : false
|
||||
case 'Admin':
|
||||
return session?.storeNm === surveyDetail?.STORE ? true : false
|
||||
case 'Admin_Sub':
|
||||
return session?.storeNm === surveyDetail?.STORE ? true : false
|
||||
case 'Builder':
|
||||
return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
|
||||
case 'Partner':
|
||||
return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const result = checkRole()
|
||||
if (result) {
|
||||
if (isTemporary) {
|
||||
alert('一時保存されたデータは提出できません。')
|
||||
return
|
||||
}
|
||||
window.neoConfirm(
|
||||
'提出しますか？？',
|
||||
async () => {
|
||||
if (surveyDetail?.ID) {
|
||||
// TODO: 제출 페이지 추가
|
||||
alert('SUBMIT POPUP!!!!!!!!!!!')
|
||||
await submitSurvey()
|
||||
}
|
||||
},
|
||||
() => null,
|
||||
)
|
||||
}
|
||||
}
|
||||
const handleUpdate = () => {
|
||||
const result = checkRole()
|
||||
if (result) {
|
||||
// router.push(`/survey-sale/basic-info?id=${surveyDetail?.ID}&isTemp=${isTemporary}`)
|
||||
router.push(`/survey-sale/regist?id=${surveyDetail?.ID}`)
|
||||
} else {
|
||||
alert('担当者のみ修正可能です。')
|
||||
}
|
||||
}
|
||||
const handleDelete = async () => {
|
||||
window.neoConfirm(
|
||||
'削除しますか？',
|
||||
async () => {
|
||||
if (surveyDetail?.ID) {
|
||||
if (session.userNm === surveyDetail?.REPRESENTATIVE) {
|
||||
await deleteSurvey()
|
||||
alert('削除されました。')
|
||||
router.push('/survey-sale')
|
||||
} else {
|
||||
alert('担当者のみ削除可能です。')
|
||||
}
|
||||
}
|
||||
},
|
||||
() => null,
|
||||
)
|
||||
}
|
||||
|
||||
const isSubmitter = session?.storeNm === surveyDetail?.STORE && session?.builderNo === surveyDetail?.CONSTRUCTION_POINT
|
||||
|
||||
return (
|
||||
<div className="btn-flex-wrap">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
{isSubmitter && surveyDetail?.SUBMISSION_STATUS ? (
|
||||
<></>
|
||||
) : (
|
||||
<>
|
||||
{isTemporary || surveyDetail?.SUBMISSION_STATUS ? (
|
||||
<></>
|
||||
) : (
|
||||
<>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon" onClick={handleSubmit}>
|
||||
提出<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={handleUpdate}>
|
||||
修正<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={handleDelete}>
|
||||
削除<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,256 +0,0 @@
|
||||
import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
|
||||
import DetailButton from './detailButton'
|
||||
import { roof_material, supplementary_facilities } from '../form/etcProcess/MultiCheckEtc'
|
||||
import { selectBoxOptions } from '../form/etcProcess/SelectBoxEtc'
|
||||
import { radioEtcData } from '../form/etcProcess/RadioEtc'
|
||||
|
||||
export default function RoofDetailForm({
|
||||
surveyDetail,
|
||||
isLoadingSurveyDetail,
|
||||
}: {
|
||||
surveyDetail: SurveyBasicInfo | null
|
||||
isLoadingSurveyDetail: boolean
|
||||
}) {
|
||||
console.log(surveyDetail)
|
||||
|
||||
const makeNumArr = (value: string) => {
|
||||
return value
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v.length > 0)
|
||||
}
|
||||
|
||||
if (isLoadingSurveyDetail) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
{/* 전기 계약 용량 */}
|
||||
<div className="data-input-form-tit">電気契約容量</div>
|
||||
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.CONTRACT_CAPACITY ?? ''} />
|
||||
</div>
|
||||
{/* 전기 소매 회사 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気小売会社</div>
|
||||
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} />
|
||||
</div>
|
||||
{/* 전기 부대 설비 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気附属設備</div>
|
||||
<div className="data-check-wrap">
|
||||
{supplementary_facilities.map((item) => (
|
||||
<div className="check-form-box" key={item.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`${item.id}`}
|
||||
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
|
||||
readOnly
|
||||
/>
|
||||
<label htmlFor={`${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`supplementary_facilities_etc`}
|
||||
checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null}
|
||||
readOnly
|
||||
/>
|
||||
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
placeholder="-"
|
||||
readOnly
|
||||
value={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC ?? ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 설치 희망 시스템 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">設置希望システム</div>
|
||||
<SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 건축 연수 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建築年数</div>
|
||||
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 지붕재 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根材</div>
|
||||
<div className="data-check-wrap">
|
||||
{roof_material.map((item) => (
|
||||
<div className="check-form-box" key={item.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`${item.id}`}
|
||||
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL ?? '').includes(String(item.id))}
|
||||
readOnly
|
||||
/>
|
||||
<label htmlFor={`${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC !== null} readOnly />
|
||||
<label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC ?? ''} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 지붕 모양 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根の形状</div>
|
||||
<SelectedBox column="ROOF_SHAPE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 지붕 경사도 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根の斜面</div>
|
||||
<div className="data-input flex">
|
||||
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_SLOPE ?? ''} />
|
||||
<span>寸</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 주택 구조 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">住宅構造</div>
|
||||
<RadioSelected column="HOUSE_STRUCTURE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 서까래 재질 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">垂木の材質</div>
|
||||
<RadioSelected column="RAFTER_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 서까래 크기 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">垂木の大きさ</div>
|
||||
<SelectedBox column="RAFTER_SIZE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 서까래 피치 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">垂木のピッチ</div>
|
||||
<SelectedBox column="RAFTER_PITCH" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 서까래 방향 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">垂木の方向</div>
|
||||
<RadioSelected column="RAFTER_DIRECTION" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 노지판 종류 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">路地板の種類</div>
|
||||
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 노지판 두께 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">路地板厚</div>
|
||||
<div className="data-input flex">
|
||||
<input
|
||||
className="input-frame"
|
||||
type="text"
|
||||
placeholder="-"
|
||||
readOnly
|
||||
value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 누수 흔적 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">水漏れの痕跡</div>
|
||||
<RadioSelected column="LEAK_TRACE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 방수재 종류 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">防水材の種類</div>
|
||||
<RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 단열재 유무 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">断熱材の有無</div>
|
||||
<RadioSelected column="INSULATION_PRESENCE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 구조 순서 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根構造の順序</div>
|
||||
<SelectedBox column="STRUCTURE_ORDER" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 설치 가능 여부 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">設置可能な場合</div>
|
||||
<SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
||||
</div>
|
||||
{/* 메모 */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">メモ</div>
|
||||
<div className="data-input">
|
||||
<textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DetailButton surveyDetail={surveyDetail} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
|
||||
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
||||
const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
||||
|
||||
return (
|
||||
<>
|
||||
<select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
|
||||
<option value="">-</option>
|
||||
<option value="etc">その他 (直接入力)</option>
|
||||
<option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option>
|
||||
</select>
|
||||
{etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
|
||||
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
||||
if (column === 'LEAK_TRACE') {
|
||||
selectedId = Number(selectedId)
|
||||
if (!selectedId) selectedId = 2
|
||||
}
|
||||
|
||||
let etcValue = null
|
||||
if (column !== 'RAFTER_DIRECTION') {
|
||||
etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
||||
}
|
||||
const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
|
||||
|
||||
console.log('column: selectedId', column, selectedId)
|
||||
return (
|
||||
<>
|
||||
{radioEtcData[column as keyof typeof radioEtcData].map((item) => (
|
||||
<div className="radio-form-box mb10" key={item.id}>
|
||||
<input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} />
|
||||
<label htmlFor={`${item.id}`}>{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
{column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
|
||||
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
|
||||
</div>
|
||||
)}
|
||||
{etcChecked && (
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" placeholder="-" readOnly value={etcValue?.toString() ?? ''} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,353 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
|
||||
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { SurveyDetailRequest } from '@/types/Survey'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import MultiCheckEtc from '../form/etcProcess/MultiCheckEtc'
|
||||
import SelectBoxEtc from '../form/etcProcess/SelectBoxEtc'
|
||||
import RadioEtc from '../form/etcProcess/RadioEtc'
|
||||
|
||||
const defaultDetailInfoForm: SurveyDetailRequest = {
|
||||
CONTRACT_CAPACITY: null,
|
||||
RETAIL_COMPANY: null,
|
||||
SUPPLEMENTARY_FACILITIES: null,
|
||||
SUPPLEMENTARY_FACILITIES_ETC: null,
|
||||
INSTALLATION_SYSTEM: null,
|
||||
INSTALLATION_SYSTEM_ETC: null,
|
||||
CONSTRUCTION_YEAR: null,
|
||||
CONSTRUCTION_YEAR_ETC: null,
|
||||
ROOF_MATERIAL: null,
|
||||
ROOF_MATERIAL_ETC: null,
|
||||
ROOF_SHAPE: null,
|
||||
ROOF_SHAPE_ETC: null,
|
||||
ROOF_SLOPE: null,
|
||||
HOUSE_STRUCTURE: '1',
|
||||
HOUSE_STRUCTURE_ETC: null,
|
||||
RAFTER_MATERIAL: '1',
|
||||
RAFTER_MATERIAL_ETC: null,
|
||||
RAFTER_SIZE: null,
|
||||
RAFTER_SIZE_ETC: null,
|
||||
RAFTER_PITCH: null,
|
||||
RAFTER_PITCH_ETC: null,
|
||||
RAFTER_DIRECTION: '1',
|
||||
OPEN_FIELD_PLATE_KIND: null,
|
||||
OPEN_FIELD_PLATE_KIND_ETC: null,
|
||||
OPEN_FIELD_PLATE_THICKNESS: null,
|
||||
LEAK_TRACE: false,
|
||||
WATERPROOF_MATERIAL: null,
|
||||
WATERPROOF_MATERIAL_ETC: null,
|
||||
INSULATION_PRESENCE: '1',
|
||||
INSULATION_PRESENCE_ETC: null,
|
||||
STRUCTURE_ORDER: null,
|
||||
STRUCTURE_ORDER_ETC: null,
|
||||
INSTALLATION_AVAILABILITY: null,
|
||||
INSTALLATION_AVAILABILITY_ETC: null,
|
||||
MEMO: null,
|
||||
}
|
||||
|
||||
export default function RoofInfoForm() {
|
||||
const { setRoofInfoSelected } = useSurveySaleTabState()
|
||||
|
||||
useEffect(() => {
|
||||
setRoofInfoSelected()
|
||||
}, [])
|
||||
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const id = searchParams.get('id')
|
||||
|
||||
const { surveyDetail, createSurveyDetail, validateSurveyDetail } = useServey(Number(id))
|
||||
|
||||
const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
|
||||
|
||||
useEffect(() => {
|
||||
if (surveyDetail?.DETAIL_INFO) {
|
||||
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO
|
||||
setDetailInfoData(rest)
|
||||
}
|
||||
}, [surveyDetail])
|
||||
|
||||
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
|
||||
if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
|
||||
const stringValue = value.toString()
|
||||
if (stringValue.length > 5) {
|
||||
alert('保存できるサイズを超えました。')
|
||||
return
|
||||
}
|
||||
if (stringValue.includes('.')) {
|
||||
const decimalPlaces = stringValue.split('.')[1].length
|
||||
if (decimalPlaces > 1) {
|
||||
alert('小数点以下1桁までしか許されません。')
|
||||
return
|
||||
}
|
||||
}
|
||||
setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
|
||||
} else {
|
||||
setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
|
||||
}
|
||||
}
|
||||
|
||||
const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
|
||||
setDetailInfoData({ ...detailInfoData, [key]: value || null })
|
||||
}
|
||||
|
||||
const handleBooleanInput = (key: keyof SurveyDetailRequest, value: boolean) => {
|
||||
setDetailInfoData({ ...detailInfoData, [key]: value })
|
||||
}
|
||||
|
||||
const handleUnitInput = (value: string) => {
|
||||
const numericValue = detailInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
|
||||
setDetailInfoData({
|
||||
...detailInfoData,
|
||||
CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
console.log(detailInfoData)
|
||||
if (id) {
|
||||
const emptyField = validateSurveyDetail(detailInfoData)
|
||||
if (emptyField.trim() === '') {
|
||||
const updatedBasicInfoData = {
|
||||
DETAIL_INFO: detailInfoData,
|
||||
}
|
||||
try {
|
||||
createSurveyDetail({
|
||||
surveyId: Number(id),
|
||||
surveyDetail: updatedBasicInfoData,
|
||||
})
|
||||
alert('調査物件を保存しました。')
|
||||
} catch (error) {
|
||||
alert(error)
|
||||
throw new Error('failed to create survey detail: ' + error)
|
||||
}
|
||||
router.push(`/survey-sale`)
|
||||
} else {
|
||||
alert(emptyField + ' は必須項目です。')
|
||||
focusOnInput(emptyField)
|
||||
}
|
||||
} else {
|
||||
alert('基本情報を作成した後、屋根情報を作成することができます。')
|
||||
}
|
||||
}
|
||||
const focusOnInput = (field: string) => {
|
||||
const input = document.getElementById(field)
|
||||
if (input) {
|
||||
input.focus()
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame">
|
||||
<div className="sale-roof-title">電気関係</div>
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
{/* 전기계약 용량 - contract_capacity */}
|
||||
<div className="data-input-form-tit">電気契約容量</div>
|
||||
<div className="data-input mb5">
|
||||
<input
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''}
|
||||
onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<select
|
||||
className="select-form"
|
||||
name="CONTRACT_CAPACITY_UNIT"
|
||||
id="CONTRACT_CAPACITY_UNIT"
|
||||
onChange={(e) => handleUnitInput(e.target.value)}
|
||||
value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
<option value="kVA">kVA</option>
|
||||
<option value="A">A</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* 전기 소매 회사 - retail_company */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気小売会社</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
value={detailInfoData.RETAIL_COMPANY ?? ''}
|
||||
onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{/* 전기 부대 설비 - supplementary_facilities */}
|
||||
<div className="data-input-form-bx">
|
||||
<MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
</div>
|
||||
{/* 설치 희망 시스템 - installation_system */}
|
||||
<SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sale-frame">
|
||||
<div className="sale-roof-title">屋根関係</div>
|
||||
<div className="data-form-wrap">
|
||||
{/* 건축 연수 - construction_year */}
|
||||
<SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 지붕재 - roof_material */}
|
||||
<div className="data-input-form-bx">
|
||||
<MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
</div>
|
||||
{/* 지붕 모양 - roof_shape */}
|
||||
<SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 지붕 경사도 - roof_slope */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根の斜面</div>
|
||||
<div className="data-input flex">
|
||||
<input
|
||||
type="number"
|
||||
step={0.1}
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={detailInfoData.ROOF_SLOPE ?? ''}
|
||||
onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)}
|
||||
/>
|
||||
<span>寸</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 주택 구조 - house_structure */}
|
||||
<RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 서까래 재질 - rafter_material */}
|
||||
<RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 서까래 크기 - rafter_size */}
|
||||
<SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 서까래 피치 - rafter_pitch */}
|
||||
<SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 서까래 방향 - rafter_direction */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit red-f">垂木の方向</div>
|
||||
<div className="data-check-wrap mb0" id="rafter_direction">
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="RAFTER_DIRECTION"
|
||||
id="RAFTER_DIRECTION_1"
|
||||
value={1}
|
||||
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
|
||||
checked={detailInfoData.RAFTER_DIRECTION === '1'}
|
||||
/>
|
||||
<label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
|
||||
</div>
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="RAFTER_DIRECTION"
|
||||
id="RAFTER_DIRECTION_2"
|
||||
value={2}
|
||||
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
|
||||
checked={detailInfoData.RAFTER_DIRECTION === '2'}
|
||||
/>
|
||||
<label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 노지판 종류 - open_field_plate_kind */}
|
||||
<SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 노지판 두께 - open_field_plate_thickness */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
|
||||
</div>
|
||||
<div className="data-input flex">
|
||||
<input
|
||||
type="number"
|
||||
step={0.1}
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={detailInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
|
||||
onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 누수 흔적 - leak_trace */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit ">水漏れの痕跡</div>
|
||||
<div className="data-check-wrap mb0">
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="LEAK_TRACE"
|
||||
id="LEAK_TRACE_1"
|
||||
checked={detailInfoData.LEAK_TRACE === true}
|
||||
onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
|
||||
/>
|
||||
<label htmlFor="LEAK_TRACE_1">あり</label>
|
||||
</div>
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="LEAK_TRACE"
|
||||
id="LEAK_TRACE_2"
|
||||
checked={detailInfoData.LEAK_TRACE === false}
|
||||
onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
|
||||
/>
|
||||
<label htmlFor="LEAK_TRACE_2">なし</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 방수재 종류 - waterproof_material */}
|
||||
<RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 단열재 유무 - insulation_presence */}
|
||||
<RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 노지판 종류 - open_field_plate_kind */}
|
||||
<SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 설치 가능 여부 - installation_availability */}
|
||||
<SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
{/* 메모 - memo */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">メモ</div>
|
||||
<div className="data-input mb5">
|
||||
<select className="select-form" name="" id="">
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<textarea
|
||||
className="textarea-form"
|
||||
name="MEMO"
|
||||
id="MEMO"
|
||||
value={detailInfoData.MEMO ?? ''}
|
||||
onChange={(e) => handleTextInput('MEMO', e.target.value)}
|
||||
placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-flex-wrap">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={handleSave}>
|
||||
一時保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon" onClick={handleSave}>
|
||||
保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -7,33 +7,32 @@ import { useRouter } from 'next/navigation'
|
||||
import SearchForm from './SearchForm'
|
||||
import { useSurveyFilterStore } from '@/store/surveyFilterStore'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
import { SurveyBasicInfo } from '@/types/Survey'
|
||||
|
||||
export default function ListTable() {
|
||||
const router = useRouter()
|
||||
const { surveyList, isLoadingSurveyList, surveyListCount } = useServey()
|
||||
const { surveyList, isLoadingSurveyList } = useServey()
|
||||
const { offset, setOffset } = useSurveyFilterStore()
|
||||
|
||||
const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([])
|
||||
const [heldSurveyList, setHeldSurveyList] = useState<SurveyBasicInfo[]>([])
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
|
||||
const { session } = useSessionStore()
|
||||
|
||||
useEffect(() => {
|
||||
if (surveyList) {
|
||||
if (offset === 0) {
|
||||
setHeldSurveyList(surveyList)
|
||||
if (!session.isLoggedIn || !('data' in surveyList)) return
|
||||
if ('count' in surveyList && surveyList.count > 0) {
|
||||
if (offset > 0) {
|
||||
setHeldSurveyList((prev) => [...prev, ...surveyList.data])
|
||||
} else {
|
||||
setHeldSurveyList(prev => [...prev, ...surveyList])
|
||||
setHeldSurveyList(surveyList.data)
|
||||
}
|
||||
setHasMore(surveyListCount > offset + 10)
|
||||
setHasMore(surveyList.count > offset + 10)
|
||||
} else {
|
||||
setHeldSurveyList([])
|
||||
setHasMore(false)
|
||||
}
|
||||
}, [surveyList, surveyListCount, offset])
|
||||
|
||||
console.log('surveyList:: ', surveyList)
|
||||
console.log('heldSurveyList:: ', heldSurveyList)
|
||||
}, [surveyList, offset, session])
|
||||
|
||||
const handleDetailClick = (id: number) => {
|
||||
router.push(`/survey-sale/${id}`)
|
||||
@ -48,22 +47,22 @@ export default function ListTable() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchForm onItemsInit={handleItemsInit} memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
|
||||
<SearchForm memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
|
||||
{heldSurveyList.length > 0 ? (
|
||||
<div className="sale-frame">
|
||||
<ul className="sale-list-wrap">
|
||||
{heldSurveyList.map((survey) => (
|
||||
<li className="sale-list-item cursor-pointer" key={survey.ID} onClick={() => handleDetailClick(survey.ID)}>
|
||||
<li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
|
||||
<div className="sale-item-bx">
|
||||
<div className="sale-item-date-bx">
|
||||
<div className="sale-item-num">{survey.ID}</div>
|
||||
<div className="sale-item-date">{survey.INVESTIGATION_DATE}</div>
|
||||
<div className="sale-item-num">{survey.id}</div>
|
||||
<div className="sale-item-date">{survey.investigationDate}</div>
|
||||
</div>
|
||||
<div className="sale-item-tit">{survey.BUILDING_NAME}</div>
|
||||
<div className="sale-item-customer">{survey.CUSTOMER_NAME}</div>
|
||||
<div className="sale-item-tit">{survey.buildingName}</div>
|
||||
<div className="sale-item-customer">{survey.customerName}</div>
|
||||
<div className="sale-item-update-bx">
|
||||
<div className="sale-item-name">{survey.REPRESENTATIVE}</div>
|
||||
<div className="sale-item-update">{new Date(survey.UPT_DT).toLocaleString()}</div>
|
||||
<div className="sale-item-name">{survey.representative}</div>
|
||||
<div className="sale-item-update">{new Date(survey.uptDt).toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -4,7 +4,7 @@ import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurvey
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function SearchForm({ onItemsInit, memberRole, userId }: { onItemsInit: () => void; memberRole: string; userId: string }) {
|
||||
export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
|
||||
const router = useRouter()
|
||||
const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
|
||||
const [searchKeyword, setSearchKeyword] = useState(keyword)
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
|
||||
import { useEffect } from 'react'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
import { useAddressStore } from '@/store/addressStore'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
|
||||
export default function BasicRegist({
|
||||
basicInfoData,
|
||||
setBasicInfoData,
|
||||
}: {
|
||||
basicInfoData: SurveyBasicRequest
|
||||
setBasicInfoData: (data: SurveyBasicRequest) => void
|
||||
}) {
|
||||
const { addressData } = useAddressStore()
|
||||
const { session } = useSessionStore()
|
||||
|
||||
const popupController = usePopupController()
|
||||
|
||||
useEffect(() => {
|
||||
if (addressData) {
|
||||
setBasicInfoData({
|
||||
...basicInfoData,
|
||||
POST_CODE: addressData.post_code,
|
||||
ADDRESS: addressData.address,
|
||||
ADDRESS_DETAIL: addressData.address_detail,
|
||||
})
|
||||
}
|
||||
}, [addressData])
|
||||
|
||||
const handleChange = (key: keyof SurveyRegistRequest, value: string) => {
|
||||
setBasicInfoData({ ...basicInfoData, [key]: value })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame" id="basic-form-section">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">担当者名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="representative"
|
||||
value={session?.userNm ? session?.userNm : basicInfoData.REPRESENTATIVE}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
|
||||
<>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">販売店</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="store"
|
||||
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{(session?.role === 'Partner' || session?.role === 'Builder') && (
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">施工店</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="construction_point"
|
||||
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sale-frame">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">現地調査日</div>
|
||||
<div className="date-input">
|
||||
<button className="date-btn">
|
||||
<i className="date-icon"></i>
|
||||
</button>
|
||||
<input
|
||||
type="date"
|
||||
className="date-frame"
|
||||
id="INVESTIGATION_DATE"
|
||||
value={basicInfoData.INVESTIGATION_DATE ?? ''}
|
||||
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建物名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="BUILDING_NAME"
|
||||
value={basicInfoData.BUILDING_NAME ?? ''}
|
||||
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">顧客名</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="CUSTOMER_NAME"
|
||||
value={basicInfoData.CUSTOMER_NAME ?? ''}
|
||||
onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建物の住所</div>
|
||||
<div className="form-flex">
|
||||
<div className="form-bx">
|
||||
<input type="text" className="input-frame" id="POST_CODE" placeholder="郵便番号" value={basicInfoData.POST_CODE ?? ''} readOnly />
|
||||
</div>
|
||||
<div className="form-bx">
|
||||
<input
|
||||
className="input-frame"
|
||||
name="address"
|
||||
id="ADDRESS"
|
||||
placeholder="都道府県"
|
||||
value={basicInfoData.ADDRESS ?? ''}
|
||||
onChange={(e) => handleChange('ADDRESS', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-btn">
|
||||
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
|
||||
郵便番号<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
id="ADDRESS_DETAIL"
|
||||
value={basicInfoData.ADDRESS_DETAIL ?? ''}
|
||||
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
|
||||
import { SurveyDetailRequest } from '@/types/Survey'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
|
||||
export default function FormButton({
|
||||
surveyData,
|
||||
idParam,
|
||||
}: {
|
||||
surveyData: { basic: SurveyBasicRequest; roof: SurveyDetailRequest }
|
||||
idParam: string | null
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const { validateSurveyDetail, createSurvey, updateSurvey } = useServey(Number(idParam))
|
||||
|
||||
const saveData = {
|
||||
...surveyData.basic,
|
||||
DETAIL_INFO: surveyData.roof,
|
||||
}
|
||||
|
||||
const focusInput = (input: keyof SurveyRegistRequest) => {
|
||||
const inputElement = document.getElementById(input)
|
||||
if (inputElement) {
|
||||
inputElement.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = (isTemporary: boolean) => {
|
||||
const emptyField = validateSurveyDetail(saveData.DETAIL_INFO)
|
||||
if (!isTemporary) {
|
||||
saveProcess(emptyField)
|
||||
} else {
|
||||
temporarySaveProcess()
|
||||
}
|
||||
}
|
||||
const saveProcess = async (emptyField: string) => {
|
||||
if (emptyField.trim() === '') {
|
||||
if (idParam) {
|
||||
// 매물 수정 (저장)
|
||||
updateSurvey(saveData)
|
||||
router.push(`/survey-sale/${idParam}`)
|
||||
} else {
|
||||
// 매물 생성 (저장)
|
||||
const id = await createSurvey(saveData)
|
||||
router.push(`/survey-sale/${id}`)
|
||||
}
|
||||
alert('保存されました。')
|
||||
} else {
|
||||
alert(emptyField + ' 項目が空です。')
|
||||
focusInput(emptyField as keyof SurveyRegistRequest)
|
||||
}
|
||||
}
|
||||
|
||||
const temporarySaveProcess = async () => {
|
||||
if (idParam) {
|
||||
// 매물 수정 (임시저장)
|
||||
updateSurvey(saveData)
|
||||
router.push(`/survey-sale/${idParam}?isTemporary=true`)
|
||||
} else {
|
||||
// 매물 생성 (임시저장)
|
||||
const id = await createSurvey(saveData)
|
||||
router.push(`/survey-sale/${id}?isTemporary=true`)
|
||||
}
|
||||
alert('一時保存されました。')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame">
|
||||
<div className="btn-flex-wrap">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
|
||||
一時保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon" onClick={() => handleSave(false)}>
|
||||
保存<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { SurveyBasicRequest, SurveyDetailRequest, SurveyRegistRequest } from '@/types/Survey'
|
||||
import FormButton from './formButton'
|
||||
import { useEffect, useState } from 'react'
|
||||
import BasicRegist from './basicRegist'
|
||||
import RoofRegist from './roofRegist'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
|
||||
const roofInfoForm: SurveyDetailRequest = {
|
||||
CONTRACT_CAPACITY: null,
|
||||
RETAIL_COMPANY: null,
|
||||
SUPPLEMENTARY_FACILITIES: null,
|
||||
SUPPLEMENTARY_FACILITIES_ETC: null,
|
||||
INSTALLATION_SYSTEM: null,
|
||||
INSTALLATION_SYSTEM_ETC: null,
|
||||
CONSTRUCTION_YEAR: null,
|
||||
CONSTRUCTION_YEAR_ETC: null,
|
||||
ROOF_MATERIAL: null,
|
||||
ROOF_MATERIAL_ETC: null,
|
||||
ROOF_SHAPE: null,
|
||||
ROOF_SHAPE_ETC: null,
|
||||
ROOF_SLOPE: null,
|
||||
HOUSE_STRUCTURE: '1',
|
||||
HOUSE_STRUCTURE_ETC: null,
|
||||
RAFTER_MATERIAL: '1',
|
||||
RAFTER_MATERIAL_ETC: null,
|
||||
RAFTER_SIZE: null,
|
||||
RAFTER_SIZE_ETC: null,
|
||||
RAFTER_PITCH: null,
|
||||
RAFTER_PITCH_ETC: null,
|
||||
RAFTER_DIRECTION: '1',
|
||||
OPEN_FIELD_PLATE_KIND: null,
|
||||
OPEN_FIELD_PLATE_KIND_ETC: null,
|
||||
OPEN_FIELD_PLATE_THICKNESS: null,
|
||||
LEAK_TRACE: false,
|
||||
WATERPROOF_MATERIAL: null,
|
||||
WATERPROOF_MATERIAL_ETC: null,
|
||||
INSULATION_PRESENCE: '1',
|
||||
INSULATION_PRESENCE_ETC: null,
|
||||
STRUCTURE_ORDER: null,
|
||||
STRUCTURE_ORDER_ETC: null,
|
||||
INSTALLATION_AVAILABILITY: null,
|
||||
INSTALLATION_AVAILABILITY_ETC: null,
|
||||
MEMO: null,
|
||||
}
|
||||
|
||||
const basicInfoForm: SurveyBasicRequest = {
|
||||
REPRESENTATIVE: '',
|
||||
STORE: null,
|
||||
CONSTRUCTION_POINT: null,
|
||||
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
|
||||
BUILDING_NAME: null,
|
||||
CUSTOMER_NAME: null,
|
||||
POST_CODE: null,
|
||||
ADDRESS: null,
|
||||
ADDRESS_DETAIL: null,
|
||||
SUBMISSION_STATUS: false,
|
||||
SUBMISSION_DATE: null,
|
||||
}
|
||||
|
||||
export default function RegistForm() {
|
||||
const searchParams = useSearchParams()
|
||||
const id = searchParams.get('id')
|
||||
|
||||
const { session } = useSessionStore()
|
||||
const { surveyDetail } = useServey(Number(id))
|
||||
|
||||
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
|
||||
const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
setBasicInfoData({
|
||||
...basicInfoForm,
|
||||
REPRESENTATIVE: session.userNm ?? '',
|
||||
STORE: session.role === 'T01' ? '' : session.storeNm ?? '',
|
||||
CONSTRUCTION_POINT: session.builderNo ?? '',
|
||||
})
|
||||
}
|
||||
if (id && surveyDetail) {
|
||||
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
|
||||
setBasicInfoData(rest)
|
||||
if (surveyDetail?.DETAIL_INFO) {
|
||||
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO
|
||||
setRoofInfoData(rest)
|
||||
}
|
||||
}
|
||||
}, [session, surveyDetail])
|
||||
|
||||
const surveyData = {
|
||||
basic: basicInfoData,
|
||||
roof: roofInfoData,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BasicRegist basicInfoData={basicInfoData} setBasicInfoData={setBasicInfoData} />
|
||||
<RoofRegist roofInfoData={roofInfoData} setRoofInfoData={setRoofInfoData} />
|
||||
<FormButton surveyData={surveyData} idParam={id} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,284 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
|
||||
|
||||
import { SurveyBasicInfo, SurveyDetailRequest } from '@/types/Survey'
|
||||
import { useEffect } from 'react'
|
||||
import MultiCheckEtc from '../detail/form/etcProcess/MultiCheckEtc'
|
||||
import SelectBoxEtc from '../detail/form/etcProcess/SelectBoxEtc'
|
||||
import RadioEtc from '../detail/form/etcProcess/RadioEtc'
|
||||
|
||||
export default function RoofRegist({
|
||||
roofInfoData,
|
||||
setRoofInfoData,
|
||||
}: {
|
||||
roofInfoData: SurveyDetailRequest
|
||||
setRoofInfoData: (data: SurveyDetailRequest) => void
|
||||
}) {
|
||||
const { setRoofInfoSelected } = useSurveySaleTabState()
|
||||
|
||||
useEffect(() => {
|
||||
setRoofInfoSelected()
|
||||
}, [])
|
||||
|
||||
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
|
||||
if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
|
||||
const stringValue = value.toString()
|
||||
if (stringValue.length > 5) {
|
||||
alert('保存できるサイズを超えました。')
|
||||
return
|
||||
}
|
||||
if (stringValue.includes('.')) {
|
||||
const decimalPlaces = stringValue.split('.')[1].length
|
||||
if (decimalPlaces > 1) {
|
||||
alert('小数点以下1桁までしか許されません。')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
setRoofInfoData({ ...roofInfoData, [key]: value.toString() })
|
||||
}
|
||||
|
||||
const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
|
||||
setRoofInfoData({ ...roofInfoData, [key]: value || null })
|
||||
}
|
||||
|
||||
const handleBooleanInput = (key: keyof SurveyDetailRequest, value: boolean) => {
|
||||
setRoofInfoData({ ...roofInfoData, [key]: value })
|
||||
}
|
||||
|
||||
const handleUnitInput = (value: string) => {
|
||||
const numericValue = roofInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
|
||||
setRoofInfoData({
|
||||
...roofInfoData,
|
||||
CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value,
|
||||
})
|
||||
}
|
||||
|
||||
// const handleSave = async () => {
|
||||
// if (id) {
|
||||
// const emptyField = validateSurveyDetail(roofInfoData)
|
||||
// if (emptyField.trim() === '') {
|
||||
// const updatedBasicInfoData = {
|
||||
// DETAIL_INFO: roofInfoData,
|
||||
// }
|
||||
// try {
|
||||
// createSurveyDetail({
|
||||
// surveyId: Number(id),
|
||||
// surveyDetail: updatedBasicInfoData,
|
||||
// })
|
||||
// alert('調査物件を保存しました。')
|
||||
// } catch (error) {
|
||||
// alert(error)
|
||||
// throw new Error('failed to create survey detail: ' + error)
|
||||
// }
|
||||
// router.push(`/survey-sale`)
|
||||
// } else {
|
||||
// alert(emptyField + ' は必須項目です。')
|
||||
// focusOnInput(emptyField)
|
||||
// }
|
||||
// } else {
|
||||
// alert('基本情報を作成した後、屋根情報を作成することができます。')
|
||||
// }
|
||||
// }
|
||||
// const focusOnInput = (field: string) => {
|
||||
// const input = document.getElementById(field)
|
||||
// if (input) {
|
||||
// input.focus()
|
||||
// }
|
||||
// }
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame" id="roof-form-section">
|
||||
<div className="sale-roof-title">電気関係</div>
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
{/* 전기계약 용량 - contract_capacity */}
|
||||
<div className="data-input-form-tit">電気契約容量</div>
|
||||
<div className="data-input mb5">
|
||||
<input
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''}
|
||||
onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<select
|
||||
className="select-form"
|
||||
name="CONTRACT_CAPACITY_UNIT"
|
||||
id="CONTRACT_CAPACITY_UNIT"
|
||||
onChange={(e) => handleUnitInput(e.target.value)}
|
||||
value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
<option value="kVA">kVA</option>
|
||||
<option value="A">A</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* 전기 소매 회사 - retail_company */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気小売会社</div>
|
||||
<input
|
||||
type="text"
|
||||
className="input-frame"
|
||||
value={roofInfoData.RETAIL_COMPANY ?? ''}
|
||||
onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{/* 전기 부대 설비 - supplementary_facilities */}
|
||||
<div className="data-input-form-bx">
|
||||
<MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
</div>
|
||||
{/* 설치 희망 시스템 - installation_system */}
|
||||
<SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sale-frame">
|
||||
<div className="sale-roof-title">屋根関係</div>
|
||||
<div className="data-form-wrap">
|
||||
{/* 건축 연수 - construction_year */}
|
||||
<SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 지붕재 - roof_material */}
|
||||
<div className="data-input-form-bx">
|
||||
<MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
</div>
|
||||
{/* 지붕 모양 - roof_shape */}
|
||||
<SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 지붕 경사도 - roof_slope */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根の斜面</div>
|
||||
<div className="data-input flex">
|
||||
<input
|
||||
type="number"
|
||||
step={0.1}
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={roofInfoData.ROOF_SLOPE ?? ''}
|
||||
onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)}
|
||||
/>
|
||||
<span>寸</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 주택 구조 - house_structure */}
|
||||
<RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 서까래 재질 - rafter_material */}
|
||||
<RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 서까래 크기 - rafter_size */}
|
||||
<SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 서까래 피치 - rafter_pitch */}
|
||||
<SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 서까래 방향 - rafter_direction */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit red-f">垂木の方向</div>
|
||||
<div className="data-check-wrap mb0" id="rafter_direction">
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="RAFTER_DIRECTION"
|
||||
id="RAFTER_DIRECTION_1"
|
||||
value={1}
|
||||
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
|
||||
checked={roofInfoData.RAFTER_DIRECTION === '1'}
|
||||
/>
|
||||
<label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
|
||||
</div>
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="RAFTER_DIRECTION"
|
||||
id="RAFTER_DIRECTION_2"
|
||||
value={2}
|
||||
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
|
||||
checked={roofInfoData.RAFTER_DIRECTION === '2'}
|
||||
/>
|
||||
<label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 노지판 종류 - open_field_plate_kind */}
|
||||
<SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 노지판 두께 - open_field_plate_thickness */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
|
||||
</div>
|
||||
<div className="data-input flex">
|
||||
<input
|
||||
type="number"
|
||||
step={0.1}
|
||||
inputMode="decimal"
|
||||
className="input-frame"
|
||||
value={roofInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
|
||||
onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 누수 흔적 - leak_trace */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit ">水漏れの痕跡</div>
|
||||
<div className="data-check-wrap mb0">
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="LEAK_TRACE"
|
||||
id="LEAK_TRACE_1"
|
||||
checked={roofInfoData.LEAK_TRACE === true}
|
||||
onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
|
||||
/>
|
||||
<label htmlFor="LEAK_TRACE_1">あり</label>
|
||||
</div>
|
||||
<div className="radio-form-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="LEAK_TRACE"
|
||||
id="LEAK_TRACE_2"
|
||||
checked={roofInfoData.LEAK_TRACE === false}
|
||||
onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
|
||||
/>
|
||||
<label htmlFor="LEAK_TRACE_2">なし</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 방수재 종류 - waterproof_material */}
|
||||
<RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 단열재 유무 - insulation_presence */}
|
||||
<RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 노지판 종류 - open_field_plate_kind */}
|
||||
<SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 설치 가능 여부 - installation_availability */}
|
||||
<SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
|
||||
{/* 메모 - memo */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">メモ</div>
|
||||
<div className="data-input mb5">
|
||||
<select className="select-form" name="" id="">
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
<option value="">確認済み</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<textarea
|
||||
className="textarea-form"
|
||||
name="MEMO"
|
||||
id="MEMO"
|
||||
value={roofInfoData.MEMO ?? ''}
|
||||
onChange={(e) => handleTextInput('MEMO', e.target.value)}
|
||||
placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,43 +1,39 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import type {
|
||||
SurveyBasicInfo,
|
||||
SurveyDetailInfo,
|
||||
SurveyDetailRequest,
|
||||
SurveyDetailCoverRequest,
|
||||
SurveyRegistRequest,
|
||||
} from '@/types/Survey'
|
||||
import type { SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest, SurveyRegistRequest } from '@/types/Survey'
|
||||
import { axiosInstance } from '@/libs/axios'
|
||||
import { useSurveyFilterStore } from '@/store/surveyFilterStore'
|
||||
import { queryStringFormatter } from '@/utils/common-utils'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
import { useMemo } from 'react'
|
||||
import { AxiosResponse } from 'axios'
|
||||
|
||||
const requiredFields = [
|
||||
{
|
||||
field: 'INSTALLATION_SYSTEM',
|
||||
field: 'installationSystem',
|
||||
name: '設置希望システム',
|
||||
},
|
||||
{
|
||||
field: 'CONSTRUCTION_YEAR',
|
||||
field: 'constructionYear',
|
||||
name: '建築年数',
|
||||
},
|
||||
{
|
||||
field: 'RAFTER_SIZE',
|
||||
field: 'rafterSize',
|
||||
name: '垂木サイズ',
|
||||
},
|
||||
{
|
||||
field: 'RAFTER_PITCH',
|
||||
field: 'rafterPitch',
|
||||
name: '垂木傾斜',
|
||||
},
|
||||
{
|
||||
field: 'WATERPROOF_MATERIAL',
|
||||
field: 'waterproofMaterial',
|
||||
name: '防水材',
|
||||
},
|
||||
{
|
||||
field: 'INSULATION_PRESENCE',
|
||||
field: 'insulationPresence',
|
||||
name: '断熱材有無',
|
||||
},
|
||||
{
|
||||
field: 'STRUCTURE_ORDER',
|
||||
field: 'structureOrder',
|
||||
name: '屋根構造の順序',
|
||||
},
|
||||
]
|
||||
@ -60,9 +56,8 @@ type ZipCode = {
|
||||
}
|
||||
|
||||
export function useServey(id?: number): {
|
||||
surveyList: SurveyBasicInfo[] | []
|
||||
surveyList: { data: SurveyBasicInfo[]; count: number } | {}
|
||||
surveyDetail: SurveyBasicInfo | null
|
||||
surveyListCount: number
|
||||
isLoadingSurveyList: boolean
|
||||
isLoadingSurveyDetail: boolean
|
||||
isCreatingSurvey: boolean
|
||||
@ -75,15 +70,20 @@ export function useServey(id?: number): {
|
||||
submitSurvey: () => void
|
||||
validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string
|
||||
getZipCode: (zipCode: string) => Promise<ZipCode[] | null>
|
||||
refetchSurveyList: () => void
|
||||
} {
|
||||
const queryClient = useQueryClient()
|
||||
const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore()
|
||||
const { session } = useSessionStore()
|
||||
|
||||
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
|
||||
const {
|
||||
data,
|
||||
isLoading: isLoadingSurveyList,
|
||||
refetch: refetchSurveyList,
|
||||
} = useQuery({
|
||||
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, session?.storeNm, session?.builderNo, session?.role],
|
||||
queryFn: async () => {
|
||||
const resp = await axiosInstance(null).get<SurveyBasicInfo[]>('/api/survey-sales', {
|
||||
const resp = await axiosInstance(null).get<{ data: SurveyBasicInfo[]; count: number }>('/api/survey-sales', {
|
||||
params: {
|
||||
keyword,
|
||||
searchOption,
|
||||
@ -97,7 +97,15 @@ export function useServey(id?: number): {
|
||||
})
|
||||
return resp.data
|
||||
},
|
||||
enabled: session?.isLoggedIn,
|
||||
})
|
||||
const surveyData = useMemo(() => {
|
||||
if (!data) return {}
|
||||
return {
|
||||
data: data.data,
|
||||
count: data.count,
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
|
||||
queryKey: ['survey', id],
|
||||
@ -110,28 +118,10 @@ export function useServey(id?: number): {
|
||||
enabled: id !== undefined,
|
||||
})
|
||||
|
||||
const { data: surveyListCount } = useQuery({
|
||||
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, session?.builderNo, session?.storeNm, session?.role],
|
||||
queryFn: async () => {
|
||||
const resp = await axiosInstance(null).get<number>('/api/survey-sales', {
|
||||
params: {
|
||||
keyword,
|
||||
searchOption,
|
||||
isMySurvey,
|
||||
sort,
|
||||
builderNo: session?.builderNo,
|
||||
store: session?.storeNm,
|
||||
role: session?.role,
|
||||
},
|
||||
})
|
||||
return resp.data
|
||||
},
|
||||
})
|
||||
|
||||
const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
|
||||
mutationFn: async (survey: SurveyRegistRequest) => {
|
||||
const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', survey)
|
||||
return resp.data.ID ?? 0
|
||||
return resp.data.id ?? 0
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
@ -190,7 +180,7 @@ export function useServey(id?: number): {
|
||||
})
|
||||
|
||||
const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
|
||||
const etcFields = ['INSTALLATION_SYSTEM', 'CONSTRUCTION_YEAR', 'RAFTER_SIZE', 'RAFTER_PITCH', 'WATERPROOF_MATERIAL', 'STRUCTURE_ORDER'] as const
|
||||
const etcFields = ['installationSystem', 'constructionYear', 'rafterSize', 'rafterPitch', 'waterproofMaterial', 'structureOrder'] as const
|
||||
|
||||
const emptyField = requiredFields.find((field) => {
|
||||
if (etcFields.includes(field.field as (typeof etcFields)[number])) {
|
||||
@ -202,9 +192,9 @@ export function useServey(id?: number): {
|
||||
}
|
||||
})
|
||||
|
||||
const contractCapacity = surveyDetail.CONTRACT_CAPACITY
|
||||
const contractCapacity = surveyDetail.contractCapacity
|
||||
if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
|
||||
return 'CONTRACT_CAPACITY_UNIT'
|
||||
return 'contractCapacityUnit'
|
||||
}
|
||||
|
||||
return emptyField?.name || ''
|
||||
@ -223,9 +213,8 @@ export function useServey(id?: number): {
|
||||
}
|
||||
|
||||
return {
|
||||
surveyList: surveyList || [],
|
||||
surveyDetail: surveyDetail || null,
|
||||
surveyListCount: surveyListCount || 0,
|
||||
surveyList: surveyData,
|
||||
surveyDetail: surveyDetail as SurveyBasicInfo | null,
|
||||
isLoadingSurveyList,
|
||||
isLoadingSurveyDetail,
|
||||
isCreatingSurvey,
|
||||
@ -238,5 +227,6 @@ export function useServey(id?: number): {
|
||||
submitSurvey,
|
||||
validateSurveyDetail,
|
||||
getZipCode,
|
||||
refetchSurveyList,
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,10 @@ export const axiosInstance = (url: string | null | undefined) => {
|
||||
)
|
||||
|
||||
instance.interceptors.response.use(
|
||||
(response) => transferResponse(response),
|
||||
(response) => {
|
||||
response.data = transferResponse(response)
|
||||
return response
|
||||
},
|
||||
(error) => {
|
||||
// 에러 처리 로직
|
||||
return Promise.reject(error)
|
||||
@ -52,7 +55,7 @@ export const axiosInstance = (url: string | null | undefined) => {
|
||||
// )
|
||||
|
||||
// response데이터가 array, object에 따라 분기하여 키 변환
|
||||
const transferResponse = (response: any) => {
|
||||
export const transferResponse = (response: any) => {
|
||||
if (!response.data) return response.data
|
||||
|
||||
// 배열인 경우 각 객체의 키를 변환
|
||||
@ -80,7 +83,11 @@ const transformObjectKeys = (obj: any): any => {
|
||||
|
||||
return obj
|
||||
}
|
||||
// snake case to camel case
|
||||
const snakeToCamel = (str: string): string => {
|
||||
return str.replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
|
||||
|
||||
export const camelToSnake = (str: string): string => {
|
||||
return str.replace(/([A-Z])/g, (group) => `_${group.toLowerCase()}`)
|
||||
}
|
||||
|
||||
const snakeToCamel = (str: string): string => {
|
||||
return str.toLowerCase().replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
|
||||
}
|
||||
|
||||
@ -1,132 +1,132 @@
|
||||
export type SurveyBasicInfo = {
|
||||
ID: number
|
||||
REPRESENTATIVE: string
|
||||
STORE: string | null
|
||||
CONSTRUCTION_POINT: string | null
|
||||
INVESTIGATION_DATE: string | null
|
||||
BUILDING_NAME: string | null
|
||||
CUSTOMER_NAME: string | null
|
||||
POST_CODE: string | null
|
||||
ADDRESS: string | null
|
||||
ADDRESS_DETAIL: string | null
|
||||
SUBMISSION_STATUS: boolean
|
||||
SUBMISSION_DATE: string | null
|
||||
DETAIL_INFO: SurveyDetailInfo | null
|
||||
REG_DT: Date
|
||||
UPT_DT: Date
|
||||
id: number
|
||||
representative: string
|
||||
store: string | null
|
||||
constructionPoint: string | null
|
||||
investigationDate: string | null
|
||||
buildingName: string | null
|
||||
customerName: string | null
|
||||
postCode: string | null
|
||||
address: string | null
|
||||
addressDetail: string | null
|
||||
submissionStatus: boolean
|
||||
submissionDate: string | null
|
||||
detailInfo: SurveyDetailInfo | null
|
||||
regDt: Date
|
||||
uptDt: Date
|
||||
}
|
||||
|
||||
export type SurveyDetailInfo = {
|
||||
ID: number
|
||||
BASIC_INFO_ID: number
|
||||
CONTRACT_CAPACITY: string | null
|
||||
RETAIL_COMPANY: string | null
|
||||
SUPPLEMENTARY_FACILITIES: string | null // number 배열
|
||||
SUPPLEMENTARY_FACILITIES_ETC: string | null
|
||||
INSTALLATION_SYSTEM: string | null
|
||||
INSTALLATION_SYSTEM_ETC: string | null
|
||||
CONSTRUCTION_YEAR: string | null
|
||||
CONSTRUCTION_YEAR_ETC: string | null
|
||||
ROOF_MATERIAL: string | null // number 배열
|
||||
ROOF_MATERIAL_ETC: string | null
|
||||
ROOF_SHAPE: string | null
|
||||
ROOF_SHAPE_ETC: string | null
|
||||
ROOF_SLOPE: string | null
|
||||
HOUSE_STRUCTURE: string | null
|
||||
HOUSE_STRUCTURE_ETC: string | null
|
||||
RAFTER_MATERIAL: string | null
|
||||
RAFTER_MATERIAL_ETC: string | null
|
||||
RAFTER_SIZE: string | null
|
||||
RAFTER_SIZE_ETC: string | null
|
||||
RAFTER_PITCH: string | null
|
||||
RAFTER_PITCH_ETC: string | null
|
||||
RAFTER_DIRECTION: string | null
|
||||
OPEN_FIELD_PLATE_KIND: string | null
|
||||
OPEN_FIELD_PLATE_KIND_ETC: string | null
|
||||
OPEN_FIELD_PLATE_THICKNESS: string | null
|
||||
LEAK_TRACE: boolean | null
|
||||
WATERPROOF_MATERIAL: string | null
|
||||
WATERPROOF_MATERIAL_ETC: string | null
|
||||
INSULATION_PRESENCE: string | null
|
||||
INSULATION_PRESENCE_ETC: string | null
|
||||
STRUCTURE_ORDER: string | null
|
||||
STRUCTURE_ORDER_ETC: string | null
|
||||
INSTALLATION_AVAILABILITY: string | null
|
||||
INSTALLATION_AVAILABILITY_ETC: string | null
|
||||
MEMO: string | null
|
||||
REG_DT: Date
|
||||
UPT_DT: Date
|
||||
id: number
|
||||
basicInfoId: number
|
||||
contractCapacity: string | null
|
||||
retailCompany: string | null
|
||||
supplementaryFacilities: string | null // number 배열
|
||||
supplementaryFacilitiesEtc: string | null
|
||||
installationSystem: string | null
|
||||
installationSystemEtc: string | null
|
||||
constructionYear: string | null
|
||||
constructionYearEtc: string | null
|
||||
roofMaterial: string | null // number 배열
|
||||
roofMaterialEtc: string | null
|
||||
roofShape: string | null
|
||||
roofShapeEtc: string | null
|
||||
roofSlope: string | null
|
||||
houseStructure: string | null
|
||||
houseStructureEtc: string | null
|
||||
rafterMaterial: string | null
|
||||
rafterMaterialEtc: string | null
|
||||
rafterSize: string | null
|
||||
rafterSizeEtc: string | null
|
||||
rafterPitch: string | null
|
||||
rafterPitchEtc: string | null
|
||||
rafterDirection: string | null
|
||||
openFieldPlateKind: string | null
|
||||
openFieldPlateKindEtc: string | null
|
||||
openFieldPlateThickness: string | null
|
||||
leakTrace: boolean | null
|
||||
waterproofMaterial: string | null
|
||||
waterproofMaterialEtc: string | null
|
||||
insulationPresence: string | null
|
||||
insulationPresenceEtc: string | null
|
||||
structureOrder: string | null
|
||||
structureOrderEtc: string | null
|
||||
installationAvailability: string | null
|
||||
installationAvailabilityEtc: string | null
|
||||
memo: string | null
|
||||
regDt: Date
|
||||
uptDt: Date
|
||||
}
|
||||
|
||||
export type SurveyBasicRequest = {
|
||||
REPRESENTATIVE: string
|
||||
STORE: string | null
|
||||
CONSTRUCTION_POINT: string | null
|
||||
INVESTIGATION_DATE: string | null
|
||||
BUILDING_NAME: string | null
|
||||
CUSTOMER_NAME: string | null
|
||||
POST_CODE: string | null
|
||||
ADDRESS: string | null
|
||||
ADDRESS_DETAIL: string | null
|
||||
SUBMISSION_STATUS: boolean
|
||||
SUBMISSION_DATE: string | null
|
||||
representative: string
|
||||
store: string | null
|
||||
constructionPoint: string | null
|
||||
investigationDate: string | null
|
||||
buildingName: string | null
|
||||
customerName: string | null
|
||||
postCode: string | null
|
||||
address: string | null
|
||||
addressDetail: string | null
|
||||
submissionStatus: boolean
|
||||
submissionDate: string | null
|
||||
}
|
||||
|
||||
export type SurveyDetailRequest = {
|
||||
CONTRACT_CAPACITY: string | null
|
||||
RETAIL_COMPANY: string | null
|
||||
SUPPLEMENTARY_FACILITIES: string | null // number 배열
|
||||
SUPPLEMENTARY_FACILITIES_ETC: string | null
|
||||
INSTALLATION_SYSTEM: string | null
|
||||
INSTALLATION_SYSTEM_ETC: string | null
|
||||
CONSTRUCTION_YEAR: string | null
|
||||
CONSTRUCTION_YEAR_ETC: string | null
|
||||
ROOF_MATERIAL: string | null // number 배열
|
||||
ROOF_MATERIAL_ETC: string | null
|
||||
ROOF_SHAPE: string | null
|
||||
ROOF_SHAPE_ETC: string | null
|
||||
ROOF_SLOPE: string | null
|
||||
HOUSE_STRUCTURE: string | null
|
||||
HOUSE_STRUCTURE_ETC: string | null
|
||||
RAFTER_MATERIAL: string | null
|
||||
RAFTER_MATERIAL_ETC: string | null
|
||||
RAFTER_SIZE: string | null
|
||||
RAFTER_SIZE_ETC: string | null
|
||||
RAFTER_PITCH: string | null
|
||||
RAFTER_PITCH_ETC: string | null
|
||||
RAFTER_DIRECTION: string | null
|
||||
OPEN_FIELD_PLATE_KIND: string | null
|
||||
OPEN_FIELD_PLATE_KIND_ETC: string | null
|
||||
OPEN_FIELD_PLATE_THICKNESS: string | null
|
||||
LEAK_TRACE: boolean | null
|
||||
WATERPROOF_MATERIAL: string | null
|
||||
WATERPROOF_MATERIAL_ETC: string | null
|
||||
INSULATION_PRESENCE: string | null
|
||||
INSULATION_PRESENCE_ETC: string | null
|
||||
STRUCTURE_ORDER: string | null
|
||||
STRUCTURE_ORDER_ETC: string | null
|
||||
INSTALLATION_AVAILABILITY: string | null
|
||||
INSTALLATION_AVAILABILITY_ETC: string | null
|
||||
MEMO: string | null
|
||||
contractCapacity: string | null
|
||||
retailCompany: string | null
|
||||
supplementaryFacilities: string | null // number 배열
|
||||
supplementaryFacilitiesEtc: string | null
|
||||
installationSystem: string | null
|
||||
installationSystemEtc: string | null
|
||||
constructionYear: string | null
|
||||
constructionYearEtc: string | null
|
||||
roofMaterial: string | null // number 배열
|
||||
roofMaterialEtc: string | null
|
||||
roofShape: string | null
|
||||
roofShapeEtc: string | null
|
||||
roofSlope: string | null
|
||||
houseStructure: string | null
|
||||
houseStructureEtc: string | null
|
||||
rafterMaterial: string | null
|
||||
rafterMaterialEtc: string | null
|
||||
rafterSize: string | null
|
||||
rafterSizeEtc: string | null
|
||||
rafterPitch: string | null
|
||||
rafterPitchEtc: string | null
|
||||
rafterDirection: string | null
|
||||
openFieldPlateKind: string | null
|
||||
openFieldPlateKindEtc: string | null
|
||||
openFieldPlateThickness: string | null
|
||||
leakTrace: boolean | null
|
||||
waterproofMaterial: string | null
|
||||
waterproofMaterialEtc: string | null
|
||||
insulationPresence: string | null
|
||||
insulationPresenceEtc: string | null
|
||||
structureOrder: string | null
|
||||
structureOrderEtc: string | null
|
||||
installationAvailability: string | null
|
||||
installationAvailabilityEtc: string | null
|
||||
memo: string | null
|
||||
}
|
||||
|
||||
export type SurveyDetailCoverRequest = {
|
||||
DETAIL_INFO: SurveyDetailRequest
|
||||
detailInfo: SurveyDetailRequest
|
||||
}
|
||||
|
||||
export type SurveyRegistRequest = {
|
||||
REPRESENTATIVE: string
|
||||
STORE: string | null
|
||||
CONSTRUCTION_POINT: string | null
|
||||
INVESTIGATION_DATE: string | null
|
||||
BUILDING_NAME: string | null
|
||||
CUSTOMER_NAME: string | null
|
||||
POST_CODE: string | null
|
||||
ADDRESS: string | null
|
||||
ADDRESS_DETAIL: string | null
|
||||
SUBMISSION_STATUS: boolean
|
||||
SUBMISSION_DATE: string | null
|
||||
DETAIL_INFO: SurveyDetailRequest | null
|
||||
representative: string
|
||||
store: string | null
|
||||
constructionPoint: string | null
|
||||
investigationDate: string | null
|
||||
buildingName: string | null
|
||||
customerName: string | null
|
||||
postCode: string | null
|
||||
address: string | null
|
||||
addressDetail: string | null
|
||||
submissionStatus: boolean
|
||||
submissionDate: string | null
|
||||
detailInfo: SurveyDetailRequest | null
|
||||
}
|
||||
|
||||
export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user