Implement aircraft values in flight creation/updating

2024-01-11 11:30:10 -06:00 · 2024-01-11 11:30:10 -06:00 · b50d333677
commit b50d333677
parent d6d03c9027
7 changed files with 449 additions and 215 deletions
--- a/web/app/routes/logbook.aircraft/route.tsx
+++ b/web/app/routes/logbook.aircraft/route.tsx
@ -1,6 +1,7 @@
 import ErrorDisplay from "@/ui/error-display";
 import AircraftForm from "@/ui/form/aircraft-form";
 import { useApi } from "@/util/api";
+import { useAircraft } from "@/util/hooks";
 import { AircraftFormSchema, AircraftSchema } from "@/util/types";
 import {
  ActionIcon,
@ -11,37 +12,19 @@ import {
  Group,
  Loader,
  Modal,
-  NumberInput,
  ScrollArea,
-  Select,
  Stack,
  Text,
-  TextInput,
  Title,
  Tooltip,
 } from "@mantine/core";
-import { useForm } from "@mantine/form";
 import { randomId, useDisclosure } from "@mantine/hooks";
 import { IconPencil, IconPlus, IconTrash, IconX } from "@tabler/icons-react";
 import {
  UseQueryResult,
  useMutation,
-  useQuery,
  useQueryClient,
 } from "@tanstack/react-query";
-import { AxiosError } from "axios";
-import { useState } from "react";
-
-function useAircraft() {
-  const client = useApi();
-
-  const aircraft = useQuery({
-    queryKey: ["aircraft-list"],
-    queryFn: async () => await client.get(`/aircraft`).then((res) => res.data),
-  });
-
-  return aircraft;
-}

 function AircraftCard({ aircraft }: { aircraft: AircraftSchema }) {
  const [deleteOpened, { open: openDelete, close: closeDelete }] =
--- a/web/app/routes/logbook.flights.edit.$id/route.tsx
+++ b/web/app/routes/logbook.flights.edit.$id/route.tsx
@ -1,4 +1,4 @@
-import { Container, Stack, Title } from "@mantine/core";
+import { Center, Container, Loader, Stack, Title } from "@mantine/core";
 import {
  FlightFormSchema,
  flightCreateHelper,
@ -9,6 +9,7 @@ import { useApi } from "@/util/api";
 import { useNavigate, useParams } from "@remix-run/react";
 import { AxiosError } from "axios";
 import FlightForm from "@/ui/form/flight-form";
+import ErrorDisplay from "@/ui/error-display";

 export default function EditFlight() {
  const params = useParams();
@ -47,16 +48,30 @@ export default function EditFlight() {
      <Stack>
        <Title order={2}>Edit Flight</Title>

+        {flight.isLoading ? (
+          <Center h="calc(100vh - 95px - 110px)">
+            <Loader />
+          </Center>
+        ) : flight.isError ? (
+          <Center h="calc(100vh - 95px - 110px)">
+            <ErrorDisplay error={flight.error.message} />
+          </Center>
+        ) : (
          <FlightForm
-          initialValues={flightEditHelper(flight.data) ?? null}
+            initialValues={
+              flight.data ? flightEditHelper(flight.data) ?? null : null
+            }
            onSubmit={editFlight.mutate}
+            isPending={editFlight.isPending}
            isError={editFlight.isError}
            error={editFlight.error}
            submitButtonLabel="Update"
            withCancelButton
            cancelFunc={() => navigate(`/logbook/flights/${params.id}`)}
            mah="calc(100vh - 95px - 110px)"
+            autofillHobbs={false}
          />
+        )}
      </Stack>
    </Container>
  );
--- a/web/app/routes/logbook.flights.new/route.tsx
+++ b/web/app/routes/logbook.flights.new/route.tsx
@ -33,9 +33,11 @@ export default function NewFlight() {

        <FlightForm
          onSubmit={createFlight.mutate}
+          isPending={createFlight.isPending}
          isError={createFlight.isError}
          error={createFlight.error}
          mah="calc(100vh - 95px - 110px)"
+          autofillHobbs
        />
      </Stack>
    </Container>
--- a/web/app/routes/logbook/route.tsx
+++ b/web/app/routes/logbook/route.tsx
@ -47,7 +47,7 @@ export default function Index() {
            staleTime: 1000,
            retry: (failureCount, error: Error) => {
              return (
-                failureCount < 5 &&
+                failureCount < 3 &&
                (!error ||
                  (error instanceof AxiosError &&
                    error.response?.status !== 401 &&
--- a/web/app/ui/form/aircraft-form.tsx
+++ b/web/app/ui/form/aircraft-form.tsx
@ -12,7 +12,7 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { IconPencil, IconX } from "@tabler/icons-react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { useState } from "react";

--- a/web/app/ui/form/flight-form.tsx
+++ b/web/app/ui/form/flight-form.tsx
@ -1,15 +1,23 @@
-import { FlightFormSchema } from "@/util/types";
 import {
+  AircraftFormSchema,
+  AircraftSchema,
+  FlightFormSchema,
+} from "@/util/types";
+import {
+  ActionIcon,
  Button,
  CloseButton,
  Container,
  Fieldset,
  Group,
+  Modal,
  NumberInput,
  ScrollArea,
+  Select,
  Text,
  TextInput,
  Textarea,
+  Tooltip,
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 import { useForm } from "@mantine/form";
@ -18,11 +26,18 @@ import { HourInput, ZeroHourInput } from "./hour-input";
 import TimeInput from "./time-input";
 import { ZeroIntInput } from "./int-input";
 import ListInput from "./list-input";
-import { IconPencil } from "@tabler/icons-react";
+import { IconPencil, IconPlaneTilt, IconPlus } from "@tabler/icons-react";
 import { AxiosError } from "axios";
+import { useDisclosure } from "@mantine/hooks";
+import AircraftForm from "./aircraft-form";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useApi } from "@/util/api";
+import { useAircraft } from "@/util/hooks";
+import { useEffect, useState } from "react";

 export default function FlightForm({
  onSubmit,
+  isPending,
  isError,
  error,
  initialValues,
@ -30,8 +45,10 @@ export default function FlightForm({
  submitButtonLabel,
  withCancelButton,
  cancelFunc,
+  autofillHobbs = false,
 }: {
  onSubmit: (values: FlightFormSchema) => void;
+  isPending: boolean;
  isError: boolean;
  error: Error | null;
  initialValues?: FlightFormSchema | null;
@ -39,6 +56,7 @@ export default function FlightForm({
  submitButtonLabel?: string;
  withCancelButton?: boolean;
  cancelFunc?: () => void;
+  autofillHobbs?: boolean;
 }) {
  const form = useForm<FlightFormSchema>({
    initialValues: initialValues ?? {
@ -86,7 +104,69 @@ export default function FlightForm({
    },
  });

+  const [aircraftOpened, { open: openAircraft, close: closeAircraft }] =
+    useDisclosure(false);
+
+  const client = useApi();
+  const queryClient = useQueryClient();
+
+  const addAircraft = useMutation({
+    mutationFn: async (values: AircraftFormSchema) => {
+      const newAircraft = values;
+      if (newAircraft) {
+        const res = await client.post("/aircraft", newAircraft);
+        return res.data;
+      }
+      throw new Error("Aircraft creation failed");
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["aircraft-list"] });
+      close();
+    },
+  });
+
+  const [aircraft, setAircraft] = useState<string | null>(
+    initialValues?.aircraft ?? ""
+  );
+
+  const [hobbsTouched, setHobbsTouched] = useState(false);
+
+  const getHobbs = useQuery({
+    queryKey: ["hobbs", aircraft],
+    queryFn: async () =>
+      await client.get(`/aircraft/tail/${aircraft}`).then((res) => res.data),
+    enabled: !!aircraft && aircraft !== "",
+  });
+
+  const getAircraft = useAircraft();
+
+  useEffect(() => {
+    if (autofillHobbs && getHobbs.isFetched && getHobbs.data && !hobbsTouched) {
+      form.setFieldValue(
+        "hobbs_start",
+        getHobbs.data.hobbs ?? form.getTransformedValues()["hobbs_start"]
+      );
+    }
+  }, [getHobbs.data]);
+
  return (
+    <>
+      <Modal
+        opened={aircraftOpened}
+        onClose={closeAircraft}
+        title="New Aircraft"
+        centered
+      >
+        <AircraftForm
+          onSubmit={addAircraft.mutate}
+          isError={addAircraft.isError}
+          error={addAircraft.error}
+          isPending={addAircraft.isPending}
+          submitButtonLabel="Add"
+          withCancelButton
+          cancelFunc={closeAircraft}
+        />
+      </Modal>
      <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
        <ScrollArea.Autosize mah={mah}>
          <Container>
@ -94,8 +174,60 @@ export default function FlightForm({

            <Fieldset>
              <Group justify="center" grow>
-              <DatePickerInput label="Date" {...form.getInputProps("date")} />
-              <TextInput label="Aircraft" {...form.getInputProps("aircraft")} />
+                <DatePickerInput
+                  label="Date"
+                  {...form.getInputProps("date")}
+                  withAsterisk
+                />
+                <Select
+                  label={
+                    <Group gap="0">
+                      <Text size="sm" fw={700} span>
+                        Aircraft
+                      </Text>
+                      <Text
+                        pl="0.3rem"
+                        style={{ color: "var(--mantine-color-error)" }}
+                        span
+                      >
+                        *
+                      </Text>
+
+                      <Tooltip label="Add Aircraft">
+                        <ActionIcon
+                          variant="transparent"
+                          onClick={openAircraft}
+                        >
+                          <IconPlus size="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </Group>
+                  }
+                  data={
+                    getAircraft.isFetched
+                      ? getAircraft.data?.map((item: AircraftSchema) => ({
+                          value: item.tail_no,
+                          label: item.tail_no,
+                        }))
+                      : initialValues
+                      ? [
+                          {
+                            value: initialValues?.aircraft,
+                            label: initialValues?.aircraft,
+                          },
+                        ]
+                      : null
+                  }
+                  value={aircraft}
+                  {...form.getInputProps("aircraft")}
+                  onChange={(_value, option) => {
+                    form.setFieldValue("aircraft", option.label);
+                    setAircraft(option.label);
+                    queryClient.invalidateQueries({
+                      queryKey: ["hobbs", aircraft],
+                    });
+                  }}
+                />
              </Group>
            </Fieldset>

@ -112,14 +244,90 @@ export default function FlightForm({
                  {...form.getInputProps("waypoint_to")}
                />
              </Group>
-            <TextInput label="Route" {...form.getInputProps("route")} mt="md" />
+              <TextInput
+                label="Route"
+                {...form.getInputProps("route")}
+                mt="md"
+              />
            </Fieldset>

            {/* Times */}

            <Fieldset legend="Times" mt="md">
              <Group justify="center" grow>
-              <HourInput form={form} field="hobbs_start" label="Hobbs Start" />
+                <NumberInput
+                  label={
+                    <Group gap="0">
+                      <Text size="sm" fw={700} span>
+                        Hobbs Start
+                      </Text>
+
+                      <Tooltip
+                        label={
+                          getHobbs.isFetched &&
+                          getHobbs.data &&
+                          getHobbs.data.hobbs ===
+                            form.getTransformedValues()["hobbs_start"]
+                            ? "Using aircraft time"
+                            : "Use Aircraft Time"
+                        }
+                      >
+                        <ActionIcon
+                          variant="transparent"
+                          disabled={
+                            !(
+                              getHobbs.isFetched &&
+                              getHobbs.data &&
+                              getHobbs.data.hobbs !==
+                                form.getTransformedValues()["hobbs_start"]
+                            )
+                          }
+                          style={
+                            !(
+                              getHobbs.isFetched &&
+                              getHobbs.data &&
+                              getHobbs.data.hobbs !==
+                                form.getTransformedValues()["hobbs_start"]
+                            )
+                              ? { backgroundColor: "transparent" }
+                              : {}
+                          }
+                          onClick={() =>
+                            form.setFieldValue(
+                              "hobbs_start",
+                              getHobbs.data?.hobbs ?? 0.0
+                            )
+                          }
+                        >
+                          <IconPlaneTilt size="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+                    </Group>
+                  }
+                  decimalScale={1}
+                  step={0.1}
+                  min={0}
+                  fixedDecimalScale
+                  leftSection={
+                    <CloseButton
+                      aria-label="Clear input"
+                      onClick={() => form.setFieldValue("hobbs_start", "")}
+                      style={{
+                        display:
+                          ["", null].indexOf(
+                            form.getTransformedValues()["hobbs_start"]
+                          ) > -1
+                            ? "none"
+                            : undefined,
+                      }}
+                    />
+                  }
+                  {...form.getInputProps("hobbs_start")}
+                  onChange={(e) => {
+                    form.setFieldValue("hobbs_start", e);
+                    setHobbsTouched(true);
+                  }}
+                />
                <HourInput form={form} field="hobbs_end" label="Hobbs End" />
              </Group>
            </Fieldset>
@ -155,7 +363,11 @@ export default function FlightForm({
                  field="time_night"
                  label="Time Night"
                />
-              <ZeroHourInput form={form} field="time_solo" label="Time Solo" />
+                <ZeroHourInput
+                  form={form}
+                  field="time_solo"
+                  label="Time Solo"
+                />
              </Group>
            </Fieldset>

@ -191,7 +403,11 @@ export default function FlightForm({
            <Fieldset legend="Landings" mt="md">
              <Group justify="center" grow>
                <ZeroIntInput form={form} field="landings_day" label="Day" />
-              <ZeroIntInput form={form} field="landings_night" label="Night" />
+                <ZeroIntInput
+                  form={form}
+                  field="landings_night"
+                  label="Night"
+                />
              </Group>
            </Fieldset>

@ -260,7 +476,11 @@ export default function FlightForm({
        </ScrollArea.Autosize>

        <Group justify="flex-end" mt="md">
-        {isError ? (
+          {isPending ? (
+            <Text c="yellow" fw={700}>
+              Loading...
+            </Text>
+          ) : isError ? (
            <Text c="red" fw={700}>
              {error instanceof AxiosError
                ? error.response?.data.detail
@ -277,5 +497,6 @@ export default function FlightForm({
          </Button>
        </Group>
      </form>
+    </>
  );
 }
--- a/web/app/util/hooks.ts
+++ b/web/app/util/hooks.ts
@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { useApi } from "./api";
+
+export function useAircraft() {
+  const client = useApi();
+
+  const aircraft = useQuery({
+    queryKey: ["aircraft-list"],
+    queryFn: async () => await client.get(`/aircraft`).then((res) => res.data),
+  });
+
+  return aircraft;
+}