Order Sets - Grid layout
This commit is contained in:
parent
bcee02a222
commit
30b92ba9d4
1 changed files with 87 additions and 85 deletions
|
|
@ -8,6 +8,7 @@ import {
|
||||||
Box,
|
Box,
|
||||||
RingProgress,
|
RingProgress,
|
||||||
Alert,
|
Alert,
|
||||||
|
Grid,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||||
import { TimeValue } from "@mantine/dates";
|
import { TimeValue } from "@mantine/dates";
|
||||||
|
|
@ -119,7 +120,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Flex gap="md" wrap="wrap">
|
<Grid gutter="md">
|
||||||
{orderSets
|
{orderSets
|
||||||
? orderSets.map(
|
? orderSets.map(
|
||||||
({
|
({
|
||||||
|
|
@ -133,95 +134,96 @@ export const OrderSets: React.FC<OrderSetProps> = ({
|
||||||
probability,
|
probability,
|
||||||
punishment_pool_name,
|
punishment_pool_name,
|
||||||
}) => (
|
}) => (
|
||||||
<Card
|
<Grid.Col span={{ base: 12, sm: 6 }}>
|
||||||
key={id}
|
<Card
|
||||||
shadow="sm"
|
key={id}
|
||||||
padding="lg"
|
shadow="sm"
|
||||||
radius="md"
|
padding="lg"
|
||||||
withBorder
|
radius="md"
|
||||||
bg="gray.2"
|
withBorder
|
||||||
w="400px"
|
bg="gray.2"
|
||||||
mb="0"
|
mb="0"
|
||||||
>
|
>
|
||||||
<Flex direction="column" gap="md" h="100%">
|
<Flex direction="column" gap="md" h="100%">
|
||||||
<Title order={4}>{name}</Title>
|
<Title order={4}>{name}</Title>
|
||||||
{scheduled ? (
|
{scheduled ? (
|
||||||
<>
|
<>
|
||||||
<Flex gap="xs">
|
<Flex gap="xs">
|
||||||
<Text>
|
<Text>
|
||||||
<b>Scheduled:</b>
|
<b>Scheduled:</b>
|
||||||
</Text>
|
</Text>
|
||||||
{time.split(",").map((time) => (
|
{time.split(",").map((time) => (
|
||||||
<div key={time}>
|
<div key={time}>
|
||||||
<TimeValue
|
<TimeValue
|
||||||
key={time}
|
key={time}
|
||||||
value={time}
|
value={time}
|
||||||
format="12h"
|
format="12h"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex gap="md" align="center">
|
<Flex gap="md" align="center">
|
||||||
{weekdays ? (
|
{weekdays ? (
|
||||||
<Badge color="blue">Weekdays</Badge>
|
<Badge color="blue">Weekdays</Badge>
|
||||||
) : null}
|
) : null}
|
||||||
{weekends ? (
|
{weekends ? (
|
||||||
<Badge color="blue">Weekends</Badge>
|
<Badge color="blue">Weekends</Badge>
|
||||||
) : null}
|
) : null}
|
||||||
<RingProgress
|
<RingProgress
|
||||||
size={30}
|
size={30}
|
||||||
thickness={5}
|
thickness={5}
|
||||||
label={
|
label={
|
||||||
<Text size="xs" ml="lg">
|
<Text size="xs" ml="lg">
|
||||||
{probability * 100}%
|
{probability * 100}%
|
||||||
</Text>
|
</Text>
|
||||||
}
|
}
|
||||||
sections={[
|
sections={[
|
||||||
{ color: "cyan", value: probability * 100 },
|
{ color: "cyan", value: probability * 100 },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
</>
|
</>
|
||||||
) : null}
|
|
||||||
{punishment_pool_name ? (
|
|
||||||
<Text flex={1}>
|
|
||||||
<b>Punishments:</b> {punishment_pool_name}
|
|
||||||
</Text>
|
|
||||||
) : null}
|
|
||||||
<Flex justify="end" align="flex-end" gap="md">
|
|
||||||
{orders.length > 0 ? (
|
|
||||||
<DonutChart
|
|
||||||
flex={1}
|
|
||||||
size={130}
|
|
||||||
thickness={30}
|
|
||||||
data={orders.map(({ name, weight }, idx) => ({
|
|
||||||
name,
|
|
||||||
value: weight,
|
|
||||||
color:
|
|
||||||
COLORS_ROTATION[idx % COLORS_ROTATION.length],
|
|
||||||
}))}
|
|
||||||
tooltipDataSource="segment"
|
|
||||||
/>
|
|
||||||
) : null}
|
) : null}
|
||||||
<ConfirmDialogButton
|
{punishment_pool_name ? (
|
||||||
buttonColor="red.8"
|
<Text flex={1}>
|
||||||
buttonText="Delete"
|
<b>Punishments:</b> {punishment_pool_name}
|
||||||
text={`Are you sure you want to delete ${name}?`}
|
</Text>
|
||||||
onConfirm={() => handleDelete(id)}
|
) : null}
|
||||||
>
|
<Flex justify="end" align="flex-end" gap="md">
|
||||||
<IconTrash />
|
{orders.length > 0 ? (
|
||||||
</ConfirmDialogButton>
|
<DonutChart
|
||||||
<NavigateButton to={`/orders/${username}/${id}`}>
|
flex={1}
|
||||||
<IconPencil style={{ marginRight: "0.5rem" }} />
|
size={130}
|
||||||
Edit
|
thickness={30}
|
||||||
</NavigateButton>
|
data={orders.map(({ name, weight }, idx) => ({
|
||||||
|
name,
|
||||||
|
value: weight,
|
||||||
|
color:
|
||||||
|
COLORS_ROTATION[idx % COLORS_ROTATION.length],
|
||||||
|
}))}
|
||||||
|
tooltipDataSource="segment"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<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>
|
</Flex>
|
||||||
</Flex>
|
</Card>
|
||||||
</Card>
|
</Grid.Col>
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
: null}
|
: null}
|
||||||
</Flex>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
<Box my="lg">
|
<Box my="lg">
|
||||||
<NavigateButton to={`/orders/${username}/new`}>
|
<NavigateButton to={`/orders/${username}/new`}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue