Feature/andrewzpu/program profile pages

backend/src/controllers/program.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { RequestHandler } from "express";
 import { validationResult } from "express-validator";
-//import { error } from "firebase-functions/logger";
+import createHttpError from "http-errors";
+// import { error } from "firebase-functions/logger";
 
 import EnrollmentModel from "../models/enrollment";
 import ProgramModel from "../models/program";
@@ -73,6 +74,22 @@ export const updateProgram: RequestHandler = async (req, res, next) => {
   }
 };
 
+export const getProgram: RequestHandler = async (req, res, next) => {
+  const { id } = req.params;
+
+  try {
+    const program = await ProgramModel.findById(id);
+
+    if (program === null) {
+      throw createHttpError(404, "Program not found");
+    }
+
+    res.status(200).json(program);
+  } catch (error) {
+    next(error);
+  }
+};
+
 export const archiveProgram: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
   try {
@@ -108,3 +125,15 @@ export const getAllPrograms: RequestHandler = async (req, res, next) => {
     next(error);
   }
 };
+
+export const getProgramEnrollments: RequestHandler = async (req, res, next) => {
+  const { id } = req.params;
+
+  try {
+    const enrollments = await EnrollmentModel.find({ programId: id });
+
+    res.status(200).json(enrollments);
+  } catch (error) {
+    next(error);
+  }
+};

backend/src/routes/program.ts

