Merge branch 'develop' into IEEE-272-implement-item-incident-form

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

@@ -94,3 +94,115 @@ export const teamOrderListSerialization = (
         hardwareIdsToFetch: Object.values(hardwareIdsToFetch),
     };
 };
+
+export const sortReturnedOrders = (
+    order1: ReturnOrderInTable,
+    order2: ReturnOrderInTable
+): number => {
+    const orderDate1 = order1.hardwareInOrder[0].time;
+    const orderDate2 = order2.hardwareInOrder[0].time;
+
+    const matchResult = orderDate1.match(
+        /(\d{1,2}):(\d{2}):(\d{2}) (AM|PM) \((\w{3}) (\w{3}) (\d{2}) (\d{4})\)/
+    );
+    const matchResult2 = orderDate2.match(
+        /(\d{1,2}):(\d{2}):(\d{2}) (AM|PM) \((\w{3}) (\w{3}) (\d{2}) (\d{4})\)/
+    );
+
+    if (matchResult && matchResult2) {
+        // converting invalid date to a valid Date for first order to be compared
+        const [, hours, minutes, seconds, meridiem, , month, day, year] = matchResult;
+        const monthIndex = [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ].indexOf(month);
+
+        const date = new Date(
+            Number(year),
+            monthIndex,
+            Number(day),
+            Number(hours) + (meridiem === "PM" ? 12 : 0),
+            Number(minutes),
+            Number(seconds)
+        );
+        const formattedDate = date.toISOString();
+
+        // converting invalid date to a valid Date for first order to be compared
+        const [, hours2, minutes2, seconds2, meridiem2, , month2, day2, year2] =
+            matchResult2;
+        const monthIndex2 = [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+        ].indexOf(month2);
+
+        const date2 = new Date(
+            Number(year2),
+            monthIndex2,
+            Number(day2),
+            Number(hours2) + (meridiem2 === "PM" ? 12 : 0),
+            Number(minutes2),
+            Number(seconds2)
+        );
+        const formattedDate2 = date2.toISOString();
+
+        return new Date(formattedDate2).valueOf() - new Date(formattedDate).valueOf();
+    }
+    return 0;
+};
+
+export const sortCheckedOutOrders = (
+    order1: OrderInTable,
+    order2: OrderInTable
+): number => {
+    return (
+        new Date(order2.updatedTime).valueOf() - new Date(order1.updatedTime).valueOf()
+    );
+};
+
+export const sortPendingOrders = (orders: OrderInTable[]): OrderInTable[] => {
+    let ready_orders = [];
+    let submitted_orders = [];
+    for (let order of orders) {
+        if (order.status === "Ready for Pickup") {
+            ready_orders.push(order);
+        } else {
+            submitted_orders.push(order);
+        }
+    }
+    ready_orders.sort((order1, order2) => {
+        return (
+            new Date(order1.updatedTime).valueOf() -
+            new Date(order2.updatedTime).valueOf()
+        );
+    });
+
+    submitted_orders.sort((order1, order2) => {
+        return (
+            new Date(order1.updatedTime).valueOf() -
+            new Date(order2.updatedTime).valueOf()
+        );
+    });
+
+    orders.splice(0, orders.length, ...submitted_orders, ...ready_orders);
+    return orders;
+};

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

@@ -14,7 +14,7 @@ import {
     mockReturnedOrdersInTable,
 } from "testing/mockData";
 import { ReturnOrderInTable } from "api/types";
-import { getAllByText, queryAllByText } from "@testing-library/react";
+import { getAllByText } from "@testing-library/react";
 
 describe("<PendingTables />", () => {
     it("Shows pending items and status chip", () => {
@@ -136,6 +136,29 @@ describe("<PendingTables />", () => {
 
         expect(cancelOrderModalMessage[0]).not.toBeInTheDocument();
     });
+
+    it("Displays pending orders from oldest to newest", () => {
+        const store = makeStoreWithEntities({
+            pendingOrders: mockPendingOrdersInTable,
+        });
+        const { getAllByTestId } = render(<PendingTables />, { store });
+        const orderElements = getAllByTestId(/pending-order-table-\d+/);
+        const orders = orderElements.map((element) => {
+            const updatedTime = element.getAttribute("data-updated-time");
+            return { updatedTime };
+        });
+        let isSorted = true;
+        for (let i = 0; i < orders.length - 1; i++) {
+            const currentDate = orders[i];
+            const previousDate = orders[i + 1];
+
+            if (currentDate > previousDate) {
+                isSorted = false;
+                break;
+            }
+        }
+        expect(isSorted).toBe(true);
+    });
 });
 
 describe("<CheckedOutTables />", () => {
@@ -207,6 +230,31 @@ describe("<CheckedOutTables />", () => {
         });
     });
 
+    it("Displays checked out orders from most recent to oldest order", async () => {
+        const store = makeStoreWithEntities({
+            orderState: {
+                checkedOutOrders: mockCheckedOutOrdersInTable,
+            },
+        });
+        const { getAllByTestId } = render(<CheckedOutTables />, { store });
+        const orderElements = getAllByTestId(/checked-out-order-table-\d+/);
+        const orders = orderElements.map((element) => {
+            const updatedTime = element.getAttribute("data-updated-time");
+            return { updatedTime };
+        });
+        let isSorted = true;
+        for (let i = 0; i < orders.length - 1; i++) {
+            const currentDate = orders[i];
+            const previousDate = orders[i + 1];
+
+            if (currentDate < previousDate) {
+                isSorted = false;
+                break;
+            }
+        }
+        expect(isSorted).toBe(true);
+    });
+
     // TODO: implement when incidents are ready
     // it("Calls 'push' and 'reportIncident' when 'Report broken/lost' is clicked", () => {
     //     const push = jest.fn();
@@ -312,6 +360,31 @@ describe("<ReturnedTable />", () => {
             expect(queryByText(`Order #${id}`)).not.toBeInTheDocument();
         });
     });
