Cambios en el formulario: nuevos inputs, esquemas actualizados, correciones para el modo telefono, eliminada redundancia de condicionales en los defaulvalus y values de los inputs

This commit is contained in:
2026-04-08 20:11:22 -04:00
parent 7f5a895c12
commit 2da200a491
4 changed files with 166 additions and 219 deletions

View File

@@ -151,7 +151,7 @@ export function CreateTrainingForm({
generalObservations: defaultValues?.generalObservations || '',
ospResponsibleEmail: defaultValues?.ospResponsibleEmail || '',
paralysisReason: defaultValues?.paralysisReason || '',
infrastructureMt2: defaultValues?.infrastructureMt2 || undefined,
infrastructureMt2: defaultValues?.infrastructureMt2 || '',
hasTransport: defaultValues?.hasTransport || false,
structureType: defaultValues?.structureType || undefined,
isOpenSpace: defaultValues?.isOpenSpace || false,
@@ -172,6 +172,7 @@ export function CreateTrainingForm({
womenCount: defaultValues?.womenCount || 0,
menCount: defaultValues?.menCount || 0,
surveyStatus: defaultValues?.surveyStatus || 'BORRADOR'
},
mode: 'onChange',
});
@@ -208,6 +209,11 @@ export function CreateTrainingForm({
name: 'productiveActivity',
});
const structureType = useWatch({
control: form.control,
name: 'structureType',
});
const productiveSectorOptions = ecoSector
? SECTOR_PRODUCTIVO_MAP[ecoSector] || []
: [];
@@ -222,6 +228,7 @@ export function CreateTrainingForm({
: [];
const other = productiveActivity == 'OTRO' ? true : false;
const showInfrastructure = structureType && structureType !== 'NINGUNA';
// Reset dependent fields when parent changes
React.useEffect(() => {
@@ -371,7 +378,7 @@ export function CreateTrainingForm({
<Input
{...field}
placeholder="Ej. 04121234567"
value={field.value ?? ''}
value={field.value}
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '');
field.onChange(val.slice(0, 11));
@@ -393,7 +400,7 @@ export function CreateTrainingForm({
<Input
type="datetime-local"
{...field}
value={field.value || ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -491,7 +498,7 @@ export function CreateTrainingForm({
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger className="w-full">
@@ -527,7 +534,7 @@ export function CreateTrainingForm({
form.setValue('mainProductiveActivity', '');
form.setValue('productiveActivity', '');
}}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger className="w-full">
@@ -562,7 +569,7 @@ export function CreateTrainingForm({
form.setValue('mainProductiveActivity', '');
form.setValue('productiveActivity', '');
}}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
disabled={!ecoSector}
>
<FormControl>
@@ -597,7 +604,7 @@ export function CreateTrainingForm({
form.setValue('mainProductiveActivity', '');
form.setValue('productiveActivity', '');
}}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
disabled={!productiveSector}
>
<FormControl>
@@ -631,7 +638,7 @@ export function CreateTrainingForm({
field.onChange(val);
form.setValue('productiveActivity', '');
}}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
disabled={!centralProductiveActivity}
>
<FormControl>
@@ -662,7 +669,7 @@ export function CreateTrainingForm({
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
disabled={!mainProductiveActivity}
>
<FormControl>
@@ -695,7 +702,7 @@ export function CreateTrainingForm({
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -715,7 +722,7 @@ export function CreateTrainingForm({
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
placeholder="J-12345678-9"
/>
</FormControl>
@@ -733,7 +740,7 @@ export function CreateTrainingForm({
Nombre de la organización (opcional)
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -752,7 +759,7 @@ export function CreateTrainingForm({
<Input
type="number"
{...field}
value={field.value ?? ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -770,7 +777,7 @@ export function CreateTrainingForm({
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
@@ -792,24 +799,56 @@ export function CreateTrainingForm({
<FormField
control={form.control}
name="infrastructureMt2"
name="structureType"
render={({ field }) => (
<FormItem className="w-full flex flex-col space-y-3">
<FormLabel className="whitespace-normal leading-tight font-semibold">
infraestrutura (MT2)
Tipo Estructura
</FormLabel>
<FormControl>
<Input
{...field}
value={field.value ?? ''}
placeholder="e.g. 500"
/>
</FormControl>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Seleccione tipo" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="CASA">CASA</SelectItem>
<SelectItem value="GALPÓN">GALPÓN</SelectItem>
<SelectItem value="LOCAL">LOCAL</SelectItem>
<SelectItem value="ALMACÉN">ALMACÉN</SelectItem>
<SelectItem value="NINGUNA">NINGUNA</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
{showInfrastructure && (
<FormField
control={form.control}
name="infrastructureMt2"
render={({ field }) => (
<FormItem className="w-full flex flex-col space-y-3">
<FormLabel className="whitespace-normal leading-tight font-semibold">
infraestrutura (MT2)
</FormLabel>
<FormControl>
<Input
{...field}
value={field.value}
placeholder="e.g. 500"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name="hasTransport"
@@ -837,35 +876,6 @@ export function CreateTrainingForm({
)}
/>
<FormField
control={form.control}
name="structureType"
render={({ field }) => (
<FormItem className="w-full flex flex-col space-y-3">
<FormLabel className="whitespace-normal leading-tight font-semibold">
Tipo Estructura
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Seleccione tipo" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="CASA">CASA</SelectItem>
<SelectItem value="GALPÓN">GALPÓN</SelectItem>
<SelectItem value="LOCAL">LOCAL</SelectItem>
<SelectItem value="ALMACÉN">ALMACÉN</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="isOpenSpace"
@@ -903,7 +913,7 @@ export function CreateTrainingForm({
Razones de paralización (opcional)
</FormLabel>
<FormControl>
<Textarea {...field} value={field.value ?? ''} />
<Textarea {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -943,7 +953,7 @@ export function CreateTrainingForm({
render={({ field }) => (
<FormItem>
<FormLabel>
Breve Descripción de la Zona de Distribución
Breve Descripción de la Zona de Distribución (Opcional)
</FormLabel>
<FormControl>
<Input
@@ -992,7 +1002,7 @@ export function CreateTrainingForm({
<FormLabel>País</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger className="w-full">
@@ -1019,7 +1029,7 @@ export function CreateTrainingForm({
<FormItem>
<FormLabel>Ciudad</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1035,12 +1045,13 @@ export function CreateTrainingForm({
<FormItem>
<FormLabel>Breve Descripción</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-2">
<FormField
control={form.control}
@@ -1052,7 +1063,7 @@ export function CreateTrainingForm({
<Input
type="number"
{...field}
value={field.value ?? ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -1067,7 +1078,7 @@ export function CreateTrainingForm({
<FormLabel>Unidad</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger className="w-full">
@@ -1142,12 +1153,12 @@ export function CreateTrainingForm({
<CardHeader>
<CardTitle>3. Detalles de la ubicación</CardTitle>
</CardHeader>
<CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
<FormField
control={form.control}
name="ospAddress"
render={({ field }) => (
<FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
<FormItem className="md:col-span-2 flex flex-col space-y-2">
<FormLabel>
Dirección de la Organización Socio Productivo
</FormLabel>
@@ -1163,14 +1174,14 @@ export function CreateTrainingForm({
control={form.control}
name="ospGoogleMapsLink"
render={({ field }) => (
<FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
<FormItem className="md:col-span-2 flex flex-col space-y-2">
<FormLabel>
Coordenadas de la Ubicación (Google Maps. Opcional)
</FormLabel>
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
placeholder="10.123456, -66.123456"
/>
</FormControl>
@@ -1179,7 +1190,7 @@ export function CreateTrainingForm({
)}
/>
<div className="col-span-1 lg:col-span-2 border-b pb-2 mt-4 hidden md:inline">
<div className="col-span-2 border-b pb-2 mt-4 hidden md:inline">
<h4 className="font-semibold mb-2">Datos de la Comuna</h4>
</div>
@@ -1192,7 +1203,7 @@ export function CreateTrainingForm({
Nombre de la Comuna
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1208,7 +1219,7 @@ export function CreateTrainingForm({
Código SITUR de la Comuna
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1224,7 +1235,7 @@ export function CreateTrainingForm({
Rif de la Comuna
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1240,7 +1251,7 @@ export function CreateTrainingForm({
Nombre del Vocero o Vocera
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1258,7 +1269,7 @@ export function CreateTrainingForm({
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
placeholder="Ej. 04121234567"
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '');
@@ -1283,7 +1294,7 @@ export function CreateTrainingForm({
<Input
type="email"
{...field}
value={field.value ?? ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -1322,7 +1333,7 @@ export function CreateTrainingForm({
Código SITUR del Consejo Comunal
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1338,7 +1349,7 @@ export function CreateTrainingForm({
Rif del Consejo Comunal
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1354,7 +1365,7 @@ export function CreateTrainingForm({
Nombre del Vocero o Vocera
</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
<Input {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1372,7 +1383,7 @@ export function CreateTrainingForm({
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
placeholder="Ej. 04121234567"
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '');
@@ -1397,7 +1408,7 @@ export function CreateTrainingForm({
<Input
type="email"
{...field}
value={field.value ?? ''}
value={field.value}
/>
</FormControl>
<FormMessage />
@@ -1436,7 +1447,7 @@ export function CreateTrainingForm({
<FormControl>
<Input
{...field}
value={field.value ?? ''}
value={field.value}
placeholder="Ej. 04121234567"
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '');
@@ -1453,7 +1464,7 @@ export function CreateTrainingForm({
control={form.control}
name="ospResponsibleFullname"
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="md:col-span-2">
<FormLabel>Nombre y apellido</FormLabel>
<FormControl>
<Input {...field} />
@@ -1462,102 +1473,6 @@ export function CreateTrainingForm({
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="ospResponsibleRif"
render={({ field }) => (
<FormItem>
<FormLabel>RIF (Opcional)</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
control={form.control}
name="civilState"
render={({ field }) => (
<FormItem>
<FormLabel>Estado Civil (Opcional)</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
>
<FormControl>
<SelectTrigger className="w-full">
<SelectValue placeholder="Seleccione estado civil" />
</SelectTrigger>
</FormControl>
<SelectContent>
{CIVIL_STATE_OPTIONS.map((state) => (
<SelectItem key={state} value={state}>
{state}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
control={form.control}
name="ospResponsibleEmail"
render={({ field }) => (
<FormItem>
<FormLabel>Correo Electrónico (Opcional)</FormLabel>
<FormControl>
<Input
type="email"
{...field}
value={field.value ?? ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
control={form.control}
name="familyBurden"
render={({ field }) => (
<FormItem>
<FormLabel>Carga Familiar (Opcional)</FormLabel>
<FormControl>
<Input
type="number"
{...field}
value={field.value ?? ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
{/* <FormField
control={form.control}
name="numberOfChildren"
render={({ field }) => (
<FormItem>
<FormLabel>Número de Hijos (Opcional)</FormLabel>
<FormControl>
<Input
type="number"
{...field}
value={field.value ?? ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
</CardContent>
</Card>
@@ -1574,7 +1489,7 @@ export function CreateTrainingForm({
<FormItem>
<FormLabel>Observaciones Generales (Opcional)</FormLabel>
<FormControl>
<Textarea {...field} value={field.value ?? ''} />
<Textarea {...field} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
@@ -1641,7 +1556,7 @@ export function CreateTrainingForm({
<div className="flex flex-col gap-2">
<FormLabel>
Subir nuevas imágenes (máximo 3 en total)
Subir imágenes (Máximo 3 y opcional)
</FormLabel>
<Input
type="file"
@@ -1728,23 +1643,49 @@ export function CreateTrainingForm({
</CardContent>
</Card>
<div className="flex justify-end gap-4 mt-8">
<div className="grid grid-cols-2 md:grid-cols-3 justify-items-end gap-3 mt-8">
<Button
variant="outline"
type="button"
onClick={onCancel}
className="w-32"
className="w-32 col-span-2 md:col-span-1"
>
Cancelar
</Button>
<FormField
control={form.control}
name="surveyStatus"
render={({ field }) => (
<FormItem>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Seleccione tipo" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem defaultChecked value="BORRADOR">BORRADOR</SelectItem>
<SelectItem value="PUBLICADO">PUBLICADO</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
disabled={
isSaving ||
(selectedFiles.length === 0 &&
!['photo1', 'photo2', 'photo3'].some((f) =>
form.watch(f as any),
))
isSaving
// ||
// (selectedFiles.length === 0 &&
// !['photo1', 'photo2', 'photo3'].some((f) =>
// form.watch(f as any),
// ))
}
className="w-32"
>