Ieee 269 create table for orders page

.github/workflows/main.yml

@@ -42,14 +42,14 @@ jobs:
         working-directory: hackathon_site
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           ref: ${{github.event.pull_request.head.ref}}
           repository: ${{github.event.pull_request.head.repo.full_name}}
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: 16.x
       - name: Install dependencies
         run: yarn install
       - name: Formatting check
@@ -62,14 +62,14 @@ jobs:
         working-directory: hackathon_site/dashboard/frontend
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           ref: ${{github.event.pull_request.head.ref}}
           repository: ${{github.event.pull_request.head.repo.full_name}}
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: 16.x
       - name: Install dependencies
         run: yarn install
       - name: Formatting check

hackathon_site/dashboard/frontend/package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.52",
+    "@mui/material": "^5.13.4",
+    "@mui/x-data-grid": "^6.7.0",
     "@reduxjs/toolkit": "^1.3.6",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.2",
@@ -14,6 +18,7 @@
     "@types/yup": "^0.29.13",
     "axios": "^0.21.1",
     "connected-react-router": "^6.8.0",
+    "date-fns": "^2.30.0",
     "formik": "^2.1.4",
     "history": "^4.10.1",
     "lint-staged": "^10.2.2",

hackathon_site/dashboard/frontend/src/App.scss

@@ -21,3 +21,39 @@
         white-space: nowrap;
     }
 }
+
+// for OrdersTable
+.order-Submitted-icon {
+    color: #b7941e;
+    background-color: #ffe899;
+}
+
+.order-ReadyforPickup-icon {
+    color: #43a047;
+    background-color: #c1edc1;
+}
+
+.order-PickedUp-icon {
+    color: #757575;
+    background-color: #d9d9d9;
+}
+
+.order-Cancelled-icon {
+    color: #b00020;
+    background-color: #ebbcbc;
+}
+
+.order-Returned-icon {
+    color: #757575;
+    background-color: #d9d9d9;
+}
+
+.order-Pending-icon {
+    color: #2b7bbc;
+    background-color: #c3e1ef;
+}
+
+.order-InProgress-icon {
+    color: #ffa000;
+    background-color: #ffe3b4;
+}

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

@@ -0,0 +1,17 @@
+import SubmittedIcon from "../assets/images/icons/statusIcons/unfulfilled-status.svg";
+import ReadyForPickupIcon from "../assets/images/icons/statusIcons/readyforpickup-status.svg";
+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";
+
+export const statusIconMap: { [key: string]: string } = {
+    Submited: SubmittedIcon,
+    ReadyforPickup: ReadyForPickupIcon,
+    PickedUp: PickedUpIcon,
+    Cancelled: CancelledIcon,
+    Returned: ReturnedIcon,
+    Pending: PendingIcon,
+    InProgress: InProgressIcon,
+};

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

@@ -102,7 +102,9 @@ export type OrderStatus =
     | "Ready for Pickup"
     | "Picked Up"
     | "Cancelled"
-    | "Returned";
+    | "Returned"
+    | "Pending"
+    | "In Progress";
 export type PartReturnedHealth = "Healthy" | "Heavily Used" | "Broken" | "Lost";
 
 export type ItemsInOrder = Omit<OrderItem, "order" | "time_occurred">;

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

@@ -0,0 +1,19 @@
+@import "../../../assets/abstracts/mixins";
+@import "../../../assets/abstracts/variables";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: start;
+
+    width: 100%;
+    padding: 4px;
+    border-radius: 50px;
+}
+
+.statusIcon {
+    width: 12px;
+    margin-left: 5px;
+    margin-right: 10px;
+}

