Improve image editing, allow null times

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

@@ -0,0 +1,75 @@
+import { Button, Card, Group, Text } from "@mantine/core";
+import SecureImage from "../display/secure-img";
+import { randomId } from "@mantine/hooks";
+import { IconTrash } from "@tabler/icons-react";
+import { UseFormReturnType } from "@mantine/form";
+import { FlightFormSchema } from "@/util/types";
+
+export default function ImageListInput({
+  label,
+  form,
+  field,
+  mt = "sm",
+  h = "100px",
+}: {
+  label: string;
+  form: UseFormReturnType<
+    FlightFormSchema,
+    (values: FlightFormSchema) => FlightFormSchema
+  >;
+  field: string;
+  mt?: string;
+  w?: string;
+  h?: string;
+}) {
+  const field_key = field as keyof typeof form.getTransformedValues;
+
+  return (
+    <>
+      {/* <Grid> */}
+      <Text size="sm" fw={700} mt={mt} mb="xs">
+        {label}
+      </Text>
+      <Group display="flex" gap="xs" style={{ flexWrap: "wrap" }}>
+        {(form.getTransformedValues()[field_key] as string[]).map((id) => (
+          // <Grid.Col key={randomId()}>
+          <Card key={randomId()} padding="md" shadow="md" withBorder>
+            {/* <Card.Section> */}
+            <SecureImage id={id} h={h} />
+            {/* </Card.Section> */}
+            <Button
+              mt="md"
+              leftSection={<IconTrash />}
+              onClick={() =>
+                form.setFieldValue(
+                  field,
+                  (form.getTransformedValues()[field_key] as string[]).filter(
+                    (i) => i !== id
+                  )
+                )
+              }
+            >
+              Remove
+            </Button>
+          </Card>
+          // </Grid.Col>
+        ))}
+      </Group>
+    </>
+    // </Grid>
+    // <PillsInput label={label}>
+    //   <Pill.Group>
+    //     {imageIds.map((id: string) => (
+    //       <Pill
+    //         radius="sm"
+    //         key={id}
+    //         withRemoveButton
+    //         onRemove={() => setImageIds(imageIds.filter((i) => i !== id))}
+    //       >
+    //         <SecureImage id={id} h="20px" />
+    //       </Pill>
+    //     ))}
+    //   </Pill.Group>
+    // </PillsInput>
+  );
+}