@@ -13,5 +13,7 @@ router.patch("/:id", ProgramValidator.updateProgram, ProgramController.updatePro
 router.post("/create", ProgramValidator.createProgram, ProgramController.createProgram);
 router.post("/archive/:id", ProgramController.archiveProgram);
 router.get("/all", ProgramController.getAllPrograms);
+router.get("/:id", ProgramController.getProgram);
+router.get("/enrollments/:id", ProgramController.getProgramEnrollments);
 
 export default router;

frontend/src/api/programs.ts

@@ -5,6 +5,20 @@ import type { APIResult } from "../api/requests";
 
 export type Program = CreateProgramRequest & { _id: string; dateUpdated: string };
 
+export type Enrollment = {
+  _id: string;
+  studentId: string;
+  programId: string;
+  status: string;
+  dateUpdated: Date;
+  hoursLeft: number;
+  schedule: string[];
+  sessionTime: string[];
+  startDate: Date;
+  renewalDate: Date;
+  authNumber: string;
+};
+
 export async function createProgram(program: CreateProgramRequest): Promise<APIResult<Program>> {
   try {
     const response = await POST("/program/create", program);
@@ -18,14 +32,24 @@ export async function createProgram(program: CreateProgramRequest): Promise<APIR
 
 export async function getProgram(id: string): Promise<APIResult<Program>> {
   try {
-    const response = await GET(`/api/program/${id}`);
+    const response = await GET(`/program/${id}`);
     const json = (await response.json()) as Program;
     return { success: true, data: json };
   } catch (error) {
     return handleAPIError(error);
   }
 }
 
+export async function getProgramEnrollments(id: string): Promise<APIResult<[Enrollment]>> {
+  try {
+    const response = await GET(`/program/enrollments/${id}`);
+    const json = (await response.json()) as [Enrollment];
+    return { success: true, data: json };
+  } catch (error) {
+    return handleAPIError(error);
+  }
+}
+
 export async function editProgram(program: Program): Promise<APIResult<Program>> {
   try {
     const response = await PATCH(`/program/${program._id}`, program);

frontend/src/components/ProgramCard.tsx

@@ -1,9 +1,11 @@
 import { Poppins } from "next/font/google";
 import Image from "next/image";
-import React from "react";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
 
-import { Program } from "../api/programs";
+import { Enrollment, Program, getProgramEnrollments } from "../api/programs";
 import ProgramFormButton from "../components/ProgramFormButton";
+import { ProgramProfile } from "../components/ProgramProfile";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { cn } from "../lib/utils";
 
@@ -20,21 +22,6 @@ export type CardProps = {
   archiveView?: boolean;
 };
 
-// function checkOffscreen(id: string) {
-//   const elem = document.getElementById("edit" + id);
-//   if (elem === null) {
-//     return;
-//   }
-
-//   const bounding = elem.getBoundingClientRect();
-
-//   console.log(bounding.right);
-//   console.log(window.innerWidth);
-//   console.log(document.documentElement.clientWidth);
-
-//   return bounding.right + 26 - (window.innerWidth || document.documentElement.clientWidth);
-// }
-
 function toggleEdit(id: string) {
   const editId = "edit" + id;
   console.log(editId);
@@ -50,9 +37,13 @@ function toggleEdit(id: string) {
     editButton.style.display = "none";
   }
 
-  //   if (checkOffscreen(id) > 0) {
-  //     editButton.style.right = "0px";
-  //   }
+  function temp() {
+    if (editButton !== null && editButton.style.display === "block") {
+      editButton.style.display = "none";
+    }
+  }
+
+  document.body.addEventListener("click", temp, true);
 }
 
 export function ProgramCard({
@@ -65,27 +56,53 @@ export function ProgramCard({
 }: CardProps) {
   const { isTablet } = useWindowSize();
 
+  const cardId = "card" + program._id;
   const editId = "edit" + program._id;
   const optionsId = "option" + program._id;
 
+  const router = useRouter();
+
+  const [enrollments, setEnrollments] = useState<[Enrollment]>();
+
+  useEffect(() => {
+    getProgramEnrollments(program._id).then(
+      (result) => {
+        if (result.success) {
+          setEnrollments(result.data);
+          console.log("enrollments found");
+        } else {
+          console.log("error finding enrollments");
+        }
+      },
+      (error) => {
+        console.log(error);
+      },
+    );
+  }, []);
+
   const optionsButton = document.getElementById(optionsId);
   if (optionsButton !== null) {
-    optionsButton.onclick = function () {
+    optionsButton.onclick = function (event) {
+      event.stopPropagation();
       toggleEdit(program._id);
     };
   }
 
-  let editClass = "absolute right-2 hidden";
+  const cardClass = "relative z-0 cursor-pointer";
+  let editClass = "absolute right-2 hidden z-10";
   let outerDivClass = "text-white grow overflow-hidden tracking-wide leading-6";
   let topDivClass = "flex flex-row";
   let botDivClass = "text-black bg-white";
   let typeClass;
   let titleClass;
   let optionsDiv = "grow";
-  const optionsClass = "relative float-right hover:cursor-pointer";
+  const optionsClass = "relative float-right hover:cursor-pointer z-10";
   let numClass;
   let numTextClass;
   let iconClass = "relative";
+  const dialogBgClass =
+    "fixed left-0 top-0 h-full w-full py-10 px-40 bg-black bg-opacity-50 z-20 hidden";
+  const dialogClass = "relative z-20 h-full w-full m-auto overflow-hidden rounded-xl";
 
   let optionsHeight = 18;
   let optionsWidth = 16;
@@ -121,7 +138,7 @@ export function ProgramCard({
     optionsWidth /= 2;
     numClass = "h-5 gap-x-1.5 flex flex-row relative top-2 left-3";
     numTextClass = cn("text-[10px]", poppins.className);
-    iconClass = "h-2 w-3 mt-[7px]";
+    iconClass = "h-2 w-3 mt-[7.5px]";
   } else {
     editClass += " top-12 w-24 h-8";
     outerDivClass += " rounded-2xl h-68";
@@ -171,69 +188,115 @@ export function ProgramCard({
     </button>
   );
 
+  function openDialog() {
+    console.log("open");
+    if (isTablet) {
+      router.push("/program/" + program._id);
+    } else {
+      const dialogBox = document.getElementById("dialog" + program._id);
+      if (dialogBox) {
+        dialogBox.style.display = "block";
+      }
+    }
+  }
+
+  function closeDialog() {
+    console.log("close");
+    const dialogBox = document.getElementById("dialog" + program._id);
+    if (dialogBox) {
+      dialogBox.style.display = "none";
+    }
+  }
+
+  function getStudentNum(num: number): string {
+    if (num === 1) {
+      return "1 student";
+    } else {
+      return num + " students";
+    }
+  }
+
   return (
-    <div className="relative">
-      <div id={editId} className={editClass}>
-        <ProgramFormButton
-          type="edit"
-          component={editButton}
-          data={programFields}
-          setPrograms={setPrograms}
-          setAlertState={setAlertState}
-        />
-      </div>
-      <div className={outerDivClass}>
-        <div className={topDivClass} style={{ backgroundColor: program.color }}>
-          <div>
-            <p className={typeClass}>{program.type} Program</p>
-            <p className={titleClass}>{program.name}</p>
-          </div>
-          {isAdmin && !archiveView && (
-            <div className={optionsDiv}>
-              <Image
-                id={optionsId}
-                alt="options"
-                src="/programs/Options.png"
-                height={optionsHeight}
-                width={optionsWidth}
-                className={optionsClass}
-              />
-            </div>
-          )}
+    <div>
+      <div id={cardId} className={cardClass} onClick={openDialog}>
+        <div
+          id={editId}
+          className={editClass}
+          onClick={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <ProgramFormButton
+            type="edit"
+            component={editButton}
+            data={programFields}
+            setPrograms={setPrograms}
+            setAlertState={setAlertState}
+          />
         </div>
-        <div className={botDivClass}>
-          <div className={numClass}>
-            {!archiveView && (
-              <Image
-                alt="students"
-                src="/programs/Students.png"
-                height={12}
-                width={18}
-                className={iconClass}
-              />
+        <div className={outerDivClass}>
+          <div className={topDivClass} style={{ backgroundColor: program.color }}>
+            <div>
+              <p className={typeClass}>{program.type} Program</p>
+              <p className={titleClass}>{program.name}</p>
+            </div>
+            {isAdmin && (
+              <div className={optionsDiv}>
+                <Image
+                  id={optionsId}
+                  alt="options"
+                  src="/programs/Options.png"
+                  height={optionsHeight}
+                  width={optionsWidth}
+                  className={optionsClass}
+                />
+              </div>
             )}
-            {/*program.students.length === 0 && <p className={numTextClass}>No Students</p>*/}
-            {/*program.students.length === 1 && <p className={numTextClass}>1 Student</p>*/}
-            {
-              //program.students.length > 1 && (
-              <p className={numTextClass}>
-                {/*program.students.length*/}
-                {
-                  archiveView
+          </div>
+          <div className={botDivClass}>
+            <div className={numClass}>
+              {!archiveView && (
+                <Image
+                  alt="students"
+                  src="/programs/Students.png"
+                  height={12}
+                  width={18}
+                  className={iconClass}
+                />
+              )}
+              {enrollments && (
+                <p className={numTextClass}>
+                  {archiveView
                     ? "Archived on " +
                       (date.getMonth() + 1) +
                       "/" +
                       date.getDate() +
                       "/" +
                       date.getFullYear()
-                    : "0 Students" //<---- Change in the future --------
-                }
-              </p>
-              //)
-            }
+                    : getStudentNum(enrollments.length)}
+                </p>
+              )}
+            </div>
           </div>
         </div>
       </div>
+      <div id={"dialog" + program._id} className={dialogBgClass} onClick={closeDialog}>
+        <div
+          className={dialogClass}
+          onClick={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <ProgramProfile id={program._id}></ProgramProfile>
+          <button
+            id="closeButton"
+            className="absolute bottom-[40px] right-[40px] rounded bg-pia_dark_green px-[24px] py-[12px] text-white"
+            onClick={closeDialog}
+          >
+            Close
+          </button>
+        </div>
+      </div>
     </div>
   );
 }