Finalized students app

deno.json

@@ -35,7 +35,8 @@
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
     "$std/": "https://deno.land/std@0.216.0/",
-    "$root/": "./"
+    "$root/": "./",
+    "$apps/": "./routes/(apps)/"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

fresh.gen.ts

@@ -14,11 +14,11 @@ import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/part
 import * as $_apps_notes_partials_index from "./routes/(apps)/notes/partials/index.tsx";
 import * as $_apps_notes_partials_notes from "./routes/(apps)/notes/partials/notes.tsx";
 import * as $_apps_students_api_students from "./routes/(apps)/students/api/students.ts";
-import * as $_apps_students_api_types_d from "./routes/(apps)/students/api/types.d.ts";
 import * as $_apps_students_index from "./routes/(apps)/students/index.tsx";
 import * as $_apps_students_partials_admin_consult from "./routes/(apps)/students/partials/(admin)/consult.tsx";
 import * as $_apps_students_partials_admin_upload from "./routes/(apps)/students/partials/(admin)/upload.tsx";
 import * as $_apps_students_partials_index from "./routes/(apps)/students/partials/index.tsx";
+import * as $_apps_students_types_d from "./routes/(apps)/students/types.d.ts";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
@@ -56,7 +56,6 @@ const manifest = {
     "./routes/(apps)/notes/partials/index.tsx": $_apps_notes_partials_index,
     "./routes/(apps)/notes/partials/notes.tsx": $_apps_notes_partials_notes,
     "./routes/(apps)/students/api/students.ts": $_apps_students_api_students,
-    "./routes/(apps)/students/api/types.d.ts": $_apps_students_api_types_d,
     "./routes/(apps)/students/index.tsx": $_apps_students_index,
     "./routes/(apps)/students/partials/(admin)/consult.tsx":
       $_apps_students_partials_admin_consult,
@@ -64,6 +63,7 @@ const manifest = {
       $_apps_students_partials_admin_upload,
     "./routes/(apps)/students/partials/index.tsx":
       $_apps_students_partials_index,
+    "./routes/(apps)/students/types.d.ts": $_apps_students_types_d,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_middleware.ts": $_middleware,

routes/(apps)/students/(_components)/Promotion.tsx

@@ -0,0 +1,30 @@
+import Student from "$root/routes/(apps)/students/(_components)/Student.tsx";
+
+type PromotionProps = { students: Student[]; promo: Promotion };
+
+export default function Promotion(props: PromotionProps) {
+  if (!props.promo) {
+    return <p>Unable to find user in database.</p>;
+  }
+
+  return (
+    <div key={props.promo.id}>
+      <h3>Promotion {props.promo.endyear}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.students
+            .filter((student) => student.promotionId === props.promo.id)
+            .map((student) => <Student student={student} />)}
+        </tbody>
+      </table>
+    </div>
+  );
+}

routes/(apps)/students/(_components)/SelfPortrait.tsx

@@ -0,0 +1,31 @@
+import { CasContent } from "$root/defaults/interfaces.ts";
+
+type SelfPortraitProps = { self: CasContent };
+
+const regex =
+  /^(?<year>\d{4})(?<month>\d{2})(?<date>\d{2})(?<hours>\d{2})(?<minutes>\d{2})(?<seconds>\d{2})Z$/;
+
+export default function SelfPortrait(props: SelfPortraitProps) {
+  const { year, month, date, hours, minutes, seconds } = props.self
+    .amuDateValidation.match(regex)!.groups!;
+
+  const validationIsoDate =
+    `${year}-${month}-${date}T${hours}:${minutes}:${seconds}Z`;
+
+  const validationDate = new Date(validationIsoDate);
+
+  return (
+    <div id="self-portrait">
+      <div>Identity</div>
+      <div>{props.self.supannCivilite} {props.self.displayName}</div>
+      <div>Student number</div>
+      <div>{props.self.uid}</div>
+      <div>amU mail</div>
+      <div>{props.self.mail}</div>
+      <div>First amU registration</div>
+      <div>{validationDate.toLocaleString()}</div>
+      <div>amU class code</div>
+      <div>{props.self.supannEtuEtape}</div>
+    </div>
+  );
+}

routes/(apps)/students/(_components)/Student.tsx

@@ -0,0 +1,13 @@
+type StudentProps = { student: Student; promo?: number };
+
+export default function Student(props: StudentProps) {
+  return (
+    <tr key={props.student.userId}>
+      <td>{props.student.userId}</td>
+      <td>{props.student.firstName}</td>
+      <td>{props.student.lastName}</td>
+      <td>{props.student.mail}</td>
+      {props.promo && <td>{props.promo}</td>}
+    </tr>
+  );
+}

routes/(apps)/students/(_islands)/ConsultStudents.tsx

@@ -1,75 +1,45 @@
 import { useEffect, useState } from "preact/hooks";
+import Promotion from "$root/routes/(apps)/students/(_components)/Promotion.tsx";
 
-interface Promotion {
-  id: number;
-  name: string;
-}
+type SingleUserResponse = { promo: Promotion; student: Student };
+type ManyUsersResponse = { promos: Promotion[]; students: Student[] };
 
-interface Student {
-  userId: string;
-  firstName: string;
-  lastName: string;
-  mail: string;
-  promotionId: number;
-}
+type APIResponse = SingleUserResponse | ManyUsersResponse;
 
 export default function ConsultStudents() {
-  const [data, setData] = useState<
-    { promotions: Promotion[]; students: Student[] } | null
-  >(null);
+  const [data, setData] = useState<APIResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
-      try {
       const response = await fetch("/students/api/students");
       if (!response.ok) {
-          throw new Error(`Error fetching data: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        console.log("Fetched data:", result);
-        setData(result);
-      } catch (err) {
-        console.error("Error fetching data:", err);
         setError("Failed to load data. Please try again later.");
       }
+
+      const result: APIResponse = await response.json();
+      setData(result);
     };
 
     fetchData();
   }, []);
 
   return (
-    <section>
-      <h2>Consult Students</h2>
+    <>
       {error && <p className="error">{error}</p>}
-      {data?.promotions.map((promo) => (
-        <div key={promo.id}>
-          <h3>Promotion: {promo.name}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Email</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.students
-                .filter((student) => student.promotionId === promo.id)
-                .map((student) => (
-                  <tr key={student.userId}>
-                    <td>{student.userId}</td>
-                    <td>{student.firstName}</td>
-                    <td>{student.lastName}</td>
-                    <td>{student.mail}</td>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
-        </div>
-      ))}
-    </section>
+      {data && ((Object.hasOwn(data, "student"))
+        ? (
+          <Promotion
+            students={[(data as SingleUserResponse).student]}
+            promo={(data as SingleUserResponse).promo}
+          />
+        )
+        : (data as ManyUsersResponse).promos.map((promo) => (
+          <Promotion
+            students={(data as ManyUsersResponse).students}
+            promo={promo}
+          />
+        )))}
+    </>
   );
 }

routes/(apps)/students/(_islands)/UploadStudents.tsx

@@ -1,44 +1,72 @@
 // @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
 import * as XLSX from "https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs";
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 
-export default function UploadStudents() {
-  const statusMessage = useSignal<string>("");
-  const fileData = useSignal<File | null>(null);
-
-  const handleFileChange = (event: Event) => {
+/**
+ * Create a new handler for file change that displays
+ * messages in statusMessage and gets file data in fileData.
+ * @param statusMessage The status message signal.
+ * @param fileData The file data signal.
+ * @returns The file change handler.
+ */
+function getFileChangeHandler(
+  statusMessage: Signal<string>,
+  fileData: Signal<File | null>,
+): (event: Event) => void {
+  /**
+   * Handle file change.
+   * @param event The file change event.
+   */
+  return (event: Event) => {
     const input = event.target as HTMLInputElement;
     if (input.files && input.files.length > 0) {
       fileData.value = input.files[0];
-      statusMessage.value = "File selected: " + input.files[0].name;
+      statusMessage.value = `File selected: ${input.files[0].name}`;
     } else {
       fileData.value = null;
       statusMessage.value = "No file selected";
     }
   };
+}
 
-  const confirmUpload = () => {
+/**
+ * Create a new handler that sends data file to server.
+ * @param statusMessage The status message signal.
+ * @param fileData The file data signal.
+ * @returns The file confirmation handler.
+ */
+function getUploadConfirmationFunction(
+  statusMessage: Signal<string>,
+  fileData: Signal<File | null>,
+): () => void {
+  /**
+   * Add students to database.
+   * @returns Confirm upload of students.
+   */
+  return () => {
     if (!fileData.value) {
       statusMessage.value = "Please select a file before confirming upload.";
       return;
     }
 
-    try {
     const reader = new FileReader();
 
-      reader.onload = async (e) => {
-        const arrayBuffer = e.target?.result as ArrayBuffer;
+    /**
+     * Send all data to the server.
+     * @param event The finished progress event.
+     */
+    reader.onload = async (event: ProgressEvent<FileReader>) => {
+      const arrayBuffer = event.target!.result as ArrayBuffer;
       const workbook = XLSX.read(arrayBuffer, { type: "array" });
+      let allOK = true;
 
       for (const sheetName of workbook.SheetNames) {
         const sheet = workbook.Sheets[sheetName];
         const data = XLSX.utils.sheet_to_json(sheet, {
-            header: ["Identifiant", "Nom", "Prénom", "Mail"],
-            range: 1, // Ignorer les en-têtes
+          header: ["userId", "lastName", "firstName", "mail"],
+          range: 1,
         });
 
-          console.log(`Data from sheet ${sheetName}:`, data);
-
         const response = await fetch("/students/api/students", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -46,30 +74,38 @@ export default function UploadStudents() {
         });
 
         if (!response.ok) {
-            throw new Error(`Failed to insert data for promotion ${sheetName}`);
+          allOK = false;
         }
       }
 
-        statusMessage.value = "Data uploaded and inserted successfully!";
+      statusMessage.value = allOK
+        ? "Failed to insert all data."
+        : "Data uploaded and inserted successfully!";
     };
 
+    /**
+     * Display error message if any.
+     */
     reader.onerror = () => {
       statusMessage.value = "Error reading the file.";
     };
 
     reader.readAsArrayBuffer(fileData.value);
-    } catch (error) {
-      console.error("Error uploading file:", error);
-      statusMessage.value = "An unexpected error occurred during upload.";
-    }
   };
+}
+
+export default function UploadStudents() {
+  const statusMessage = useSignal<string>("");
+  const fileData = useSignal<File | null>(null);
+
+  const handleFileChange = getFileChangeHandler(statusMessage, fileData);
+  const confirmUpload = getUploadConfirmationFunction(statusMessage, fileData);
 
   return (
-    <div>
-      <h2>Upload Students</h2>
+    <>
       <input type="file" accept=".xlsx, .xls" onChange={handleFileChange} />
       <button onClick={confirmUpload}>Confirm Upload</button>
       <p>{statusMessage.value}</p>
-    </div>
+    </>
   );
 }

routes/(apps)/students/api/students.ts

@@ -32,31 +32,50 @@ function getItself(
 
 /**
  * Gets itself from the database.
- * @param database The database connection
+ * @param database The database connexion
  * @param userId The user ID.
  * @returns Itself from the database.
  */
 function getAll(
   database: Database,
-  userId: string,
-): { student: Student | null; promo: Promotion | null } {
-  const studentQuery = "select * from students where userId = ?";
-  const student: Student | undefined = database.prepare(studentQuery).get(
-    userId,
-  );
+): { students: Student[]; promos: Promotion[] } {
+  const studentsQuery = `
+    select userId, firstName, lastName, mail, promotionId
+    from students inner join promotions
+    on students.promotionId = promotions.id
+    where promotions.current < 6`;
+  const students: Student[] = database.prepare(studentsQuery).all();
 
-  if (!student) {
-    return { student: null, promo: null };
+  const promosQuery = "select * from promotions where promotions.current < 6";
+  const promos: Promotion[] | undefined = database.prepare(promosQuery).all();
+
+  return { students, promos };
 }
 
-  const promoQuery = "select * from promotions where id = ?";
-  const promo: Promotion | undefined = database.prepare(promoQuery).get(
-    student.promotionId,
+/**
+ * Add users to the database.
+ * @param database The database connexion
+ * @param students The students to add
+ * @param promoId The promotion id.
+ */
+function addStudents(database: Database, students: Student[], promoId: string) {
+  const query = `
+    INSERT INTO students 
+    (userId, firstName, lastName, mail, promotionId) 
+    VALUES (?, ?, ?, ?, ?)`;
+
+  const statement = database.prepare(query);
+
+  for (const student of students) {
+    statement.run(
+      student.userId,
+      student.firstName,
+      student.lastName,
+      student.mail,
+      promoId,
     );
-
-  return { student, promo: promo ?? null };
   }
-
+}
 
 export const handler: Handlers<null, AuthenticatedState> = {
   /**
@@ -75,9 +94,7 @@ export const handler: Handlers<null, AuthenticatedState> = {
 
     if (context.state.session.eduPersonPrimaryAffiliation == "student") {
       return new Response(
-        JSON.stringify({
-          student: getItself(database, context.state.session.uid),
-        }),
+        JSON.stringify(getItself(database, context.state.session.uid)),
         {
           headers: {
             "content-type": "application/json",
@@ -86,70 +103,49 @@ export const handler: Handlers<null, AuthenticatedState> = {
       );
     }
 
-    const promotions = database.prepare("select id, name from promotions")
-      .all();
-
-    const students = database.prepare(
-      "select userId, firstName, lastName, mail, promotionId from students",
-    ).all();
-
     return new Response(
-      JSON.stringify({ promotions, students }),
+      JSON.stringify(getAll(database)),
       {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "content-type": "application/json",
+        },
       },
     );
   },
+  /**
+   * Add students in the database.
+   * @param request The HTTP request.
+   * @param _context The Fresh context.
+   * @returns HTTP 201 on successful insert.
+   */
+  async POST(
+    request: Request,
+    _context: FreshContext<AuthenticatedState>,
+  ): Promise<Response> {
+    const { students, promo }: { students: Student[]; promo: string } =
+      await request.json();
 
-  async POST(request) {
-    console.log("API /students/api/insert_students called");
-
-    try {
-      const body = await request.json();
-      const { data, promoName } = body;
-
-      console.log("Received data:", { promoName, data });
-
-      if (!promoName || !Array.isArray(data)) {
-        throw new Error("Invalid request body");
+    if (!promo || !promo.match(/^\d{4}-\dA$/) || !Array.isArray(students)) {
+      return new Response(null, { status: 400 });
     }
 
     using connection = connect("students");
+    const database = connection.database;
 
-      connection.database.prepare(
-        "INSERT OR IGNORE INTO promotions (name) VALUES (?)",
-      ).run(promoName);
+    const { endyear, current } = promo.match(
+      /^(?<endyear>\d{4})-(?<current>\d)A$/,
+    )?.groups!;
 
-      const promoIdRow: { id: number } = connection.database
-        .prepare("SELECT id FROM promotions WHERE name = ?")
-        .get(promoName)!;
-      const promoId = promoIdRow.id;
+    database.prepare(
+      "insert or ignore into promotions (endyear, current) values (?, ?)",
+    ).run(endyear, current);
 
-      console.log(`Promotion ID for "${promoName}":`, promoId);
+    const { id: promoId }: { id: string } = database
+      .prepare("select id from promotions where endyear = ? and current = ?")
+      .get(endyear, current)!;
 
-      const insertQuery = connection.database.prepare(
-        `INSERT INTO students 
-        (userId, firstName, lastName, mail, promotionId) 
-        VALUES (?, ?, ?, ?, ?)`,
-      );
+    addStudents(database, students, promoId);
 
-      for (const student of data) {
-        console.log("Inserting student:", student);
-        insertQuery.run(
-          student.Identifiant,
-          student.Nom,
-          student["Prénom"],
-          student.Mail,
-          promoId,
-        );
-      }
-
-      console.log("All data inserted successfully");
-      return new Response("Data inserted successfully", { status: 201 });
-    } catch (error) {
-      console.error("Error inserting data:", error);
-      return new Response("Failed to insert data", { status: 500 });
-    }
+    return new Response(null, { status: 201 });
   },
 };

routes/(apps)/students/partials/(admin)/consult.tsx

@@ -1,4 +1,4 @@
-import ConsultStudents from "$root/routes/(apps)/students/(_islands)/ConsultStudents.tsx";
+import ConsultStudents from "../../(_islands)/ConsultStudents.tsx";
 import {
   getPartialsConfig,
   makePartials,
@@ -10,7 +10,7 @@ import { State } from "$root/defaults/interfaces.ts";
 async function Students(_request: Request, _context: FreshContext<State>) {
   return (
     <>
-      <h1>Manage Promotions</h1>
+      <h2>Consult students</h2>
       <ConsultStudents />
     </>
   );

routes/(apps)/students/partials/(admin)/upload.tsx

@@ -1,4 +1,4 @@
-import UploadStudents from "$root/routes/(apps)/students/(_islands)/UploadStudents.tsx";
+import UploadStudents from "../../(_islands)/UploadStudents.tsx";
 import {
   getPartialsConfig,
   makePartials,
@@ -10,7 +10,7 @@ import { State } from "$root/defaults/interfaces.ts";
 async function Students(_request: Request, _context: FreshContext<State>) {
   return (
     <>
-      <h1>Manage Promotions</h1>
+      <h2>Upload Students</h2>
       <UploadStudents />
     </>
   );

routes/(apps)/students/partials/index.tsx

@@ -4,10 +4,17 @@ import {
 } from "$root/defaults/makePartials.tsx";
 import { FreshContext } from "$fresh/server.ts";
 import { State } from "$root/defaults/interfaces.ts";
+import SelfPortrait from "$root/routes/(apps)/students/(_components)/SelfPortrait.tsx";
 
 // deno-lint-ignore require-await
 export async function Index(_request: Request, context: FreshContext<State>) {
-  return <h2>Welcome to {context.state.session?.displayName}.</h2>;
+  return (
+    <>
+      <h2>Welcome {context.state.session?.givenName}!</h2>
+      <h3>Your amU identity</h3>
+      <SelfPortrait self={context.state.session!} />
+    </>
+  );
 }
 
 export const config = getPartialsConfig();

routes/_app.tsx

@@ -27,6 +27,7 @@ export default async function App(
         <link rel="stylesheet" href="/styles/main.css" />
         <link rel="stylesheet" href="/styles/app.css" />
         <link rel="stylesheet" href="styles/app-cards.css" />
+        <link rel="stylesheet" href="styles/students.css" />
       </head>
       <body f-client-nav>
         <Header link={link} />

static/styles/app.css

@@ -3,7 +3,7 @@
   padding: 1em 0;
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 1em;
+  gap: 4em;
 }
 
 #app > #app-body {
@@ -16,7 +16,7 @@
 }
 
 #app > nav > a {
-  padding: 0.25em 0.5em;
+  padding: 0.5em 4em 0.5em 1em;
   color: light-dark(var(--light-foreground), var(--dark-foreground));
 }
 
@@ -57,5 +57,10 @@
   #app {
     grid-template-rows: auto 1fr;
     grid-template-columns: none;
+    gap: 1em;
+  }
+
+  #app > nav > a {
+    padding: 0.5em 1em;
   }
 }

static/styles/students.css

@@ -0,0 +1,15 @@
+#self-portrait {
+  display: grid;
+  gap: 1em;
+  grid-template-columns: auto 1fr;
+}
+
+#self-portrait > div:nth-child(2n+1) {
+  font-weight: var(--font-weight-bold);
+}
+
+@media screen and (max-width: 1024px) {
+  #self-portrait {
+    grid-template-columns: 1fr;
+  }
+}