added request to api
This commit is contained in:
+129
-137
@@ -1,141 +1,133 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from "react";
|
||||
import "./Receipt.css"
|
||||
import { PostReceipt } from "@/app/lib/receipt";
|
||||
"use client";
|
||||
import AlertBox from "../AlertBox/AlertBox";
|
||||
import { useState } from "react";
|
||||
import { PostReceipt } from "@/app/lib/postReceipt";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
function Receipt() {
|
||||
const [folio, setFolio] = useState('');
|
||||
const [amount, setAmount] = useState('');
|
||||
const [date, setDate] = useState('');
|
||||
import "./Receipt.css";
|
||||
|
||||
const [error, setError] = useState('');
|
||||
const [alert, setAlert] = useState('');
|
||||
const [showError, setShowError] = useState(false);
|
||||
const [showAlert, setShowAlert] = useState(false);
|
||||
|
||||
//restrict this month//
|
||||
const day = new Date();
|
||||
const year = day.getFullYear();
|
||||
const month = day.getMonth();
|
||||
const today = day.getDate();
|
||||
|
||||
const minFecha = new Date(year, month, 1).toISOString().split('T')[0];
|
||||
const maxFecha = new Date(year, month, today).toISOString().split('T')[0];
|
||||
//restrict this month//
|
||||
|
||||
//fadeOut alert and error
|
||||
useEffect(() => {
|
||||
if (alert) {
|
||||
setShowAlert(true);
|
||||
const timeout = setTimeout(() => {
|
||||
setShowAlert(false);
|
||||
setTimeout(() => setAlert(''), 500);
|
||||
}, 6000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [alert]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
setShowError(true);
|
||||
const timeout = setTimeout(() => {
|
||||
setShowError(false);
|
||||
setTimeout(() => setError(''), 500);
|
||||
}, 6000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [error]);
|
||||
//fadeOut alert and error//
|
||||
|
||||
const handleSaveReceipt = ( )=>{
|
||||
//PostReceipt(data{folio,amount,date})
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSaveReceipt();
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="gap">
|
||||
|
||||
|
||||
<div className='groupInput'>
|
||||
<label className='label'>Ticket:</label>
|
||||
<input
|
||||
type='text'
|
||||
value={folio}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (/^\d*$/.test(value)) {
|
||||
setFolio(value);
|
||||
}
|
||||
}}
|
||||
placeholder='Numero de folio...'
|
||||
inputMode='numeric'
|
||||
pattern='[0-9]*'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='groupInput'>
|
||||
<label className='label'>Monto:</label>
|
||||
<input
|
||||
type='text'
|
||||
value={amount}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
if (/^\d*\.?\d*$/.test(value)) {
|
||||
const numericValue = parseFloat(value);
|
||||
|
||||
if (value === '' || (numericValue <= 1000)) {
|
||||
setAmount(value);
|
||||
} else {
|
||||
setAlert('')
|
||||
setError('El monto no puede superar $1000.00')
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder='Monto recibido...'
|
||||
inputMode='numeric'
|
||||
pattern="^\d*\.?\d+$"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='groupInput'>
|
||||
<label className='label'>Fecha de Pago:</label>
|
||||
<input
|
||||
type='date'
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
min={minFecha}
|
||||
max={maxFecha}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='containerButton'>
|
||||
<button
|
||||
className="button buttonSearch">
|
||||
Guardar
|
||||
</button>
|
||||
|
||||
{error &&
|
||||
<div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
|
||||
{error}
|
||||
</div>
|
||||
}
|
||||
{alert &&
|
||||
<div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
|
||||
{alert}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
interface ReceiptsProps {
|
||||
numAccount: number | null;
|
||||
}
|
||||
|
||||
export default Receipt
|
||||
//IO
|
||||
function Receipt({ numAccount }: ReceiptsProps) {
|
||||
const [folio, setFolio] = useState("");
|
||||
const [amount, setAmount] = useState("");
|
||||
const [date, setDate] = useState("");
|
||||
|
||||
const [error, setError] = useState("");
|
||||
const [alert, setAlert] = useState("");
|
||||
|
||||
//restrict this month//
|
||||
const day = new Date();
|
||||
const year = day.getFullYear();
|
||||
const month = day.getMonth();
|
||||
const today = day.getDate();
|
||||
|
||||
const minFecha = new Date(year, month, 1).toISOString().split("T")[0];
|
||||
const maxFecha = new Date(year, month, today).toISOString().split("T")[0];
|
||||
//restrict this month//
|
||||
|
||||
const handleSaveReceipt = () => {
|
||||
if (!numAccount) {
|
||||
setError("Error busca denuevo al estudiante");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!folio) {
|
||||
setError("Ingresa el folio del tiket");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!amount) {
|
||||
setError("coloca el monto a depositar");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!date) {
|
||||
setError("coloca la fecha");
|
||||
return;
|
||||
}
|
||||
|
||||
PostReceipt({
|
||||
id_cuenta: numAccount,
|
||||
folio_recibo: folio,
|
||||
monto: Number(amount),
|
||||
fecha_recibo: date,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSaveReceipt();
|
||||
}}
|
||||
>
|
||||
<div className="gap">
|
||||
<div className="groupInput">
|
||||
<label className="label">Ticket:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={folio}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (/^\d*$/.test(value)) {
|
||||
setFolio(value);
|
||||
}
|
||||
}}
|
||||
placeholder="Numero de folio..."
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="groupInput">
|
||||
<label className="label">Monto:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={amount}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
if (/^\d*\.?\d*$/.test(value)) {
|
||||
const numericValue = parseFloat(value);
|
||||
|
||||
if (value === "" || numericValue <= 1000) {
|
||||
setAmount(value);
|
||||
} else {
|
||||
setAlert("");
|
||||
setError("El monto no puede superar $1000.00");
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Monto recibido..."
|
||||
inputMode="numeric"
|
||||
pattern="^\d*\.?\d+$"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="groupInput">
|
||||
<label className="label">Fecha de Pago:</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
min={minFecha}
|
||||
max={maxFecha}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="containerButton">
|
||||
<button className="button buttonSearch">Guardar</button>
|
||||
|
||||
{error && <AlertBox message={error} type="error" />}
|
||||
{alert && <AlertBox message={alert} type="success" />}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default Receipt;
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user