IEEE-287 (adding new order statuses)

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

@@ -75,7 +75,9 @@ export const teamOrderListSerialization = (
 
             const hardwareInTableRow = Object.values(hardwareItems);
             if (hardwareInTableRow.length > 0)
-                (order.status === "Submitted" || order.status === "Ready for Pickup"
+                (order.status === "Submitted" ||
+                order.status === "Ready for Pickup" ||
+                order.status === "Packing" //TODO: Treating "Packing" orders (aka orders in progress of packing) as "Pending Orders" per table in participant side
                     ? pendingOrders
                     : checkedOutOrders
                 ).push({
@@ -182,11 +184,14 @@ export const sortCheckedOutOrders = (
 export const sortPendingOrders = (orders: OrderInTable[]): OrderInTable[] => {
     let ready_orders = [];
     let submitted_orders = [];
+    let packing_orders = []; // Added new array to ensure sorting of orders being packed accomodates for the orders with "packing" tag. This likely helps with the order display on the admin + participant table
     for (let order of orders) {
         if (order.status === "Ready for Pickup") {
             ready_orders.push(order);
-        } else {
+        } else if (order.status === "Submitted") {
             submitted_orders.push(order);
+        } else if (order.status === "Packing") {
+            packing_orders.push(order);
         }
     }
     ready_orders.sort((order1, order2) => {
@@ -202,7 +207,20 @@ export const sortPendingOrders = (orders: OrderInTable[]): OrderInTable[] => {
             new Date(order2.updatedTime).valueOf()
         );
     });
+    // Sorting packing orders
+    packing_orders.sort((order1, order2) => {
+        return (
+            new Date(order1.updatedTime).valueOf() -
+            new Date(order2.updatedTime).valueOf()
+        );
+    });
 
-    orders.splice(0, orders.length, ...submitted_orders, ...ready_orders);
+    orders.splice(
+        0,
+        orders.length,
+        ...submitted_orders,
+        ...ready_orders,
+        ...packing_orders
+    );
     return orders;
 };

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

@@ -3,8 +3,9 @@ import ReadyForPickupIcon from "assets/images/icons/statusIcons/readyforpickup-s
 import PickedUpIcon from "assets/images/icons/statusIcons/checkout-status.svg";
 import CancelledIcon from "assets/images/icons/statusIcons/cancelled-status.svg";
 import ReturnedIcon from "assets/images/icons/statusIcons/checkout-status.svg";
-import PendingIcon from "assets/images/icons/statusIcons/pending-status.svg";
-import InProgressIcon from "assets/images/icons/statusIcons/inprogress-status.svg";
+import PackingIcon from "assets/images/icons/statusIcons/pending-status.svg";
+//TODO: A low-priority task, but perhaps looking into changing the PackingIcon to be a more accurate fit
+//import InProgressIcon from "assets/images/icons/statusIcons/inprogress-status.svg";
 
 import styles from "components/orders/OrdersTable/OrdersTable.module.scss";
 
@@ -14,8 +15,8 @@ export const statusIconMap: { [key: string]: string } = {
     PickedUp: PickedUpIcon,
     Cancelled: CancelledIcon,
     Returned: ReturnedIcon,
-    Pending: PendingIcon,
-    InProgress: InProgressIcon,
+    Packing: PackingIcon,
+    //InProgress: InProgressIcon, //Commented out since we likely don't need this status anymore (Packing should mean the same thing as "In Progress?")
 };
 
 export const statusStylesMap: { [key: string]: string } = {
@@ -24,6 +25,6 @@ export const statusStylesMap: { [key: string]: string } = {
     PickedUp: styles.PickedUpIcon,
     Cancelled: styles.CancelledIcon,
     Returned: styles.ReturnedIcon,
-    Pending: styles.PendingIcon,
-    InProgress: styles.InProgressIcon,
+    Packing: styles.PackingIcon,
+    //InProgress: styles.InProgressIcon, //Commented out since we likely don't need this status anymore (Packing should mean the same thing as "In Progress?")
 };

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

@@ -104,7 +104,8 @@ export type OrderStatus =
     | "Cancelled"
     | "Returned"
     | "Pending"
-    | "In Progress";
+    | "In Progress"
+    | "Packing";
 export type PartReturnedHealth = "Healthy" | "Heavily Used" | "Broken" | "Lost";
 
 export type ItemsInOrder = Omit<OrderItem, "order" | "time_occurred">;

hackathon_site/dashboard/frontend/src/assets/abstracts/_variables.scss

@@ -19,6 +19,9 @@ $colors: (
     blueLight: #c3e1ef,
     purple: #800080,
     purpleLight: #cec4f2,
+    // added the pink colours. pink is now used to rep the "Updated at" UI tag. blue is now used to rep the "Packing" order tag (to mirror the order table on admin side created in prior merged PR [IEEE 269])
+    pink: #ff007f,
+    pinkLight: #ffc0cb,
 );
 
 $fonts: (

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

@@ -95,9 +95,10 @@ export const CheckedOutTables = () =>
                             >
                                 <GeneralOrderTableTitle
                                     orderId={checkedOutOrder.id}
+                                    orderStatus={checkedOutOrder.status} // Added the orderStatus element to render UI tag
                                     createdTime={checkedOutOrder.createdTime}
                                     updatedTime={checkedOutOrder.updatedTime}
-                                    additionalChipFormatting={true}
+                                    //additionalChipFormatting={true} // Commented out this line, not used
                                 />
                                 <TableContainer
                                     component={Paper}

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

@@ -80,6 +80,13 @@
         }
     }
 
+    &Pink {
+        background-color: color(pinkLight);
+        svg {
+            color: color(pink);
+        }
+    }
+
     &Blue {
         background-color: color(blueLight);
         svg {

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

@@ -10,6 +10,7 @@ import WatchLater from "@material-ui/icons/WatchLater";
 import Error from "@material-ui/icons/Error";
 import EditIcon from "@material-ui/icons/Edit";
 import UpdateIcon from "@material-ui/icons/Update";
+import HourglassEmptyIcon from "@material-ui/icons/HourglassEmpty";
 import {
     Paper,
     Table,
@@ -42,6 +43,15 @@ export const ChipStatus = ({ status }: { status: OrderStatus | "Error" }) => {
                     className={`${styles.chipOrange} ${styles.chip}`}
                 />
             );
+        //TODO: How is the following case going to be triggered?
+        case "Packing":
+            return (
+                <Chip
+                    icon={<HourglassEmptyIcon />}
+                    label="Packing"
+                    className={`${styles.chipBlue} ${styles.chip}`} //Made the colour of this tag blue to match the admin order table colour for the Pending tag
+                />
+            );
         case "Error":
             return (
                 <Chip
@@ -86,16 +96,16 @@ interface GeneralOrderTableTitleProps {
     orderStatus?: OrderStatus;
     createdTime?: string;
     updatedTime?: string;
-    additionalChipFormatting?: boolean;
+    //additionalChipFormatting?: boolean; //TODO: Commented out since not used
 }
 
 export const GeneralOrderTableTitle = ({
     orderId,
     orderStatus,
     createdTime,
     updatedTime,
-    additionalChipFormatting,
-}: GeneralOrderTableTitleProps) => (
+}: //additionalChipFormatting, //TODO: Commented out since not used
+GeneralOrderTableTitleProps) => (
     <div className={styles.titleChip}>
         <Typography variant="h2" className={styles.titleChipText}>
             Order #{orderId}
@@ -113,7 +123,7 @@ export const GeneralOrderTableTitle = ({
                 <Chip
                     label={[<b>Updated at: </b>, formatDateTime(updatedTime)]}
                     icon={<UpdateIcon />}
-                    className={`${styles.chipBlue} ${styles.chip}`}
+                    className={`${styles.chipPink} ${styles.chip}`}
                 />
             </div>
         ) : null}

hackathon_site/dashboard/frontend/src/components/orders/OrdersFilter/OrderFilter.tsx

@@ -105,6 +105,10 @@ const OrderFilter = ({ handleReset, handleSubmit }: FormikValues) => {
             status: "Returned",
             numOrders: numStatuses["Returned"],
         },
+        {
+            status: "Packing", // TODO: Packing -> interpreted as "currently building". This alligns with table changes in IEEE 269
+            numOrders: numStatuses["Packing"],
+        },
     ];
 
     return (

hackathon_site/dashboard/frontend/src/components/orders/OrdersTable/OrdersTable.module.scss

@@ -48,7 +48,7 @@
     background-color: #d9d9d9;
 }
 
-.PendingIcon {
+.PackingIcon {
     color: #2b7bbc;
     background-color: #c3e1ef;
 }

hackathon_site/dashboard/frontend/src/components/teamDetail/SimpleOrderTables/SimpleOrderTables.test.tsx

@@ -59,12 +59,15 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
                 } else {
                     expect(getByText(/reject order/i)).toBeInTheDocument();
                 }
-                if (status === "Submitted") {
+                if (status === "Packing") {
+                    /*TODO: Changed from status === "Submitted" to status === "Packing"*/
                     expect(getByText(/complete order/i)).toBeInTheDocument();
                     expect(queryByText(/picked up/i)).not.toBeInTheDocument();
-                } else {
+                } else if (status === "Submitted") {
                     expect(queryByText(/complete order/i)).not.toBeInTheDocument();
-                    expect(getByText(/picked up/i)).toBeInTheDocument();
+                    expect(queryByText(/ready for packing/i)).toBeInTheDocument();
+                    //expect(queryByText(/complete order/i)).not.toBeInTheDocument();
+                    //expect(getByText(/picked up/i)).toBeInTheDocument();
                 }
             }
         });
@@ -79,7 +82,8 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
             const { queryByDisplayValue, getByDisplayValue } = within(
                 getByTestId(`admin-simple-pending-order-${order.id}`)
             );
-            if (order.status == "Submitted") {
+            if (order.status === "Packing") {
+                /*TODO: Changed from status === "Submitted" to status === "Packing"*/
                 order.hardwareInTableRow.forEach(({ id }) => {
                     expect(getByDisplayValue(`hardware-${id}`)).toBeInTheDocument();
                 });
@@ -101,7 +105,9 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
         });
 
         mockPendingOrdersInTable
-            .filter(({ status }) => status === "Submitted")
+            .filter(
+                ({ status }) => status === "Packing"
+            ) /*TODO: Changed from status === "Submitted" to status === "Packing"*/
             .map(({ id }) => {
                 const { getByText } = within(
                     getByTestId(`admin-simple-pending-order-${id}`)
@@ -116,7 +122,9 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
         });
 
         const order = mockPendingOrdersInTable.find(
-            ({ status }) => status === "Submitted"
+            ({ status }) =>
+                status ===
+                "Packing" /*TODO: Changed from status === "Submitted" to status === "Packing"*/
         );
 
         if (order) {
@@ -147,7 +155,9 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
         });
 
         const order = mockPendingOrdersInTable.find(
-            ({ status }) => status === "Submitted"
+            ({ status }) =>
+                status ===
+                "Packing" /*TODO: Changed from status === "Submitted" to status === "Packing"*/
         );
 
         if (order) {

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

@@ -192,7 +192,7 @@ export const SimplePendingOrderFulfillmentTable = () => {
                             <GeneralPendingTable
                                 {...{
                                     pendingOrder,
-                                    ...(pendingOrder.status === "Submitted" &&
+                                    ...(pendingOrder.status === "Packing" && //This code defines the checkboxes that appear for pending orders. NOTE: changed from === "Submitted" to === "Packing"
                                         enableCheckboxColumn(pendingOrder)),
                                 }}
                             />
@@ -202,7 +202,7 @@ export const SimplePendingOrderFulfillmentTable = () => {
                                 spacing={1}
                                 style={{ marginTop: "10px" }}
                             >
-                                {pendingOrder.status === "Submitted" && (
+                                {pendingOrder.status === "Submitted" && ( //Will not need to add this to the packing orders, since there is no reason to reject an order that is already being packed.
                                     <Grid item>
                                         <Button
                                             color="secondary"
@@ -219,8 +219,61 @@ export const SimplePendingOrderFulfillmentTable = () => {
                                         </Button>
                                     </Grid>
                                 )}
+
+                                {/* On Admin side: The code below adds a button that changes "Submitted" status => "Packing"*/}
                                 {pendingOrder.status === "Submitted" && (
-                                    <CompleteOrderButton order={pendingOrder} />
+                                    <Grid item>
+                                        <Tooltip
+                                            title="Order is being packed"
+                                            placement="top"
+                                        >
+                                            <span>
+                                                <Button
+                                                    color="primary" //TODO: Keeping this button "navy blue" (ie: The colour flagged for "primary" tag) to differentiate from the red "Picked up" buttons
+                                                    variant="contained"
+                                                    disableElevation
+                                                    onClick={() =>
+                                                        updateOrder(
+                                                            pendingOrder.id,
+                                                            "Packing"
+                                                        )
+                                                    }
+                                                >
+                                                    Ready for packing
+                                                </Button>
+                                            </span>
+                                        </Tooltip>
+                                    </Grid>
+                                )}
+
+                                {/* On Admin side: The code below adds a button that changes "Packing" status => "Ready for Pickup"*/}
+                                {pendingOrder.status === "Packing" && (
+                                    <Grid item>
+                                        <Tooltip
+                                            title="Order is being packed"
+                                            placement="top"
+                                        >
+                                            <span>
+                                                <CompleteOrderButton
+                                                    order={pendingOrder}
+                                                />
+                                                {/*Commented out the code below since it caused a bug where if someone doesn't select all orders prior to pressing button, order status changes... */}
+                                                {/*<Button*/}
+                                                {/*    color="primary" //TODO: Keeping this button "navy blue" (ie: The colour flagged for "primary" tag) to differentiate from the red "Picked up" buttons*/}
+                                                {/*    variant="contained"*/}
+                                                {/*    disableElevation*/}
+                                                {/*    onClick={() =>*/}
+                                                {/*        updateOrder(*/}
+                                                {/*            pendingOrder.id,*/}
+                                                {/*            "Ready for Pickup"*/}
+                                                {/*        )*/}
+                                                {/*    }*/}
+                                                {/*>*/}
+                                                {/*    Complete order*/}
+                                                {/*</Button>*/}
+                                            </span>
+                                        </Tooltip>
+                                    </Grid>
                                 )}
                                 {pendingOrder.status === "Ready for Pickup" && (
                                     <Grid item>

hackathon_site/dashboard/frontend/src/constants.js

@@ -3,5 +3,5 @@ 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(2024, 9, 30, 11, 59);
 export const hssTestUserGroup = "HSS Test Users";

hackathon_site/dashboard/frontend/src/slices/order/adminOrderSlice.ts

@@ -16,6 +16,8 @@ interface numStatuses {
     "Picked Up"?: number;
     Cancelled?: number;
     Returned?: number;
+    //TODO: New entries added
+    Packing?: number;
 }
 
 interface adminOrderExtraState {
@@ -153,6 +155,15 @@ const adminOrderSlice = createSlice({
                     "Returned",
                     payload.results
                 );
+
+                //TODO: COMMENTED OUT MOCK DATA HERE FOR NOW
+                // TODO: Is using payload.results essentially retrieving the "real data" from the (django?) backend?
+                // state.numStatuses["Pending"] = 3; //Not sure why the above line works fine... somehow feature was already implemented?
+                //state.numStatuses["Rejected"] = 21;
+                state.numStatuses["Packing"] = numOrdersByStatus(
+                    "Packing",
+                    payload.results
+                );
             }
             adminOrderAdapter.setAll(state, payload.results);
         });

hackathon_site/dashboard/frontend/src/slices/order/teamOrderSlice.ts

@@ -278,7 +278,9 @@ export const pendingOrdersSelector = createSelector(
     (orders) =>
         orders.filter(
             (order) =>
-                order.status === "Submitted" || order.status === "Ready for Pickup"
+                order.status === "Submitted" ||
+                order.status === "Ready for Pickup" ||
+                order.status === "Packing"
         )
 );