From 14009ad6d3f3641c98f1a1197bac60acef03e55b Mon Sep 17 00:00:00 2001 From: Johnny Gear Date: Thu, 29 Jan 2026 16:23:20 -0600 Subject: [PATCH] UI improvements --- flask/api.py | 2 +- flask/vite/package.json | 1 + flask/vite/src/SubOrderSet.tsx | 227 +++++++++++++++++++------------- flask/vite/src/SubOrderSets.tsx | 29 ++-- flask/vite/src/main.tsx | 7 +- 5 files changed, 152 insertions(+), 114 deletions(-) diff --git a/flask/api.py b/flask/api.py index fd32bc1..73f2c7f 100644 --- a/flask/api.py +++ b/flask/api.py @@ -90,7 +90,7 @@ def sub_order_set(username, set_id): update_add_ons(order_to_update, updated_order['add_ons']) else: - Order.create( + order_to_update = Order.create( pool=op, name=updated_order['name'], weight=updated_order['weight'], diff --git a/flask/vite/package.json b/flask/vite/package.json index e682650..39f5510 100644 --- a/flask/vite/package.json +++ b/flask/vite/package.json @@ -16,6 +16,7 @@ "dependencies": { "@mantine/core": "^8.3.12", "@mantine/form": "^8.3.13", + "@mantine/notifications": "^8.3.13", "@tabler/icons-react": "^3.36.1", "postcss": "^8.5.6", "react": "^19.2.3", diff --git a/flask/vite/src/SubOrderSet.tsx b/flask/vite/src/SubOrderSet.tsx index 6fa1a86..04aa6a9 100644 --- a/flask/vite/src/SubOrderSet.tsx +++ b/flask/vite/src/SubOrderSet.tsx @@ -5,14 +5,23 @@ import { Slider, TextInput, Button, - Divider, Flex, ActionIcon, + Title, + Box, + Affix, } from "@mantine/core"; +import { notifications } from "@mantine/notifications"; import { randomId } from "@mantine/hooks"; import { useForm } from "@mantine/form"; import React from "react"; -import { Params, useLoaderData, useParams, useNavigate } from "react-router"; +import { + Params, + useLoaderData, + useParams, + useNavigate, + Link, +} from "react-router"; import { IconMinus, IconPlus } from "@tabler/icons-react"; export const subOrderSetLoader = async ({ @@ -21,7 +30,7 @@ export const subOrderSetLoader = async ({ params: Params; }) => fetch(`/api/subs/${username}/sets/${set_id}`).then((response) => - response.json() + response.json(), ); type FormOrderSetOrderAddOn = Omit & { @@ -48,11 +57,14 @@ export const SubOrderSet: React.FC = () => { mode: "uncontrolled", initialValues: { id, name, orders }, validate: { - name: (value) => (value.length < 1 ? "Please enter a name" : null), + name: (value: string) => + value.length < 1 ? "Please enter a name" : null, orders: { - name: (value) => (value.length < 1 ? "Please enter a name" : null), + name: (value: string) => + value.length < 1 ? "Please enter a name" : null, add_ons: { - name: (value) => (value.length < 1 ? "Please enter a name" : null), + name: (value: string) => + value.length < 1 ? "Please enter a name" : null, }, }, }, @@ -68,13 +80,23 @@ export const SubOrderSet: React.FC = () => { body: JSON.stringify(values), }).then((response) => { if (response.ok) { + notifications.show({ + title: "Success", + message: `Updates to ${values.name} were successful`, + color: "green", + }); navigate(`/dashboard/subs/${username}`); } else { + notifications.show({ + title: "Error", + message: "There was a problem with your request", + color: "red", + }); console.error(response.statusText); } }); }), - [form] + [form], ); const handleNewOrder = React.useCallback(() => { @@ -97,7 +119,7 @@ export const SubOrderSet: React.FC = () => { form.setFieldValue(`orders.${idx}._delete`, true); } }, - [form] + [form], ); const handleNewAddOn = React.useCallback( @@ -108,7 +130,7 @@ export const SubOrderSet: React.FC = () => { probability: 0.5, }); }, - [form] + [form], ); const handleRemoveAddOn = React.useCallback( @@ -123,83 +145,94 @@ export const SubOrderSet: React.FC = () => { form.setFieldValue(`orders.${idx}.add_ons.${add_on_idx}._delete`, true); } }, - [form] + [form], ); return ( -
- -

{name}

- <> - - {form.getValues().orders.map(({ id: order_id, _delete }, idx) => - _delete ? null : ( - - - - handleRemoveOrder(idx)} - > - - - - + + {name} + Return to {username} + + + + + Orders + + {form.getValues().orders.map(({ id: order_id, _delete }, idx) => + _delete ? null : ( + + + + handleRemoveOrder(idx)} > - - - - - -

Add-On

+ + + + + + + + + + + + Add-Ons + {form .getValues() - .orders[idx].add_ons.map( - ({ id: add_on_id, _delete: _add_on_delete }, add_on_idx) => - _add_on_delete ? null : ( - - - - handleRemoveAddOn(idx, add_on_idx)} - > - - - - - - - - ) + .orders[ + idx + ].add_ons.map(({ id: add_on_id, _delete: _add_on_delete }, add_on_idx) => + _add_on_delete ? null : ( + + + + + + handleRemoveAddOn(idx, add_on_idx)} + > + + + + ), )} - ) - )} - - - - - - - -
+ + ), + )} + + + + + + + + + + + + + ); }; diff --git a/flask/vite/src/SubOrderSets.tsx b/flask/vite/src/SubOrderSets.tsx index 09720bb..8f18e55 100644 --- a/flask/vite/src/SubOrderSets.tsx +++ b/flask/vite/src/SubOrderSets.tsx @@ -1,11 +1,4 @@ -import { - Container, - Accordion, - TextInput, - Divider, - Input, - Slider, -} from "@mantine/core"; +import { Container, Title } from "@mantine/core"; import React from "react"; import { Link, Params, useLoaderData, useParams } from "react-router"; @@ -27,16 +20,16 @@ export const SubOrderSets: React.FC = () => { return ( -

Orders for {sub_username}

- - {orders - ? orders.map(({ id, name }) => ( - - {name} - - )) - : null} - + + Orders for {sub_username} + + {orders + ? orders.map(({ id, name }) => ( + + {name} + + )) + : null} ); }; diff --git a/flask/vite/src/main.tsx b/flask/vite/src/main.tsx index 3ddce94..475830d 100644 --- a/flask/vite/src/main.tsx +++ b/flask/vite/src/main.tsx @@ -9,8 +9,10 @@ import { Paper, Slider, } from "@mantine/core"; +import { Notifications } from "@mantine/notifications"; import "@mantine/core/styles.css"; +import "@mantine/notifications/styles.css"; import { SubsList, subsListLoader } from "./SubsList"; import { SubOrderSets, subOrderSetsLoader } from "./SubOrderSets"; @@ -37,7 +39,7 @@ const theme = createTheme({ root: { "--slider-track-bg": theme.colors.gray[4], }, - } as any), + }) as any, }), }, }); @@ -63,7 +65,8 @@ const router = createBrowserRouter([ ReactDOM.createRoot(document.getElementById("root")!).render( + - + , );