Skip to content

Commit

Permalink
feat(event): delete airspace
Browse files Browse the repository at this point in the history
  • Loading branch information
xfoxfu committed Jul 13, 2024
1 parent bd65959 commit 4377f16
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 19 deletions.
4 changes: 4 additions & 0 deletions Net.Vatprc.Uniapi.UI.Event/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,7 @@ export const formatPath = <Path extends keyof paths>(url: Path, path: paths[Path
.split("/")
.filter((s) => !!s);
};

export const invalidatePath = <Path extends keyof paths>(url: Path, path: paths[Path]["get"]["parameters"]["path"]) => {
return queryClient.invalidateQueries({ queryKey: formatPath(url, path) });
};
46 changes: 46 additions & 0 deletions Net.Vatprc.Uniapi.UI.Event/src/components/delete-airspace.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { invalidatePath, useApi, useApiDelete } from "@/client";
import { useUser } from "@/services/auth";
import { ActionIcon, Button, Group, Modal, Stack, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { useRouter } from "@tanstack/react-router";
import { IoTrash } from "react-icons/io5";

export const DeleteAirspace = ({ eventId, airspaceId }: { eventId: string; airspaceId: string }) => {
const user = useUser();
const { data: airspace, isLoading } = useApi(`/api/events/{eid}/airspaces/{aid}`, {
path: { eid: eventId, aid: airspaceId },
enabled: !!eventId,
});
const { navigate } = useRouter();
const { mutate, isPending } = useApiDelete(
"/api/events/{eid}/airspaces/{aid}",
{ path: { eid: eventId, aid: airspaceId } },
async () => {
await invalidatePath("/api/events/{eid}/airspaces", { eid: eventId });
close();
await navigate({ to: "/events/" + eventId });
},
);
const [opened, { toggle, close }] = useDisclosure(false);

if (!user?.roles.includes("ec")) return null;

return (
<>
<ActionIcon variant="subtle" color="red" aria-label="Settings" onClick={toggle}>
<IoTrash />
</ActionIcon>
<Modal opened={opened} onClose={close} title="Delete Event">
<Stack>
<Text>Do you want to delete airspace {airspace?.name}?</Text>
<Group>
<Button onClick={toggle}>Cancel</Button>
<Button color="red" onClick={() => mutate({})} loading={isPending} disabled={isLoading}>
Yes
</Button>
</Group>
</Stack>
</Modal>
</>
);
};
7 changes: 4 additions & 3 deletions Net.Vatprc.Uniapi.UI.Event/src/components/delete-event.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ export const DeleteEvent = ({ eventId }: { eventId: string }) => {
enabled: !!eventId,
});
const { navigate } = useRouter();
const { mutate, isPending } = useApiDelete("/api/events/{eid}", { path: { eid: eventId } }, () =>
navigate({ to: "/" }),
);
const { mutate, isPending } = useApiDelete("/api/events/{eid}", { path: { eid: eventId } }, async () => {
close();
await navigate({ to: "/" });
});
const [opened, { toggle, close }] = useDisclosure(false);

if (!user?.roles.includes("ec")) return null;
Expand Down
2 changes: 1 addition & 1 deletion Net.Vatprc.Uniapi.UI.Event/src/routes/__root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Logout = () => {

export const Route = createRootRoute({
component: () => (
<Container>
<Container mb="lg">
<Stack mt={16}>
<Group justify="space-between">
<Group>
Expand Down
57 changes: 42 additions & 15 deletions Net.Vatprc.Uniapi.UI.Event/src/routes/events/$event_id.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,23 @@ import { formatPath, useApi, useApiDelete, useApiPut } from "@/client";
import { CreateAirspace } from "@/components/create-airspace";
import { CreateEvent } from "@/components/create-event";
import { CreateSlot } from "@/components/create-slot";
import { DeleteAirspace } from "@/components/delete-airspace";
import { DeleteEvent } from "@/components/delete-event";
import { useUser } from "@/services/auth";
import { ActionIcon, Button, Card, Group, Image, Stack, Table, Text, Title, Tooltip } from "@mantine/core";
import {
ActionIcon,
Alert,
Button,
Card,
Group,
Image,
LoadingOverlay,
Stack,
Table,
Text,
Title,
Tooltip,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { format, formatRelative } from "date-fns";
Expand Down Expand Up @@ -61,9 +75,11 @@ const EVENT_BOOKING_LIMIT = 1;

const EventComponent = () => {
const { event_id } = Route.useParams();
const { data: event } = useApi("/api/events/{eid}", { path: { eid: event_id } });
const { data: slots } = useApi("/api/events/{eid}/slots", { path: { eid: event_id } });
const { data: airspaces } = useApi("/api/events/{eid}/airspaces", { path: { eid: event_id } });
const { data: event, isLoading } = useApi("/api/events/{eid}", { path: { eid: event_id } });
const { data: slots, isLoading: isLoadingSlots } = useApi("/api/events/{eid}/slots", { path: { eid: event_id } });
const { data: airspaces, isLoading: isLoadingAirspaces } = useApi("/api/events/{eid}/airspaces", {
path: { eid: event_id },
});
const user = useUser();

const rows = slots?.map((element, id) => (
Expand Down Expand Up @@ -91,6 +107,10 @@ const EventComponent = () => {

return (
<Stack>
<LoadingOverlay
visible={isLoading || isLoadingAirspaces || isLoadingSlots}
overlayProps={{ radius: "sm", blur: 2 }}
/>
<Image src="https://cdn.sa.net/2024/07/06/OSoUsbluV69nhCw.png" alt={event?.title} radius="md" />
<Group gap="xs">
<Title order={1}>{event?.title}</Title>
Expand Down Expand Up @@ -135,24 +155,31 @@ const EventComponent = () => {
Slots
<CreateSlot ml={4} eventId={event_id} />
</Title>
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>Airspace Name</Table.Th>
<Table.Th>Enter at</Table.Th>
<Table.Th></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>{rows}</Table.Tbody>
</Table>
{slots?.length === 0 && <Alert title="No available slot now." />}
{(slots?.length ?? 0) > 0 && (
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>Airspace Name</Table.Th>
<Table.Th>Enter at</Table.Th>
<Table.Th></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>{rows}</Table.Tbody>
</Table>
)}
<Title order={2}>
Airspaces
<CreateAirspace ml={4} eventId={event_id} />
</Title>
{airspaces?.length === 0 && <Alert title="No available airspace now." />}
<Group>
{airspaces?.map((airspace) => (
<Card shadow="sm" padding="lg" radius="md" withBorder key={airspace.id}>
<Text>{airspace.name}</Text>
<Group>
<Text>{airspace.name}</Text>
<DeleteAirspace eventId={event_id} airspaceId={airspace.id} />
</Group>
</Card>
))}
</Group>
Expand Down

0 comments on commit 4377f16

Please sign in to comment.