Merge pull request #122 from HyperloopUPV-H8/ethernet-view/collapse-orders

[ethernet-view] Collapsable orders

Author: andresdlt03

ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.module.scss

@@ -6,9 +6,12 @@
 }
 
 .name {
+    display: flex;
+    gap: .6rem;
     font-family: Inter;
     font-weight: 600;
     color: hsl(29, 88%, 70%);
+    cursor: pointer;
 }
 
 .orders,

ethernet-view/src/components/OrdersContainer/Orders/BoardOrders/BoardOrders.tsx

@@ -1,6 +1,8 @@
 import { BoardOrders } from "common";
 import styles from "./BoardOrders.module.scss";
 import { OrderForm } from "./OrderForm/OrderForm";
+import { useState } from "react";
+import { Caret } from "components/Caret/Caret";
 
 type Props = {
     boardOrders: BoardOrders;
@@ -11,25 +13,32 @@ export const BoardOrdersView = ({
     boardOrders,
     alwaysShowStateOrders,
 }: Props) => {
+
+    const [isOpen, setIsOpen] = useState(true);
+
     return (
         <div className={styles.boardOrders}>
-            <div className={styles.name}>{boardOrders.name}</div>
-            {boardOrders.orders.length > 0 && (
-                <div className={styles.orders}>
-                    <span className={styles.title}>Permanent orders</span>
-                    {boardOrders.orders.map((desc) => {
-                        return (
-                            <OrderForm
-                                key={desc.id}
-                                description={desc}
-                            />
-                        );
-                    })}
-                </div>
-            )}
-            {boardOrders.stateOrders.length > 0 &&
-                (alwaysShowStateOrders ||
-                    boardOrders.stateOrders.some((item) => item.enabled)) && (
+            <div className={styles.name} onClick={() => setIsOpen((prev) => !prev)} >
+                <Caret isOpen={isOpen} />
+                {boardOrders.name}
+            </div>
+
+            <div className={styles.orders} style={{
+                display: isOpen ? "flex" : "none"
+            }}>
+                <span className={styles.title}>Permanent orders</span>
+                {boardOrders.orders.map((desc) => {
+                    return (
+                        <OrderForm
+                            key={desc.id}
+                            description={desc}
+                        />
+                    );
+                })}
+            </div>
+            
+            {(boardOrders.stateOrders.length > 0 &&
+                (alwaysShowStateOrders || boardOrders.stateOrders.some((item) => item.enabled))) && (
                     <div className={styles.stateOrders}>
                         <span className={styles.title}>State orders</span>
                         {boardOrders.stateOrders.map((desc) => {