Order Sets - Nicer UI

flask/api.py

@@ -31,6 +31,13 @@ def sub_order_sets(username):
     {
       'id': op.id,
       'name': op.name,
+      'scheduled': op.scheduled,
+      'time': op.time,
+      'weekends': op.weekends,
+      'weekdays': op.weekdays,
+      'orders': [{
+        'id': order.id,
+      } for order in op.orders]
     }
     for op
     in orders_pool_list(sub.id)

flask/vite/src/SubOrderSets.tsx

@@ -1,6 +1,16 @@
-import { Container, Title } from "@mantine/core";
+import {
+  Container,
+  Title,
+  Card,
+  Text,
+  Button,
+  Flex,
+  Badge,
+} from "@mantine/core";
+import { TimeValue } from "@mantine/dates";
+import { IconPencil } from "@tabler/icons-react";
 import React from "react";
-import { Link, Params, useLoaderData, useParams } from "react-router";
+import { Params, useLoaderData, useParams, useNavigate } from "react-router";
 
 export const subOrderSetsLoader = async ({
   params: { username },
@@ -8,28 +18,78 @@ export const subOrderSetsLoader = async ({
   params: Params<string>;
 }) => fetch(`/api/subs/${username}/sets`).then((response) => response.json());
 
+const NavigateButton: React.FC<{
+  children: React.ReactNode;
+  to: string;
+}> = ({ children, to }) => {
+  const navigate = useNavigate();
+
+  const handleClick = React.useCallback(() => {
+    navigate(to);
+  }, [to]);
+
+  return (
+    <Button onClick={handleClick} px="md" w="auto">
+      {children}
+    </Button>
+  );
+};
+
 export const SubOrderSets: React.FC = () => {
   const { username: sub_username } = useParams();
-  const orders = useLoaderData<
-    {
-      id: number;
-      name: string;
-      orders: Pick<OrderSet, "id" | "name">[];
-    }[]
+  const orderSets = useLoaderData<
+    (Pick<
+      OrderSet,
+      "id" | "name" | "scheduled" | "time" | "weekends" | "weekdays" | "orders"
+    > & {
+      orders: Pick<OrderSetOrder, "id" | "name">[];
+    })[]
   >();
 
   return (
     <Container>
       <Title order={1} mb="lg">
-        Orders for {sub_username}
+        Order Sets for {sub_username}
       </Title>
-      {orders
-        ? orders.map(({ id, name }) => (
-            <Link key={id} to={`/dashboard/subs/${sub_username}/${id}`}>
-              {name}
-            </Link>
-          ))
+      <Flex gap="md" wrap="wrap">
+        {orderSets
+          ? orderSets.map(
+              ({ id, name, scheduled, orders, time, weekdays, weekends }) => (
+                <Card
+                  key={id}
+                  shadow="sm"
+                  padding="lg"
+                  radius="md"
+                  withBorder
+                  bg="gray.2"
+                  w="400px"
+                >
+                  <Flex direction="column" gap="md">
+                    <Title order={4}>{name}</Title>
+                    {scheduled ? (
+                      <Flex gap="md" align="center">
+                        <Text>
+                          Scheduled: <TimeValue value={time} format="12h" />
+                        </Text>
+                        {weekdays ? <Badge color="blue">Weekdays</Badge> : null}
+                        {weekends ? <Badge color="blue">Weekends</Badge> : null}
+                      </Flex>
+                    ) : null}
+                    <Text mb="md">Orders: {orders.length}</Text>
+                  </Flex>
+                  <Flex justify="end">
+                    <NavigateButton
+                      to={`/dashboard/subs/${sub_username}/${id}`}
+                    >
+                      <IconPencil style={{ marginRight: "0.5rem" }} />
+                      Edit
+                    </NavigateButton>
+                  </Flex>
+                </Card>
+              ),
+            )
           : null}
+      </Flex>
     </Container>
   );
 };