onsitesurvey/src/components/SurveySales.tsx

128 lines
3.7 KiB
TypeScript

'use client'
import { surveySalesApi, SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useState } from 'react'
export default function SurveySales() {
const [isSearch, setIsSearch] = useState(false)
const queryClient = useQueryClient()
const {
mutate: createSurveySales,
isPending,
error,
} = useMutation({
mutationFn: surveySalesApi.create,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] })
},
})
const handleSurveySales = () => {
const data: SurveySalesBasicInfo = {
representative: 'keyy1315',
store: 'HWJ(T01)',
construction_point: 'HWJ(T01)',
investigation_date: '2025-04-28',
building_name: 'Hanwha Japan Building',
customer_name: 'Hong Gil Dong',
post_code: '1050013',
address: 'Tokyo, Japan',
address_detail: '1-1-1',
submission_status: false,
}
createSurveySales(data)
}
const { data, error: errorList } = useQuery({
queryKey: ['survey-sales', 'list'],
queryFn: surveySalesApi.getList,
enabled: isSearch,
})
const { mutate: updateSurveySales } = useMutation({
mutationFn: surveySalesApi.update,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] })
},
})
const handleUpdateSurveySales = () => {
const detailData: SurveySalesDetailInfo = {
contract_capacity: '1100',
retail_company: 'test company',
supplementary_facilities: 1,
supplementary_facilities_etc: '',
installation_system: 3,
installation_system_etc: '',
construction_year: 4,
construction_year_etc: '',
roof_material: 1,
roof_material_etc: '',
roof_shape: 2,
roof_shape_etc: '',
roof_slope: '4.5',
house_structure: 1,
house_structure_etc: '',
rafter_material: 5,
rafter_material_etc: 'test message',
rafter_size: 3,
rafter_size_etc: '',
rafter_pitch: 2,
rafter_pitch_etc: '',
rafter_direction: 3,
open_field_plate_kind: 3,
open_field_plate_kind_etc: '',
open_field_plate_thickness: '',
leak_trace: false,
waterproof_material: 2,
waterproof_material_etc: '',
insulation_presence: 3,
insulation_presence_etc: '',
structure_order: 2,
structure_order_etc: '',
installation_availability: 1,
installation_availability_etc: '',
memo: 'test memo',
}
if (!data) return
const surveySalesData: SurveySalesBasicInfo = {
...data[0],
detail_info: { ...detailData },
}
updateSurveySales(surveySalesData)
}
return (
<>
<div className="flex items-center justify-center">
<div className="flex gap-2">
<button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleSurveySales}>
</button>
<button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={() => setIsSearch(true)}>
</button>
<button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleUpdateSurveySales}>
(detail info add)
</button>
</div>
</div>
{/* <div className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-4" role="alert">
<p className="font-bold">Be Warned</p>
<p>기본 데이터 세팅 되어있습니다.</p>
</div> */}
<div>
{errorList && <div>Error: {errorList.message}</div>}
{data && data.map((item) => <div key={item.id}>{JSON.stringify(item)}</div>)}
</div>
</>
)
}