qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/survey' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry

Browse Source
This commit is contained in:
Dayoung 2025-05-15 17:21:50 +09:00
commit 4d6f5c0e01
24 changed files with 1545 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/api/survey-sales/[id]/route.ts
View File

@ -1,108 +1,139 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function GET(request: Request, context: { params: { id: string } }) {
const { id } = await context.params
// @ts-ignore
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.findUnique({
where: { id: Number(id) },
include: {
detail_info: true,
},
})
return NextResponse.json(survey)
}
export async function PUT(request: Request, context: { params: { id: string } }) {
const { id } = await context.params
const body = await request.json()
try {
const { id } = await context.params
// @ts-ignore
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { id: Number(id) },
data: {
...body,
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findUnique({
where: { ID: Number(id) },
include: {
DETAIL_INFO: true,
},
})
return NextResponse.json(survey)
} catch (error) {
console.error(error)
throw error
console.error('Error fetching survey:', error)
return NextResponse.json({ error: 'Failed to fetch survey' }, { status: 500 })
}
}
export async function PUT(request: Request, context: { params: { id: string } }) {
try {
const { id } = await context.params
const body = await request.json()
console.log('body:: ', body)
// DETAIL_INFO를 분리
const { DETAIL_INFO, ...basicInfo } = body
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
...basicInfo,
UPT_DT: new Date(),
DETAIL_INFO: DETAIL_INFO
? {
upsert: {
create: DETAIL_INFO,
update: DETAIL_INFO,
},
}
: undefined,
},
include: {
DETAIL_INFO: true,
},
})
return NextResponse.json(survey)
} catch (error) {
console.error('Error updating survey:', error)
return NextResponse.json({ error: 'Failed to update survey' }, { status: 500 })
}
}
export async function DELETE(request: Request, context: { params: { id: string } }) {
const { id } = await context.params
try {
//@ts-ignore
const { id } = await context.params
await prisma.$transaction(async (tx) => {
// @ts-ignore
const detailData = await tx.SD_SERVEY_SALES_BASIC_INFO.findUnique({
where: { id: Number(id) },
const detailData = await tx.SD_SURVEY_SALES_BASIC_INFO.findUnique({
where: { ID: Number(id) },
select: {
detail_info: true,
DETAIL_INFO: true,
},
})
console.log('detailData:: ', detailData)
if (detailData?.detail_info?.id) {
if (detailData?.DETAIL_INFO?.ID) {
// @ts-ignore
await tx.SD_SERVEY_SALES_DETAIL_INFO.delete({
where: { id: Number(detailData?.detail_info?.id) },
await tx.SD_SURVEY_SALES_DETAIL_INFO.delete({
where: { ID: Number(detailData.DETAIL_INFO.ID) },
})
}
// @ts-ignore
await tx.SD_SERVEY_SALES_BASIC_INFO.delete({
where: { id: Number(id) },
await tx.SD_SURVEY_SALES_BASIC_INFO.delete({
where: { ID: Number(id) },
})
})
return NextResponse.json({ message: 'Survey deleted successfully' })
} catch (error) {
console.error(error)
throw error
console.error('Error deleting survey:', error)
return NextResponse.json({ error: 'Failed to delete survey' }, { status: 500 })
}
}
export async function PATCH(request: Request, context: { params: { id: string } }) {
const { id } = await context.params
const body = await request.json()
if (body.submit) {
// @ts-ignore
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { id: Number(id) },
data: {
submission_status: true,
submission_date: new Date(),
},
})
return NextResponse.json({ message: 'Survey confirmed successfully' })
} else {
// @ts-ignore
const hasDetails = await prisma.SD_SERVEY_SALES_DETAIL_INFO.findUnique({
where: { basic_info_id: Number(id) },
})
if (hasDetails) {
//@ts-ignore
const result = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { id: Number(id) },
try {
const { id } = await context.params
const body = await request.json()
if (body.submit) {
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
updated_at: new Date(),
detail_info: {
update: body.detail_info,
},
SUBMISSION_STATUS: true,
SUBMISSION_DATE: new Date(),
},
})
return NextResponse.json(result)
return NextResponse.json({ message: 'Survey confirmed successfully' })
} else {
// @ts-ignore
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { id: Number(id) },
data: {
detail_info: {
create: body.detail_info,
},
},
const hasDetails = await prisma.SD_SURVEY_SALES_DETAIL_INFO.findUnique({
where: { BASIC_INFO_ID: Number(id) },
})
return NextResponse.json({ message: 'Survey detail created successfully' })
if (hasDetails) {
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
UPT_DT: new Date(),
DETAIL_INFO: {
update: body.DETAIL_INFO,
},
},
})
return NextResponse.json(result)
} else {
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
DETAIL_INFO: {
create: body.DETAIL_INFO,
},
},
})
return NextResponse.json({ message: 'Survey detail created successfully' })
}
}
} catch (error) {
console.error('Error updating survey:', error)
return NextResponse.json({ error: 'Failed to update survey' }, { status: 500 })
}
}

306
src/app/api/survey-sales/route.ts
View File

