From 7d482eed9a81c5fe44233b0bbb4e4107029e4938 Mon Sep 17 00:00:00 2001 From: LUZ MARIA GARCIA URZUA Date: Sat, 2 Nov 2024 18:29:22 -0300 Subject: [PATCH] add: incorporacion botones formularios --- src/pages/users/publicar.jsx | 65 +++- src/pages/users/zhospedaje.jsx | 635 +++++++++++---------------------- 2 files changed, 264 insertions(+), 436 deletions(-) diff --git a/src/pages/users/publicar.jsx b/src/pages/users/publicar.jsx index cb9d38f..73eb385 100644 --- a/src/pages/users/publicar.jsx +++ b/src/pages/users/publicar.jsx @@ -63,6 +63,8 @@ const serviceSubCategories = [ { label: 'Oficios', value: 'oficios', desc: 'Con Servicio de Oficio, podrás ofrecer tus habilidades y experiencia en una variedad de áreas profesionales. Si eres plomero, electricista, carpintero o tienes cualquier otro talento útil, esta categoría te permite conectar con clientes que buscan soluciones para sus necesidades domésticas o empresariales. Destaca tus conocimientos y garantiza un servicio de calidad para ganar la confianza de nuevos clientes.' } ]; + + function Publicar() { @@ -77,6 +79,49 @@ function Publicar() { }); const [files, setFiles] = useState([]); const [error, setError] = useState(''); + const [errors, setErrors] = useState({}); + const [formData, setFormData] = useState({ + subcategoria: '', titulo: '', descripcion: '', ubicacion: '', + dormitorios: '', camasSimples: '', camasDobles: '', cantidadMinima: '', cantidadMaxima: '', + celularContacto: '', mailContacto: '', precioPorNoche: '', + }); + + const validateForm = () => { + const newErrors = {}; + + if (!formData.subcategoria) newErrors.subcategoria = 'Selecciona un tipo de acomodación.'; + if (!formData.titulo) newErrors.titulo = 'Escribe un título.'; + if (!formData.descripcion) newErrors.descripcion = 'Escribe una descripción.'; + if (!formData.ubicacion) newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).'; + if (!formData.dormitorios) newErrors.dormitorios = 'Ingresa cantidad de dormitorios.'; + if (!formData.camasSimples) newErrors.camasSimples = 'Ingresa cantidad de camas simples.'; + if (!formData.camasDobles) newErrors.camasDobles = 'Ingresa cantidad de camas dobles.'; + if (!formData.cantidadMaxima) newErrors.cantidadMaxima = 'Ingresa cantidad máxima de personas para la acomodación.'; + if (!formData.cantidadMinima) newErrors.cantidadMinima = 'Ingresa cantidad mínima de personas para la acomodación.'; + + if (!formData.celularContacto && !formData.mailContacto) { + newErrors.contacto = 'Debes incluir al menos el número de celular o el mail de contacto.'; + } else { + if (formData.celularContacto && !/^\d+$/.test(formData.celularContacto)) { + newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.'; + } + if (formData.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formData.mailContacto)) { + newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: usuario@dominio.com'; + } + } + + if (!formData.precioPorNoche) newErrors.precioPorNoche = 'Se debe escribir un precio por noche.'; + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleInputChange = (field, value) => { + setFormData((prev) => ({ ...prev, [field]: value })); + if (errors[field]) { + setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined })); + } + }; const handleTypeChange = (event, newValue) => { setSelectedType(newValue); @@ -87,13 +132,21 @@ function Publicar() { setSelectedSubCategory(newValue); }; - const handleNext = () => { - if (activeStep === 0 && !selectedType) { - setError('Por favor selecciona tu tipo de publicación'); + const handleNext = () => { + if (activeStep === 1 && !validateForm()) { + return; // Evita avanzar si hay errores de validación en el paso "Información" } - else { - setActiveStep((prevActiveStep) => prevActiveStep + 1); + + if (activeStep === 2 && files.length === 0) { // Verifica si hay imágenes en el paso "Imágenes" + setErrors((prevErrors) => ({ + ...prevErrors, + files: 'Debes subir al menos una imagen.', + })); + return; // Evita avanzar si no hay imágenes } + + setErrors({}); // Limpia errores si todo está correcto + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { @@ -186,7 +239,7 @@ function Publicar() { ); case 1: if(selectedType === 'propiedad') { - return ; + return } else if (selectedType === 'camping') { return ; } else if (selectedType === 'servicios') { diff --git a/src/pages/users/zhospedaje.jsx b/src/pages/users/zhospedaje.jsx index a3270d4..6b3dd6e 100644 --- a/src/pages/users/zhospedaje.jsx +++ b/src/pages/users/zhospedaje.jsx @@ -1,440 +1,215 @@ -import '../../styles/users/zhospedaje.css'; -import { useState, useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import { - TextField, - MenuItem, - FormControl, - InputLabel, - Select, - Button, - Checkbox, - FormControlLabel, - Grid, - Typography, -} from '@mui/material'; -//------------new -import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'; // Importar componentes de Google Maps -const mapContainerStyle = { - height: "400px", - width: "100%" -}; - -const center = { - lat: -33.4489, // Cambia esto a la latitud de tu ubicación inicial - lng: -70.6693 // Cambia esto a la longitud de tu ubicación inicial -}; -//-----------new - +import { TextField, MenuItem, FormControl, InputLabel, Select, Checkbox, FormControlLabel, Typography, Button, Box } from '@mui/material'; +import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'; +import '../../styles/users/zhospedaje.css'; const subcategories = [ - { label: 'Arriendo', value: 'arriendo' }, - { label: 'Cabaña', value: 'cabaña' }, - { label: 'Departamento', value: 'departamento' }, - { label: 'Casa', value: 'casa' }, - { label: 'Hospedaje', value: 'hospedaje' }, - { label: 'Hotel', value: 'hotel' } + { label: 'Arriendo', value: 'arriendo' }, + { label: 'Cabaña', value: 'cabaña' }, + { label: 'Departamento', value: 'departamento' }, + { label: 'Casa', value: 'casa' }, + { label: 'Hospedaje', value: 'hospedaje' }, + { label: 'Hotel', value: 'hotel' } ]; -function HospedajeForm({ onNext }) { - //-----------new - const [markerPosition, setMarkerPosition] = useState(center); // Estado para la posición del marcador - const [userLocation, setUserLocation] = useState(null); // Estado para la ubicación del usuario - - const handleMapClick = async (event) => { - const lat = event.latLng.lat(); - const lng = event.latLng.lng(); - setMarkerPosition({ lat, lng }); // Actualiza la posición del marcador - // Aquí puedes agregar lógica para convertir las coordenadas en una dirección si lo deseas - //const address = await getAddressFromLatLng(lat, lng); //new - setFormData((prev) => ({ ...prev, ubicacion: `Lat: ${lat}, Lng: ${lng}` })); // Actualiza el campo de ubicación - }; - - useEffect(() => { - // Obtener ubicación actual del usuario - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(position => { - const newLocation = { - lat: position.coords.latitude, - lng: position.coords.longitude, - }; - setUserLocation(newLocation); - setMarkerPosition(newLocation); - //setFormData(prev => ({ ...prev, ubicacion: address })); //new - setFormData(prev => ({ ...prev, ubicacion: `Lat: ${position.coords.latitude}, Lng: ${position.coords.longitude}` })); - }, () => { - alert("No se pudo obtener la ubicación."); - }); - } else { - alert("Geolocalización no es soportada en este navegador."); - } - }, []); - - /*const getAddressFromLatLng = async (lat, lng) => { - const apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu API key - const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`); - const data = await response.json(); - if (data.results && data.results.length > 0) { - return data.results[0].formatted_address; // Retorna la primera dirección formateada - } else { - return ''; // Retorna vacío si no se encuentra dirección - } - };*/ - //-----------new - - const [formData, setFormData] = useState({ - subcategoria: '', - titulo: '', - descripcion: '', - ubicacion: '', - numeroUbicacion: '', - dormitorios: '', - camasSimples: '', - camasDobles: '', - cantidadMinima: '', - cantidadMaxima: '', - nombreContacto: '', - celularContacto: '', - mailContacto: '', - instagram: '', - facebook: '', - paginaWeb: '', - precioPorNoche: '', - disponible: false, - incluyeDesayuno: false, - incluyeToallasSabanas: false - }); - - const [errors, setErrors] = useState({}); - - - const handleInputChange = (field, value) => { - setFormData(prev => ({ ...prev, [field]: value })); - if (errors[name]) { - setErrors((prevErrors) => ({ ...prevErrors, [name]: undefined })); - } - //setErrors(prev => ({ ...prev, [field]: '' })); // Reset error when value changes - }; - - const validateForm = () => { - const newErrors = {}; - - if (!formData.subcategoria) {newErrors.subcategoria = 'Selecciona un tipo de acomodación.';} - if (!formData.titulo) {newErrors.titulo = 'Escribe un título.';} - if (!formData.descripcion) {newErrors.descripcion = 'Escribe una descripción.';} - if (!formData.ubicacion) { - newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).'; - } else if (!/^[\w\s,.-]+$/.test(formData.ubicacion)) { // Simple regex for address format - newErrors.ubicacion = 'Debes seguir el formato de dirección: Calle 123, Comuna, Ciudad.'; - } - - if (!formData.dormitorios) {newErrors.dormitorios = 'Ingresa cantidad de dormitorios.';} - if (!formData.camasSimples) {newErrors.camasSimples = 'Ingresa cantidad de camas simples.';} - if (!formData.camasDobles) {newErrors.camasDobles = 'Ingresa cantidad de camas dobles.';} - if (!formData.cantidadMaxima) {newErrors.cantidadMaxima = 'Ingresa cantidad máxima de personas para la acomodación.';} - if (!formData.cantidadMinima) {newErrors.cantidadMinima = 'Ingresa cantidad mínima de personas para la acomodación.';} - - if (!formData.celularContacto && !formData.mailContacto) { - newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.'; - } else { - if (formData.celularContacto && !/^\d+$/.test(formData.celularContacto)) { // Validar que solo incluya números - newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.'; - } - if (formData.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formData.mailContacto)) { // Simple regex for email - newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: usuario@dominio.com'; - } - } - if (!formData.precioPorNoche) { - newErrors.precioPorNoche = 'Se debe escribir un precio por noche.'; - } - if (formData.paginaWeb && !/^(https?:\/\/)?([\w\-]+\.)+[\w\-]{2,4}(\/[\w\-\.]*)*$/.test(formData.paginaWeb)) { - 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 handleSubmit = (e) => { - // e.preventDefault(); - // if (validateForm()) { - // console.log('Formulario válido, proceder...'); - // handleNext(); - //} else { - // console.log('Errores en el formulario:', errors); - //} - //} - const handleSubmit = (event) => { - event.preventDefault(); - if (validateForm()) { - // Aquí puedes manejar la lógica de envío del formulario - // Luego, llama a onNext para avanzar al siguiente paso - onNext();} else { - console.log('Errores en el formulario:', errors); - } -}; - - - - return ( -
-

Propiedad

-

Ingresa la información de tu publicación

- - - - Tipo de Acomodación - - {errors.subcategoria && {errors.subcategoria} || 'Campo Obligatorio'} - - - - handleInputChange('titulo', e.target.value)} - margin="normal" - error={Boolean(errors.titulo)} - helperText={errors.titulo|| 'Campo Obligatorio'} - /> - - handleInputChange('descripcion', e.target.value)} - margin="normal" - multiline - rows={4} - error={Boolean(errors.descripcion)} - helperText={errors.descripcion|| 'Campo Obligatorio'} - /> - -
- handleInputChange('ubicacion', e.target.value)} - margin="normal" - error={Boolean(errors.ubicacion)} - helperText={errors.ubicacion|| 'Campo Obligatorio'} - /> - - handleInputChange('ubicacion', e.target.value)} - margin="normal" - /> -
- - {/* Reemplaza con tu API key */} - - {/* Muestra un marcador en la posición seleccionada */} - - - - -
- handleInputChange('cantidadMinima', e.target.value)} - margin="normal" - error={Boolean(errors.cantidadMinima)} - helperText={errors.cantidadMinima|| 'Campo Obligatorio'} - /> - - handleInputChange('cantidadMaxima', e.target.value)} - margin="normal" - error={Boolean(errors.cantidadMaxima)} - helperText={errors.cantidadMaxima|| 'Campo Obligatorio'} - /> -
- -
- handleInputChange('dormitorios', e.target.value)} - error={Boolean(errors.dormitorios)} - helperText={errors.dormitorios|| 'Campo Obligatorio'} - /> - - handleInputChange('camasSimples', e.target.value)} - margin="normal" - error={Boolean(errors.camasSimples)} - helperText={errors.camasSimples|| 'Campo Obligatorio'} - /> - - handleInputChange('camasDobles', e.target.value)} - margin="normal" - error={Boolean(errors.camasDobles)} - helperText={errors.camasDobles|| 'Campo Obligatorio'} - /> -
- - - -
- handleInputChange('nombreContacto', e.target.value)} - margin="normal" - /> - - handleInputChange('celularContacto', e.target.value)} - margin="normal" - type = "number" - error={Boolean(errors.celularContacto)} - helperText={errors.celularContacto} - /> - - handleInputChange('mailContacto', e.target.value)} - margin="normal" - error={Boolean(errors.mailContacto)} - helperText={errors.mailContacto} - /> -
- - {errors.contacto && {errors.contacto} || 'Incluir al menos el número de celular o mail de contacto'} {/* Mensaje de error de contacto */} - -
- handleInputChange('instagram', e.target.value)} - margin="normal" - /> - - handleInputChange('facebook', e.target.value)} - margin="normal" - /> - - handleInputChange('paginaWeb', e.target.value)} - margin="normal" - error={Boolean(errors.paginaWeb)} - helperText={errors.paginaWeb} - /> -
- - handleInputChange('precioPorNoche', e.target.value)} - margin="normal" - error={Boolean(errors.precioPorNoche)} - helperText={errors.precioPorNoche|| 'Campo Obligatorio'} - /> - -
- handleInputChange('disponible', e.target.checked)} - className='checkboxs-orange' - /> - } - label="Actualmente Disponible" - /> - - handleInputChange('incluyeDesayuno', e.target.checked)} - className='checkboxs-orange' - /> - } - label="Incluye Desayuno" - /> - - handleInputChange('incluyeToallasSabanas', e.target.checked)} - className='checkboxs-orange' - /> - } - label="Incluye Toallas y Sábanas" - /> -
- - - - - - ); +const mapContainerStyle = { height: "400px", width: "100%" }; +const center = { lat: -33.4489, lng: -70.6693 }; + +function HospedajeForm({ formData, errors, onInputChange, onNext }) { + const handleInputChange = (field, value) => { + onInputChange(field, value); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + onNext(); + }; + + return ( +
+ Propiedad + Ingresa la información de tu publicación + + + Tipo de Acomodación + + {errors.subcategoria && {errors.subcategoria}} + + + handleInputChange('titulo', e.target.value)} + margin="normal" + error={Boolean(errors.titulo)} + helperText={errors.titulo || 'Campo Obligatorio'} + /> + + handleInputChange('descripcion', e.target.value)} + margin="normal" + multiline + rows={4} + error={Boolean(errors.descripcion)} + helperText={errors.descripcion || 'Campo Obligatorio'} + /> + + + handleInputChange('ubicacion', e.target.value)} + margin="normal" + error={Boolean(errors.ubicacion)} + helperText={errors.ubicacion || 'Campo Obligatorio'} + /> + handleInputChange('numeroUbicacion', e.target.value)} + margin="normal" + /> + + + + + + + + + + handleInputChange('cantidadMinima', e.target.value)} + margin="normal" + error={Boolean(errors.cantidadMinima)} + helperText={errors.cantidadMinima || 'Campo Obligatorio'} + /> + handleInputChange('cantidadMaxima', e.target.value)} + margin="normal" + error={Boolean(errors.cantidadMaxima)} + helperText={errors.cantidadMaxima || 'Campo Obligatorio'} + /> + + + + handleInputChange('dormitorios', e.target.value)} + margin="normal" + error={Boolean(errors.dormitorios)} + helperText={errors.dormitorios || 'Campo Obligatorio'} + /> + handleInputChange('camasSimples', e.target.value)} + margin="normal" + error={Boolean(errors.camasSimples)} + helperText={errors.camasSimples || 'Campo Obligatorio'} + /> + handleInputChange('camasDobles', e.target.value)} + margin="normal" + error={Boolean(errors.camasDobles)} + helperText={errors.camasDobles || 'Campo Obligatorio'} + /> + + + + handleInputChange('celularContacto', e.target.value)} + margin="normal" + error={Boolean(errors.celularContacto)} + helperText={errors.celularContacto} + /> + handleInputChange('mailContacto', e.target.value)} + margin="normal" + error={Boolean(errors.mailContacto)} + helperText={errors.mailContacto} + /> + + {errors.contacto && {errors.contacto}} + + handleInputChange('precioPorNoche', e.target.value)} + margin="normal" + error={Boolean(errors.precioPorNoche)} + helperText={errors.precioPorNoche || 'Campo Obligatorio'} + /> + + + handleInputChange('disponible', e.target.checked)} />} + label="Actualmente Disponible" + /> + handleInputChange('incluyeDesayuno', e.target.checked)} />} + label="Incluye Desayuno" + /> + handleInputChange('incluyeToallasSabanas', e.target.checked)} />} + label="Incluye Toallas y Sábanas" + /> + + + {/* */} + + ); } -/*HospedajeForm.propTypes = { - handleNext: PropTypes.func.isRequired, -};*/ - HospedajeForm.propTypes = { - onNext: PropTypes.func.isRequired, + formData: PropTypes.object.isRequired, + errors: PropTypes.object.isRequired, + onInputChange: PropTypes.func.isRequired, + onNext: PropTypes.func.isRequired, }; + export default HospedajeForm; \ No newline at end of file