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 {
|
import {
|
||||||
ActionIcon,
|
|
||||||
Alert,
|
|
||||||
Button,
|
Button,
|
||||||
Group,
|
Group,
|
||||||
Loader,
|
|
||||||
Paper,
|
Paper,
|
||||||
Popover,
|
|
||||||
Select,
|
|
||||||
Stack,
|
Stack,
|
||||||
Table,
|
|
||||||
Text,
|
|
||||||
Textarea,
|
Textarea,
|
||||||
TextInput,
|
TextInput,
|
||||||
Title,
|
Title,
|
||||||
} from '@mantine/core';
|
} from '@mantine/core';
|
||||||
import { DateTimePicker } from '@mantine/dates';
|
|
||||||
import { useForm } from '@mantine/form';
|
import { useForm } from '@mantine/form';
|
||||||
import { notifications } from '@mantine/notifications';
|
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 { createFileRoute } from '@tanstack/react-router';
|
||||||
import { useState } from 'react';
|
import { createMission } from '../api/missions';
|
||||||
import {
|
import { MissionsTable } from '../components/MissionsTable/MissionsTable';
|
||||||
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';
|
|
||||||
|
|
||||||
export const Route = createFileRoute('/missions')({
|
export const Route = createFileRoute('/missions')({
|
||||||
component: MissionsPage,
|
component: MissionsPage,
|
||||||
@@ -108,184 +91,4 @@ function CreateMissionForm() {
|
|||||||
</form>
|
</form>
|
||||||
</Paper>
|
</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