From f204c4f6f7513961218dc9e93058476bf34617a6 Mon Sep 17 00:00:00 2001
From: andrewzpu <66804382+andrewzpu@users.noreply.github.com>
Date: Mon, 15 Apr 2024 08:56:01 -0700
Subject: [PATCH] Feature/andrewzpu/program page (#62)

* Created Program Card Component

* Edited Programs Page Layout

* Added Create Program Button and Minor Edits

* Finished editing Programs Page

* made lint fixes

* added backend route to get all programs

* fix deploy issue

* connected programs page to backend route

* fixed windowSize width error

* minor text changes

* fixed program card color options

* Added Options button and fixed lint errors

* fixed lint issues

* implemented edit program in program page

* uncommented 404 error lines

* reset default api path to /api

---------

Co-authored-by: adhi0331 <adhi03.ananthan@gmail.com>
Co-authored-by: Adhithya Ananthan <85322002+adhi0331@users.noreply.github.com>
---
 backend/src/routes/program.ts                 |   1 -
 frontend/public/programs/Options.png          | Bin 0 -> 406 bytes
 frontend/public/programs/Students.png         | Bin 0 -> 396 bytes
 frontend/public/programs/Vector.png           | Bin 0 -> 396 bytes
 frontend/src/components/ProgramCard.tsx       | 127 ++++++++++++++++++
 frontend/src/components/ProgramFormButton.tsx |  59 +++++---
 frontend/src/pages/programs.tsx               |  95 ++++++++++++-
 frontend/src/styles/global.css                |   4 +
 frontend/src/styles/globals.css               |   6 +
 9 files changed, 272 insertions(+), 20 deletions(-)
 create mode 100644 frontend/public/programs/Options.png
 create mode 100644 frontend/public/programs/Students.png
 create mode 100644 frontend/public/programs/Vector.png
 create mode 100644 frontend/src/components/ProgramCard.tsx

diff --git a/backend/src/routes/program.ts b/backend/src/routes/program.ts
index c1cd0b7b..05e24645 100644
--- a/backend/src/routes/program.ts
+++ b/backend/src/routes/program.ts
@@ -9,7 +9,6 @@ import * as ProgramValidator from "../validators/program";
 
 const router = express.Router();
 
-router.post("/", ProgramValidator.createProgram, ProgramController.createProgram);
 router.patch("/:id", ProgramValidator.updateProgram, ProgramController.updateProgram);
 router.post("/create", ProgramValidator.createProgram, ProgramController.createProgram);
 router.get("/all", ProgramController.getAllPrograms);
diff --git a/frontend/public/programs/Options.png b/frontend/public/programs/Options.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0ee6e47fa349747fe43c6a85a587aa2d67332c5
GIT binary patch
literal 406
zcmeAS@N?(olHy`uVBq!ia0vp^jzH|e!3HE({+Q7Vq&N#aB8wRqbi6^BajEUJl|Vtp
z;vjb?hIQv;UIIBR>5jfYZ5#W!|0J>k<+MFr978G?-`>3Fd)Ppv^`Wxb3yzx&eG>wW
zn3PLI%re~*nh&ugHaD+zSvx^MWn0dw)&D2|negpoc;>4Y)BiQT)m&Q~wORag)m(dd
zk;q#Q4A-u%pT2*-$VID$o45CBOseVr{oeY4`r<_%vnxwyZeH|Z-+agKyB~V?uAObM
z;!a?%sl1cXigTN#UK_TwUr*+Ezv}bCV^us4b=Ue&-L28|rNCzAnb5!`XJul_BC`IS
zzcBT?{A~ZO6Sw=$R|ZU8^!d}NnvdVZU)Ic>FKf!K4fGvD$I&ewQ7XEZe)o1A0<(%t
zSMcd>VvkyqG4byVG0*NjhPp+GQBUS(P6R36(3?3CsBFo1Y0*|N>q%CCY*Y&W7LSWc
qzYTRKiB%>?Jvp@HgtdJ{_aCN^dwHpC8Jns=Iz3(eT-G@yGywnzRITO!

literal 0
HcmV?d00001

diff --git a/frontend/public/programs/Students.png b/frontend/public/programs/Students.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0613fc872e509c4cd588694d4453f43860f568c
GIT binary patch
literal 396
zcmV;70dxL|P)<h;3K|Lk000e1NJLTq000vJ000aK1^@s6fY64500009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0U=35K~#7FwNk-R
z!!QusGv=QTxC~~7XXwCm03A3L02Po_z@!4xL7)TEfq4TnD!~QVIo49h*vbsa1NI@^
z-QJx}D+wZ~W={|lfHg2YIQR7u;+G1vCApmOn)a<DhPBDK(M7@JdzuqK6e4R?op@5(
zwQuBY%phqQ50XTFjy;_G#Ab(bqh{u?hpyflRYbh~+RVAn1;kccmzvppr;DX?uJ5}>
z))x3r$j}L5pDMgQ{gtJ0?xP;(@R2;%)*QMSa%o7&a&C{|wQN8ebb9W%Rn%_jubi0D
zFZ)u~@gQ6A`#k%}80ecUa2V83uKP)KnmPJsgF|^>ca<F3s0St3+=W`H#*`?(&`p9r
qM9RsQ*ieV#@ESI&`E4SqtG)pm@oDmk3eT(n0000<MNUMnLSTYgE~_#C

literal 0
HcmV?d00001

diff --git a/frontend/public/programs/Vector.png b/frontend/public/programs/Vector.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0613fc872e509c4cd588694d4453f43860f568c
GIT binary patch
literal 396
zcmV;70dxL|P)<h;3K|Lk000e1NJLTq000vJ000aK1^@s6fY64500009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0U=35K~#7FwNk-R
z!!QusGv=QTxC~~7XXwCm03A3L02Po_z@!4xL7)TEfq4TnD!~QVIo49h*vbsa1NI@^
z-QJx}D+wZ~W={|lfHg2YIQR7u;+G1vCApmOn)a<DhPBDK(M7@JdzuqK6e4R?op@5(
zwQuBY%phqQ50XTFjy;_G#Ab(bqh{u?hpyflRYbh~+RVAn1;kccmzvppr;DX?uJ5}>
z))x3r$j}L5pDMgQ{gtJ0?xP;(@R2;%)*QMSa%o7&a&C{|wQN8ebb9W%Rn%_jubi0D
zFZ)u~@gQ6A`#k%}80ecUa2V83uKP)KnmPJsgF|^>ca<F3s0St3+=W`H#*`?(&`p9r
qM9RsQ*ieV#@ESI&`E4SqtG)pm@oDmk3eT(n0000<MNUMnLSTYgE~_#C

literal 0
HcmV?d00001

diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
new file mode 100644
index 00000000..76d823cf
--- /dev/null
+++ b/frontend/src/components/ProgramCard.tsx
@@ -0,0 +1,127 @@
+import { Poppins } from "next/font/google";
+import React from "react";
+
+import { Program } from "../api/programs";
+import ProgramFormButton from "../components/ProgramFormButton";
+import { useWindowSize } from "../hooks/useWindowSize";
+import { cn } from "../lib/utils";
+
+import { ProgramData } from "./ProgramForm/types";
+
+const poppins = Poppins({ weight: ["400", "700"], style: "normal", subsets: [] });
+
+export type CardProps = {
+  program: Program;
+  type: string;
+  title: string;
+  dates: string;
+  color: string;
+  className?: string;
+};
+
+export function ProgramCard({ program, type, title, dates, color, className }: CardProps) {
+  const { isTablet } = useWindowSize();
+
+  let outerDivClass = "text-white grow overflow-hidden tracking-wide leading-6";
+  let topDivClass = "flex flex-row";
+  console.log(topDivClass);
+  let botDivClass = "text-black bg-white";
+  let typeClass;
+  let titleClass;
+  let optionsDiv = "grow";
+  const optionsClass = "relative float-right hover:cursor-pointer";
+  let dateClass;
+  // let numClass;
+  // let numTextClass;
+  // let iconClass = "relative";
+
+  let tempDate = new Date(program.startDate);
+  const startDate =
+    ("0" + (tempDate.getMonth() + 1)).slice(-2) +
+    "/" +
+    ("0" + tempDate.getDate()).slice(-2) +
+    "/" +
+    tempDate.getFullYear();
+
+  tempDate = new Date(program.endDate);
+  const endDate =
+    ("0" + (tempDate.getMonth() + 1)).slice(-2) +
+    "/" +
+    ("0" + tempDate.getDate()).slice(-2) +
+    "/" +
+    tempDate.getFullYear();
+
+  const programData: ProgramData = {
+    name: program.name,
+    abbreviation: program.abbreviation,
+    type: program.type,
+    days: program.daysOfWeek,
+    start: startDate,
+    end: endDate,
+    color: program.color,
+    renewal: "",
+    hourly: "",
+    sessions: [[]],
+  };
+
+  if (isTablet) {
+    outerDivClass += " rounded-lg h-36";
+    topDivClass += " h-20";
+    botDivClass += " h-16";
+    typeClass = cn("uppercase relative text-[10px] top-2 left-3", poppins.className);
+    titleClass = cn("capitalize relative text-sm top-2 left-3 font-bold", poppins.className);
+    optionsDiv += " pr-[8px] pt-[12px]";
+    dateClass = cn("relative text-[10px] top-2 left-3", poppins.className);
+    // 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]";
+  } else {
+    outerDivClass += " rounded-2xl h-68";
+    topDivClass += " h-36";
+    botDivClass += " h-32";
+    typeClass = cn("uppercase relative text-sm top-5 left-7", poppins.className);
+    titleClass = cn("capitalize relative text-3xl top-8 left-7 font-bold", poppins.className);
+    optionsDiv += " pr-[16px] pt-[24px]";
+    dateClass = cn("relative text-base top-5 left-7", poppins.className);
+    // numClass = "h-8 gap-x-1.5 flex flex-row relative top-14 left-7";
+    // numTextClass = cn("text-base", poppins.className);
+    // iconClass = "h-3 w-[18px] mt-[5px]";
+  }
+
+  if (className) {
+    outerDivClass = cn(outerDivClass, className);
+  }
+
+  console.log(topDivClass);
+
+  return (
+    <div className={outerDivClass}>
+      <div className={topDivClass} style={{ backgroundColor: color }}>
+        <div>
+          <p className={typeClass}>{type} Program</p>
+          <p className={titleClass}>{title}</p>
+        </div>
+        <div className={optionsDiv}>
+          <div className={optionsClass}>
+            <ProgramFormButton type="edit" data={programData} />{" "}
+          </div>
+        </div>
+      </div>
+      <div className={botDivClass}>
+        <p className={dateClass}>{dates}</p>
+        {/*
+        <div className={numClass}>
+          <Image
+            alt="students"
+            src="/programs/Vector.png"
+            height={12}
+            width={18}
+            className={iconClass}
+          />
+          <p className={numTextClass}>{numStudents} Students</p>
+        </div>
+        */}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ProgramFormButton.tsx b/frontend/src/components/ProgramFormButton.tsx
index aaab647f..7ddd5d44 100644
--- a/frontend/src/components/ProgramFormButton.tsx
+++ b/frontend/src/components/ProgramFormButton.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { useMemo, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
@@ -55,14 +56,27 @@ export default function ProgramFormButton({
   return !isMobile ? (
     <>
       <Dialog open={openForm} onOpenChange={setOpenForm}>
-        <DialogTrigger asChild>
-          <Button
-            label={type === "add" ? "Add Program" : "Edit Program"}
-            onClick={() => {
-              setOpenForm(true);
-            }}
-          />
-        </DialogTrigger>
+        {type === "add" && (
+          <DialogTrigger asChild>
+            <Button
+              label="Add Program"
+              onClick={() => {
+                setOpenForm(true);
+              }}
+            />
+          </DialogTrigger>
+        )}
+        {type === "edit" && (
+          <DialogTrigger asChild>
+            <Image
+              alt="options"
+              src="/programs/Options.png"
+              height={18}
+              width={16}
+              className={"relative float-right hover:cursor-pointer"}
+            />
+          </DialogTrigger>
+        )}
         <DialogContentSlide className="w-full bg-white object-right p-6 sm:w-[50%]">
           <form onSubmit={handleSubmit(onSubmit)} className={cn(classname)}>
             {type === "edit" && (
@@ -155,14 +169,27 @@ export default function ProgramFormButton({
   ) : (
     <>
       <Dialog open={openForm} onOpenChange={setOpenForm}>
-        <DialogTrigger asChild>
-          <Button
-            label={type === "add" ? "Add Program" : "Edit Program"}
-            onClick={() => {
-              setOpenForm(true);
-            }}
-          />
-        </DialogTrigger>
+        {type === "add" && (
+          <DialogTrigger asChild>
+            <Button
+              label="Add Program"
+              onClick={() => {
+                setOpenForm(true);
+              }}
+            />
+          </DialogTrigger>
+        )}
+        {type === "edit" && (
+          <DialogTrigger asChild>
+            <Image
+              alt="options"
+              src="/programs/Options.png"
+              height={9}
+              width={8}
+              className={"relative float-right hover:cursor-pointer"}
+            />
+          </DialogTrigger>
+        )}
         <DialogContent className="bg-white p-3">
           <ProgramCancel
             onSubmit={() => {
diff --git a/frontend/src/pages/programs.tsx b/frontend/src/pages/programs.tsx
index 8bd21266..87ec134e 100644
--- a/frontend/src/pages/programs.tsx
+++ b/frontend/src/pages/programs.tsx
@@ -1,15 +1,104 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { Program, getAllPrograms } from "../api/programs";
+import { ProgramCard } from "../components/ProgramCard";
 import ProgramFormButton from "../components/ProgramFormButton";
+import { useWindowSize } from "../hooks/useWindowSize";
 
 import { useRedirectTo404IfNotAdmin, useRedirectToLoginIfNotSignedIn } from "@/hooks/redirect";
 
+function processDate(startString: Date): string {
+  const startDate = new Date(startString);
+
+  const options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  } as const;
+
+  return "Started " + startDate.toLocaleDateString("en-US", options);
+}
+
 export default function Programs() {
   useRedirectToLoginIfNotSignedIn();
   useRedirectTo404IfNotAdmin();
+
+  const { windowSize } = useWindowSize();
+  const isMobile = useMemo(() => windowSize.width < 640, [windowSize.width]);
+  const isTablet = useMemo(() => windowSize.width < 1024, [windowSize.width]);
+  const extraLarge = useMemo(() => windowSize.width >= 2000, [windowSize.width]);
+
+  const [programs, setPrograms] = useState<Program[]>([]);
+
+  useEffect(() => {
+    getAllPrograms().then(
+      (result) => {
+        if (result.success) {
+          setPrograms(result.data);
+        } else {
+          alert(result.error);
+        }
+      },
+      (error) => {
+        console.log(error);
+      },
+    );
+  }, []);
+
+  let mainClass = "h-full overflow-y-scroll no-scrollbar";
+  let titleClass = "font-[alternate-gothic]";
+  let headerClass = "flex flex-row";
+  let cardsGridClass = "grid";
+  let cardClass = "";
+
+  if (isTablet) {
+    titleClass += " text-2xl leading-none h-6";
+    mainClass += " p-0";
+
+    if (isMobile) {
+      headerClass += " pt-2 pb-3";
+      cardsGridClass += " grid-cols-1";
+      cardClass += " p-0 py-3";
+    } else {
+      cardsGridClass += " grid-cols-2";
+      headerClass += " p-2 py-4";
+      cardClass += " p-2";
+    }
+  } else {
+    titleClass += " text-[40px] leading-none h-10";
+    headerClass += " p-5 pt-10 pb-5";
+    cardClass += " p-5";
+
+    if (extraLarge) {
+      cardsGridClass += " grid-cols-3 max-w-[1740px]";
+      headerClass += " max-w-[1740px]";
+    } else {
+      cardsGridClass += " grid-cols-2 max-w-[1160px]";
+      headerClass += " max-w-[1160px]";
+    }
+  }
+
   return (
-    <div>
-      <div className="w-40">
+    <main className={mainClass}>
+      <div className={headerClass}>
+        <h1 className={titleClass}>Programs</h1>
+        <div className="grow"></div>
+        {/* Should be replaced with Add Button when created */}
         <ProgramFormButton type="add" />{" "}
       </div>
-    </div>
+      <div className={cardsGridClass}>
+        {programs.map((program) => (
+          <div className={cardClass} key={program._id}>
+            <ProgramCard
+              program={program}
+              type={program.type}
+              title={program.name}
+              dates={processDate(program.startDate)}
+              color={program.color}
+            />
+          </div>
+        ))}
+      </div>
+    </main>
   );
 }
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 122431a5..c952493c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -84,6 +84,10 @@
 }
 
 @layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   .scrollbar::-webkit-scrollbar {
     width: 12px;
   }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index d2c83330..041100e5 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -3,6 +3,12 @@
   --primary-dark-green: 0, 104, 103;
   --primary-text: 32, 33, 36;
   --white: 255, 255, 255;
+
+  --secondary-yellow: 255, 184, 0;
+  --secondary-red: 255, 122, 94;
+  --secondary-teal: 79, 161, 151;
+  --secondary-green: 182, 191, 14;
+
   --error-red: 185, 59, 69;
   --gray-2: 216, 216, 216;
   --black: 0, 0, 0;