v1

sandboxnu · Jan 28, 2025 · 932274f · 932274f
1 parent 5884459
commit 932274f
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 2 deletions.
diff --git a/packages/frontend/components/Plan/ErrorModalError.tsx b/packages/frontend/components/Plan/ErrorModalError.tsx
@@ -0,0 +1,70 @@
+import { ChevronDownIcon, ChevronUpIcon, WarningIcon } from "@chakra-ui/icons";
+import { Box, Flex, Text, Collapse } from "@chakra-ui/react";
+import { useState } from "react";
+
+interface ErrorModalErrorProps {
+  title: string;
+  message: string;
+}
+
+export const ErrorModalError: React.FC<ErrorModalErrorProps> = ({
+  title,
+  message,
+}) => {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Box
+      border="1px solid"
+      borderColor="primary.red.main"
+      borderRadius="lg"
+      backgroundColor="#FAE8E7"
+      transition="background-color 0.25s ease"
+      _hover={{ backgroundColor: "#F9DAD8" }}
+    >
+      <Flex
+        onClick={() => setOpened(!opened)}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="flex-start"
+        height="45px"
+        color="black"
+        fontWeight="bold"
+        p="sm"
+        position="sticky"
+        top="0px"
+        zIndex={1}
+      >
+        <Flex direction="row" height="100%" columnGap="sm">
+          <Flex direction="row" height="100%" alignItems="center" gap="1">
+            <WarningIcon
+              color="primary.red.main"
+              width="2rem"
+              alignSelf="center"
+              alignItems="center"
+              justifySelf="center"
+              transition="background 0.15s ease"
+            />
+            <Text color="black" mt="0" fontSize="sm">
+              {title}
+            </Text>
+          </Flex>
+        </Flex>
+
+        <Flex ml="xs" alignItems="center" justifyItems="center">
+          {opened ? (
+            <ChevronUpIcon boxSize="25px" color="primary.red.main" />
+          ) : (
+            <ChevronDownIcon boxSize="25px" color="primary.red.main" />
+          )}
+        </Flex>
+      </Flex>
+
+      <Collapse in={opened} animateOpacity>
+        <Box px="sm" py="xs" borderRadius="lg" backgroundColor="transparent">
+          <Text fontSize="sm">{message}</Text>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};
diff --git a/packages/frontend/components/Plan/ReqErrorModal.tsx b/packages/frontend/components/Plan/ReqErrorModal.tsx
@@ -16,6 +16,7 @@ import {
   INEUReqCourseError,
   INEUReqError,
   ScheduleCourse2,
+  ScheduleTerm2,
 } from "@graduate/common";
 import { HelperToolTip } from "../Help";
 import {
@@ -25,22 +26,35 @@ import {
 import { useFetchCourse } from "../../hooks";
 import { GraduateToolTip } from "../GraduateTooltip";
 import { SetStateAction } from "react";
+import { ErrorModalError } from "./";
 
 interface ReqErrorModalProps {
   setHovered: (isHovered: SetStateAction<boolean>) => void;
   course: ScheduleCourse2<unknown>;
+  term?: ScheduleTerm2<string>;
   preReqErr?: INEUReqError;
   coReqErr?: INEUReqError;
 }
 
 export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
   course,
+  term,
   setHovered,
   coReqErr = undefined,
   preReqErr = undefined,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const err =
+    course.name === "Co-op Education" &&
+    term !== undefined &&
+    (term.id === "1-FL" || term.id === "4-SP");
+  let msg = "This is an error.";
+  if (err && term.id === "1-FL") {
+    msg = "You may only register a co-op in your second year and beyond.";
+  } else if (err && term.id === "4-Sp") {
+    msg = "You cannot register a co-op in your last semester.";
+  }
   return (
     <Flex
       justifySelf="stretch"
@@ -107,7 +121,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
                 <ParseCourse course={coReqErr} parent={true} />
               </Flex>
             )}
-            {preReqErr && (
+            {(preReqErr || err) && (
               <Flex direction="column">
                 <Flex
                   alignItems="center"
@@ -127,6 +141,12 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
                 <ParseCourse course={preReqErr} parent={true} />
               </Flex>
             )}
+            {err && (
+              <ErrorModalError
+                title="Cannot add co-op!"
+                message={msg}
+              ></ErrorModalError>
+            )}
           </ModalBody>
         </ModalContent>
       </Modal>

diff --git a/packages/frontend/components/Plan/ScheduleTerm.tsx b/packages/frontend/components/Plan/ScheduleTerm.tsx
@@ -78,6 +78,7 @@ export const ScheduleTerm: React.FC<ScheduleTermProps> = ({
           coReqErr={termCoReqErr?.[courseToString(scheduleCourse)]}
           preReqErr={termPreReqErr?.[courseToString(scheduleCourse)]}
           scheduleCourse={scheduleCourse}
+          scheduleTerm={scheduleTerm}
           removeCourse={(course: ScheduleCourse2<unknown>) =>
             removeCourseFromTermInCurrPlan(
               course,

diff --git a/packages/frontend/components/Plan/index.ts b/packages/frontend/components/Plan/index.ts
@@ -5,3 +5,4 @@ export * from "./EditPlanModal";
 export * from "./DeletePlanModal";
 export * from "./AddYearButton";
 export * from "./TransferCourses";
+export * from "./ErrorModalError";
diff --git a/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx b/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx
@@ -7,6 +7,7 @@ import {
   INEUReqError,
   IRequiredCourse,
   ScheduleCourse2,
+  ScheduleTerm2,
   SeasonEnum,
 } from "@graduate/common";
 import { forwardRef, PropsWithChildren, useEffect, useState } from "react";
@@ -23,6 +24,7 @@ import { GraduateToolTip } from "../GraduateTooltip";
 
 interface DraggableScheduleCourseProps {
   scheduleCourse: ScheduleCourse2<string>;
+  scheduleTerm?: ScheduleTerm2<string>;
   coReqErr?: INEUReqError;
   preReqErr?: INEUReqError;
   isInSidebar?: boolean;
@@ -40,6 +42,7 @@ export const DraggableScheduleCourse: React.FC<
   DraggableScheduleCourseProps
 > = ({
   scheduleCourse,
+  scheduleTerm,
   removeCourse,
   preReqErr = undefined,
   coReqErr = undefined,
@@ -68,6 +71,7 @@ export const DraggableScheduleCourse: React.FC<
       preReqErr={preReqErr}
       ref={setNodeRef}
       scheduleCourse={scheduleCourse}
+      scheduleTerm={scheduleTerm}
       removeCourse={removeCourse}
       isInSidebar={isInSidebar}
       isChecked={isChecked}
@@ -186,6 +190,7 @@ const ScheduleCourse = forwardRef<HTMLElement | null, ScheduleCourseProps>(
       coReqErr = undefined,
       preReqErr = undefined,
       scheduleCourse,
+      scheduleTerm,
       removeCourse,
       isInSidebar = false,
       isChecked = false,
@@ -202,7 +207,13 @@ const ScheduleCourse = forwardRef<HTMLElement | null, ScheduleCourseProps>(
   ) => {
     const [hovered, setHovered] = useState(false);
     const isValidRemove = isRemove && !isFromSidebar;
-    const isCourseError = coReqErr !== undefined || preReqErr !== undefined;
+    const isCourseError =
+      coReqErr !== undefined ||
+      preReqErr !== undefined ||
+      // hard coded co-op error for now
+      (scheduleCourse.name === "Co-op Education" &&
+        scheduleTerm !== undefined &&
+        (scheduleTerm.id === "1-FL" || scheduleTerm.id === "4-SP"));
 
     /*
     This component uses some plain HTML elements instead of Chakra
@@ -253,6 +264,7 @@ const ScheduleCourse = forwardRef<HTMLElement | null, ScheduleCourseProps>(
             <ReqErrorModal
               setHovered={setHovered}
               course={scheduleCourse}
+              term={scheduleTerm}
               coReqErr={coReqErr}
               preReqErr={preReqErr}
             />