Implement inline editing and image upload/delete/edit

web/app/ui/form/flight-form.tsx

@@ -1,6 +1,7 @@
 import {
   AircraftFormSchema,
   AircraftSchema,
+  FlightDisplaySchema,
   FlightFormSchema,
 } from "@/util/types";
 import {
@@ -109,6 +110,7 @@ export default function FlightForm({
 
       comments: "",
 
+      existing_images: [],
       images: [],
     },
     validate: {
@@ -120,6 +122,8 @@ export default function FlightForm({
       time_stop: (value) => validate_time(value),
     },
   });
+  console.log(initialValues);
+  console.log(form.getTransformedValues());
 
   const [aircraftOpened, { open: openAircraft, close: closeAircraft }] =
     useDisclosure(false);
@@ -509,6 +513,15 @@ export default function FlightForm({
                 minRows={4}
                 {...form.getInputProps("comments")}
               />
+              {initialValues?.existing_images?.length ?? 0 > 0 ? (
+                <ListInput
+                  form={form}
+                  field="existing_images"
+                  mt="md"
+                  label="Existing Images"
+                  canAdd={false}
+                />
+              ) : null}
               <ImageUpload
                 form={form}
                 mt="md"

web/app/ui/form/list-input.tsx

@@ -7,6 +7,8 @@ export default function ListInput({
   form,
   field,
   label,
+  mt = "",
+  canAdd = true,
 }: {
   form: UseFormReturnType<
     FlightFormSchema,
@@ -14,6 +16,8 @@ export default function ListInput({
   >;
   field: string;
   label: string;
+  mt?: string;
+  canAdd?: boolean;
 }) {
   const field_key = field as keyof typeof form.getTransformedValues;
   const [inputValue, setInputValue] = useState<string>("");
@@ -37,7 +41,11 @@ export default function ListInput({
   };
 
   return (
-    <PillsInput label={label} description="Press enter or comma to add item">
+    <PillsInput
+      mt={mt}
+      label={label}
+      description="Press enter or comma to add item"
+    >
       <Pill.Group>
         {(form.getTransformedValues()[field_key] as string[]).map(
           (item: string) => (
@@ -58,11 +66,13 @@ export default function ListInput({
             </Pill>
           )
         )}
-        <PillsInput.Field
-          value={inputValue}
-          onChange={(event) => setInputValue(event.currentTarget.value)}
-          onKeyDown={handleKeyDown}
-        />
+        {canAdd ? (
+          <PillsInput.Field
+            value={inputValue}
+            onChange={(event) => setInputValue(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+        ) : null}
       </Pill.Group>
     </PillsInput>
   );