feat: add muticheckbox component for write roof information
This commit is contained in:
parent
c9812d1159
commit
8e563c18dc
@ -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() {
|
||||
<div className="sale-detail-tab-relative">
|
||||
<div className="sale-detail-tab-wrap">
|
||||
<div className="sale-detail-tab-inner">
|
||||
<button className="sale-detail-tab">基本情報</button>
|
||||
<button className="sale-detail-tab">電気 / 屋根情報</button>
|
||||
<button className="sale-detail-tab" onClick={() => router.push('/survey-sale/basic-info')}>
|
||||
基本情報
|
||||
</button>
|
||||
<button className="sale-detail-tab" onClick={() => router.push('/survey-sale/roof-info')}>
|
||||
電気 / 屋根情報
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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<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">
|
||||
@ -9,11 +94,21 @@ export default function RoofInfoForm() {
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気契約容量</div>
|
||||
<div className="data-input mb5">
|
||||
<input type="text" className="input-frame" defaultValue={'10'} />
|
||||
<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="" id="">
|
||||
<option value="">kVA</option>
|
||||
<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>
|
||||
@ -23,37 +118,15 @@ export default function RoofInfoForm() {
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">電気小売会社</div>
|
||||
<input type="text" className="input-frame" defaultValue={'HWJ Electric'} />
|
||||
<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">
|
||||
<div className="data-input-form-tit">
|
||||
電気袋設備<span>※複数選択可能</span>
|
||||
</div>
|
||||
<div className="data-check-wrap">
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">エコキュート</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch02" />
|
||||
<label htmlFor="ch02">エネパーム</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch03" />
|
||||
<label htmlFor="ch03">蓄電池システム</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch04" />
|
||||
<label htmlFor="ch04">太陽光発電</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch05" />
|
||||
<label htmlFor="ch05">その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||||
</div>
|
||||
<MultiCheckbox column={'supplementary_facilities'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData}/>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit red-f">設置希望システム</div>
|
||||
@ -93,34 +166,7 @@ export default function RoofInfoForm() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
屋根材<span>※最大2個まで選択可能</span>
|
||||
</div>
|
||||
<div className="data-check-wrap">
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">スレート</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch02" />
|
||||
<label htmlFor="ch02">アスファルトシングル</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch03" />
|
||||
<label htmlFor="ch03">瓦</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch04" />
|
||||
<label htmlFor="ch04">金属屋根</label>
|
||||
</div>
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch05" />
|
||||
<label htmlFor="ch05">その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||||
</div>
|
||||
<MultiCheckbox column={'roof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">建築研修</div>
|
||||
@ -340,17 +386,17 @@ export default function RoofInfoForm() {
|
||||
</div>
|
||||
<div className="btn-flex-wrap">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">
|
||||
<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">
|
||||
<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">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
81
src/components/survey-sale/detail/form/MultiCheckbox.tsx
Normal file
81
src/components/survey-sale/detail/form/MultiCheckbox.tsx
Normal file
@ -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' ? (
|
||||
<>
|
||||
<div className="data-input-form-tit">
|
||||
電気袋設備<span>※複数選択可能</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="data-input-form-tit">
|
||||
屋根材<span>※最大2個まで選択可能</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="data-check-wrap">
|
||||
{selectList.map((item) => (
|
||||
<div className="check-form-box" key={item.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`ch${item.id}`}
|
||||
checked={
|
||||
String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.includes(item.name)
|
||||
}
|
||||
onChange={() => handleCheckbox(item.name)}
|
||||
/>
|
||||
<label htmlFor={`ch${item.id}`}>{item.name}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch05" checked={isOtherChecked} />
|
||||
<label htmlFor="ch05">その他 (直接入力)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" disabled defaultValue={''} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user