Ieee 272 implement item incident form (#503)

* incident form init

* implementing form components

* fixing form style

* fixing position of menu items

* implement back button

* adding helper text for radio

* fixing button

* cleaning up unused vars

* adding report broken lost button

* init test

* fixing link

* reset form on successful submission

* setting up testing

* fix test

* fixing tests

* removing unused code

* adding name to readme

* fix type error

* padding qty to new page & adding snackbar

* rewriting formik with map

* fixing responsive issues on form

* fixing checkedout tables style

* adding map to radio options

* using map in form

* fixing textfield width

* fixing validation onchange

* adding more unit tests to check for rendering of form components and submit button

* adding more padding between form elements and labels

* removing inline styles (sorry bad habitsgit status)

* removing unused code and console.log & changing url format a little bit to pass more info about hardware for incident form

* added yup validation to check if the input string is 0 for qty, is so don't submit the form

* adding conditional redirects

* cleaning up code

* fixing tests for incident form to account for conditional rendering of the component when there are search params

* fixing type, had to use any bc not sure about how the URLSearchParams typing works

* fixing dependencies & adding const

* used to bypass react-hooks/exhaustive-deps so that dependencies don't need to be in useEffect array, so that the useEffect will fire on first render

* removing unused code

---------

Co-authored-by: Mustafa <mus2003.abdul@gmail.com>

README.md

@@ -18,6 +18,7 @@ A website template for hackathons run by [IEEE University of Toronto Student Bra
 - Kenny Cui
 - Himanish Jindal
 - Abubukker Chaudhary
+- Natalie Chan
 
 ## Contents
 - [Requirements](#requirements)

hackathon_site/dashboard/frontend/src/components/dashboard/ItemTable/ItemTable.tsx

@@ -43,6 +43,7 @@ import {
     GeneralReturnTable,
 } from "components/general/OrderTables/OrderTables";
 import PopupModal from "components/general/PopupModal/PopupModal";
+import { Link } from "react-router-dom";
 import { sortPendingOrders, sortReturnedOrders } from "api/helpers";
 import { sortCheckedOutOrders } from "api/helpers";
 
@@ -183,17 +184,24 @@ export const CheckedOutTables = () =>
                                                             {row.quantityGranted}
                                                         </TableCell>
                                                         <TableCell align="right">
-                                                            {/* TODO: Add back in when incident reports are being used*/}
-                                                            {/*<Button*/}
-                                                            {/*    color="secondary"*/}
-                                                            {/*    size="small"*/}
-                                                            {/*    onClick={() => {*/}
-                                                            {/*        reportIncident(row.id);*/}
-                                                            {/*        push("/incident-form");*/}
-                                                            {/*    }}*/}
-                                                            {/*>*/}
-                                                            {/*    Report broken/lost*/}
-                                                            {/*</Button>*/}
+                                                            <Link
+                                                                to={`/incident-form?data=${JSON.stringify(
+                                                                    row
+                                                                )}`}
+                                                            >
+                                                                <Button
+                                                                    color="secondary"
+                                                                    size="small"
+                                                                    onClick={() => {
+                                                                        console.log(
+                                                                            "reporting incident",
+                                                                            row.id
+                                                                        );
+                                                                    }}
+                                                                >
+                                                                    Report broken/lost
+                                                                </Button>
+                                                            </Link>
                                                         </TableCell>
                                                     </TableRow>
                                                 )

hackathon_site/dashboard/frontend/src/components/general/OrderTables/OrderTables.module.scss

@@ -29,6 +29,24 @@
     }
 }
 
+.titleChip {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 20px 0 5px 0;
+
+    @include responsive(sm-down) {
+        width: 100%;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+}
+
+.titleChipText {
+    margin-bottom: 4px;
+}
+
 .itemImg {
     height: 80px;
     width: 80px;
@@ -70,11 +88,6 @@
     }
 }
 
-.chipPadding {
-    position: relative;
-    left: 630px;
-}
-
 .noWrap {
     white-space: nowrap;
 }

hackathon_site/dashboard/frontend/src/components/general/OrderTables/OrderTables.tsx

