diff --git a/src/components/survey-sale/common/NavTab.tsx b/src/components/survey-sale/common/NavTab.tsx index 7d763cc..414d899 100644 --- a/src/components/survey-sale/common/NavTab.tsx +++ b/src/components/survey-sale/common/NavTab.tsx @@ -1,9 +1,10 @@ 'use client' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' export default function NavTab() { const pathname = usePathname() + const router = useRouter() if (pathname === '/survey-sale') { return null @@ -14,8 +15,12 @@ export default function NavTab() {
- - + +
diff --git a/src/components/survey-sale/detail/RoofInfoForm.tsx b/src/components/survey-sale/detail/RoofInfoForm.tsx index bbe6546..eaa49fc 100644 --- a/src/components/survey-sale/detail/RoofInfoForm.tsx +++ b/src/components/survey-sale/detail/RoofInfoForm.tsx @@ -1,6 +1,91 @@ '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(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 ( <>
@@ -9,11 +94,21 @@ export default function RoofInfoForm() {
電気契約容量
- + handleTextInput('contract_capacity', e.target.value)} + />
- handleUnitInput(e.target.value)} + > + @@ -23,37 +118,15 @@ export default function RoofInfoForm() {
電気小売会社
- + handleTextInput('retail_company', e.target.value)} + />
-
- 電気袋設備※複数選択可能 -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
+
設置希望システム
@@ -93,34 +166,7 @@ export default function RoofInfoForm() {
-
- 屋根材※最大2個まで選択可能 -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
+
建築研修
@@ -340,17 +386,17 @@ export default function RoofInfoForm() {
-
-
-
diff --git a/src/components/survey-sale/detail/form/MultiCheckbox.tsx b/src/components/survey-sale/detail/form/MultiCheckbox.tsx new file mode 100644 index 0000000..7abfca9 --- /dev/null +++ b/src/components/survey-sale/detail/form/MultiCheckbox.tsx @@ -0,0 +1,81 @@ +import { SurveyDetailRequest } from '@/types/Survey' +import { useState } from 'react' + +const supplementary_facilities = [ + { id: 1, name: 'エコキュート' }, + { id: 2, name: 'エネパーム' }, + { id: 3, name: '蓄電池システム' }, + { id: 4, name: '太陽光発電' }, +] + +const roof_material = [ + { id: 1, name: 'スレート' }, + { id: 2, name: 'アスファルトシングル' }, + { id: 3, name: '瓦' }, + { id: 4, name: '金属屋根' }, +] + +export default function MultiCheckbox({ + column, + setDetailInfoData, + detailInfoData, +}: { + column: string + setDetailInfoData: (data: any) => void + detailInfoData: SurveyDetailRequest +}) { + const selectList = column === 'supplementary_facilities' ? supplementary_facilities : roof_material + + const [isOtherChecked, setIsOtherChecked] = useState(false) + + const handleCheckbox = (dataName: string) => { + const value = column === 'supplementary_facilities' ? detailInfoData.supplementary_facilities : detailInfoData.roof_material + setDetailInfoData({ + ...detailInfoData, + [column]: `${value}, ${dataName}`, + }) + } + + return ( + <> + {column === 'supplementary_facilities' ? ( + <> +
+ 電気袋設備※複数選択可能 +
+ + ) : ( + <> +
+ 屋根材※最大2個まで選択可能 +
+ + )} +
+ {selectList.map((item) => ( +
+ v.trim()) + .includes(item.name) + } + onChange={() => handleCheckbox(item.name)} + /> + +
+ ))} +
+ + +
+
+
+ +
+ + ) +}