Skip to content

Commit

Permalink
hospedaje y camping con boton
Browse files Browse the repository at this point in the history
  • Loading branch information
@luzmagurzua
luzmagurzua committed Nov 4, 2024
1 parent c645d60 commit 590d7fc
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 275 deletions.
162 changes: 101 additions & 61 deletions src/pages/users/publicar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ function Publicar() {
});

const [formDataCamping, setFormDataCamping] = useState({
subcategoria: '',
titulo: '',
descripcion: '',
ubicacion: '',
Expand Down Expand Up @@ -169,7 +168,7 @@ function Publicar() {
if (!formDataHospedaje.cantidadMaxima) newErrors.cantidadMaxima = 'Ingresa cantidad máxima de personas para la acomodación.';
if (!formDataHospedaje.cantidadMinima) newErrors.cantidadMinima = 'Ingresa cantidad mínima de personas para la acomodación.';

if (!formDataHospedaje.celularContacto && !formData.mailContacto) {
if (!formDataHospedaje.celularContacto && !formDataHospedaje.mailContacto) {
newErrors.contacto = 'Debes incluir al menos el número de celular o el mail de contacto.';
} else {
if (formDataHospedaje.celularContacto && !/^\d+$/.test(formDataHospedaje.celularContacto)) {
Expand All @@ -190,70 +189,110 @@ function Publicar() {
if (activeStep === 0 && !selectedType) {
setError('Por favor selecciona tu tipo de publicación');
} else if (activeStep === 1) {
// Ejecuta la validación del formulario según el tipo seleccionado
if (selectedType === 'propiedad' && !validateFormHospedaje()) {
console.log(errors); // Revisa los errores de validación
return; // Detén el avance si la validación de Hospedaje falla
} else if (selectedType === 'camping' && !validateFormCamping()) {
console.log(errors); // Revisa los errores de validación
return; // Detén el avance si la validación de Camping falla
} else if (selectedType === 'eventos' && !validateFormEventos()) {
console.log(errors);
return;
console.log('Errores antes de la validación:', errors); // Verifica el estado de errors

let isValid = true;

if (selectedType === 'propiedad') {
isValid = validateFormHospedaje();
} else if (selectedType === 'camping') {
isValid = validateFormCamping();
} else if (selectedType === 'eventos') {
isValid = validateFormEventos();
if (isValid) {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
}
}
setActiveStep((prevActiveStep) => prevActiveStep + 1);
} else {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
}
};

if (!isValid) {
console.log('Errores después de la validación:', errors); // Muestra errores
return; // Detiene el avance si hay errores
}
}

// Solo avanza si todas las validaciones pasaron
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};

const validateFormCamping = () => {
const newErrors = {};

if (!formDataCamping.titulo) {newErrors.titulo = 'Escribe un título.';}
if (!formDataCamping.descripcion) {newErrors.descripcion = 'Escribe una descripción.';}

// Validar campos requeridos
if (!formDataCamping.titulo) newErrors.titulo = 'Escribe un título.';
if (!formDataCamping.descripcion) newErrors.descripcion = 'Escribe una descripción.';

// Validación para la ubicación
if (!formDataCamping.ubicacion) {
newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).';
} else if (!/^[\w\s,.-]+$/.test(formDataCamping.ubicacion)) { // Simple regex for address format
newErrors.ubicacion = 'Debes seguir el formato de dirección: Calle 123, Comuna, Ciudad.';
newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).';
}

// Validación del nombre de contacto
if (!formDataCamping.nombreContacto) {
newErrors.nombreContacto = 'Escribe el nombre de contacto.';
}

// Validación de contacto (teléfono o correo)
if (!formDataCamping.celularContacto && !formDataCamping.mailContacto) {
newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.';
newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.';
} else {
if (formDataCamping.celularContacto && !/^\d+$/.test(formDataCamping.celularContacto)) { // Validar que solo incluya números
newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.';
}
if (formDataCamping.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formDataCamping.mailContacto)) { // Simple regex for email
newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: [email protected]';
}
if (formDataCamping.celularContacto && !/^\d+$/.test(formDataCamping.celularContacto)) {
newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.';
}
if (formDataCamping.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formDataCamping.mailContacto)) {
newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: [email protected]';
}
}

// Validación del precio
if (!formDataCamping.precioPorNoche) {
newErrors.precioPorNoche = 'Se debe escribir un precio por noche.';
newErrors.precioPorNoche = 'Se debe escribir un precio por noche.';
}

// Validación de la disponibilidad
if (formDataCamping.disponible === undefined) {
newErrors.disponible = 'Debes indicar si está disponible o no.';
}

// Validación de la página web (opcional)
if (formDataCamping.paginaWeb && !/^(https?:\/\/)?([\w\-]+\.)+[\w\-]{2,4}(\/[\w\-\.]*)*$/.test(formDataCamping.paginaWeb)) {
newErrors.paginaWeb = 'Debes escribir en el formato indicado de página web. Ej: https://www.ejemplo.com';
newErrors.paginaWeb = 'Debes escribir en el formato indicado de página web. Ej: https://www.ejemplo.com';
}

setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
};


const handleInputChangeHospedaje = (field, value) => {













const handleInputChangeHospedaje = (field, value) => {
setFormDataHospedaje((prev) => ({ ...prev, [field]: value }));
// Si el campo tiene un error asociado, lo eliminamos
if (errors[field]) {
setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined }));
}
};


const handleInputChangeCamping = (field, value) => {
console.log(`Campo actualizado: ${field}, Valor: ${value}`); // Para depuración
setFormDataCamping((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined }));
}
};


const handleInputChangeEventos = (field, value) => {
setEventDetails((prev) => ({ ...prev, [field]: value }));
Expand Down Expand Up @@ -433,34 +472,35 @@ function Publicar() {
)}

<div>
<Typography sx={{ mt: 2, mb: 1 }}>{getStepContent(activeStep)}</Typography>

{/* Mostrar botón "Siguiente" solo en el primer paso para "notificaciones" */}
{(selectedType !== 'notificaciones' || activeStep === 0) && (
<Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
{activeStep > 0 && selectedType !== 'notificaciones' && (
<Button onClick={handleBack} variant="contained" className='volver-button'>
Volver
</Button>
)}
{activeStep === steps.length - 1 && selectedType !== 'notificaciones' ? (
<Link to="/publicaciones">
<Button className='siguiente-button' variant='contained'>
Finalizar
</Button>
</Link>
) : (
<Button
className='siguiente-button'
variant="contained"
onClick={handleNext}
>
Siguiente
</Button>
)}
</Box>
<Typography sx={{ mt: 2, mb: 1 }}>{getStepContent(activeStep)}</Typography>

{/* Mostrar botón "Siguiente" solo si no es "notificaciones" */}
{(selectedType !== 'notificaciones' || activeStep === 0) && (
<Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
{activeStep > 0 && selectedType !== 'notificaciones' && (
<Button onClick={handleBack} variant="contained" className='volver-button'>
Volver
</Button>
)}
</div>
{activeStep === steps.length - 1 && selectedType !== 'notificaciones' ? (
<Link to="/publicaciones">
<Button className='siguiente-button' variant='contained'>
Finalizar
</Button>
</Link>
) : (
<Button
className='siguiente-button'
variant="contained"
onClick={handleNext}
>
Siguiente
</Button>
)}
</Box>
)}
</div>

</Box>
</main>

Expand Down
Loading

0 comments on commit 590d7fc

Please sign in to comment.