@@ -96,41 +96,28 @@ export const GeneralOrderTableTitle = ({
     updatedTime,
     additionalChipFormatting,
 }: GeneralOrderTableTitleProps) => (
-    <Container className={styles.titleChip} maxWidth={false} disableGutters={true}>
+    <div className={styles.titleChip}>
         <Typography variant="h2" className={styles.titleChipText}>
             Order #{orderId}
         </Typography>
 
-        {orderStatus && (
-            <Container
-                className={styles.titleChipSpace}
-                maxWidth={false}
-                disableGutters={true}
-            >
-                <ChipStatus status={orderStatus} />
-            </Container>
-        )}
+        {orderStatus && <ChipStatus status={orderStatus} />}
 
         {createdTime && updatedTime ? (
-            <Container>
+            <div style={{ alignSelf: "flex-end" }}>
                 <Chip
                     label={[<b>Created at: </b>, formatDateTime(createdTime)]}
                     icon={<EditIcon />}
-                    className={`${styles.chipPurple} ${styles.chip} ${
-                        additionalChipFormatting ? styles.chipPadding : ""
-                    }`}
+                    className={`${styles.chipPurple} ${styles.chip}`}
                 />
-                {"    "}
                 <Chip
                     label={[<b>Updated at: </b>, formatDateTime(updatedTime)]}
                     icon={<UpdateIcon />}
-                    className={`${styles.chipBlue} ${styles.chip} ${
-                        additionalChipFormatting ? styles.chipPadding : ""
-                    }`}
+                    className={`${styles.chipBlue} ${styles.chip}`}
                 />
-            </Container>
+            </div>
         ) : null}
-    </Container>
+    </div>
 );
 
 export const GeneralPendingTable = ({

hackathon_site/dashboard/frontend/src/pages/IncidentForm/IncidentForm.module.scss

@@ -0,0 +1,74 @@
+@import "assets/abstracts/mixins.scss";
+@import "assets/abstracts/variables.scss";
+
+.arrowIcon {
+    width: 50px;
+    height: 50px;
+    padding: 10px;
+    align-self: flex-start;
+
+    transform: translateX(0px), scale(1);
+    transition: transform ease-in-out 300ms;
+
+    &:hover {
+        transform: translateX(-10px);
+        transition: transform ease-in-out 300ms;
+    }
+
+    &:active {
+        transform: scale(0.8);
+        transition: transform 300ms;
+    }
+}
+
+.formContainer {
+    display: flex;
+    flex-direction: column;
+    width: max(40vw, 640px);
+
+    @include responsive(md-down) {
+        width: 100%;
+    }
+}
+
+.formComponentContainer {
+    all: unset;
+    padding-bottom: 20px;
+}
+
+.card {
+    align-self: center;
+}
+
+.cardContent {
+    padding: 20px;
+}
+
+.pageContent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.dropdown {
+    width: 200px;
+
+    @include responsive(md-down) {
+        width: 30%;
+    }
+}
+
+.textboxFill {
+    width: 100%;
+}
+
+.submitButton {
+    align-self: center;
+    width: fit-content;
+    margin-top: 10px;
+}
+
+.titleMargin {
+    margin-bottom: 20px;
+}

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

@@ -0,0 +1,60 @@
+import { render, screen } from "testing/utils"; // Import your testing utilities here
+import IncidentForm from "./IncidentForm";
+import configureStore, { MockStore } from "redux-mock-store";
+
+describe("IncidentForm", () => {
+    const mockStore = configureStore<any>([]);
+    let store: MockStore<any>;
+
+    beforeEach(() => {
+        store = mockStore({
+            yourReducerKey: {
+                id: 10,
+                quantityRequested: 3,
+                quantityGranted: 2,
+            },
+        });
+    });
+
+    it("renders correctly when searchParams is empty", () => {
+        render(<IncidentForm />);
+
+        // Assert that the component renders nothing when searchParams is empty
+        expect(screen.queryByText("Item Incident Form")).toBeNull(); // Update the text according to your component's content
+    });
+
+    it("renders IncidentFormRender when searchParams is not empty", () => {
+        const mockSearchParams: any = {
+            get: jest.fn(() =>
+                JSON.stringify({ id: 10, quantityRequested: 3, quantityGranted: 2 })
+            ),
+            toString: jest.fn(() => "mockQueryString"),
+        };
+
+        jest.spyOn(global, "URLSearchParams").mockImplementation(
+            () => mockSearchParams
+        );
+
+        render(<IncidentForm />);
+
+        // Assert that mockSearchParams methods are called
+        expect(mockSearchParams.toString).toHaveBeenCalled();
+        expect(mockSearchParams.get).toHaveBeenCalledWith("data");
+
+        // Assert that the component renders IncidentFormRender
+        expect(screen.queryByText("Item Incident Form")).toBeInTheDocument(); // Update the text according to your component's content
+
+        // Renders all form components
+        const radios = screen.getAllByRole("radio");
+        const dropdown = screen.getByTestId("qty-dropdown");
+        const textareas = screen.getAllByRole("textbox");
+
+        expect(radios).toHaveLength(3); // three radio buttons
+        expect(dropdown).toBeInTheDocument(); // one dropdown
+        expect(textareas).toHaveLength(3); // three text inputs
+
+        // Renders submit button
+        const submitButton = screen.getByRole("button", { name: "Submit" });
+        expect(submitButton).toBeInTheDocument();
+    });
+});