145 lines
4.3 KiB
TypeScript
145 lines
4.3 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Title,
|
|
Card,
|
|
Text,
|
|
Flex,
|
|
Badge,
|
|
Box,
|
|
RingProgress,
|
|
} from "@mantine/core";
|
|
import { TimeValue } from "@mantine/dates";
|
|
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
|
|
|
|
import { ConfirmDialogButton } from "./ConfirmDialogButton";
|
|
import { NavigateButton } from "./NavigateButton";
|
|
import { useFetcher } from "react-router";
|
|
|
|
export interface OrderSetProps {
|
|
orderSets: (Pick<
|
|
OrderSet,
|
|
| "id"
|
|
| "name"
|
|
| "scheduled"
|
|
| "time"
|
|
| "weekends"
|
|
| "weekdays"
|
|
| "orders"
|
|
| "probability"
|
|
> & {
|
|
orders: Pick<OrderSetOrder, "id" | "name">;
|
|
punishment_pool_name: string;
|
|
})[];
|
|
username: string;
|
|
linkBack?: React.ReactNode;
|
|
}
|
|
|
|
export const OrderSets: React.FC<OrderSetProps> = ({
|
|
orderSets,
|
|
username,
|
|
linkBack,
|
|
}) => {
|
|
const fetcher = useFetcher();
|
|
const handleDelete = React.useCallback(
|
|
(id: number) => {
|
|
fetcher.submit(null, {
|
|
action: `/orders/${username}/${id}`,
|
|
method: "DELETE",
|
|
});
|
|
},
|
|
[fetcher],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Box mb="lg">
|
|
<Title order={1}>Order Sets for {username}</Title>
|
|
{linkBack ? linkBack : null}
|
|
</Box>
|
|
<Flex gap="md" wrap="wrap">
|
|
{orderSets
|
|
? orderSets.map(
|
|
({
|
|
id,
|
|
name,
|
|
scheduled,
|
|
orders,
|
|
time,
|
|
weekdays,
|
|
weekends,
|
|
probability,
|
|
punishment_pool_name,
|
|
}) => (
|
|
<Card
|
|
key={id}
|
|
shadow="sm"
|
|
padding="lg"
|
|
radius="md"
|
|
withBorder
|
|
bg="gray.2"
|
|
w="400px"
|
|
>
|
|
<Flex direction="column" gap="md" h="100%">
|
|
<Title order={4}>{name}</Title>
|
|
{scheduled ? (
|
|
<>
|
|
<Flex gap="xs">
|
|
<Text>Scheduled:</Text>
|
|
{time.split(",").map((time) => (
|
|
<div key={time}>
|
|
<TimeValue key={time} value={time} format="12h" />
|
|
</div>
|
|
))}
|
|
</Flex>
|
|
<Flex gap="md" align="center">
|
|
{weekdays ? (
|
|
<Badge color="blue">Weekdays</Badge>
|
|
) : null}
|
|
{weekends ? (
|
|
<Badge color="blue">Weekends</Badge>
|
|
) : null}
|
|
<RingProgress
|
|
size={80}
|
|
label={<Text size="xs">{probability * 100}%</Text>}
|
|
sections={[
|
|
{ color: "cyan", value: probability * 100 },
|
|
]}
|
|
/>
|
|
</Flex>
|
|
</>
|
|
) : null}
|
|
<Text mb="md" flex={1}>
|
|
Orders: {orders.length}
|
|
<br />
|
|
{punishment_pool_name
|
|
? `Punishments: ${punishment_pool_name}`
|
|
: null}
|
|
</Text>
|
|
<Flex gap="md" justify="end">
|
|
<ConfirmDialogButton
|
|
buttonColor="red.8"
|
|
buttonText="Delete"
|
|
text={`Are you sure you want to delete ${name}?`}
|
|
onConfirm={() => handleDelete(id)}
|
|
>
|
|
<IconTrash />
|
|
</ConfirmDialogButton>
|
|
<NavigateButton to={`/orders/${username}/${id}`}>
|
|
<IconPencil style={{ marginRight: "0.5rem" }} />
|
|
Edit
|
|
</NavigateButton>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
),
|
|
)
|
|
: null}
|
|
</Flex>
|
|
<NavigateButton to={`/orders/${username}/new`}>
|
|
<IconPlus style={{ marginRight: "0.5rem" }} />
|
|
New
|
|
</NavigateButton>
|
|
<Box mb="lg"></Box>
|
|
</>
|
|
);
|
|
};
|