Quality of life improvements for the order list

Oliveriver · Sep 17, 2024 · f097571 · f097571
1 parent 071f94c
commit f097571
Showing 1 changed file with 35 additions and 14 deletions.
diff --git a/client/src/components/user-interface/OrderList.tsx b/client/src/components/user-interface/OrderList.tsx
@@ -1,9 +1,37 @@
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useState } from 'react';
 import OrderEntryContext from '../context/OrderEntryContext';
 import OrderListItem from './OrderListItem';
-import { getOrderKey } from '../../types/order';
+import Order, { getOrderKey } from '../../types/order';
 import colours from '../../utils/colours';
 import { filterUnique } from '../../utils/listUtils';
+import ExpandButton from './common/ExpandButton';
+
+type OrderListTimelineProps = {
+  timeline: number;
+  orders: Order[];
+};
+
+const OrderListTimeline = ({ timeline, orders }: OrderListTimelineProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div
+      className="rounded p-4 flex flex-col gap-2 items-end pointer-events-auto"
+      style={{ backgroundColor: colours.uiOverlay }}
+    >
+      <div className="self-end flex flex-row items-center">
+        <p className="opacity-70 text-sm">{`Timeline ${timeline}`}</p>
+        <ExpandButton
+          colour="black"
+          isExpanded={isExpanded}
+          toggleExpand={() => setIsExpanded(!isExpanded)}
+        />
+      </div>
+      {isExpanded &&
+        orders.map((order) => <OrderListItem key={getOrderKey(order)} order={order} />)}
+    </div>
+  );
+};
 
 const OrderList = () => {
   const { orders } = useContext(OrderEntryContext);
@@ -18,25 +46,18 @@ const OrderList = () => {
   return (
     <div
       ref={scrollRef}
-      className="absolute right-10 bottom-32 flex flex-col gap-4 items-end"
+      className="absolute right-10 bottom-32 flex flex-col gap-4 items-end pointer-events-none"
       style={{
         maxHeight,
         overflowY: 'auto',
       }}
     >
       {timelines.map((timeline) => (
-        <div
+        <OrderListTimeline
           key={timeline}
-          className="rounded p-4 flex flex-col gap-2 items-end"
-          style={{ backgroundColor: colours.uiOverlay }}
-        >
-          <p className="self-start opacity-70 text-sm">{`Timeline ${timeline}`}</p>
-          {orders
-            .filter((order) => order.location.timeline === timeline)
-            .map((order) => (
-              <OrderListItem key={getOrderKey(order)} order={order} />
-            ))}
-        </div>
+          timeline={timeline}
+          orders={orders.filter((order) => order.location.timeline === timeline)}
+        />
       ))}
     </div>
   );