style order details, add collapse/expand

frontend/public/stylesheets/filter.css

 .filter-search {
-  /* width: 50%; */
   display: flex;
   align-items: center;
   padding: 20px;
@@ -29,9 +28,13 @@
   align-items: center;
 }
 
-.filter-btns > * {
+.filter-btns > *,
+.search-btn,
+.collapse-btn,
+.expand-btn {
   cursor: pointer;
   display: flex;
+  align-items: center;
   padding: 10px 20px;
   border-radius: 5px;
   border: 1px solid black;
@@ -87,28 +90,36 @@
   cursor: pointer;
   border: none;
   font-size: 16px;
-  font-family: 'Times New Roman', Times, serif;
+  font-family: "Times New Roman", Times, serif;
 }
 
 .search > input {
   padding: 10px;
   font-size: 16px;
-  font-family: 'Times New Roman', Times, serif;
+  font-family: "Times New Roman", Times, serif;
 }
 
-.search-btn {
-  cursor: pointer;
-  display: flex;
-  padding: 10px 20px;
-  border-radius: 5px;
-  border: 1px solid black;
-}
-
-.search-btn:hover {
-  color:white;
+.search-btn:hover,
+.collapse-btn:hover,
+.expand-btn:hover {
+  color: white;
   background: gray;
 }
 
 .error {
   color: red;
-}
+}
\ No newline at end of file
+
+.fs-collapse {
+  display: flex;
+  justify-content: space-between;
+}
+
+.collapse-expand {
+  display: flex;
+  padding: 20px;
+}
+
+.collapse-expand > * ~ * {
+  margin-left: 10px;
+}

frontend/public/stylesheets/order.css

@@ -129,7 +129,6 @@
   padding: 20px 50px;
   box-sizing: border-box;
   overflow: scroll;
-  /* background: white; */
 }
 
 .animate {
@@ -142,6 +141,27 @@
   font-size: 20px;
   font-weight: 700;
   border-bottom: 2px solid black; 
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-details-name {
+  display: flex;
+  align-items: center;
+}
+
+.order-details-dates {
+  display: flex;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 16px;
+  font-style: italic;
+  width: 280px;
+}
+
+.order-details-dates > div {
+  display: flex;
+  justify-content: space-between;
 }
 
 .order-detail-table {
@@ -157,10 +177,6 @@
   padding: 5px 20px;
 }
 
-.item-detail ~ .item-detail {
-  /* border-top: 1px solid red; */
-}
-
 .item-sku, .item-qty {
   text-align: center;
 }

frontend/src/App.jsx

 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Header from "./components/header/Header";
-import OrderIndex from "./components/order/OrderIndex"
+import OrderIndex from "./components/order/OrderIndex";
 import NoOrders from "./components/order/NoOrders";
 import { fetchOrders } from "./actions/order_actions";
 import FilterSearch from "./components/filter/FilterSearch";
+import Button from "./components/atoms/Button";
 
 const App = ({ orders, fetchOrders }) => {
-
   const [ordersToShow, setOrdersToShow] = useState(orders);
   const [fetchAttempted, setFetchAttempted] = useState(false);
-
-  // debugger
+  const [collapseAll, setCollapseAll] = useState(false);
+  const [expandAll, setExpandAll] = useState(false);
 
   useEffect(() => {
     if (!fetchAttempted) {
@@ -24,15 +24,35 @@ const App = ({ orders, fetchOrders }) => {
   return (
     <div className="app">
       <Header />
-      <FilterSearch setOrdersToShow={setOrdersToShow} />
+      <div className="fs-collapse">
+        <FilterSearch setOrdersToShow={setOrdersToShow} />
+        <div className="collapse-expand">
+          <Button
+            className="collapse-btn"
+            onClick={() => setCollapseAll(true)}
+            text={`Collapse All`}
+          />
+          <Button
+            className="expand-btn"
+            onClick={() => setExpandAll(true)}
+            text={`Expand All`}
+          />
+        </div>
+      </div>
       {ordersToShow.allIds.length ? (
-        <OrderIndex orders={ordersToShow} />
+        <OrderIndex
+          orders={ordersToShow}
+          collapseAll={collapseAll}
+          expandAll={expandAll}
+          setCollapseAll={setCollapseAll}
+          setExpandAll={setExpandAll}
+        />
       ) : (
         <NoOrders />
       )}
     </div>
   );
-}
+};
 
 const mapStateToProps = (state) => ({
   orders: state.entities.orders,

frontend/src/actions/order_actions.js

@@ -23,7 +23,6 @@ export const fetchOrders = () => (dispatch) => {
 export const editOrder = (order) => (dispatch) => {
   OrderAPIUtil.editOrder(order)
     .then(res => {
-      debugger
       dispatch(updateOrder(res.data))
     });
 }
\ No newline at end of file

frontend/src/components/filter/FilterSearch.jsx

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Filter from "./Filter";
 import Search from "./Search";
 

frontend/src/components/header/Header.jsx

-import React from 'react';
-import Login from "../session/Login";
+import React from "react";
 import Logout from "../session/Logout";
 
 const Header = () => {
@@ -9,6 +8,6 @@ const Header = () => {
       <Logout />
     </div>
   );
-}
+};
 
-export default Header;
+export default Header;
\ No newline at end of file

frontend/src/components/order/ItemDetails.jsx

 const ItemDetails = ({ item }) => {
-
-  const { itemId, itemName, itemQuantity, itemPrice, itemSku } = item;
+  const { itemName, itemQuantity, itemPrice, itemSku } = item;
 
   return (
     <tr className="item-detail">
@@ -9,10 +8,7 @@ const ItemDetails = ({ item }) => {
       <td className="item-qty">{itemQuantity}</td>
       <td className="item-price">{`$${itemPrice.toFixed(2)}`}</td>
     </tr>
-    // <li className="item-detail">
-    //   {`${itemName} -- x ${itemQuantity} bought at ${itemPrice}/ea.`}
-    // </li>
   );
-}
+};
 
-export default ItemDetails;
+export default ItemDetails;
\ No newline at end of file

frontend/src/components/order/OrderDetails.jsx

 import ItemDetails from "./ItemDetails";
 
 const OrderDetails = ({ order, showDetails }) => {
+  const createdDate = new Date(order.createdAt);
+  const modifiedDate = new Date(order.modifiedAt);
+  const status =
+    order.status[0].toUpperCase() + order.status.substr(1).toLowerCase();
+
+  const dateToString = (date) => {
+    const month = date.toLocaleString("default", { month: "short" });
+    const day = date.getDate();
+    const year = date.getFullYear();
+    const time = date.toLocaleTimeString("en-US");
+    return `${month} ${day > 9 ? day : `0${day}`}, ${year} at ${time}`;
+  };
 
   return (
     <div className={`order-details ${showDetails ? "animate" : ""}`}>
       <div className="order-details-container">
-        <div className="order-details-header">Order Details:</div>
+        <div className="order-details-header">
+          <div className="order-details-name">Order Details:</div>
+          <div className="order-details-dates">
+            <div>
+              <div>Created on:</div>
+              <div>{dateToString(createdDate)}</div>
+            </div>
+            {order.modifiedAt ? (
+              <div>
+                <div>{`${status} on:`}</div>
+                <div>{dateToString(modifiedDate)}</div>
+              </div>
+            ) : null}
+          </div>
+        </div>
         <table className="order-detail-table">
           <thead>
             <tr>
@@ -25,6 +51,6 @@ const OrderDetails = ({ order, showDetails }) => {
       </div>
     </div>
   );
-}
+};
 
-export default OrderDetails;
+export default OrderDetails;
\ No newline at end of file

frontend/src/components/order/OrderIndex.jsx

@@ -2,13 +2,26 @@ import OrderIndexItem from './OrderIndexItem';
 
 const OrderIndex = ({
   orders,
+  collapseAll,
+  expandAll,
+  setCollapseAll,
+  setExpandAll,
 }) => {
   return (
     <div className="order-index">
       <h1>Order Index</h1>
       {orders.allIds.map((orderId) => {
         const order = orders.byId[orderId];
-        return <OrderIndexItem key={order.id} order={order} />;
+        return (
+          <OrderIndexItem
+            key={order.id}
+            order={order}
+            collapseAll={collapseAll}
+            expandAll={expandAll}
+            setCollapseAll={setCollapseAll}
+            setExpandAll={setExpandAll}
+          />
+        );
       })}
     </div>
   );

frontend/src/components/order/OrderIndexItem.jsx

-import React, { useState } from 'react';
-import OrderButtons from './OrderButtons';
-import { FiChevronRight } from 'react-icons/fi';
-import OrderDetails from './OrderDetails';
-
-const OrderIndexItem = ({ order }) => {
-
-  const { 
-    id,
-    orderId, 
-    status, 
-    orderItems, 
-    createdAt, 
-    modifiedAt
-  } = order;
+import React, { useEffect, useState } from "react";
+import OrderButtons from "./OrderButtons";
+import { FiChevronRight } from "react-icons/fi";
+import OrderDetails from "./OrderDetails";
+
+const OrderIndexItem = ({
+  order,
+  collapseAll,
+  expandAll,
+  setCollapseAll,
+  setExpandAll,
+}) => {
+  const { orderId, status } = order;
 
   const [showDetails, setShowDetails] = useState(false);
 
-  const actions = ( status === "FULFILLED" || status === "CANCELLED" ? 
-  <div className={`oii-status ${status.toLowerCase()}`}>{status}</div> :
-  <OrderButtons order={order} />
-  );
+  useEffect(() => {
+    if (collapseAll) {
+      setShowDetails(false);
+    }
+    if (expandAll) {
+      setShowDetails(true);
+    }
+    setCollapseAll(false);
+    setExpandAll(false);
+  }, [showDetails, collapseAll, expandAll]);
+
+  const handleDropDown = () => {
+    setShowDetails(!showDetails);
+  };
+
+  const actions =
+    status === "FULFILLED" || status === "CANCELLED" ? (
+      <div className={`oii-status ${status.toLowerCase()}`}>{status}</div>
+    ) : (
+      <OrderButtons order={order} />
+    );
 
   return (
     <div className="oii">
       <div className="oii-container">
         <div className="oii-left">
-          <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
+          <FiChevronRight
+            className={`oii-drop ${showDetails ? "rotate" : ""}`}
+            onClick={handleDropDown}
+          />
           <div className="oii-num">{`Order #: ${orderId}`}</div>
         </div>
         {actions}
@@ -33,7 +51,7 @@ const OrderIndexItem = ({ order }) => {
 
       <OrderDetails showDetails={showDetails} order={order} />
     </div>
-  )
+  );
 };
 
 export default OrderIndexItem;

frontend/src/util/orders_api_util.jsx

@@ -5,6 +5,5 @@ export const getOrders =() => {
 }
 
 export const editOrder = (order) => {
-  debugger;
   return axios.put(`http://localhost:8080/api/orders/${order.id}`, order)
 }

src/main/java/com/ascendfinalproject/warehouse/services/WarehouseOrderService.java

@@ -32,7 +32,7 @@ public class WarehouseOrderService {
   public Mono<WarehouseOrder> createOrder(WarehouseOrder order) {
       order.setStatus("RECEIVED");
       order.setCreatedAt(new Date(System.currentTimeMillis()));
-      order.setModifiedAt(new Date(System.currentTimeMillis()));
+//      order.setModifiedAt(new Date(System.currentTimeMillis()));
       List<Item> itemList = Arrays.asList(
               new Item("3", "Hamburger", 3, 3, 33),
               new Item("4", "Sausage", 4, 5, 66),