select ubicacion
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -32,9 +32,9 @@ export const trainingSchema = z.object({
|
||||
photo2: z.string().optional().default(''),
|
||||
photo3: z.string().optional().default(''),
|
||||
paralysisReason: z.string().optional().default(''),
|
||||
state: z.string().optional().nullable(),
|
||||
municipality: z.string().optional().nullable(),
|
||||
parish: z.string().optional().nullable(),
|
||||
state: z.number().optional().nullable(),
|
||||
municipality: z.number().optional().nullable(),
|
||||
parish: z.number().optional().nullable(),
|
||||
});
|
||||
|
||||
export type TrainingSchema = z.infer<typeof trainingSchema>;
|
||||
|
||||
Reference in New Issue
Block a user