hackathon_site/dashboard/frontend/src/components/orders/OrdersTable/OrdersTable.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, within } from "testing/utils";
+import { DataGrid, GridRowsProp, GridColDef } from "@mui/x-data-grid";
+import { mockPendingOrders } from "testing/mockData";
+import { OrdersTable } from "./OrdersTable";
+
+describe("Orders Table", () => {
+    test("renders order table", () => {
+        const { container } = render(<OrdersTable ordersData={mockPendingOrders} />);
+        // find the rendered Data Grid
+        const dataGrid = container.querySelector(".MuiDataGrid-root");
+        expect(dataGrid).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { DataGrid, GridColDef, GridEventListener } from "@mui/x-data-grid";
+import { ItemsInOrder, Order } from "api/types";
+import { format, parseISO } from "date-fns"; // to parse date
+import { statusIconMap } from "api/orders";
+import styles from "./OrdersTable.module.scss";
+
+// status icons
+
+interface OrdersTableProps {
+    ordersData: Order[];
+}
+
+interface OrderStateIcon {
+    status: string;
+}
+
+interface StatusIcon {
+    status: string;
+}
+
+const StatusIcon = ({ status }: StatusIcon) => {
+    const iconSrc = statusIconMap[status];
+    return <img src={iconSrc} className={styles.statusIcon} alt={`${status} icon`} />;
+};
+
+const OrderStateIcon = ({ status }: OrderStateIcon) => {
+    const filterState: string = status.replace(/\s+/g, "");
+    console.log(filterState);
+
+    return (
+        <div className={styles.container}>
+            <div className={`${styles.container} order-${filterState}-icon`}>
+                <StatusIcon status={filterState} />
+                {status}
+            </div>
+        </div>
+    );
+};
+
+const handleEvent: GridEventListener<"rowClick"> = (
+    params, // GridRowParams
+    event, // MuiEvent<React.MouseEvent<HTMLElement>>
+    details // GridCallbackDetails
+) => {
+    console.log("clicked", params.row);
+};
+
+const OrdersTable = ({ ordersData }: OrdersTableProps) => {
+    const columns: GridColDef[] = [
+        { field: "id", headerName: "ID", width: 25, flex: 1 },
+        {
+            field: "created_at",
+            headerName: "Time Ordered",
+            flex: 1,
+            valueFormatter: (params) => {
+                const time = params.value as string;
+                const date = parseISO(time);
+                const formattedTime = format(date, "MMM d, HH:mm");
+                return formattedTime;
+            },
+        },
+        { field: "team_code", headerName: "Team", flex: 1 },
+        {
+            field: "items",
+            headerName: "Order Qty",
+            flex: 1,
+            valueGetter: (params) => {
+                let orderQty: number = 0;
+                const items = params?.value as ItemsInOrder[];
+                try {
+                    orderQty = items.length;
+                } catch (err) {
+                    return 0;
+                }
+                return orderQty;
+            },
+        },
+        {
+            field: "status",
+            headerName: "Status",
+            minWidth: 250,
+            renderCell: (params) => <OrderStateIcon status={params.value} />,
+        },
+        { field: "team_id", headerName: "Team ID" },
+        { field: "updated_at", headerName: "Updated At" },
+        { field: "request", headerName: "Request" },
+    ];
+
+    return (
+        <>
+            <div style={{ width: "100%", height: "700px" }}>
+                <DataGrid
+                    rows={ordersData}
+                    columns={columns}
+                    // pageSize={10} // not available in free version
+                    autoPageSize={true} // adjusts page size to fit available area
+                    pageSizeOptions={[5, 10, 15]}
+                    columnVisibilityModel={{
+                        // hide specific columns
+                        team_id: false,
+                        updated_at: false,
+                        request: false,
+                    }}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { pageSize: 25, page: 0 },
+                        },
+                    }}
+                    onRowDoubleClick={handleEvent}
+                />
+            </div>
+        </>
+    );
+};
+
+export { OrdersTable };

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

@@ -17,6 +17,8 @@ import {
 } from "slices/order/adminOrderSlice";
 import { useHistory } from "react-router-dom";
 import { clearFilters } from "slices/hardware/hardwareSlice";
+import { OrdersTable } from "components/orders/OrdersTable/OrdersTable";
+import { mockPendingOrders } from "testing/mockData";
 
 const Orders = () => {
     const dispatch = useDispatch();
@@ -86,7 +88,8 @@ const Orders = () => {
                         </Grid>
                         <Grid item lg={12}>
                             <Grid container spacing={1} direction="row">
-                                {allOrders.map((order, idx) => (
+                                <OrdersTable ordersData={mockPendingOrders} />
+                                {/* {allOrders.map((order, idx) => (
                                     <Grid
                                         item
                                         lg={3}
@@ -115,7 +118,7 @@ const Orders = () => {
                                             />
                                         )}
                                     </Grid>
-                                ))}
+                                ))} */}
                             </Grid>
                         </Grid>
                     </Grid>