408 lines
17 KiB
TypeScript
408 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { useServey } from '@/hooks/useSurvey'
|
||
import { SurveyDetailRequest } from '@/types/Survey'
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import { useEffect, useState } from 'react'
|
||
import MultiCheckbox from './form/MultiCheckbox'
|
||
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: null,
|
||
house_structure_etc: null,
|
||
rafter_material: null,
|
||
rafter_material_etc: null,
|
||
rafter_size: null,
|
||
rafter_size_etc: null,
|
||
rafter_pitch: null,
|
||
rafter_pitch_etc: null,
|
||
rafter_direction: null,
|
||
open_field_plate_kind: null,
|
||
open_field_plate_kind_etc: null,
|
||
open_field_plate_thickness: null,
|
||
leak_trace: null,
|
||
waterproof_material: null,
|
||
waterproof_material_etc: null,
|
||
insulation_presence: null,
|
||
insulation_presence_etc: null,
|
||
structure_order: null,
|
||
structure_order_etc: null,
|
||
installation_availability: null,
|
||
installation_availability_etc: null,
|
||
memo: null,
|
||
}
|
||
|
||
export default function RoofInfoForm() {
|
||
const router = useRouter()
|
||
const searchParams = useSearchParams()
|
||
const id = searchParams.get('id')
|
||
|
||
const { updateSurvey, isUpdatingSurvey, surveyDetail, createSurveyDetail } = useServey(Number(id))
|
||
|
||
const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
|
||
|
||
useEffect(() => {
|
||
if (surveyDetail?.detail_info) {
|
||
const { id, updated_at, created_at, ...rest } = surveyDetail.detail_info
|
||
setDetailInfoData(rest)
|
||
}
|
||
}, [surveyDetail])
|
||
|
||
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
|
||
if (typeof value === 'string') {
|
||
const numberValue = value === '' ? null : Number(value)
|
||
setDetailInfoData({ ...detailInfoData, [key]: numberValue })
|
||
} else {
|
||
setDetailInfoData({ ...detailInfoData, [key]: value })
|
||
}
|
||
}
|
||
|
||
const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
|
||
setDetailInfoData({ ...detailInfoData, [key]: value || null })
|
||
}
|
||
|
||
const handleBooleanInput = (key: keyof SurveyDetailRequest, checked: boolean) => {
|
||
setDetailInfoData({ ...detailInfoData, [key]: checked })
|
||
}
|
||
|
||
const handleUnitInput = (value: string) => {
|
||
const capacity = detailInfoData.contract_capacity
|
||
setDetailInfoData({ ...detailInfoData, contract_capacity: `${capacity} ${value}` })
|
||
}
|
||
|
||
const handleSave = () => {
|
||
if (id) {
|
||
console.log('detailInfoData:: ', detailInfoData)
|
||
}
|
||
}
|
||
return (
|
||
<>
|
||
<div className="sale-frame">
|
||
<div className="sale-roof-title">電気関係</div>
|
||
<div className="data-form-wrap">
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">電気契約容量</div>
|
||
<div className="data-input mb5">
|
||
<input
|
||
type="text"
|
||
className="input-frame"
|
||
value={detailInfoData.contract_capacity ?? ''}
|
||
onChange={(e) => handleTextInput('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)}
|
||
>
|
||
<option value="kVA">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
<option value="">kVA</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">電気小売会社</div>
|
||
<input
|
||
type="text"
|
||
className="input-frame"
|
||
value={detailInfoData.retail_company ?? ''}
|
||
onChange={(e) => handleTextInput('retail_company', e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<MultiCheckbox column={'supplementary_facilities'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData}/>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">設置希望システム</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">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="sale-frame">
|
||
<div className="sale-roof-title">屋根関係</div>
|
||
<div className="data-form-wrap">
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">建築研修</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 flex">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
<span>年</span>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<MultiCheckbox column={'roof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||
</div>
|
||
<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">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">屋根の斜面</div>
|
||
<div className="data-input flex">
|
||
<input type="text" className="input-frame" defaultValue={'4'} />
|
||
<span>寸</span>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">住宅構造</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio01" id="ra01" />
|
||
<label htmlFor="ra01">木製</label>
|
||
</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio01" id="ra02" />
|
||
<label htmlFor="ra02">その他 (直接入力)</label>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">垂木材質</div>
|
||
<div className="data-check-wrap">
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra03" />
|
||
<label htmlFor="ra03">木製</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra04" />
|
||
<label htmlFor="ra04">強制</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio02" id="ra05" />
|
||
<label htmlFor="ra05">その他 (直接入力)</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||
<div className="data-input mb5">
|
||
<select className="select-form" name="" id="">
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
<option value="">幅35mm以上×高さ48mm以上</option>
|
||
</select>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">垂木サイズ</div>
|
||
<div className="data-input mb5">
|
||
<select className="select-form" name="" id="">
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
<option value="">455mm以下</option>
|
||
</select>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">垂木の方向</div>
|
||
<div className="data-check-wrap mb0">
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio03" id="ra06" />
|
||
<label htmlFor="ra06">垂直垂木</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio03" id="ra07" />
|
||
<label htmlFor="ra07">水平垂木</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit">
|
||
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
|
||
</div>
|
||
<div className="data-input flex">
|
||
<input type="text" className="input-frame" defaultValue={'150'} />
|
||
<span>mm</span>
|
||
</div>
|
||
</div>
|
||
<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="radio04" id="ra08" />
|
||
<label htmlFor="ra08">あり</label>
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio04" id="ra09" />
|
||
<label htmlFor="ra09">なし</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">住宅構造</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio05" id="ra10" />
|
||
<label htmlFor="ra10">アスファルト屋根940（22kg以上）</label>
|
||
</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio05" id="ra11" />
|
||
<label htmlFor="ra11">その他 (直接入力)</label>
|
||
</div>
|
||
<div className="data-input">
|
||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">断熱材の有無</div>
|
||
<div className="radio-form-box mb10">
|
||
<input type="radio" name="radio06" id="ra12" />
|
||
<label htmlFor="ra12">あり</label>
|
||
</div>
|
||
<div className="data-input mb10">
|
||
<input type="text" className="input-frame" defaultValue={''} />
|
||
</div>
|
||
<div className="radio-form-box">
|
||
<input type="radio" name="radio06" id="ra13" />
|
||
<label htmlFor="ra13">なし</label>
|
||
</div>
|
||
</div>
|
||
<div className="data-input-form-bx">
|
||
<div className="data-input-form-tit red-f">路地板の種類</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">
|
||
<input type="text" className="input-frame" defaultValue={''} disabled />
|
||
</div>
|
||
</div>
|
||
<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">
|
||
<input type="text" className="input-frame" defaultValue={'高島'} />
|
||
</div>
|
||
</div>
|
||
<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=""
|
||
id=""
|
||
defaultValue={'漏れの兆候があるため、正確な点検が必要です.'}
|
||
placeholder="TextArea Filed"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="btn-flex-wrap">
|
||
<div className="btn-bx">
|
||
<button className="btn-frame n-blue icon" onClick={handleSave}>
|
||
一時保存<i className="btn-arr"></i>
|
||
</button>
|
||
</div>
|
||
<div className="btn-bx">
|
||
<button className="btn-frame red icon" onClick={handleSave}>
|
||
保存<i className="btn-arr"></i>
|
||
</button>
|
||
</div>
|
||
<div className="btn-bx">
|
||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||
リスト<i className="btn-arr"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|