Extract out MissionsTable to a seperate file
This commit is contained in:
Stedoss
@@ -0,0 +1,192 @@
|
||||
import { Loader, Alert, Table, ActionIcon, Popover, Button, Text, Group, Paper, Select, Stack } from "@mantine/core";
|
||||
import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { listMissions, type Mission } from "../../api/missions";
|
||||
import { toReadableDateTime } from "../../utils/dateUtils";
|
||||
import { MissionLaunchStatusBadge } from "../MissionLaunchStatusBadge";
|
||||
import { MissionStatusBadge } from "../MissionStatusBadge";
|
||||
import { DateTimePicker } from "@mantine/dates";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { createMissionLaunch, type MissionLaunchStatus, MissionLaunchStatuses } from "../../api/missionLaunches";
|
||||
|
||||
export function MissionsTable() {
|
||||
const missionsQuery = useQuery({
|
||||
queryKey: ['missions'],
|
||||
queryFn: listMissions,
|
||||
});
|
||||
|
||||
if (missionsQuery.isPending) {
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
if (missionsQuery.isError) {
|
||||
return (
|
||||
<Alert color="red" title="Could not load missions">
|
||||
Is the API running?
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Table highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th></Table.Th>
|
||||
<Table.Th>Name</Table.Th>
|
||||
<Table.Th>Description</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{missionsQuery.data.map((mission) => (
|
||||
<MissionsTableRow mission={mission} />
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
function MissionsTableRow({ mission }: { mission: Mission }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table.Tr key={mission.id}>
|
||||
<Table.Td>
|
||||
<ActionIcon onClick={() => setExpanded((expanded) => !expanded)}>
|
||||
{expanded ? <IconChevronDown /> : <IconChevronRight />}
|
||||
</ActionIcon>
|
||||
</Table.Td>
|
||||
<Table.Td>{mission.name}</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed">
|
||||
{mission.description}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<MissionStatusBadge status={mission.status} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
{expanded === true ? (
|
||||
<>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={12}>
|
||||
<h3>
|
||||
Launches
|
||||
</h3>
|
||||
<Table>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Scheduled For</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{mission.missionLaunches.map((missionLaunch) => (
|
||||
<Table.Tr>
|
||||
<Table.Td>{toReadableDateTime(missionLaunch.scheduledFor)}</Table.Td>
|
||||
<Table.Td>
|
||||
<MissionLaunchStatusBadge
|
||||
status={missionLaunch.status}
|
||||
/>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={12}>
|
||||
<Popover width={400} position="bottom" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button variant="default">Create new Launch</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<CreateMissionLaunchForm missionId={mission.id} />
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateMissionLaunchForm({ missionId }: { missionId: string }) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm({
|
||||
mode: 'uncontrolled',
|
||||
initialValues: { scheduledFor: '', status: '' },
|
||||
validate: {
|
||||
scheduledFor: (value) =>
|
||||
value.length === 0 ? 'Scheduled For is required' : null,
|
||||
status: (value) =>
|
||||
value.trim().length === 0 ? 'Status is required' : null,
|
||||
},
|
||||
});
|
||||
|
||||
const createMissionLaunchMutation = useMutation({
|
||||
mutationFn: createMissionLaunch,
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
title: 'Mission launch created',
|
||||
message: `Mission Launch created!`,
|
||||
color: 'green',
|
||||
});
|
||||
form.reset();
|
||||
return queryClient.invalidateQueries({ queryKey: ['missions'] });
|
||||
},
|
||||
onError: () =>
|
||||
notifications.show({
|
||||
title: 'Something went wrong',
|
||||
message: 'The mission launch could not be created.',
|
||||
color: 'red',
|
||||
}),
|
||||
});
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md">
|
||||
<form
|
||||
onSubmit={form.onSubmit((values) =>
|
||||
createMissionLaunchMutation.mutate({
|
||||
missionId,
|
||||
scheduledFor: new Date(values.scheduledFor).toISOString(),
|
||||
status: values.status as MissionLaunchStatus,
|
||||
}),
|
||||
)}
|
||||
>
|
||||
<Stack>
|
||||
<DateTimePicker
|
||||
label="Scheduled For"
|
||||
placeholder="Select scheduled for date/time"
|
||||
withAsterisk
|
||||
key={form.key('scheduledFor')}
|
||||
popoverProps={{ withinPortal: false }}
|
||||
{...form.getInputProps('scheduledFor')}
|
||||
/>
|
||||
<Select
|
||||
label="Status"
|
||||
placeholder="Select status"
|
||||
key={form.key('status')}
|
||||
data={MissionLaunchStatuses}
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
{...form.getInputProps('status')}
|
||||
></Select>
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
type="submit"
|
||||
loading={createMissionLaunchMutation.isPending}
|
||||
>
|
||||
Create launch
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +1,18 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Popover,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Textarea,
|
||||
TextInput,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { DateTimePicker } from '@mantine/dates';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
createMissionLaunch,
|
||||
MissionLaunchStatuses,
|
||||
type MissionLaunchStatus,
|
||||
} from '../api/missionLaunches';
|
||||
import { createMission, listMissions, type Mission } from '../api/missions';
|
||||
import { MissionLaunchStatusBadge } from '../components/MissionLaunchStatusBadge';
|
||||
import { MissionStatusBadge } from '../components/MissionStatusBadge';
|
||||
import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
|
||||
import { toReadableDateTime } from '../utils/dateUtils';
|
||||
import { createMission } from '../api/missions';
|
||||
import { MissionsTable } from '../components/MissionsTable/MissionsTable';
|
||||
|
||||
export const Route = createFileRoute('/missions')({
|
||||
component: MissionsPage,
|
||||
@@ -109,183 +92,3 @@ function CreateMissionForm() {
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateMissionLaunchForm({ missionId }: { missionId: string }) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm({
|
||||
mode: 'uncontrolled',
|
||||
initialValues: { scheduledFor: '', status: '' },
|
||||
validate: {
|
||||
scheduledFor: (value) =>
|
||||
value.length === 0 ? 'Scheduled For is required' : null,
|
||||
status: (value) =>
|
||||
value.trim().length === 0 ? 'Status is required' : null,
|
||||
},
|
||||
});
|
||||
|
||||
const createMissionLaunchMutation = useMutation({
|
||||
mutationFn: createMissionLaunch,
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
title: 'Mission launch created',
|
||||
message: `Mission Launch created!`,
|
||||
color: 'green',
|
||||
});
|
||||
form.reset();
|
||||
return queryClient.invalidateQueries({ queryKey: ['missions'] });
|
||||
},
|
||||
onError: () =>
|
||||
notifications.show({
|
||||
title: 'Something went wrong',
|
||||
message: 'The mission launch could not be created.',
|
||||
color: 'red',
|
||||
}),
|
||||
});
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md">
|
||||
<form
|
||||
onSubmit={form.onSubmit((values) =>
|
||||
createMissionLaunchMutation.mutate({
|
||||
missionId,
|
||||
scheduledFor: new Date(values.scheduledFor).toISOString(),
|
||||
status: values.status as MissionLaunchStatus,
|
||||
}),
|
||||
)}
|
||||
>
|
||||
<Stack>
|
||||
<DateTimePicker
|
||||
label="Scheduled For"
|
||||
placeholder="Select scheduled for date/time"
|
||||
withAsterisk
|
||||
key={form.key('scheduledFor')}
|
||||
popoverProps={{ withinPortal: false }}
|
||||
{...form.getInputProps('scheduledFor')}
|
||||
/>
|
||||
<Select
|
||||
label="Status"
|
||||
placeholder="Select status"
|
||||
key={form.key('status')}
|
||||
data={MissionLaunchStatuses}
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
{...form.getInputProps('status')}
|
||||
></Select>
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
type="submit"
|
||||
loading={createMissionLaunchMutation.isPending}
|
||||
>
|
||||
Create launch
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function MissionsTable() {
|
||||
const missionsQuery = useQuery({
|
||||
queryKey: ['missions'],
|
||||
queryFn: listMissions,
|
||||
});
|
||||
|
||||
if (missionsQuery.isPending) {
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
if (missionsQuery.isError) {
|
||||
return (
|
||||
<Alert color="red" title="Could not load missions">
|
||||
Is the API running?
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Table highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th></Table.Th>
|
||||
<Table.Th>Name</Table.Th>
|
||||
<Table.Th>Description</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{missionsQuery.data.map((mission) => (
|
||||
<MissionsTableRow mission={mission} />
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
function MissionsTableRow({ mission }: { mission: Mission }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table.Tr key={mission.id}>
|
||||
<Table.Td>
|
||||
<ActionIcon onClick={() => setExpanded((expanded) => !expanded)}>
|
||||
{expanded ? <IconChevronDown /> : <IconChevronRight />}
|
||||
</ActionIcon>
|
||||
</Table.Td>
|
||||
<Table.Td>{mission.name}</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed">
|
||||
{mission.description}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<MissionStatusBadge status={mission.status} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
{expanded === true ? (
|
||||
<>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={12}>
|
||||
<h3>
|
||||
Launches
|
||||
</h3>
|
||||
<Table>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Scheduled For</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{mission.missionLaunches.map((missionLaunch) => (
|
||||
<Table.Tr>
|
||||
<Table.Td>{toReadableDateTime(missionLaunch.scheduledFor)}</Table.Td>
|
||||
<Table.Td>
|
||||
<MissionLaunchStatusBadge
|
||||
status={missionLaunch.status}
|
||||
/>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={12}>
|
||||
<Popover width={400} position="bottom" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button variant="default">Create new Launch</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<CreateMissionLaunchForm missionId={mission.id} />
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user