+
+    it("Displays the returned orders from newest to oldest", () => {
+        const store = makeStoreWithReturnedOrders(mockReturnedOrdersInTable, false);
+        const { getAllByTestId, getByText } = render(<ReturnedTable />, {
+            store,
+        });
+        const button = getByText("Show all");
+        fireEvent.click(button);
+        const orderElements = getAllByTestId(/returned-order-table-\d+/);
+        const orders = orderElements.map((element) => {
+            const updatedTime = element.getAttribute("data-updated-time");
+            return { updatedTime };
+        });
+        let isSorted = true;
+        for (let i = 0; i < orders.length - 1; i++) {
+            const currentDate = orders[i];
+            const previousDate = orders[i + 1];
+
+            if (currentDate < previousDate) {
+                isSorted = false;
+                break;
+            }
+        }
+        expect(isSorted).toBe(true);
+    });
 });
 
 // TODO: add back in when incidents are done

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

@@ -44,14 +44,17 @@ import {
 } 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";
 
 export const CheckedOutTables = () =>
     // TODO: for incident reports
     // { push,
     // reportIncident, }
     {
         const dispatch = useDispatch();
-        const orders = useSelector(checkedOutOrdersSelector);
+        const unsorted_orders = useSelector(checkedOutOrdersSelector);
+        const orders = unsorted_orders.slice().sort(sortCheckedOutOrders);
         const hardware = useSelector(hardwareSelectors.selectEntities);
         const isVisible = useSelector(isCheckedOutTableVisibleSelector);
         const fetchOrdersError = useSelector(orderErrorSelector);
@@ -87,6 +90,8 @@ export const CheckedOutTables = () =>
                             <div
                                 id={`order${checkedOutOrder.id}`}
                                 key={checkedOutOrder.id}
+                                data-testid={`checked-out-order-table-${checkedOutOrder.id}`}
+                                data-updated-time={`checked-out-order-time-${checkedOutOrder.updatedTime}`}
                             >
                                 <GeneralOrderTableTitle
                                     orderId={checkedOutOrder.id}
@@ -213,7 +218,8 @@ export const CheckedOutTables = () =>
 
 export const ReturnedTable = () => {
     const dispatch = useDispatch();
-    const orders = useSelector(returnedOrdersSelector);
+    const unsorted_orders = useSelector(returnedOrdersSelector);
+    const orders = unsorted_orders.slice().sort(sortReturnedOrders);
     const fetchOrdersError = useSelector(orderErrorSelector);
     const isVisible = useSelector(isReturnedTableVisibleSelector);
     const toggleVisibility = () => dispatch(toggleReturnedTable());
@@ -232,7 +238,9 @@ export const ReturnedTable = () => {
 
 export const PendingTables = () => {
     const dispatch = useDispatch();
-    const orders = useSelector(pendingOrderSelectors.selectAll);
+    const unsorted_orders = useSelector(pendingOrderSelectors.selectAll);
+    const orders = sortPendingOrders(unsorted_orders);
+    orders.reverse();
     const isVisible = useSelector(isPendingTableVisibleSelector);
     const isCancelOrderLoading = useSelector(cancelOrderLoadingSelector);
     const toggleVisibility = () => dispatch(togglePendingTable());
@@ -279,6 +287,7 @@ export const PendingTables = () => {
                         id={`order${pendingOrder.id}`}
                         key={pendingOrder.id}
                         data-testid={`pending-order-table-${pendingOrder.id}`}
+                        data-updated-time={`pending-order-time-${pendingOrder.updatedTime}`}
                     >
                         <GeneralPendingTable {...{ pendingOrder }} />
                         {pendingOrder.status !== "Ready for Pickup" && (

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

@@ -238,7 +238,11 @@ export const GeneralReturnTable = ({
                     </Paper>
                 ) : (
                     orders.map((order) => (
-                        <div key={order.id}>
+                        <div
+                            key={order.id}
+                            data-testid={`returned-order-table-${order.id}`}
+                            data-updated-time={`returned-order-time-${order.hardwareInOrder[0].time}`}
+                        >
                             <GeneralOrderTableTitle orderId={order.id} />
                             <TableContainer
                                 component={Paper}

hackathon_site/dashboard/frontend/src/components/orders/OrderCard/OrderCard.tsx

@@ -14,7 +14,10 @@ const OrderCard = ({ teamCode, orderQuantity, time, id, status }: OrderProps) =>
     const date = new Date(time);
     const month = date.toLocaleString("default", { month: "short" });
     const day = date.getDate();
-    const hoursAndMinutes = date.getHours() + ":" + date.getMinutes();
+    const hoursAndMinutes =
+        date.getHours() +
+        ":" +
+        ((date.getMinutes() < 10 ? "0" : "") + date.getMinutes());
 
     const orderDetails = [
         { title: "Team", value: teamCode },

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

@@ -172,6 +172,28 @@ describe("<SimplePendingOrderFulfillmentTable />", () => {
             });
         }
     });
+
+    it("Displays pending orders from oldest to newest on the admin side", () => {
+        const { getAllByTestId } = render(<SimplePendingOrderFulfillmentTable />, {
+            store,
+        });
+        const orderElements = getAllByTestId(/admin-simple-pending-order-\d+/);
+        const orders = orderElements.map((element) => {
+            const updatedTime = element.getAttribute("data-updated-time");
+            return { updatedTime };
+        });
+        let isSorted = true;
+        for (let i = 0; i < orders.length - 1; i++) {
+            const currentDate = orders[i];
+            const previousDate = orders[i + 1];
+
+            if (currentDate > previousDate) {
+                isSorted = false;
+                break;
+            }
+        }
+        expect(isSorted).toBe(true);
+    });
 });
 
 describe("<AdminReturnedItemsTable />", () => {
@@ -201,4 +223,24 @@ describe("<AdminReturnedItemsTable />", () => {
             expect(queryByText(`Order #${id}`)).toBeNull();
         });
     });
+
+    it("Displays returned orders from newest to oldest on the admin side", () => {
+        const { getAllByTestId } = render(<AdminReturnedItemsTable />, { store });
+        const orderElements = getAllByTestId(/returned-order-table-\d+/);
+        const orders = orderElements.map((element) => {
+            const updatedTime = element.getAttribute("data-updated-time");
+            return { updatedTime };
+        });
+        let isSorted = true;
+        for (let i = 0; i < orders.length - 1; i++) {
+            const currentDate = orders[i];
+            const previousDate = orders[i + 1];
+
+            if (currentDate > previousDate) {
+                isSorted = false;
+                break;
+            }
+        }
+        expect(isSorted).toBe(true);
+    });
 });

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

@@ -18,6 +18,7 @@ import {
     UpdateOrderAttributes,
     updateOrderStatus,
 } from "slices/order/teamOrderSlice";
+import { sortPendingOrders, sortReturnedOrders } from "api/helpers";
 
 interface SimpleOrderFormValues {
     itemIdsChecked: string[];
@@ -142,8 +143,8 @@ const CompleteOrderButton = ({ order }: { order: OrderInTable }) => {
 
 export const SimplePendingOrderFulfillmentTable = () => {
     const dispatch = useDispatch();
-    const orders = useSelector(pendingOrdersSelector);
-
+    const unsorted_orders = useSelector(pendingOrdersSelector);
+    const orders = sortPendingOrders(unsorted_orders);
     const [isVisible, setVisibility] = useState(true);
     const toggleVisibility = () => setVisibility(!isVisible);
 
@@ -186,6 +187,7 @@ export const SimplePendingOrderFulfillmentTable = () => {
                     >
                         <Form
                             data-testid={`admin-simple-pending-order-${pendingOrder.id}`}
+                            data-updated-time={`pending-order-time-${pendingOrder.updatedTime}`}
                         >
                             <GeneralPendingTable
                                 {...{
@@ -253,7 +255,8 @@ export const SimplePendingOrderFulfillmentTable = () => {
 };
 
 export const AdminReturnedItemsTable = () => {
-    const orders = useSelector(returnedOrdersSelector);
+    const unsorted_orders = useSelector(returnedOrdersSelector);
+    const orders = unsorted_orders.slice().sort(sortReturnedOrders);
 
     const [isVisible, setVisibility] = useState(true);
     const toggleVisibility = () => setVisibility(!isVisible);