Ieee 259 add description box on teams homepage

hackathon_site/dashboard/frontend/src/api/types.ts

@@ -90,6 +90,7 @@ export interface Team {
     created_at: string;
     updated_at: string;
     profiles: ProfileWithUser[];
+    project_description: string;
 }
 
 export interface ProfileWithUser extends ProfileWithoutTeamNumber {

hackathon_site/dashboard/frontend/src/components/cart/CartErrorBox/CartErrorBox.tsx

@@ -7,6 +7,7 @@ import { maxTeamSize, minTeamSize } from "constants.js";
 import AlertBox from "components/general/AlertBox/AlertBox";
 import { Link } from "@material-ui/core";
 import DateRestrictionAlert from "components/general/DateRestrictionAlert/DateRestrictionAlert";
+import ProjectDescriptionAlert from "components/teamDetail/ProjectDescription/ProjectDescriptionAlert";
 
 const CartErrorBox = () => {
     const cartQuantity = useSelector(cartTotalSelector);
@@ -22,6 +23,7 @@ const CartErrorBox = () => {
             <Grid xs={12} sm={12} md={2} item />
             <Grid xs={12} sm={12} md={8} item>
                 <DateRestrictionAlert />
+                <ProjectDescriptionAlert />
                 {orderSubmissionError && cartQuantity > 0 && (
                     <AlertBox
                         error={orderSubmissionError}

hackathon_site/dashboard/frontend/src/components/cart/CartSummary/CartSummary.tsx

@@ -13,23 +13,41 @@ import {
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { teamSizeSelector } from "slices/event/teamSlice";
 import { isTestUserSelector } from "slices/users/userSlice";
+import { projectDescriptionSelector } from "slices/event/teamDetailSlice";
+import { displaySnackbar } from "slices/ui/uiSlice";
 import {
     hardwareSignOutEndDate,
     hardwareSignOutStartDate,
     maxTeamSize,
     minTeamSize,
+    minProjectDescriptionLength,
 } from "constants.js";
 
 const CartSummary = () => {
     const isTestUser = useSelector(isTestUserSelector);
     const cartQuantity = useSelector(cartTotalSelector);
     const cartOrderLoading = useSelector(isLoadingSelector);
     const teamSize = useSelector(teamSizeSelector);
+    const projectDescription = useSelector(projectDescriptionSelector);
     const teamSizeValid = teamSize >= minTeamSize && teamSize <= maxTeamSize;
     const dispatch = useDispatch();
     const onSubmit = () => {
         if (cartQuantity > 0) {
-            dispatch(submitOrder());
+            if (
+                projectDescription &&
+                projectDescription.length < minProjectDescriptionLength
+            ) {
+                dispatch(
+                    displaySnackbar({
+                        message: "Please provide a more detailed project description.",
+                        options: {
+                            variant: "error",
+                        },
+                    })
+                );
+            } else {
+                dispatch(submitOrder());
+            }
         }
     };
     const currentDateTime = new Date();

hackathon_site/dashboard/frontend/src/components/teamDetail/ProjectDescription/ProjectDescription.module.scss

@@ -0,0 +1,20 @@
+.formTextField {
+    margin: 10px 5px 0 0;
+}
+
+.actionBtn {
+    width: 120px;
+}
+
+.submitBtn {
+    width: 120px;
+    margin-right: 10px;
+}
+
+.projectDescriptionDetail {
+    padding: 10px;
+}
+
+.title {
+    margin-top: 30px;
+}

hackathon_site/dashboard/frontend/src/components/teamDetail/ProjectDescription/ProjectDescription.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import styles from "./ProjectDescription.module.scss";
+import { Formik, Form, Field, FormikValues } from "formik";
+import * as Yup from "yup";
+import { TextField, Button, Box, Grid, Typography } from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import {
+    updateProjectDescription,
+    fetchInitialProjectDescription,
+    projectDescriptionSelector,
+    isProjectDescriptionLoadingSelector,
+} from "slices/event/teamDetailSlice";
+import { minProjectDescriptionLength } from "constants.js";
+
+export interface ProjectDescriptionProps {
+    teamCode: string;
+}
+
+const ProjectDescription = ({ teamCode }: ProjectDescriptionProps) => {
+    const dispatch = useDispatch();
+    const isProjectDescriptionLoading: boolean = useSelector(
+        isProjectDescriptionLoadingSelector
+    );
+    const initialProjectDescription =
+        useSelector(projectDescriptionSelector) || "Project description is required";
+    const [isEditing, setIsEditing] = useState(false);
+    const projectDescriptionSchema = Yup.object().shape({
+        projectDescription: Yup.string()
+            .max(500)
+            .required("Project description is required"),
+    });
+
+    const handleSubmit = async (values: FormikValues, { setSubmitting }: any) => {
+        await dispatch(
+            updateProjectDescription({
+                teamCode: teamCode,
+                projectDescription: values.projectDescription,
+            })
+        );
+        setSubmitting(false);
+        setIsEditing(false);
+    };
+
+    useEffect(() => {
+        if (teamCode != "None") {
+            dispatch(fetchInitialProjectDescription(teamCode));
+        }
+    }, [dispatch, teamCode]);
+
+    return (
+        <>
+            {isProjectDescriptionLoading ? (
+                ""
+            ) : (
+                <div className={styles.title}>
+                    <Typography variant="h2" gutterBottom>
+                        Project Description
+                    </Typography>
+                    <Formik
+                        initialValues={{
+                            projectDescription: initialProjectDescription,
+                        }}
+                        validationSchema={projectDescriptionSchema}
+                        onSubmit={handleSubmit}
+                    >
+                        {({ isSubmitting, isValid, values }) => (
+                            <Form>
+                                <Field
+                                    as={TextField}
+                                    name="projectDescription"
+                                    multiline
+                                    fullWidth
+                                    variant="outlined"
+                                    disabled={!isEditing}
+                                    rows={4}
+                                    className={styles.formTextField}
+                                />
+                                {minProjectDescriptionLength -
+                                    values.projectDescription.length >
+                                    0 && (
+                                    <Typography
+                                        variant="caption"
+                                        display="block"
+                                        gutterBottom
+                                    >
+                                        Minimum{" "}
+                                        {minProjectDescriptionLength -
+                                            values.projectDescription.length}{" "}
+                                        characters required
+                                    </Typography>
+                                )}
+                                <Box mt={2}>
+                                    <Grid container justifyContent="flex-end">
+                                        {isEditing ? (
+                                            <>
+                                                <Button
+                                                    type="submit"
+                                                    variant="contained"
+                                                    disabled={!isValid || isSubmitting}
+                                                    className={styles.submitBtn}
+                                                >
+                                                    SUBMIT
+                                                </Button>
+                                                <Button
+                                                    type="button"
+                                                    variant="contained"
+                                                    color="secondary"
+                                                    className={styles.actionBtn}
+                                                    onClick={() => setIsEditing(false)}
+                                                >
+                                                    CANCEL
+                                                </Button>
+                                            </>
+                                        ) : null}
+                                        {!isEditing && (
+                                            <Button
+                                                type="button"
+                                                variant="contained"
+                                                color="primary"
+                                                className={styles.actionBtn}
+                                                onClick={() => setIsEditing(true)}
+                                            >
+                                                EDIT
+                                            </Button>
+                                        )}
+                                    </Grid>
+                                </Box>
+                            </Form>
+                        )}
+                    </Formik>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default ProjectDescription;

hackathon_site/dashboard/frontend/src/components/teamDetail/ProjectDescription/ProjectDescriptionAlert.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import AlertBox from "components/general/AlertBox/AlertBox";
+import { projectDescriptionSelector } from "slices/event/teamDetailSlice";
+import { useSelector } from "react-redux";
+import { minProjectDescriptionLength } from "constants.js";
+
+const ProjectDescriptionAlert = () => {
+    const projectDescription = useSelector(projectDescriptionSelector);
+
+    if (projectDescription && projectDescription.length < minProjectDescriptionLength) {
+        return (
+            <AlertBox
+                data-testid="project-description-alert"
+                title="Project Description Required"
+                error="Please provide a more detailed project description."
+                type="error"
+            />
+        );
+    }
+
+    return null;
+};
+
+export default ProjectDescriptionAlert;

hackathon_site/dashboard/frontend/src/components/teamDetail/ProjectDescription/ProjectDescriptionDetail.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+    fetchInitialProjectDescription,
+    projectDescriptionSelector,
+    isTeamInfoLoadingSelector,
+} from "slices/event/teamDetailSlice";
+import styles from "./ProjectDescription.module.scss";
+import { LinearProgress, Paper, Typography } from "@material-ui/core";
+import { ProjectDescriptionProps } from "./ProjectDescription";
+
+const ProjectDescriptionDetail = ({ teamCode }: ProjectDescriptionProps) => {
+    const dispatch = useDispatch();
+
+    const projectDescription = useSelector(projectDescriptionSelector);
+    const isTeamInfoLoading = useSelector(isTeamInfoLoadingSelector);
+
+    useEffect(() => {
+        dispatch(fetchInitialProjectDescription(teamCode));
+    }, [dispatch, teamCode]);
+
+    return (
+        <div>
+            {isTeamInfoLoading ? (
+                <LinearProgress data-testid="project-description-linear-progress" />
+            ) : (
+                <>
+                    <Typography variant="h2" gutterBottom>
+                        Project Description
+                    </Typography>
+                    <Paper className={styles.projectDescriptionDetail}>
+                        <Typography variant="body1">{projectDescription}</Typography>
+                    </Paper>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default ProjectDescriptionDetail;

hackathon_site/dashboard/frontend/src/constants.js

@@ -3,5 +3,6 @@ export const adminGroup = "Hardware Site Admins";
 export const minTeamSize = 2;
 export const maxTeamSize = 4;
 export const hardwareSignOutStartDate = new Date(2020, 9, 1, 23, 59);
-export const hardwareSignOutEndDate = new Date(2023, 9, 30, 11, 59);
+export const hardwareSignOutEndDate = new Date(2025, 9, 30, 11, 59);
 export const hssTestUserGroup = "HSS Test Users";
+export const minProjectDescriptionLength = 60;

hackathon_site/dashboard/frontend/src/pages/Dashboard/Dashboard.test.tsx

@@ -113,7 +113,7 @@ describe("Dashboard Page", () => {
                 expect(get).toHaveBeenNthCalledWith(1, teamUri);
                 expect(get).toHaveBeenNthCalledWith(2, categoriesUri, {});
                 expect(get).toHaveBeenNthCalledWith(3, ordersUri);
-                expect(get).toHaveBeenNthCalledWith(4, hardwareUri, { hardware_ids });
+                expect(get).toHaveBeenNthCalledWith(5, hardwareUri, { hardware_ids });
             });
             await waitFor(() => {
                 const infoButton = within(
@@ -124,7 +124,7 @@ describe("Dashboard Page", () => {
                 fireEvent.click(infoButton);
             });
             await waitFor(() => {
-                expect(get).toHaveBeenNthCalledWith(5, hardwareDetailUri);
+                expect(get).toHaveBeenNthCalledWith(6, hardwareDetailUri);
                 expect(getByText("Product Overview")).toBeVisible();
                 expect(
                     getByText(`- Max ${newHardwareData.max_per_team} of this item`)

hackathon_site/dashboard/frontend/src/pages/Dashboard/Dashboard.tsx

@@ -34,6 +34,7 @@ import AlertBox from "components/general/AlertBox/AlertBox";
 import { openTeamModalItem } from "slices/ui/uiSlice";
 import EditTeam from "components/dashboard/EditTeam/EditTeam";
 import DateRestrictionAlert from "components/general/DateRestrictionAlert/DateRestrictionAlert";
+import ProjectDescription from "components/teamDetail/ProjectDescription/ProjectDescription";
 
 const Dashboard = () => {
     const dispatch = useDispatch();
@@ -122,6 +123,7 @@ const Dashboard = () => {
                         {fetchOrderError && <AlertBox error={fetchOrderError} />}
                         {/* TODO: add back in when incident reports are completed on the frontend */}
                         {/* <BrokenTable items={itemsBroken} openReportAlert={openBrokenTable} /> */}
+                        <ProjectDescription teamCode={team_code ?? "None"} />
                         <PendingTables />
                         <CheckedOutTables />
                         <ReturnedTable />

hackathon_site/dashboard/frontend/src/pages/TeamDetail/TeamDetail.test.tsx

@@ -56,17 +56,20 @@ describe("<TeamDetail />", () => {
         render(<TeamDetail {...teamDetailProps} />);
 
         expect(screen.getByTestId("team-info-linear-progress")).toBeInTheDocument();
+        expect(
+            screen.getByTestId("project-description-linear-progress")
+        ).toBeInTheDocument();
 
         await waitFor(() => {
             expect(mockedGet).toHaveBeenNthCalledWith(
                 1,
                 `/api/event/teams/${mockTeamMultiple.team_code}/`
             );
-            expect(mockedGet).toHaveBeenNthCalledWith(2, categoriesUri, {});
-            expect(mockedGet).toHaveBeenNthCalledWith(3, orderAPI, {
+            expect(mockedGet).toHaveBeenNthCalledWith(3, categoriesUri, {});
+            expect(mockedGet).toHaveBeenNthCalledWith(4, orderAPI, {
                 team_code: teamDetailProps.match.params.code,
             });
-            expect(mockedGet).toHaveBeenNthCalledWith(4, "/api/hardware/hardware/", {
+            expect(mockedGet).toHaveBeenNthCalledWith(5, "/api/hardware/hardware/", {
                 hardware_ids: [1, 2, 3, 4, 10],
             });
         });
@@ -141,17 +144,20 @@ describe("<TeamDetail />", () => {
         const { getByTestId, getByText } = render(<TeamDetail {...teamDetailProps} />);
 
         expect(screen.getByTestId("team-info-linear-progress")).toBeInTheDocument();
+        expect(
+            screen.getByTestId("project-description-linear-progress")
+        ).toBeInTheDocument();
 
         await waitFor(() => {
             expect(mockedGet).toHaveBeenNthCalledWith(
                 1,
                 `/api/event/teams/${mockTeamMultiple.team_code}/`
             );
-            expect(mockedGet).toHaveBeenNthCalledWith(2, categoriesUri, {});
-            expect(mockedGet).toHaveBeenNthCalledWith(3, orderAPI, {
+            expect(mockedGet).toHaveBeenNthCalledWith(3, categoriesUri, {});
+            expect(mockedGet).toHaveBeenNthCalledWith(4, orderAPI, {
                 team_code: teamDetailProps.match.params.code,
             });
-            expect(mockedGet).toHaveBeenNthCalledWith(4, "/api/hardware/hardware/", {
+            expect(mockedGet).toHaveBeenNthCalledWith(5, "/api/hardware/hardware/", {
                 hardware_ids: [1, 2, 3, 4, 10],
             });
         });
@@ -174,7 +180,7 @@ describe("<TeamDetail />", () => {
                 fireEvent.click(infoButton);
             });
             await waitFor(() => {
-                expect(mockedGet).toHaveBeenNthCalledWith(5, hardwareDetailUri);
+                expect(mockedGet).toHaveBeenNthCalledWith(6, hardwareDetailUri);
                 expect(getByText("Product Overview")).toBeVisible();
                 expect(
                     getByText(`- Max ${newHardwareData.max_per_team} of this item`)