Skip to content

Commit

Permalink
Merge branch 'main' into jose-CRUDS
Browse files Browse the repository at this point in the history
  • Loading branch information
@luzmagurzua
luzmagurzua authored Nov 23, 2024
2 parents f940e83 + 6275586 commit f113333
Show file tree
Hide file tree
Showing 9 changed files with 1,393 additions and 539 deletions.
119 changes: 71 additions & 48 deletions src/pages/users/admin/codigos.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const ComponenteCodigos = () => {
const [fechaInicio, setFechaInicio] = useState(''); // Estado para fecha de inicio
const [fechaFin, setFechaFin] = useState(''); // Estado para fecha de fin
const [planesSeleccionados, setPlanesSeleccionados] = useState([]);

const [comunasSeleccionadas, setComunasSeleccionadas] = useState([]); // Estado para comunas seleccionadas

// Lista de comunas y categorías
const comunas = [
Expand Down Expand Up @@ -46,10 +46,10 @@ const ComponenteCodigos = () => {
];

const planes = [
"Mensual",
"Trimestral",
"Semestral",
"Anual"
"Mes",
"Trimestre",
"Semestre",
"Año"
]

const handlePlanChange = (plan) => {
Expand Down Expand Up @@ -133,36 +133,26 @@ const ComponenteCodigos = () => {
<div className="codigo-container">
<h1 className="codigo-title">Generador de Códigos</h1>

<div className="codigo-field">
<label className="codigo-label">Duración del código:</label>
<div className="codigo-input-group">
<input
type="number"
value={duracion}
onChange={(e) => setDuracion(e.target.value)}
placeholder="Duración"
className="codigo-input"
/>
<select
value={tipoDuracion}
onChange={(e) => setTipoDuracion(e.target.value)}
className="codigo-select"
>
<option value="horas">Horas</option>
<option value="días">Días</option>
</select>
</div>
</div>


<div className="codigo-field">
<label className="codigo-label">Usos permitidos:</label>
<input
type="number"
value={usos}
onChange={(e) => setUsos(e.target.value)}
placeholder="Número de usos"
className="codigo-input"
/>
type="number"
value={usos}
onChange={(e) => {
const valor = parseInt(e.target.value, 10);
if (!isNaN(valor) && valor >= 1) {
setUsos(valor); // Actualiza si es válido
} else {
setUsos(''); // Vacía el campo si no es válido
}
}}
min="1" // Establece el mínimo permitido en el atributo HTML
placeholder="Número de usos"
className="codigo-input"
/>

</div>

<div className="codigo-field">
Expand All @@ -177,25 +167,58 @@ const ComponenteCodigos = () => {
<option value="Georreferenciado">Georreferenciado</option>
</select>
</div>

{tipoCodigo === "Georreferenciado" && (
<div className="codigo-field">
<label className="codigo-label">Seleccione la comuna</label>
<select
value={comuna}
onChange={(e) => setComuna(e.target.value)}
className="codigo-select"
>
<option value="">Seleccione una comuna</option>
{comunas.map((comuna) => (
<option key={comuna} value={comuna}>
{comuna}
</option>
))}
</select>
</div>
)}
<div className="georeferenced-notification">
{/* Contenedor de etiquetas de comunas seleccionadas */}
<div className="tags-container">
{comunasSeleccionadas.map((comuna) => (
<span key={comuna} className="tag">
{comuna}
<button
type="button"
onClick={() => setComunasSeleccionadas(
comunasSeleccionadas.filter((item) => item !== comuna)
)}
className="tag-remove"
>
&times;
</button>
</span>
))}
</div>
<br />
{/* Selector para agregar nuevas comunas */}
<select
value=""
onChange={(e) => {
const selectedComuna = e.target.value;
if (
selectedComuna &&
!comunasSeleccionadas.includes(selectedComuna)
) {
setComunasSeleccionadas([...comunasSeleccionadas, selectedComuna]);
}
}}
className="comuna-select"
>

<option value="">Seleccione una comuna</option>

{comunas
.filter((comuna) => !comunasSeleccionadas.includes(comuna))
.map((comuna) => (
<option key={comuna} value={comuna}>
{comuna}
</option>
))}
</select>
</div>

)}



<br></br><br></br>
<div className="codigo-field">
<label className="codigo-label">Aplicar código sobre:</label>
<div className="checkbox-container">
Expand Down
86 changes: 53 additions & 33 deletions src/pages/users/admin/precios.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,13 @@ function GestionPreciosTabla() {
),
});

const handleSave = () => {
const isConfirmed = window.confirm("¿Está seguro de que desea guardar los cambios?");
if (isConfirmed) {
formik.handleSubmit(); // Llama a la función de submit de Formik
}
};

const formik = useFormik({
initialValues,
validationSchema,
Expand All @@ -185,9 +192,18 @@ function GestionPreciosTabla() {
return (
<div>
<Navbar />
<div className="gestion-precios-header">
<h1 className="gestion-precios-title">Gestión de Precios</h1>
<button type="submit" onClick={handleSave} className="gestion-precios-button">
Guardar
</button>
</div>



<div className="gestion-precios-container">
<h1 className="gestion-precios-title">Gestión de Precios</h1>
<p>1. Ingresa el precio normal y precio promocional de tu plan.

<p>1. Ingresa el precio normal (IVA incluído) y precio promocional de tu plan.
<br>
</br><br></br>
2. Escoge cuál de los dos se mostrará al usuario (si el precio normal o el precio en promoción). <br></br><br></br>
Expand All @@ -212,6 +228,7 @@ function GestionPreciosTabla() {
<option value="Servicios y Oficios">Servicios y Oficios</option>
</select>
</div>

<br></br>

<form onSubmit={formik.handleSubmit}>
Expand Down Expand Up @@ -241,6 +258,7 @@ function GestionPreciosTabla() {
disabled={formik.values.precios[index][periodo].activo === "inactivo"}
className="gestion-precios-input"
/>

<input
type="number"
placeholder="Precio promocional"
Expand Down Expand Up @@ -273,50 +291,54 @@ function GestionPreciosTabla() {
</select>
<br></br><br></br>
<div className="date-input-container">
{/* Mostrar placeholder personalizado si no hay valor */}

<input
type="date"
name={`precios[${index}][${periodo}].fechaInicio`}
value={formik.values.precios[index][periodo].fechaInicio}
onChange={formik.handleChange}
disabled={formik.values.precios[index][periodo].activo === "inactivo"}
className={
!formik.values.precios[index][periodo].fechaInicio
? "date-placeholder"
: ""
}
className="date-input"
/>
{!formik.values.precios[index][periodo].fechaInicio && (
<span className="placeholder">Fecha de inicio</span>
<span className="placeholder"></span>
)}

</div>

<div className="date-input-container">
<input
type="date"
name={`precios[${index}][${periodo}].fechaFin`}
value={formik.values.precios[index][periodo].fechaFin}
onChange={formik.handleChange}
disabled={formik.values.precios[index][periodo].activo === "inactivo"}
className="date-input"
/>
{/* Mostrar placeholder personalizado si no hay valor */}
{!formik.values.precios[index][periodo].fechaFin && (
<span className="placeholder"></span>
)}

{/* Mostrar mensaje de error si existe */}
{formik.errors.precios?.[index]?.[periodo]?.fechaFin &&
formik.touched.precios?.[index]?.[periodo]?.fechaFin && (
<div className="error">{formik.errors.precios[index][periodo].fechaFin}</div>
)}
</div>











<div className="date-input-container">

<input
type="date"
name={`precios[${index}][${periodo}].fechaFin`}
value={formik.values.precios[index][periodo].fechaFin}
onChange={formik.handleChange}
disabled={formik.values.precios[index][periodo].activo === "inactivo"}
className={
!formik.values.precios[index][periodo].fechaInicio
? "date-placeholder"
: ""
}
/><br></br><br></br>
{formik.errors.precios?.[index]?.[periodo]?.fechaFin &&
formik.touched.precios?.[index]?.[periodo]?.fechaFin && (
<div className="error">{formik.errors.precios[index][periodo].fechaFin}</div>
)}
{!formik.values.precios[index][periodo].fechaInicio && (
<span className="placeholder">Fecha de término</span>
)}
</div>


</div>
</td>
Expand All @@ -325,9 +347,7 @@ function GestionPreciosTabla() {
))}
</tbody>
</table>
<button type="submit" className="gestion-precios-button">
Guardar
</button>

</form>
</div>
</div>
Expand Down
Loading

0 comments on commit f113333

Please sign in to comment.