feat: implement spinning when generate survey-sale pdf
- 조사매물 pdf 다운로드 기능 완성 - 지붕 정보 주택 구조 순서 radiobox로 변경경
This commit is contained in:
parent
23164a3f8c
commit
03d91f3fa0
@ -1,27 +1,29 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import generatePDF, { Margin, Resolution } from 'react-to-pdf'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useSurvey } from '@/hooks/useSurvey'
|
||||
import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'
|
||||
import { useSpinnerStore } from '@/store/spinnerStore'
|
||||
|
||||
export default function SurveySaleDownloadPdf() {
|
||||
const params = useParams()
|
||||
const id = params.id
|
||||
const router = useRouter()
|
||||
|
||||
const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const { setIsShow } = useSpinnerStore()
|
||||
|
||||
const targetRef = useRef<HTMLDivElement>(null)
|
||||
const isGeneratedRef = useRef(false)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
|
||||
// isGeneratedRef.current = true
|
||||
// handleDownPdf()
|
||||
// }, [surveyDetail?.id, isLoadingSurveyDetail])
|
||||
useEffect(() => {
|
||||
setIsShow(true)
|
||||
if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
|
||||
isGeneratedRef.current = true
|
||||
handleDownPdf()
|
||||
}, [surveyDetail?.id, isLoadingSurveyDetail])
|
||||
|
||||
const handleDownPdf = () => {
|
||||
const options = {
|
||||
@ -47,6 +49,7 @@ export default function SurveySaleDownloadPdf() {
|
||||
}
|
||||
|
||||
generatePDF(targetRef, options).then(() => {
|
||||
setIsShow(false)
|
||||
router.push(`/survey-sale/${id}`)
|
||||
})
|
||||
}
|
||||
@ -56,11 +59,9 @@ export default function SurveySaleDownloadPdf() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <button onClick={handleDownPdf}>down</button> */}
|
||||
<div
|
||||
ref={targetRef}
|
||||
style={{
|
||||
// boxSizing: 'border-box'
|
||||
width: '794px', // A4 너비
|
||||
minHeight: '1123px', // A4 높이
|
||||
transform: 'scale(1.0)',
|
||||
@ -71,9 +72,7 @@ export default function SurveySaleDownloadPdf() {
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
// style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}
|
||||
>
|
||||
<div>
|
||||
<div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
|
||||
<div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
|
||||
HWJ 現地調査シート1/2
|
||||
@ -449,8 +448,8 @@ export default function SurveySaleDownloadPdf() {
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{surveyDetail?.detailInfo?.houseStructure ? '木製' : ''}
|
||||
{surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-'}
|
||||
{radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
|
||||
(surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -479,10 +478,12 @@ export default function SurveySaleDownloadPdf() {
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
|
||||
{/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
|
||||
? '-'
|
||||
: radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
|
||||
surveyDetail?.detailInfo?.rafterMaterialEtc}
|
||||
surveyDetail?.detailInfo?.rafterMaterialEtc} */}
|
||||
{radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
|
||||
(surveyDetail?.detailInfo?.rafterMaterialEtc ? ` ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
|
||||
</td>
|
||||
<th
|
||||
style={{
|
||||
@ -723,7 +724,7 @@ export default function SurveySaleDownloadPdf() {
|
||||
radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
|
||||
?.label
|
||||
}
|
||||
{surveyDetail?.detailInfo?.insulationPresenceEtc ? ` ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : '-'}
|
||||
{surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -753,8 +754,8 @@ export default function SurveySaleDownloadPdf() {
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{selectBoxOptions.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.name ??
|
||||
(surveyDetail?.detailInfo?.structureOrderEtc ? ` ${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
|
||||
{radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
|
||||
(surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -792,12 +793,12 @@ export default function SurveySaleDownloadPdf() {
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{
|
||||
selectBoxOptions.installationAvailability.find(
|
||||
(availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
|
||||
)?.name
|
||||
}
|
||||
{surveyDetail?.detailInfo?.installationAvailabilityEtc ? ` ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : '-'}
|
||||
{surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
|
||||
? '-'
|
||||
: selectBoxOptions.installationAvailability.find(
|
||||
(availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
|
||||
)?.name}
|
||||
{surveyDetail?.detailInfo?.installationAvailabilityEtc ? `, ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -6,12 +6,14 @@ import { useEffect, useState } from 'react'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
import { useCommCode } from '@/hooks/useCommCode'
|
||||
import { CommCode } from '@/types/CommCode'
|
||||
// import { sendEmail } from '@/libs/mailer'
|
||||
import { useSpinnerStore } from '@/store/spinnerStore'
|
||||
|
||||
interface SubmitFormData {
|
||||
saleBase: string | null
|
||||
store: string
|
||||
sender: string
|
||||
receiver: string[]
|
||||
receiver: string[] | string
|
||||
reference: string | null
|
||||
title: string
|
||||
contents: string
|
||||
@ -29,6 +31,7 @@ export default function SurveySaleSubmitPopup() {
|
||||
const params = useParams()
|
||||
const routeId = params.id
|
||||
|
||||
const { setIsShow } = useSpinnerStore()
|
||||
const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
|
||||
|
||||
const { getCommCode } = useCommCode()
|
||||
@ -86,10 +89,22 @@ export default function SurveySaleSubmitPopup() {
|
||||
const handleSubmit = () => {
|
||||
if (validateData(submitData)) {
|
||||
window.neoConfirm('送信しますか？ 送信後は変更・修正することはできません。', () => {
|
||||
setIsShow(true)
|
||||
submitSurvey({ targetId: submitData.store })
|
||||
// sendEmail({
|
||||
// to: submitData.receiver,
|
||||
// subject: submitData.title,
|
||||
// content: submitData.contents,
|
||||
// })
|
||||
// .then(() => {
|
||||
if (!isSubmittingSurvey) {
|
||||
popupController.setSurveySaleSubmitPopup(false)
|
||||
}
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error('Error sending email:', error)
|
||||
// alert('メール送信に失敗しました。')
|
||||
// })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
import { useState } from 'react'
|
||||
import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
|
||||
|
||||
type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
|
||||
type RadioEtcKeys =
|
||||
| 'structureOrder'
|
||||
| 'houseStructure'
|
||||
| 'rafterMaterial'
|
||||
| 'waterproofMaterial'
|
||||
| 'insulationPresence'
|
||||
| 'rafterDirection'
|
||||
| 'leakTrace'
|
||||
type SelectBoxKeys =
|
||||
| 'installationSystem'
|
||||
| 'constructionYear'
|
||||
@ -9,7 +16,6 @@ type SelectBoxKeys =
|
||||
| 'rafterPitch'
|
||||
| 'rafterSize'
|
||||
| 'openFieldPlateKind'
|
||||
| 'structureOrder'
|
||||
| 'installationAvailability'
|
||||
|
||||
export const supplementaryFacilities = [
|
||||
@ -115,24 +121,6 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
|
||||
name: '小幅板', //소판
|
||||
},
|
||||
],
|
||||
structureOrder: [
|
||||
{
|
||||
id: 1,
|
||||
name: '屋根材', //지붕재
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '防水材', //방수재
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '屋根の基礎', //지붕의기초
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '垂木', //서까래
|
||||
},
|
||||
],
|
||||
installationAvailability: [
|
||||
{
|
||||
id: 1,
|
||||
@ -146,6 +134,12 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
|
||||
}
|
||||
|
||||
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
|
||||
structureOrder: [
|
||||
{
|
||||
id: 1,
|
||||
label: '屋根材 - 防水材 - 屋根の基礎 - 垂木', //지붕재 방수재 지붕의기초 서까래
|
||||
},
|
||||
],
|
||||
houseStructure: [
|
||||
{
|
||||
id: 1,
|
||||
@ -438,7 +432,7 @@ export default function RoofForm(props: {
|
||||
<div className="data-input-form-bx">
|
||||
{/* 지붕 구조의 순서 */}
|
||||
<div className="data-input-form-tit red-f">屋根構造の順序</div>
|
||||
<SelectedBox mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
|
||||
<RadioSelected mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
{/* 지붕 제품명 설치 가능 여부 확인 */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user