@ -1,105 +1,247 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function POST(request: Request) {
const body = await request.json()
// @ts-ignore
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
data: body,
})
return NextResponse.json(res)
/**
* 검색 파라미터
*/
type SearchParams = {
keyword?: string | null // 검색어
searchOption?: string | null // 검색 옵션 (select 옵션)
isMySurvey?: string | null // 내가 작성한 매물
sort?: string | null // 정렬 방식
offset?: string | null
role?: string | null // 회원권한한
store?: string | null // 판매점ID
builderNo?: string | null // 시공ID
}
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const keyword = searchParams.get('keyword')
const searchOption = searchParams.get('searchOption')
const isMySurvey = searchParams.get('isMySurvey')
const sort = searchParams.get('sort')
const offset = searchParams.get('offset')
const store = searchParams.get('store')
const construction_point = searchParams.get('construction_point')
type WhereCondition = {
AND?: any[]
OR?: any[]
[key: string]: any
}
const searchOptions = ['building_name', 'representative', 'store', 'construction_point', 'customer_name', 'post_code', 'address', 'address_detail']
try {
const where: any = {}
// 검색 가능한 필드 옵션
const SEARCH_OPTIONS = [
'BUILDING_NAME', // 건물명
'REPRESENTATIVE', // 담당자
'STORE', // 판매점
'CONSTRUCTION_POINT', // 시공점
'CUSTOMER_NAME', // 고객명
'POST_CODE', // 우편번호
'ADDRESS', // 주소
'ADDRESS_DETAIL', // 상세주소
] as const
if (isMySurvey !== null && isMySurvey !== undefined) {
where.representative = isMySurvey
}
// 페이지당 항목 수
const ITEMS_PER_PAGE = 10
if (keyword && keyword.trim() !== '' && searchOption) {
if (searchOption === 'all') {
where.OR = []
if (keyword.match(/^\d+$/) || !isNaN(Number(keyword))) {
where.OR.push({
id: {
equals: Number(keyword),
},
})
}
where.OR.push(
...searchOptions.map((field) => ({
[field]: {
contains: keyword,
},
})),
)
} else if (searchOptions.includes(searchOption)) {
where[searchOption] = {
contains: keyword,
}
} else if (searchOption === 'id') {
where[searchOption] = {
equals: Number(keyword),
}
}
}
/**
* 키워드 검색 조건 생성 함수
* @param keyword 검색 키워드
* @param searchOption 검색 옵션
* @returns 검색 조건 객체
*/
const createKeywordSearchCondition = (keyword: string, searchOption: string): WhereCondition => {
const where: WhereCondition = {}
where.AND = []
if (store) {
where.AND.push({
store: {
equals: store,
},
})
}
if (construction_point) {
where.AND.push({
construction_point: {
equals: construction_point,
},
if (searchOption === 'all') {
// 모든 필드 검색 시 OR 조건 사용
where.OR = []
// ID가 숫자인 경우 ID 검색 조건 추가
if (keyword.match(/^\d+$/) || !isNaN(Number(keyword))) {
where.OR.push({
ID: { equals: Number(keyword) },
})
}
if (offset) {
// @ts-ignore
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.findMany({
where,
orderBy: sort === 'created' ? { created_at: 'desc' } : { updated_at: 'desc' },
skip: Number(offset),
take: 10,
})
return NextResponse.json(res)
where.OR.push(
...SEARCH_OPTIONS.map((field) => ({
[field]: { contains: keyword },
})),
)
} else if (SEARCH_OPTIONS.includes(searchOption.toUpperCase() as any)) {
// 특정 필드 검색
where[searchOption.toUpperCase()] = { contains: keyword }
} else if (searchOption === 'id') {
// ID 검색 (숫자 변환 필요)
const number = Number(keyword)
if (!isNaN(number)) {
where.ID = { equals: number }
} else {
// @ts-ignore
const count = await prisma.SD_SERVEY_SALES_BASIC_INFO.count({
where,
// 유효하지 않은 ID 검색 시 빈 결과 반환
where.ID = { equals: null }
}
}
return where
}
/**
* 회원 역할별 검색 조건 생성 함수
* @param params 검색 파라미터
* @returns 검색 조건 객체
*/
const createMemberRoleCondition = (params: SearchParams): WhereCondition => {
const where: WhereCondition = { AND: [] }
switch (params.role) {
case 'Admin': // 1차점
// 같은 판매점에서 작성된 매물 + 2차점에서 제출받은 매물
where.OR = [
{
AND: [{ STORE: { equals: params.store } }],
},
{
AND: [{ STORE: { startsWith: params.store } }, { SUBMISSION_STATUS: { equals: true } }],
},
]
break
case 'Admin_Sub': // 2차점
where.OR = [
{
AND: [
{ STORE: { equals: params.store } },
{
OR: [
{ CONSTRUCTION_POINT: { equals: null } },
{ CONSTRUCTION_POINT: { equals: '' } }
]
}
]
},
{
AND: [
{ STORE: { equals: params.store } },
{ CONSTRUCTION_POINT: { not: null } },
{ CONSTRUCTION_POINT: { not: '' } },
{ SUBMISSION_STATUS: { equals: true } }
]
}
]
break
case 'Builder': // 2차점 시공권한
case 'Partner': // Partner
// 같은 시공ID에서 작성된 매물
where.AND?.push({
CONSTRUCTION_POINT: { equals: params.builderNo },
})
break
case 'T01':
case 'User':
// 모든 매물 조회 가능 (추가 조건 없음)
break
}
return where
}
/**
* GET 핸들러 - 설문 목록 조회
*/
export async function GET(request: Request) {
try {
// URL 파라미터 파싱
const { searchParams } = new URL(request.url)
const params: SearchParams = {
keyword: searchParams.get('keyword'),
searchOption: searchParams.get('searchOption'),
isMySurvey: searchParams.get('isMySurvey'),
sort: searchParams.get('sort'),
offset: searchParams.get('offset'),
role: searchParams.get('role'),
store: searchParams.get('store'),
builderNo: searchParams.get('builderNo'),
}
// 검색 조건 구성
const where: WhereCondition = {}
// 내가 작성한 매물 조건 적용
if (params.isMySurvey) {
where.REPRESENTATIVE = params.isMySurvey
}
// 키워드 검색 조건 적용
if (params.keyword && params.searchOption) {
Object.assign(where, createKeywordSearchCondition(params.keyword, params.searchOption))
}
// 회원 유형 조건 적용
Object.assign(where, createMemberRoleCondition(params))
// 데이터 조회 또는 카운트
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)
}
} catch (error) {
console.error(error)
throw error
return NextResponse.json({ error: 'Fail Read Survey' }, { status: 500 })
}
}
/**
* PUT 핸들러 - 상세 정보 추가
*/
export async function PUT(request: Request) {
const body = await request.json()
const detailInfo = { ...body.detail_info, basic_info_id: body.id }
// @ts-ignore
const res = await prisma.SD_SERVEY_SALES_DETAIL_INFO.create({
data: detailInfo,
})
return NextResponse.json({ message: 'Survey sales updated successfully' })
try {
const body = await request.json()
// 상세 정보 생성을 위한 데이터 구성
const detailInfo = {
...body.detail_info,
BASIC_INFO_ID: body.id,
}
// 상세 정보 생성
//@ts-ignore
await prisma.SD_SURVEY_SALES_DETAIL_INFO.create({
data: detailInfo,
})
return NextResponse.json({
message: 'Success Update Survey',
})
} catch (error) {
console.error(error)
return NextResponse.json({ error: 'Fail Update Survey' }, { status: 500 })
}
}
export async function POST(request: Request) {
try {
const body = await request.json()
const { DETAIL_INFO, ...basicInfo } = body
// 기본 정보 생성
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.create({
data: {
...basicInfo,
DETAIL_INFO: {
create: DETAIL_INFO,
},
},
})
return NextResponse.json(result)
} catch (error) {
console.error(error)
return NextResponse.json({ error: 'Fail Create Survey' }, { status: 500 })
}
}

9
src/app/survey-sale/regist/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import RegistForm from '@/components/survey-sale/temp/registForm'
export default function RegistPage() {
return (
<>
<RegistForm />
</>
)
}

5
src/components/popup/ZipCodePopup.tsx
View File

@ -28,10 +28,11 @@ export default function ZipCodePopup() {
const popupController = usePopupController()
const handleApply = () => {
console.log(addressInfo?.[0])
setAddressData({
post_code: addressInfo?.[0]?.zipcode || '',
address: addressInfo?.[0]?.prefcode || '',
address_detail: addressInfo?.[0]?.address1 + ' ' + addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
address: addressInfo?.[0]?.address1 || '',
address_detail: addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
})
popupController.setZipCodePopup(false)
}

40
src/components/survey-sale/common/NavTab.tsx
View File

@ -15,7 +15,7 @@ export default function NavTab() {
const params = useParams()
const detailId = params.id
const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState()
const { basicInfoSelected, roofInfoSelected, reset, setBasicInfoSelected, setRoofInfoSelected } = useSurveySaleTabState()
useEffect(() => {
return () => {
@ -27,26 +27,36 @@ export default function NavTab() {
return null
}
const handleBasicInfoClick = () => {
if (id) {
router.push(`/survey-sale/basic-info?id=${id}`)
return
const scrollSection = (section: string) => {
const sectionElement = document.getElementById(section)
if (sectionElement) {
sectionElement.scrollIntoView({ behavior: 'smooth' })
}
}
const handleBasicInfoClick = () => {
// if (id) {
// router.push(`/survey-sale/basic-info?id=${id}`)
// return
// }
if (detailId) {
router.push(`/survey-sale/${detailId}`)
return
}
scrollSection('basic-form-section')
setBasicInfoSelected()
}
const handleRoofInfoClick = () => {
if (id) {
if (isTemp === 'true') {
alert('基本情報が一時保存された状態です。')
return
}
router.push(`/survey-sale/roof-info?id=${id}`)
return
}
// if (id) {
// if (isTemp === 'true') {
// alert('基本情報が一時保存された状態です。')
// return
// }
// router.push(`/survey-sale/roof-info?id=${id}`)
// return
// }
if (detailId) {
router.push(`/survey-sale/${detailId}?tab=roof-info`)
return
@ -55,6 +65,10 @@ export default function NavTab() {
alert('基本情報を先に保存してください。')
return null
}
// if (pathname === '/survey-sale/regist') {
scrollSection('roof-form-section')
// }
setRoofInfoSelected()
}
return (

36
src/components/survey-sale/detail/DataTable.tsx
View File

@ -2,10 +2,8 @@
import { useServey } from '@/hooks/useSurvey'
import { useParams, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import DetailForm from './DetailForm'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import RoofDetailForm from './RoofDetailForm'
export default function DataTable() {
@ -14,21 +12,21 @@ export default function DataTable() {
const searchParams = useSearchParams()
const tab = searchParams.get('tab')
const isTemp = searchParams.get('isTemporary')
const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
const [isTemporary, setIsTemporary] = useState(true)
const { setBasicInfoSelected, setRoofInfoSelected } = useSurveySaleTabState()
const [isTemporary, setIsTemporary] = useState(isTemp === 'true')
const { validateSurveyDetail } = useServey(Number(id))
useEffect(() => {
if (surveyDetail?.representative && surveyDetail?.store && surveyDetail?.construction_point) {
setIsTemporary(false)
if (surveyDetail?.DETAIL_INFO) {
const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO)
if (validate.trim() !== '') {
setIsTemporary(false)
}
}
if (tab === 'roof-info') {
setRoofInfoSelected()
} else {
setBasicInfoSelected()
}
}, [surveyDetail, tab, setBasicInfoSelected, setRoofInfoSelected])
}, [surveyDetail])
if (isLoadingSurveyDetail) {
return <div>Loading...</div>
@ -50,25 +48,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?.created_at ? new Date(surveyDetail?.created_at).toLocaleString() : ''}</td>
<td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td>
</tr>
<tr>
<th>更新日時</th>
<td>{surveyDetail?.updated_at ? new Date(surveyDetail?.updated_at).toLocaleString() : ''}</td>
<td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td>
</tr>
<tr>
<th>提出可否</th>
<td>
{surveyDetail?.submission_status && surveyDetail?.submission_date ? (
{surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? (
<>
{/* TODO: 제출한 판매점 ID 추가 필요 */}
<div>{new Date(surveyDetail.submission_date).toLocaleString()}</div>
<div>販売店 ID...</div>
<div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div>
<div>{surveyDetail.STORE}</div>
</>
) : (
'-'

129
src/components/survey-sale/detail/DetailButton.tsx
View File

@ -1,86 +1,119 @@
'use client'
import { useRouter } from 'next/navigation'
import { useRouter, useSearchParams } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey'
import { useSessionStore } from '@/store/session'
import { useEffect, useState } from 'react'
import { SurveyBasicInfo } from '@/types/Survey'
import { useState } from 'react'
export default function DetailButton({ isTemporary, surveyId, representative }: { isTemporary: boolean; surveyId: number; representative: string }) {
export default function DetailButton({ surveyDetail }: { surveyDetail: SurveyBasicInfo | null }) {
const router = useRouter()
const { session } = useSessionStore()
const { submitSurvey, deleteSurvey } = useServey(surveyId)
const [userNm, setUserNm] = useState('')
const { submitSurvey, deleteSurvey } = useServey(surveyDetail?.ID ?? 0)
useEffect(() => {
if (session?.isLoggedIn) {
setUserNm(session?.userNm ?? '')
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 ''
}
}, [session, setUserNm])
}
const handleSubmit = async () => {
if (isTemporary) {
alert('一時保存されたデータは提出できません。')
return
}
if (userNm === representative) {
if (confirm('提出しますか？？')) {
if (surveyId) {
// TODO: 제출 페이지 추가
alert('SUBMIT POPUP!!!!!!!!!!!')
await submitSurvey()
}
const result = checkRole()
if (result) {
if (isTemporary) {
alert('一時保存されたデータは提出できません。')
return
}
} else {
alert('担当者のみ提出可能です。')
window.neoConfirm(
'提出しますか？？',
async () => {
if (surveyDetail?.ID) {
// TODO: 제출 페이지 추가
alert('SUBMIT POPUP!!!!!!!!!!!')
await submitSurvey()
}
},
() => null,
)
}
}
const handleUpdate = () => {
if (userNm === representative) {
router.push(`/survey-sale/basic-info?id=${surveyId}&isTemp=${isTemporary}`)
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 () => {
if (confirm('削除しますか？')) {
if (surveyId) {
if (userNm === representative) {
await deleteSurvey()
router.push('/survey-sale')
} else {
alert('担当者のみ削除可能です。')
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">
{isTemporary ? (
<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={() => router.push('/survey-sale')}>
リスト<i className="btn-arr"></i>
<button className="btn-frame n-blue icon" onClick={handleUpdate}>
修正<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon" onClick={handleSubmit}>
提出<i className="btn-arr"></i>
<button className="btn-frame n-blue icon" onClick={handleDelete}>
削除<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>
)
}

23
src/components/survey-sale/detail/DetailForm.tsx
View File

@ -1,6 +1,5 @@
'use client'
import { useEffect, useState } from 'react'
import DetailButton from './DetailButton'
import { SurveyBasicInfo } from '@/types/Survey'
@ -11,14 +10,6 @@ export default function DetailForm({
surveyDetail: SurveyBasicInfo | null
isLoadingSurveyDetail: boolean
}) {
const [isTemporary, setIsTemporary] = useState(true)
useEffect(() => {
if (surveyDetail?.representative && surveyDetail?.store && surveyDetail?.construction_point) {
setIsTemporary(false)
}
}, [surveyDetail])
if (isLoadingSurveyDetail) {
return <div>Loading...</div>
}
@ -28,15 +19,15 @@ export default function DetailForm({
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.representative} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.REPRESENTATIVE} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.store ?? ''} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.STORE ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.construction_point ?? ''} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CONSTRUCTION_POINT ?? ''} />
</div>
</div>
</div>
@ -45,18 +36,18 @@ export default function DetailForm({
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.investigation_date ?? ''} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.INVESTIGATION_DATE ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.building_name ?? ''} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.BUILDING_NAME ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.customer_name ?? ''} />
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CUSTOMER_NAME ?? ''} />
</div>
</div>
<DetailButton isTemporary={isTemporary} surveyId={Number(surveyDetail?.id)} representative={surveyDetail?.representative ?? ''} />
<DetailButton surveyDetail={surveyDetail ?? null} />
</div>
</>
)

85
src/components/survey-sale/detail/RoofDetailForm.tsx
View File

@ -1,8 +1,8 @@
import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
import DetailButton from './DetailButton'
import { roof_material, supplementary_facilities } from './form/MultiCheckEtc'
import { selectBoxOptions } from './form/SelectBoxEtc'
import { radioEtcData } from './form/RadioEtc'
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,
@ -30,12 +30,12 @@ export default function RoofDetailForm({
<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 ?? ''} />
<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 ?? ''} />
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} />
</div>
{/* 전기 부대 설비 */}
<div className="data-input-form-bx">
@ -46,7 +46,7 @@ export default function RoofDetailForm({
<input
type="checkbox"
id={`${item.id}`}
checked={makeNumArr(surveyDetail?.detail_info?.supplementary_facilities ?? '').includes(String(item.id))}
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
readOnly
/>
<label htmlFor={`${item.id}`}>{item.name}</label>
@ -56,7 +56,7 @@ export default function RoofDetailForm({
<input
type="checkbox"
id={`supplementary_facilities_etc`}
checked={surveyDetail?.detail_info?.supplementary_facilities_etc !== null}
checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null}
readOnly
/>
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
@ -68,19 +68,19 @@ export default function RoofDetailForm({
className="input-frame"
placeholder="-"
readOnly
value={surveyDetail?.detail_info?.supplementary_facilities_etc ?? ''}
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} />
<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} />
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
</div>
{/* 지붕재 */}
<div className="data-input-form-bx">
@ -91,63 +91,63 @@ export default function RoofDetailForm({
<input
type="checkbox"
id={`${item.id}`}
checked={makeNumArr(surveyDetail?.detail_info?.roof_material ?? '').includes(String(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 />
<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 ?? ''} />
<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} />
<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 ?? ''} />
<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} />
<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} />
<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} />
<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} />
<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} />
<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} />
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
</div>
{/* 노지판 두께 */}
<div className="data-input-form-bx">
@ -158,7 +158,7 @@ export default function RoofDetailForm({
type="text"
placeholder="-"
readOnly
value={surveyDetail?.detail_info?.open_field_plate_thickness ?? ''}
value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''}
/>
<span>mm</span>
</div>
@ -166,37 +166,40 @@ export default function RoofDetailForm({
{/* 누수 흔적 */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">水漏れの痕跡</div>
<RadioSelected column="leak_trace" detailInfoData={surveyDetail?.detail_info ?? null} />
<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} />
<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} />
<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} />
<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} />
<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 ?? ''} />
<textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} />
</div>
</div>
</div>
<DetailButton isTemporary={false} surveyId={Number(surveyDetail?.id)} representative={surveyDetail?.representative ?? ''} />
<DetailButton
isTemporary={false}
surveyDetail={surveyDetail}
/>
</div>
</>
)
@ -204,16 +207,14 @@ export default function RoofDetailForm({
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
const etcValue = detailInfoData?.[`${column}_etc` 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">
{typeof selectedId === 'number' ? selectBoxOptions[column as keyof typeof selectBoxOptions][selectedId]?.name : ''}
</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()} />}
</>
@ -222,28 +223,30 @@ 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 === 'LEAK_TRACE') {
selectedId = Number(selectedId)
if (!selectedId) selectedId = 2
}
let etcValue = null
if (column !== 'rafter_direction') {
etcValue = detailInfoData?.[`${column}_etc` as keyof SurveyDetailInfo]
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={selectedId === 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' && (
{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>
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
</div>
)}
{etcChecked && (

113
src/components/survey-sale/detail/form/BasicForm.tsx
View File

@ -8,23 +8,23 @@ 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'
// 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,
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']
const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['REPRESENTATIVE', 'BUILDING_NAME', 'CUSTOMER_NAME']
export default function BasicForm() {
const searchParams = useSearchParams()
@ -37,32 +37,33 @@ export default function BasicForm() {
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
const { addressData } = useAddressStore()
const { userType, store, construction_point } = useUserType()
const { session } = useSessionStore()
const popupController = usePopupController()
useEffect(() => {
if (surveyDetail) {
const { id, updated_at, created_at, detail_info, ...rest } = 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,
POST_CODE: addressData.post_code,
ADDRESS: addressData.address,
ADDRESS_DETAIL: addressData.address_detail,
})
}
if (session?.isLoggedIn) {
setBasicInfoData((prev) => ({
...prev,
representative: session?.userNm ?? '',
REPRESENTATIVE: session?.userId ?? '',
STORE: session?.storeNm ?? '',
CONSTRUCTION_POINT: session?.builderNo ?? '',
}))
}
setBasicInfoSelected()
}, [surveyDetail, addressData, session?.isLoggedIn, session?.userNm])
}, [surveyDetail, addressData, session?.isLoggedIn, session?.userId, session?.storeNm, session?.builderNo])
const focusInput = (input: keyof SurveyBasicRequest) => {
const inputElement = document.getElementById(input)
@ -86,19 +87,19 @@ export default function BasicForm() {
const handleSave = async (isTemporary: boolean) => {
if (id) {
updateSurvey(basicInfoData)
// updateSurvey(basicInfoData)
alert('保存しました。')
router.push(`/survey-sale/${id}?tab=basic-info`)
// router.push(`/survey-sale/${id}?tab=basic-info`)
}
if (isTemporary) {
const saveId = await createSurvey(basicInfoData)
// const saveId = await createSurvey(basicInfoData)
alert('一時保存されました。')
router.push(`/survey-sale/${saveId}?tab=basic-info`)
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
} else {
if (validateSurvey(basicInfoData)) {
const saveId = await createSurvey(basicInfoData)
alert('保存しました。 登録番号: ' + saveId)
router.push(`/survey-sale/${saveId}?tab=basic-info`)
// const saveId = await createSurvey(basicInfoData)
alert('保存しました。')
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
}
}
}
@ -117,11 +118,11 @@ export default function BasicForm() {
type="text"
className="input-frame"
id="representative"
value={session?.userNm ? session?.userNm : basicInfoData.representative}
onChange={(e) => handleChange('representative', e.target.value)}
value={session?.userId ? session?.userId : basicInfoData.REPRESENTATIVE}
onChange={(e) => handleChange('REPRESENTATIVE', e.target.value)}
/>
</div>
{(userType === 'order' || userType?.includes('musubi')) && (
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
<>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
@ -129,21 +130,21 @@ export default function BasicForm() {
type="text"
className="input-frame"
id="store"
value={store ? store : basicInfoData.store ?? ''}
onChange={(e) => handleChange('store', e.target.value)}
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
onChange={(e) => handleChange('STORE', e.target.value)}
/>
</div>
</>
)}
{(userType === 'partner' || userType === 'musubi_con') && (
{(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={construction_point ? construction_point : basicInfoData.construction_point ?? ''}
onChange={(e) => handleChange('construction_point', e.target.value)}
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
onChange={(e) => handleChange('CONSTRUCTION_POINT', e.target.value)}
/>
</div>
)}
@ -161,9 +162,9 @@ export default function BasicForm() {
<input
type="date"
className="date-frame"
id="investigation_date"
value={basicInfoData.investigation_date ?? ''}
onChange={(e) => handleChange('investigation_date', e.target.value)}
id="INVESTIGATION_DATE"
value={basicInfoData.INVESTIGATION_DATE ?? ''}
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
/>
</div>
</div>
@ -172,9 +173,9 @@ export default function BasicForm() {
<input
type="text"
className="input-frame"
id="building_name"
value={basicInfoData.building_name ?? ''}
onChange={(e) => handleChange('building_name', e.target.value)}
id="BUILDING_NAME"
value={basicInfoData.BUILDING_NAME ?? ''}
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
/>
</div>
<div className="data-input-form-bx">
@ -182,27 +183,25 @@ export default function BasicForm() {
<input
type="text"
className="input-frame"
id="customer_name"
value={basicInfoData.customer_name ?? ''}
onChange={(e) => handleChange('customer_name', e.target.value)}
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 />
<input type="text" className="input-frame" id="POST_CODE" value={basicInfoData.POST_CODE ?? ''} readOnly />
</div>
<div className="form-bx">
<select
className="select-form"
name="address"
id="address"
value={basicInfoData.address ?? ''}
onChange={(e) => handleChange('address', e.target.value)}
>
<option value="">東京都</option>
</select>
<input
type="text"
className="input-frame"
name="address"
id="ADDRESS"
value={basicInfoData.ADDRESS ?? ''}
/>
</div>
</div>
<div className="form-btn">
@ -216,9 +215,9 @@ export default function BasicForm() {
<input
type="text"
className="input-frame"
id="address_detail"
value={basicInfoData.address_detail ?? ''}
onChange={(e) => handleChange('address_detail', e.target.value)}
id="ADDRESS_DETAIL"
value={basicInfoData.ADDRESS_DETAIL ?? ''}
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
/>
</div>
</div>

189
src/components/survey-sale/detail/form/RoofInfoForm.tsx
View File

@ -6,46 +6,46 @@ import { useServey } from '@/hooks/useSurvey'
import { SurveyDetailRequest } from '@/types/Survey'
import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import MultiCheckEtc from './MultiCheckEtc'
import SelectBoxEtc from './SelectBoxEtc'
import RadioEtc from './RadioEtc'
import MultiCheckEtc from './etcProcess/MultiCheckEtc'
import SelectBoxEtc from './etcProcess/SelectBoxEtc'
import RadioEtc from './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,
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() {
@ -64,14 +64,14 @@ export default function RoofInfoForm() {
const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
useEffect(() => {
if (surveyDetail?.detail_info) {
const { id, updated_at, created_at, basic_info_id, ...rest } = surveyDetail.detail_info
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') {
if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
const stringValue = value.toString()
if (stringValue.length > 5) {
alert('保存できるサイズを超えました。')
@ -86,7 +86,7 @@ export default function RoofInfoForm() {
}
setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
} else {
setDetailInfoData({ ...detailInfoData, [key]: value })
setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
}
}
@ -99,19 +99,20 @@ export default function RoofInfoForm() {
}
const handleUnitInput = (value: string) => {
const numericValue = detailInfoData.contract_capacity?.replace(/[^0-9.]/g, '') || ''
const numericValue = detailInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
setDetailInfoData({
...detailInfoData,
contract_capacity: numericValue ? `${numericValue} ${value}` : value,
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,
DETAIL_INFO: detailInfoData,
}
try {
createSurveyDetail({
@ -151,17 +152,17 @@ export default function RoofInfoForm() {
type="number"
inputMode="decimal"
className="input-frame"
value={detailInfoData.contract_capacity?.split(' ')[0] ?? ''}
onChange={(e) => handleNumberInput('contract_capacity', e.target.value)}
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"
name="CONTRACT_CAPACITY_UNIT"
id="CONTRACT_CAPACITY_UNIT"
onChange={(e) => handleUnitInput(e.target.value)}
value={detailInfoData.contract_capacity?.split(' ')[1] ?? ''}
value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
>
<option value="" hidden>
選択してください
@ -177,16 +178,16 @@ export default function RoofInfoForm() {
<input
type="text"
className="input-frame"
value={detailInfoData.retail_company ?? ''}
onChange={(e) => handleTextInput('retail_company', e.target.value)}
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} />
<MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div>
{/* 설치 희망 시스템 - installation_system */}
<SelectBoxEtc column={'installation_system'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div>
</div>
@ -194,13 +195,13 @@ export default function RoofInfoForm() {
<div className="sale-roof-title">屋根関係</div>
<div className="data-form-wrap">
{/* 건축 연수 - construction_year */}
<SelectBoxEtc column={'construction_year'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 지붕재 - roof_material */}
<div className="data-input-form-bx">
<MultiCheckEtc column={'roof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div>
{/* 지붕 모양 - roof_shape */}
<SelectBoxEtc column={'roof_shape'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 지붕 경사도 - roof_slope */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の斜面</div>
@ -210,20 +211,20 @@ export default function RoofInfoForm() {
step={0.1}
inputMode="decimal"
className="input-frame"
value={detailInfoData.roof_slope ?? ''}
onChange={(e) => handleNumberInput('roof_slope', e.target.value)}
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} />
<RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 재질 - rafter_material */}
<RadioEtc column={'rafter_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 크기 - rafter_size */}
<SelectBoxEtc column={'rafter_size'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 피치 - rafter_pitch */}
<SelectBoxEtc column={'rafter_pitch'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<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>
@ -231,29 +232,29 @@ export default function RoofInfoForm() {
<div className="radio-form-box">
<input
type="radio"
name="rafter_direction"
id="rafter_direction_1"
name="RAFTER_DIRECTION"
id="RAFTER_DIRECTION_1"
value={1}
onChange={(e) => handleNumberInput('rafter_direction', Number(e.target.value))}
checked={detailInfoData.rafter_direction === 1}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
checked={detailInfoData.RAFTER_DIRECTION === '1'}
/>
<label htmlFor="rafter_direction_1">垂直垂木</label>
<label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
</div>
<div className="radio-form-box">
<input
type="radio"
name="rafter_direction"
id="rafter_direction_2"
name="RAFTER_DIRECTION"
id="RAFTER_DIRECTION_2"
value={2}
onChange={(e) => handleNumberInput('rafter_direction', Number(e.target.value))}
checked={detailInfoData.rafter_direction === 2}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
checked={detailInfoData.RAFTER_DIRECTION === '2'}
/>
<label htmlFor="rafter_direction_2">水平垂木</label>
<label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
</div>
</div>
</div>
{/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'open_field_plate_kind'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<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">
@ -265,8 +266,8 @@ export default function RoofInfoForm() {
step={0.1}
inputMode="decimal"
className="input-frame"
value={detailInfoData.open_field_plate_thickness ?? ''}
onChange={(e) => handleNumberInput('open_field_plate_thickness', e.target.value)}
value={detailInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
/>
<span>mm</span>
</div>
@ -278,33 +279,33 @@ export default function RoofInfoForm() {
<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)}
name="LEAK_TRACE"
id="LEAK_TRACE_1"
checked={detailInfoData.LEAK_TRACE === true}
onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
/>
<label htmlFor="leak_trace_1">あり</label>
<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)}
name="LEAK_TRACE"
id="LEAK_TRACE_2"
checked={detailInfoData.LEAK_TRACE === false}
onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
/>
<label htmlFor="leak_trace_2">なし</label>
<label htmlFor="LEAK_TRACE_2">なし</label>
</div>
</div>
</div>
{/* 방수재 종류 - waterproof_material */}
<RadioEtc column={'waterproof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 단열재 유무 - insulation_presence */}
<RadioEtc column={'insulation_presence'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'structure_order'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 설치 가능 여부 - installation_availability */}
<SelectBoxEtc column={'installation_availability'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
<SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 메모 - memo */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">メモ</div>
@ -320,10 +321,10 @@ export default function RoofInfoForm() {
<div className="data-input">
<textarea
className="textarea-form"
name="memo"
id="memo"
value={detailInfoData.memo ?? ''}
onChange={(e) => handleTextInput('memo', e.target.value)}
name="MEMO"
id="MEMO"
value={detailInfoData.MEMO ?? ''}
onChange={(e) => handleTextInput('MEMO', e.target.value)}
placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
></textarea>
</div>

34
src/components/survey-sale/detail/form/MultiCheckEtc.tsx → src/components/survey-sale/detail/form/etcProcess/MultiCheckEtc.tsx
View File

@ -24,7 +24,7 @@ export default function MultiCheckbox({
setDetailInfoData: (data: any) => void
detailInfoData: SurveyDetailRequest
}) {
const selectList = column === 'supplementary_facilities' ? supplementary_facilities : roof_material
const selectList = column === 'SUPPLEMENTARY_FACILITIES' ? supplementary_facilities : roof_material
const [isOtherChecked, setIsOtherChecked] = useState(false)
const [otherValue, setOtherValue] = useState('')
@ -37,9 +37,9 @@ export default function MultiCheckbox({
}
useEffect(() => {
if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
setIsOtherChecked(true)
setOtherValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
setOtherValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
}
}, [detailInfoData])
@ -52,7 +52,7 @@ export default function MultiCheckbox({
newValue = value.filter((v) => v !== String(dataIndex))
} else {
// 체크
if (column === 'roof_material') {
if (column === 'ROOF_MATERIAL') {
// 기타가 체크되어 있는지 확인
const isOtherSelected = isOtherChecked
// 현재 선택된 항목 수 + 기타 선택 여부
@ -73,27 +73,23 @@ export default function MultiCheckbox({
}
const handleOtherCheckbox = () => {
if (column === 'roof_material') {
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
}
}
setIsOtherChecked(!isOtherChecked)
if (!isOtherChecked) {
setOtherValue('')
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: null,
})
} else {
setOtherValue('')
}
const newIsOtherChecked = !isOtherChecked
setIsOtherChecked(newIsOtherChecked)
setOtherValue('')
setDetailInfoData({
...detailInfoData,
[`${column}_ETC`]: newIsOtherChecked ? '' : null,
})
}
const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -101,13 +97,13 @@ export default function MultiCheckbox({
setOtherValue(value)
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: value,
[`${column}_ETC`]: value,
})
}
return (
<>
{column === 'supplementary_facilities' ? (
{column === 'SUPPLEMENTARY_FACILITIES' ? (
<>
<div className="data-input-form-tit">
電気袋設備<span>※複数選択可能</span>

102
src/components/survey-sale/detail/form/RadioEtc.tsx → src/components/survey-sale/detail/form/etcProcess/RadioEtc.tsx
View File

@ -2,25 +2,25 @@
import { useEffect, useState } from 'react'
import { SurveyDetailRequest } from '@/types/Survey'
type RadioEtcKeys = 'house_structure' | 'rafter_material' | 'waterproof_material' | 'insulation_presence' | 'rafter_direction' | 'leak_trace'
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: '水漏れの痕跡',
HOUSE_STRUCTURE: '住宅構造',
RAFTER_MATERIAL: '垂木材質',
WATERPROOF_MATERIAL: '防水材の種類',
INSULATION_PRESENCE: '断熱材の有無',
RAFTER_DIRECTION: '垂木の方向',
LEAK_TRACE: '水漏れの痕跡',
}
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
house_structure: [
HOUSE_STRUCTURE: [
{
id: 1,
label: '木製',
},
],
rafter_material: [
RAFTER_MATERIAL: [
{
id: 1,
label: '木製',
@ -30,13 +30,13 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: '強制',
},
],
waterproof_material: [
WATERPROOF_MATERIAL: [
{
id: 1,
label: 'アスファルト屋根940（22kg以上）',
},
],
insulation_presence: [
INSULATION_PRESENCE: [
{
id: 1,
label: 'なし',
@ -46,7 +46,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: 'あり',
},
],
rafter_direction: [
RAFTER_DIRECTION: [
{
id: 1,
label: '垂直垂木',
@ -56,7 +56,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: '水平垂木',
},
],
leak_trace: [
LEAK_TRACE: [
{
id: 1,
label: 'あり',
@ -81,35 +81,53 @@ export default function RadioEtc({
const [etcValue, setEtcValue] = useState('')
useEffect(() => {
if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
setIsEtcSelected(true)
setEtcValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
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
if (column === 'insulation_presence') {
setIsEtcSelected(value === '2')
setDetailInfoData({
...detailInfoData,
[column]: Number(value),
})
} else if (value === 'etc') {
setIsEtcSelected(true)
setDetailInfoData({
...detailInfoData,
[column]: null,
})
} else {
setIsEtcSelected(false)
setEtcValue('')
setDetailInfoData({
...detailInfoData,
[column]: Number(value),
[`${column}_etc`]: null,
})
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>) => {
@ -117,7 +135,7 @@ export default function RadioEtc({
setEtcValue(value)
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: value,
[`${column}_ETC`]: value,
})
}
@ -130,24 +148,24 @@ export default function RadioEtc({
type="radio"
name={column}
id={`${column}_${item.id}`}
value={item.id}
value={item.id.toString()}
onChange={handleRadioChange}
checked={detailInfoData[column] === item.id}
checked={detailInfoData[column] === item.id.toString()}
/>
<label htmlFor={`${column}_${item.id}`}>{item.label}</label>
</div>
))}
{column !== 'insulation_presence' && (
{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>
<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}
disabled={column === 'INSULATION_PRESENCE' ? !isEtcSelected : !isEtcSelected}
value={etcValue}
onChange={handleEtcInputChange}
/>

121
src/components/survey-sale/detail/form/SelectBoxEtc.tsx → src/components/survey-sale/detail/form/etcProcess/SelectBoxEtc.tsx
View File

@ -2,39 +2,39 @@ 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'
| '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',
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: '屋根製品名 設置可否確認',
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: [
INSTALLATION_SYSTEM: [
{
id: 1,
name: '太陽光発電', //태양광발전
@ -48,7 +48,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '蓄電池システム', //축전지시스템
},
],
construction_year: [
CONSTRUCTION_YEAR: [
{
id: 1,
name: '新築', //신축
@ -58,7 +58,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '既築', //기존
},
],
roof_shape: [
ROOF_SHAPE: [
{
id: 1,
name: '切妻', //박공지붕
@ -72,7 +72,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '片流れ', //한쪽흐름
},
],
rafter_size: [
RAFTER_SIZE: [
{
id: 1,
name: '幅35mm以上×高さ48mm以上',
@ -90,7 +90,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '幅38mm以上×高さ40mm以上',
},
],
rafter_pitch: [
RAFTER_PITCH: [
{
id: 1,
name: '(455mm以下',
@ -104,7 +104,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '606mm以下',
},
],
open_field_plate_kind: [
OPEN_FIELD_PLATE_KIND: [
{
id: 1,
name: '構造用合板', //구조용합판
@ -122,7 +122,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '小幅板', //소판
},
],
structure_order: [
STRUCTURE_ORDER: [
{
id: 1,
name: '屋根材', //지붕재
@ -140,7 +140,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '垂木', //서까래
},
],
installation_availability: [
INSTALLATION_AVAILABILITY: [
{
id: 1,
name: '確認済み', //확인완료
@ -165,35 +165,32 @@ export default function SelectBoxForm({
const [etcValue, setEtcValue] = useState('')
useEffect(() => {
if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
setIsEtcSelected(true)
setEtcValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
}
}, [detailInfoData])
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const value = e.target.value
if (column === 'installation_availability' || column === 'construction_year') {
setIsEtcSelected(value === '2') // 건축 연수 & 설치 가능 여부 컬럼 2번 선택 시 input 활성화
setDetailInfoData({
...detailInfoData,
[column]: Number(value),
})
} else if (value === 'etc') {
setIsEtcSelected(true) // 기타 선택 시 input 활성화
setDetailInfoData({
...detailInfoData,
[column]: null,
})
} else {
setIsEtcSelected(false) // 기타 선택 해제 시 input 비활성화
setEtcValue('')
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: null,
[column]: Number(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>) => {
@ -201,31 +198,31 @@ export default function SelectBoxForm({
setEtcValue(value)
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: value,
[`${column}_ETC`]: value,
})
}
return (
<>
<div className="data-input-form-bx">
<div className={font[column]}>{translateJapanese[column]}</div>
<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' : ''}
value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_ETC`] ? 'etc' : isEtcSelected ? 'etc' : ''}
>
<option value="" hidden>
選択してください
</option>
{selectBoxOptions[column].map((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>}
{column !== 'INSTALLATION_AVAILABILITY' && column !== 'CONSTRUCTION_YEAR' && <option value="etc">その他 (直接入力)</option>}
</select>
</div>
<div className="data-input">
@ -235,10 +232,10 @@ export default function SelectBoxForm({
value={etcValue ?? ''}
onChange={handleEtcInputChange}
disabled={
column === 'installation_availability'
column === 'INSTALLATION_AVAILABILITY'
? !Boolean(detailInfoData[column])
: column === 'construction_year'
? detailInfoData[column] !== 2 // 既築(2)가 아닐 때 비활성화
: column === 'CONSTRUCTION_YEAR'
? detailInfoData[column] !== '2' // 既築(2)가 아닐 때 비활성화
: !isEtcSelected
}
/>

25
src/components/survey-sale/list/ListTable.tsx
View File

@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import SearchForm from './SearchForm'
import { useSurveyFilterStore } from '@/store/surveyFilterStore'
import { UserType } from '@/hooks/useUserType'
import { useSessionStore } from '@/store/session'
export default function ListTable() {
const router = useRouter()
@ -15,7 +15,8 @@ export default function ListTable() {
const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([])
const [hasMore, setHasMore] = useState(false)
const [memberType, setMemberType] = useState<UserType>('hwj')
const { session } = useSessionStore()
useEffect(() => {
if (surveyList && surveyList.length > 0) {
@ -29,9 +30,7 @@ export default function ListTable() {
}
setHasMore(surveyListCount > offset + 10)
}
// 회원 유형 설정 이후 변경
setMemberType('hwj')
}, [surveyList, surveyListCount, offset])
}, [surveyList, surveyListCount, offset, session?.role])
const handleDetailClick = (id: number) => {
router.push(`/survey-sale/${id}`)
@ -45,22 +44,22 @@ export default function ListTable() {
return (
<>
<SearchForm onItemsInit={handleItemsInit} memberType={memberType} />
<SearchForm onItemsInit={handleItemsInit} 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.INVESTIGATION_DATE}</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.BUILDING_NAME}</div>
<div className="sale-item-customer">{survey.CUSTOMER_NAME}</div>
<div className="sale-item-update-bx">
<div className="sale-item-name">{survey.representative}</div>
<div className="sale-item-update">{new Date(survey.updated_at).toLocaleString()}</div>
<div className="sale-item-name">{survey.REPRESENTATIVE}</div>
<div className="sale-item-update">{new Date(survey.UPT_DT).toLocaleString()}</div>
</div>
</div>
</li>

35
src/components/survey-sale/list/SearchForm.tsx
View File

@ -1,31 +1,30 @@
'use client'
import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurveyFilterStore } from '@/store/surveyFilterStore'
import { UserType } from '@/hooks/useUserType'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
export default function SearchForm({ onItemsInit, memberType }: { onItemsInit: () => void; memberType: UserType }) {
export default function SearchForm({ onItemsInit, memberRole, userId }: { onItemsInit: () => void; memberRole: string; userId: string }) {
const router = useRouter()
const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
const [searchKeyword, setSearchKeyword] = useState(keyword)
const username = 'test'
const [option, setOption] = useState(searchOption)
const handleSearch = () => {
if (searchKeyword.trim().length < 2) {
if (option !== 'id' && searchKeyword.trim().length < 2) {
alert('2文字以上入力してください')
return
}
setKeyword(searchKeyword)
setSearchOption(option)
onItemsInit()
}
const searchOptions = memberType === 'partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
return (
<div className="sale-frame">
<div className="sale-form-bx">
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/basic-info')}>
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/regist')}>
新規売買登録<i className="btn-arr"></i>
</button>
</div>
@ -34,8 +33,18 @@ export default function SearchForm({ onItemsInit, memberType }: { onItemsInit: (
className="select-form"
name="search-option"
id="search-option"
value={searchOption}
onChange={(e) => setSearchOption(e.target.value as SEARCH_OPTIONS_ENUM)}
value={option}
onChange={(e) => {
if (e.target.value === 'all') {
setKeyword('')
setSearchKeyword('')
onItemsInit()
setSearchOption('all')
setOption('all')
} else {
setOption(e.target.value as SEARCH_OPTIONS_ENUM)
}
}}
>
{searchOptions.map((option) => (
<option key={option.id} value={option.id}>
@ -51,7 +60,9 @@ export default function SearchForm({ onItemsInit, memberType }: { onItemsInit: (
className="search-frame"
value={searchKeyword}
placeholder="タイトルを入力してください. (2文字以上)"
onChange={(e) => setSearchKeyword(e.target.value)}
onChange={(e) => {
setSearchKeyword(e.target.value)
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearch()
@ -66,9 +77,9 @@ export default function SearchForm({ onItemsInit, memberType }: { onItemsInit: (
<input
type="checkbox"
id="ch01"
checked={isMySurvey === username}
checked={isMySurvey === userId}
onChange={() => {
setIsMySurvey(isMySurvey === username ? null : username)
setIsMySurvey(isMySurvey === userId ? null : userId)
onItemsInit()
}}
/>

156
src/components/survey-sale/temp/basicRegist.tsx Normal file
View File

@ -0,0 +1,156 @@
'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)}
readOnly
/>
</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>
</>
)
}

92
src/components/survey-sale/temp/formButton.tsx Normal file
View File

@ -0,0 +1,92 @@
'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>
</>
)
}

105
src/components/survey-sale/temp/registForm.tsx Normal file
View File

@ -0,0 +1,105 @@
'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} />
</>
)
}

284
src/components/survey-sale/temp/roofRegist.tsx Normal file
View File

@ -0,0 +1,284 @@
'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>
</>
)
}

110
src/hooks/useSurvey.ts
View File

@ -1,8 +1,46 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import type { SurveyBasicInfo, SurveyBasicRequest, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest } 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'
const requiredFields = [
{
field: 'INSTALLATION_SYSTEM',
name: '設置希望システム',
},
{
field: 'CONSTRUCTION_YEAR',
name: '建築年数',
},
{
field: 'RAFTER_SIZE',
name: '垂木サイズ',
},
{
field: 'RAFTER_PITCH',
name: '垂木傾斜',
},
{
field: 'WATERPROOF_MATERIAL',
name: '防水材',
},
{
field: 'INSULATION_PRESENCE',
name: '断熱材有無',
},
{
field: 'STRUCTURE_ORDER',
name: '屋根構造の順序',
},
]
interface ZipCodeResponse {
status: number
@ -20,7 +58,6 @@ type ZipCode = {
kana2: string
kana3: string
}
import { useUserType } from './useUserType'
export function useServey(id?: number): {
surveyList: SurveyBasicInfo[] | []
@ -31,9 +68,9 @@ export function useServey(id?: number): {
isCreatingSurvey: boolean
isUpdatingSurvey: boolean
isDeletingSurvey: boolean
createSurvey: (survey: SurveyBasicRequest) => Promise<number>
createSurvey: (survey: SurveyRegistRequest) => Promise<number>
createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => void
updateSurvey: (survey: SurveyBasicRequest) => void
updateSurvey: (survey: SurveyRegistRequest) => void
deleteSurvey: () => Promise<boolean>
submitSurvey: () => void
validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string
@ -41,13 +78,22 @@ export function useServey(id?: number): {
} {
const queryClient = useQueryClient()
const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore()
const { store, construction_point } = useUserType()
const { session } = useSessionStore()
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, store, construction_point],
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', {
params: { keyword, searchOption, isMySurvey, sort, offset, store, construction_point },
params: {
keyword,
searchOption,
isMySurvey,
sort,
offset,
store: session?.storeNm,
builderNo: session?.builderNo,
role: session?.role,
},
})
return resp.data
},
@ -65,19 +111,27 @@ export function useServey(id?: number): {
})
const { data: surveyListCount } = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort],
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 },
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: SurveyBasicRequest) => {
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'] })
@ -87,10 +141,9 @@ export function useServey(id?: number): {
})
const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
mutationFn: async (survey: SurveyBasicRequest) => {
console.log('updateSurvey:: ', survey)
mutationFn: async (survey: SurveyRegistRequest) => {
if (id === undefined) throw new Error('id is required')
const resp = await axiosInstance(null).put<SurveyBasicInfo>(`/api/survey-sales/${id}`, survey)
const resp = await axiosInstance(null).put<SurveyRegistRequest>(`/api/survey-sales/${id}`, survey)
return resp.data
},
onSuccess: () => {
@ -137,32 +190,24 @@ export function useServey(id?: number): {
})
const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
const requiredFields = [
'installation_system',
'construction_year',
'rafter_size',
'rafter_pitch',
'rafter_direction',
'waterproof_material',
'insulation_presence',
'structure_order',
] as const
const etcFields = ['installation_system', 'construction_year', 'rafter_size', 'rafter_pitch', 'waterproof_material', 'structure_order'] as const
const etcFields = ['INSTALLATION_SYSTEM', 'CONSTRUCTION_YEAR', 'RAFTER_SIZE', 'RAFTER_PITCH', 'WATERPROOF_MATERIAL', 'STRUCTURE_ORDER'] as const
const emptyField = requiredFields.find((field) => {
if (etcFields.includes(field as (typeof etcFields)[number])) {
return surveyDetail[field as keyof SurveyDetailRequest] === null && surveyDetail[`${field}_etc` as keyof SurveyDetailRequest] === null
if (etcFields.includes(field.field as (typeof etcFields)[number])) {
return (
surveyDetail[field.field as keyof SurveyDetailRequest] === null && surveyDetail[`${field.field}_ETC` as keyof SurveyDetailRequest] === ''
)
} else {
return surveyDetail[field.field as keyof SurveyDetailRequest] === null
}
return surveyDetail[field as keyof SurveyDetailRequest] === null
})
const contractCapacity = surveyDetail.contract_capacity
const contractCapacity = surveyDetail.CONTRACT_CAPACITY
if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
return 'contract_capacity_unit'
return 'CONTRACT_CAPACITY_UNIT'
}
return emptyField || ''
return emptyField?.name || ''
}
const getZipCode = async (zipCode: string): Promise<ZipCode[] | null> => {
@ -170,7 +215,6 @@ export function useServey(id?: number): {
const { data } = await axiosInstance(null).get<ZipCodeResponse>(
`https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter({ zipcode: zipCode.trim() })}`,
)
return data.results
} catch (e) {
console.error('Failed to fetch zipcode data:', e)

24
src/hooks/useUserType.ts
View File

@ -1,24 +0,0 @@
import { useSessionStore } from '@/store/session'
import { useEffect, useState } from 'react'
export type UserType = 'hwj' | 'order' | 'musubi' | 'musubi_con' | 'partner'
// 로그인 된 회원 유형에 따라 조사 매물 목록 변경됨
export function useUserType() {
const { session } = useSessionStore()
const [userType, setUserType] = useState<UserType | null>(null)
const [store, setStore] = useState<string | null>(null)
const [construction_point, setConstructionPoint] = useState<string | null>(null)
// TODO: 회원 유형 설정
useEffect(() => {
if (!session?.isLoggedIn) return
setUserType('musubi_con')
}, [session])
return {
userType,
store,
construction_point,
}
}

6
src/store/surveyFilterStore.ts
View File

@ -1,11 +1,5 @@
import { create } from 'zustand'
// export type SEARCH_OPTIONS_ENUM = 'all' | 'id' | 'building_name' | 'representative' | 'store' | 'construction_point'
// | 'store_id' | 'construction_id'
// export type SEARCH_OPTIONS_PARTNERS_ENUM = 'all' | 'id' | 'building_name' | 'representative'
// export type SORT_OPTIONS_ENUM = 'created' | 'updated'
export const SEARCH_OPTIONS = [
{
id: 'all',

2
src/types/Survey.ts
View File

@ -1,5 +1,3 @@
import { SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS_ENUM, SORT_OPTIONS_ENUM } from '@/store/surveyFilterStore'
export type SurveyBasicInfo = {
ID: number
REPRESENTATIVE: string