select ubicacion

This commit is contained in:
2025-12-02 15:19:57 -04:00
parent efa1726223
commit d3b3fa5e85
3 changed files with 110 additions and 11 deletions

View File

@@ -23,6 +23,10 @@ import { useForm } from 'react-hook-form';
import { useCreateTraining } from "../hooks/use-training";
import { TrainingSchema, trainingSchema } from '../schemas/training';
import { SelectSearchable } from '@repo/shadcn/select-searchable'
import React from 'react';
import { useStateQuery, useMunicipalityQuery, useParishQuery } from '@/feactures/location/hooks/use-query-location';
const PRODUCTIVE_ACTIVITIES = [
'Agricola',
'Textil',
@@ -47,6 +51,25 @@ export function CreateTrainingForm({
isPending: isSaving,
} = useCreateTraining();
const [state, setState] = React.useState(0);
const [municipality, setMunicipality] = React.useState(0);
const [disabledMunicipality, setDisabledMunicipality] = React.useState(true);
const [disabledParish, setDisabledParish] = React.useState(true);
const { data : dataState } = useStateQuery()
const { data : dataMunicipality } = useMunicipalityQuery(state)
const { data : dataParish } = useParishQuery(municipality)
const stateOptions = dataState?.data || [{id:0,name:'Sin estados'}]
const municipalityOptions = Array.isArray(dataMunicipality?.data) && dataMunicipality.data.length > 0
? dataMunicipality.data
: [{id:0,stateId:0,name:'Sin Municipios'}]
// const parishOptions = dataParish?.data || [{id:0,municipalityId:0,name:'Sin Parroquias'}]
const parishOptions = Array.isArray(dataParish?.data) && dataParish.data.length > 0
? dataParish.data
: [{id:0,stateId:0,name:'Sin Parroquias'}]
const form = useForm<TrainingSchema>({
resolver: zodResolver(trainingSchema),
defaultValues: {
@@ -80,9 +103,9 @@ export function CreateTrainingForm({
photo2: defaultValues?.photo2 || '',
photo3: defaultValues?.photo3 || '',
paralysisReason: defaultValues?.paralysisReason || '',
state: defaultValues?.state || '',
municipality: defaultValues?.municipality || '',
parish: defaultValues?.parish || '',
state: defaultValues?.state || undefined,
municipality: defaultValues?.municipality || undefined,
parish: defaultValues?.parish || undefined,
},
mode: 'onChange',
});
@@ -147,7 +170,85 @@ export function CreateTrainingForm({
<h3 className="text-lg font-medium mb-2 mt-4">Ubicación</h3>
</div>
<FormField control={form.control} name="state" render={({ field }) => (
<FormField
control={form.control}
name="state"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Estado</FormLabel>
<SelectSearchable
options={
stateOptions?.map((item) => ({
value: item.id.toString(),
label: item.name,
})) || []
}
onValueChange={(value : any) =>
{field.onChange(Number(value)); setState(value); setDisabledMunicipality(false); setDisabledParish(true)}
}
placeholder="Selecciona un estado"
defaultValue={field.value?.toString()}
// disabled={readOnly}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="municipality"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Municipio</FormLabel>
<SelectSearchable
options={
municipalityOptions?.map((item) => ({
value: item.id.toString(),
label: item.name,
})) || []
}
onValueChange={(value : any) =>
{field.onChange(Number(value)); setMunicipality(value); setDisabledParish(false)}
}
placeholder="Selecciona un Municipio"
defaultValue={field.value?.toString()}
disabled={disabledMunicipality}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="parish"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Parroquia</FormLabel>
<SelectSearchable
options={
parishOptions?.map((item) => ({
value: item.id.toString(),
label: item.name,
})) || []
}
onValueChange={(value : any) =>
field.onChange(Number(value))
}
placeholder="Selecciona una Parroquia"
defaultValue={field.value?.toString()}
disabled={disabledParish}
/>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField control={form.control} name="state" render={({ field }) => (
<FormItem>
<FormLabel>Estado</FormLabel>
<FormControl><Input {...field} value={field.value || ''} /></FormControl>
@@ -169,7 +270,7 @@ export function CreateTrainingForm({
<FormControl><Input {...field} value={field.value || ''} /></FormControl>
<FormMessage />
</FormItem>
)} />
)} /> */}
<FormField control={form.control} name="siturCodeCommune" render={({ field }) => (
<FormItem>