Ieee 269 create table for orders page

[natapokie]

Overview

• Resolves 269

• Created a table for the orders instead of order cards which also includes status

  • filtering, sorting and searching functionality implemented through mui data grid (note: searching functionality is implemented through filtering)
  • currently displays the following information -- can display more information as well as long as it's a property of the Order type (note: tables takes in a prop of type Orders so it can be used with Redux later)
    • ID -> id
    • Time Ordered -> created_at
    • Team -> team_code
    • Order Qty -> items.length
    • Status -> status
  • added new statuses only implemented in the frontend (might be useful, might not be, let me know)
    • Pending -- when the received Ids are false
    • In Progress -- when someone is currently preparing the order
  • table currently displays as many rows that can fit the table size

I also left some comments in the code, if there were better ways to do certain things to prevent the spaghetti code

Unit Tests Created

• Unit test just makes sure that the table is rendered, any other suggestions for unit tests would be great

Steps to QA

• Opening the Orders page, you should see a table generated from mockPendingOrders
• Try sorting based on column properties -- mainly asc and desc times
• Try filtering by status
• Try searching for items, using the column filter
  • 
• Also try passing in other data of type Order[]

[natapokie]

used mockPendingOrders for now, but will later be replaced with allOrders from redux

[Mustaballer]

Not sure if this has to do with your test cases failing but are you missing any of these dependencies

[Mustaballer]

@natapokie The github actions do work now :) The test cases fail for the Orders.tsx but thats to be expected since you modifed that page. Next steps would to be modify the unit tests so they pass. Note you should be running tests locally first before pushing your new code :)

[natapokie]

in recent commit, 6108852, i commented testcases for the OrderCard and related components

[Mustaballer]

Hey Natalie, overall great work! This is close to merging, but I have made some minor comments. I think there are some tests missing for the OrdersTable component. We should ensure that the component displays data accurately, handles row double-click events, and calculates the order quantity correctly using the valueGetter function. If you have any questions on how we can do that, let me know :)

[Mustaballer]

Hey I requested some really minor changes, other than should be good to go

[Mustaballer]

Hi @natapokie this lgtm, I just have on style comment, can we make the color of the orders table white, cause I think it blends too much with the background. What do you think?

[natapokie]

Hi @natapokie this lgtm, I just have on style comment, can we make the color of the orders table white, cause I think it blends too much with the background. What do you think?

yep I agree! i didn't notice the coloring due to my display settings, it's changed to white now

[Mustaballer]

Lgtm!