Implement flight deletion
This commit is contained in:
april
@@ -2,21 +2,31 @@ import { VerticalLogItem } from "@/ui/display/log-item";
|
||||
import ErrorDisplay from "@/ui/error-display";
|
||||
import { useApi } from "@/util/api";
|
||||
import {
|
||||
ActionIcon,
|
||||
Center,
|
||||
Container,
|
||||
Grid,
|
||||
Group,
|
||||
Loader,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Title,
|
||||
Tooltip,
|
||||
Text,
|
||||
Modal,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import { useParams } from "@remix-run/react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useNavigate, useParams } from "@remix-run/react";
|
||||
import { IconPencil, IconTrash } from "@tabler/icons-react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function Flight() {
|
||||
const params = useParams();
|
||||
|
||||
const client = useApi();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const flight = useQuery({
|
||||
queryKey: [params.id],
|
||||
@@ -24,241 +34,302 @@ export default function Flight() {
|
||||
await client.get(`/flights/${params.id}`).then((res) => res.data),
|
||||
});
|
||||
|
||||
const [deleteOpened, { open: openDelete, close: closeDelete }] =
|
||||
useDisclosure(false);
|
||||
|
||||
const deleteFlight = useMutation({
|
||||
mutationFn: async () =>
|
||||
await client.delete(`/flights/${params.id}`).then((res) => res.data),
|
||||
onSuccess: () => {
|
||||
navigate("/logbook/flights");
|
||||
},
|
||||
});
|
||||
|
||||
const log = flight.data;
|
||||
|
||||
return (
|
||||
// <Container>
|
||||
<Stack h="calc(100vh-95px)">
|
||||
{flight.isError ? (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<ErrorDisplay error="Error Fetching Flight" />
|
||||
</Center>
|
||||
) : flight.isPending ? (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<Loader />
|
||||
</Center>
|
||||
) : flight.data ? (
|
||||
<>
|
||||
<Title order={3} py="lg" style={{ textAlign: "center" }}>
|
||||
Flight Log
|
||||
</Title>
|
||||
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
|
||||
<Container h="100%">
|
||||
<Grid justify="center">
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem label="Date" content={log.date} date />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem label="Aircraft" content={log.aircraft} />
|
||||
</Grid.Col>
|
||||
{log.waypoint_from || log.waypoint_to ? (
|
||||
<>
|
||||
<>
|
||||
<Modal
|
||||
opened={deleteOpened}
|
||||
onClose={closeDelete}
|
||||
title="Delete Flight?"
|
||||
centered
|
||||
>
|
||||
<Stack>
|
||||
<Text>
|
||||
Are you sure you want to delete this flight? This action cannot be
|
||||
undone.
|
||||
</Text>
|
||||
{deleteFlight.isError ? (
|
||||
<Text c="red" fw={700}>
|
||||
{deleteFlight.error.message}
|
||||
</Text>
|
||||
) : null}
|
||||
<Group justify="flex-end">
|
||||
<Button color="red" onClick={() => deleteFlight.mutate()}>
|
||||
Delete
|
||||
</Button>
|
||||
<Button color="gray" onClick={closeDelete}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<Container>
|
||||
<Stack h="calc(100vh-95px)">
|
||||
{flight.isError ? (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<ErrorDisplay error="Error Fetching Flight" />
|
||||
</Center>
|
||||
) : flight.isPending ? (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<Loader />
|
||||
</Center>
|
||||
) : flight.data ? (
|
||||
<>
|
||||
<Group justify="space-between" px="xl">
|
||||
<Title order={2} py="lg" style={{ textAlign: "center" }}>
|
||||
Flight Log
|
||||
</Title>
|
||||
<Group>
|
||||
<Tooltip label="Edit Flight">
|
||||
<ActionIcon variant="subtle" size="lg">
|
||||
<IconPencil />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Delete Flight">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
color="red"
|
||||
onClick={openDelete}
|
||||
>
|
||||
<IconTrash />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Group>
|
||||
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
|
||||
<Container h="100%">
|
||||
<Grid justify="center">
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Waypoint From"
|
||||
content={log.waypoint_from}
|
||||
/>
|
||||
<VerticalLogItem label="Date" content={log.date} date />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Waypoint To"
|
||||
content={log.waypoint_to}
|
||||
label="Aircraft"
|
||||
content={log.aircraft}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.route ? (
|
||||
<>
|
||||
<Grid.Col span={12}>
|
||||
<VerticalLogItem label="Route" content={log.route} />
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.hobbs_start || log.hobbs_end ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Hobbs Start"
|
||||
content={log.hobbs_start}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Hobbs End"
|
||||
content={log.hobbs_end}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.tach_start || log.tach_end ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Tach Start"
|
||||
content={log.tach_start}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Tach End"
|
||||
content={log.tach_end}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.time_start || log.time_off ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Start"
|
||||
content={log.time_start}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Off"
|
||||
content={log.time_off}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.time_down || log.time_stop ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Down"
|
||||
content={log.time_down}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Stop"
|
||||
content={log.time_stop}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Total Time"
|
||||
content={log.time_total}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Time Solo"
|
||||
content={log.time_solo}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Time Night"
|
||||
content={log.time_night}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time PIC"
|
||||
content={log.time_pic}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time SIC"
|
||||
content={log.time_sic}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
{log.time_xc && log.dist_xc ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Cross-Country"
|
||||
content={log.time_xc}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Cross-Country Distance"
|
||||
content={log.dist_xc}
|
||||
decimal={2}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Takeoffs (Day)"
|
||||
content={log.takeoffs_day}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Landings (Day)"
|
||||
content={log.landings_day}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Takeoffs (Night)"
|
||||
content={log.takeoffs_night}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Landings (Night)"
|
||||
content={log.landings_night}
|
||||
/>
|
||||
</Grid.Col>
|
||||
{log.time_instrument ||
|
||||
log.time_sim_instrument ||
|
||||
log.holds_instrument ? (
|
||||
<>
|
||||
{log.waypoint_from || log.waypoint_to ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Waypoint From"
|
||||
content={log.waypoint_from}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Waypoint To"
|
||||
content={log.waypoint_to}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.route ? (
|
||||
<>
|
||||
<Grid.Col span={12}>
|
||||
<VerticalLogItem label="Route" content={log.route} />
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.hobbs_start || log.hobbs_end ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Hobbs Start"
|
||||
content={log.hobbs_start}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Hobbs End"
|
||||
content={log.hobbs_end}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.tach_start || log.tach_end ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Tach Start"
|
||||
content={log.tach_start}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Tach End"
|
||||
content={log.tach_end}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.time_start || log.time_off ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Start"
|
||||
content={log.time_start}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Off"
|
||||
content={log.time_off}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
{log.time_down || log.time_stop ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Down"
|
||||
content={log.time_down}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Stop"
|
||||
content={log.time_stop}
|
||||
time
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Instrument Time"
|
||||
content={log.time_instrument}
|
||||
label="Total Time"
|
||||
content={log.time_total}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Simulated Instrument Time"
|
||||
content={log.time_sim_instrument}
|
||||
label="Time Solo"
|
||||
content={log.time_solo}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Instrument Holds"
|
||||
content={log.holds_instrument}
|
||||
label="Time Night"
|
||||
content={log.time_night}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Container>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<ErrorDisplay error="Unknown Error" />
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
// </Container>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time PIC"
|
||||
content={log.time_pic}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time SIC"
|
||||
content={log.time_sic}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
{log.time_xc && log.dist_xc ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Time Cross-Country"
|
||||
content={log.time_xc}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Cross-Country Distance"
|
||||
content={log.dist_xc}
|
||||
decimal={2}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Takeoffs (Day)"
|
||||
content={log.takeoffs_day}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Landings (Day)"
|
||||
content={log.landings_day}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Takeoffs (Night)"
|
||||
content={log.takeoffs_night}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Landings (Night)"
|
||||
content={log.landings_night}
|
||||
/>
|
||||
</Grid.Col>
|
||||
{log.time_instrument ||
|
||||
log.time_sim_instrument ||
|
||||
log.holds_instrument ? (
|
||||
<>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Instrument Time"
|
||||
content={log.time_instrument}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Simulated Instrument Time"
|
||||
content={log.time_sim_instrument}
|
||||
hours
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<VerticalLogItem
|
||||
label="Instrument Holds"
|
||||
content={log.holds_instrument}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Container>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<ErrorDisplay error="Unknown Error" />
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ import {
|
||||
Fieldset,
|
||||
Group,
|
||||
NumberInput,
|
||||
ScrollAreaAutosize,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Title,
|
||||
@@ -23,7 +24,6 @@ import ListInput from "@/ui/form/list-input";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useApi } from "@/util/api";
|
||||
import { useNavigate } from "@remix-run/react";
|
||||
import { useAuth } from "@/util/auth";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
export default function NewFlight() {
|
||||
@@ -82,24 +82,18 @@ export default function NewFlight() {
|
||||
|
||||
const client = useApi();
|
||||
|
||||
const { clearUser } = useAuth();
|
||||
|
||||
const createFlight = useMutation({
|
||||
mutationFn: async (values: FlightFormSchema) => {
|
||||
const newFlight = flightCreateHelper(values);
|
||||
const res = await client.post("/flights", newFlight);
|
||||
return res.data;
|
||||
if (newFlight) {
|
||||
const res = await client.post("/flights", newFlight);
|
||||
return res.data;
|
||||
}
|
||||
throw new Error("Flight creation failed");
|
||||
},
|
||||
retry: (failureCount, error: AxiosError) => {
|
||||
return !error || error.response?.status !== 401;
|
||||
},
|
||||
onError: (error: AxiosError) => {
|
||||
console.log(error);
|
||||
if (error.response?.status === 401) {
|
||||
clearUser();
|
||||
navigate("/login");
|
||||
}
|
||||
},
|
||||
onSuccess: async (data: { id: string }) => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
|
||||
navigate(`/logbook/flights/${data.id}`);
|
||||
@@ -112,7 +106,7 @@ export default function NewFlight() {
|
||||
<Title order={2}>New Flight</Title>
|
||||
|
||||
<form onSubmit={form.onSubmit((values) => createFlight.mutate(values))}>
|
||||
<ScrollAreaAutosize mah="calc(100vh - 95px - 110px)">
|
||||
<ScrollArea.Autosize mah="calc(100vh - 95px - 110px)">
|
||||
<Container>
|
||||
{/* Date and Aircraft */}
|
||||
|
||||
@@ -347,9 +341,14 @@ export default function NewFlight() {
|
||||
/>
|
||||
</Fieldset>
|
||||
</Container>
|
||||
</ScrollAreaAutosize>
|
||||
</ScrollArea.Autosize>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
{createFlight.isError ? (
|
||||
<Text c="red" fw={700}>
|
||||
{createFlight.error.message}
|
||||
</Text>
|
||||
) : null}
|
||||
<Button type="submit" leftSection={<IconPencil />}>
|
||||
Create
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user