fixed delete sancions

2025-10-13 18:00:04 -06:00
parent 7d16cde8f4 059136375e
commit c8e81c999f
12 changed files with 275 additions and 69 deletions
@@ -1,5 +1,4 @@
 "use client";
-import SearchDate from "../SearchDate/SearchDate";
 import { useState } from "react";

 import styles from "./Page.module.css";
@@ -14,8 +13,7 @@ function BitacoraAlumno() {
  const [alumnos, setAlumnos] = useState<alumnos[]>([]);
  return (
    <>
-      <SearchDate />
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
        <table className={styles.machineTable}>
          <thead>
            <tr>
@@ -16,7 +16,6 @@ function BitacoraEquipo() {
  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
  return (
    <>
-      <SearchDate />
      <form className="containerForm">
        <label className="label">Ubicacion de equipo</label>

@@ -28,12 +27,10 @@ function BitacoraEquipo() {
            <option value="">-- Selecciona un equipo --</option>
            <option value="255">Equipo 255</option>
          </select>
-          <button className="button buttonSearch" type="submit">
-            Asignar
-          </button>
        </div>
      </form>
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
+      <SearchDate />
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
        <table className={styles.machineTable}>
          <thead>
            <tr>
@@ -19,8 +19,7 @@ export default async function Sanciones(props: { student?: Student }) {
            NoCuenta={props.student.id_cuenta}
            Nombre={props.student.nombre}
          />
-
-        <TableSancion />
+          <TableSancion />
        </>
      )}
    </>
@@ -24,24 +24,64 @@ interface sancion {
 }

 export default function TableSancion() {
-  const [sanciones, setSanciones] = useState<any>();
+  const [sanciones, setSanciones] = useState<any>([]);
  const [button, setButton] = useState<boolean>(false);
+  const [selectedSancion, setSelectedSancion] = useState("");
+  const [alumnoSanciones, setAlumnoSanciones] = useState<any>([]);
+  /*
+  useEffect(() => {
+    const getSanciones = async () => {
+      const response = await axios.get("");
+      setSanciones(response);
+    };
+    getSanciones();
+  }, [button]);

-  // useEffect(() => {
-  //   const getSanciones = async () => {
-  //     const response = await axios.get("");
-  //     setSanciones(response);
-  //   };
-  //   getSanciones();
-  // }, [button]);
+
+
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
+                <td>
+                  {calcularFechaFin(item.fecha_inicio, item.sancion?.duracion)}
+                </td>
+
+                https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041
+                .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+*/
+  useEffect(() => {
+    axios
+      .get(
+        " https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/423019393"
+      )
+      .then((response) => {
+        setAlumnoSanciones(response.data);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las sanciones:", error);
+      });
+
+    axios
+      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+      .then((response) => {
+        setSanciones(response.data);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las sanciones:", error);
+      });
+  }, []);

  const handlebutton = () => {
    setButton(!button);
  };
-  
+
+  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
+    const fecha = new Date(fechaInicio);
+    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
+    return fecha.toLocaleDateString();
+  };
+
  return (
    <>
-      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
+      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
        <table className={styles.machineTable}>
          <thead>
            <tr>
@@ -52,19 +92,51 @@ export default function TableSancion() {
              <th>Podra utilizar el servicio hasta</th>
            </tr>
          </thead>
-          <tbody></tbody>
+          <tbody>
+            {sanciones.length > 0 ? (
+              alumnoSanciones.map((item: any) => (
+                <tr key={item.id_alumno_sancion}>
+                  <td>{item.alumno?.id_cuenta}</td>
+                  <td>{item.sancion?.sancion}</td>
+                  <td>{item.sancion?.duracion}</td>
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
+                  <td>
+                    {calcularFechaFin(
+                      item.fecha_inicio,
+                      item.sancion?.duracion
+                    )}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6}>No hay sanciones registradas</td>
+              </tr>
+            )}
+          </tbody>
        </table>
      </div>

      <form className="containerForm">
        <div className="groupInput">
-          <select>
+          <select
+            value={selectedSancion}
+            onChange={(e) => setSelectedSancion(e.target.value)}
+          >
            <option value="">-- Selecciona una sanción --</option>
-            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+            {sanciones.map((sancion: any) => (
+              <option key={sancion.id_sancion} value={sancion.id_sancion}>
+                {sancion.sancion} ({sancion.duracion} semana/s)
+              </option>
+            ))}
          </select>
        </div>
      </form>
-      <button className="button buttonSearch" style={{margin:"1rem 0"}} onClick={handlebutton}>
+      <button
+        className="button buttonSearch"
+        style={{ margin: "1rem 0" }}
+        onClick={handlebutton}
+      >
        Aplicar sanción
      </button>
    </>
@@ -0,0 +1,58 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import SearchDate from "../../SearchDate/SearchDate";
+
+interface urlProp {
+  value: string | null;
+}
+
+function SearchUserWithDate(props: urlProp) {
+  const [numAcount, setnumAcount] = useState("");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (props.value) {
+      setnumAcount(props.value);
+    }
+  }, [props.value]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams.toString());
+    if (numAcount) {
+      params.set("numAcount", `${numAcount}`);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <>
+      <form className="containerForm" onSubmit={handleSubmit}>
+        <label className="label">No.Cuenta</label>
+        <div className="groupInput">
+          <input
+            type="text"
+            value={numAcount}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (/^\d*$/.test(value) && value.length <= 9) {
+                setnumAcount(value);
+              }
+            }}
+            placeholder="Coloca un número de cuenta..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
+          <SearchDate />
+        </div>
+      </form>
+    </>
+  );
+}
+
+export default SearchUserWithDate;
+//IO
@@ -1,48 +1,75 @@
-"use client";
-import { useState } from "react";
-
 import styles from "./Page.module.css";

-interface quitarSanciones {
-  id: number;
+interface Alumno {
+  id_cuenta: number;
  nombre: string;
-  motivo: string;
-  duracion: number;
-  fecha_sancion: string;
-  utilizar_equipo: number;
+  credito: number;
 }

-function QuitarSancion() {
-  const [quitarSanciones, SetQuitarSanciones] = useState<quitarSanciones[]>([]);
+interface Sancion {
+  id_sancion: number;
+  sancion: string;
+  duracion: number;
+}
+
+interface AlumnoSancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  sancion: Sancion;
+}
+
+interface DataProps {
+  student: Alumno;
+  alusancion: AlumnoSancion[];
+}
+
+interface Props {
+  data: DataProps | null;
+}
+
+function QuitarSancion({ data }: Props) {
+  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
+    const fecha = new Date(fechaInicio);
+    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
+    return fecha.toLocaleDateString();
+  };
+
  return (
    <section className="containerSection">
-      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
+      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
        <table className={styles.machineTable}>
          <thead>
            <tr>
-              <th>id</th>
+              <th>ID</th>
              <th>Nombre</th>
              <th>Motivo Sanción</th>
-              <th>Duracion (semanas) </th>
+              <th>Duración (semanas)</th>
              <th>Fecha Sanción</th>
-              <th>Podria utilizar el servicio hasta</th>
+              <th>Podría utilizar el servicio hasta</th>
            </tr>
          </thead>
          <tbody>
-            {quitarSanciones.map((quitarSanciones, index) => (
-              <tr key={index}>
-                <td>{quitarSanciones.id}</td>
-                <td>{quitarSanciones.nombre}</td>
-                <td>{quitarSanciones.motivo}</td>
-                <td>{quitarSanciones.duracion}</td>
-                <td>{quitarSanciones.fecha_sancion}</td>
-                <td>{quitarSanciones.utilizar_equipo}</td>
+            {data && data.alusancion.length > 0 ? (
+              data.alusancion.map((item) => (
+                <tr key={item.id_alumno_sancion}>
+                  <td>{item.id_alumno_sancion}</td>
+                  <td>{data.student.nombre}</td>
+                  <td>{item.sancion.sancion}</td>
+                  <td>{item.sancion.duracion}</td>
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
+                  <td>
+                    {calcularFechaFin(item.fecha_inicio, item.sancion.duracion)}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6}>No hay sanciones registradas</td>
              </tr>
-            ))}
+            )}
          </tbody>
        </table>
      </div>
-      <button className="button buttonSearch" style={{marginTop:"1rem"}}>Quitar Sanción</button>
    </section>
  );
 }