Implement inline editing and image upload/delete/edit

web/app/ui/display/editable/list-log-item.tsx

@@ -0,0 +1,115 @@
+import {
+  Badge,
+  Button,
+  Card,
+  Group,
+  Loader,
+  Modal,
+  Stack,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import { randomId, useDisclosure } from "@mantine/hooks";
+import { IconPencil, IconX } from "@tabler/icons-react";
+import { useState } from "react";
+import ListInput from "@/ui/input/list-input";
+import { usePatchFlight } from "@/util/hooks";
+
+export function LogItem({
+  label,
+  content,
+}: {
+  label: string;
+  content: string | null;
+}) {
+  if (content === null) content = "";
+
+  return (
+    <Group justify="space-between" px="sm">
+      <Text>{label}</Text>
+      <Text>{content}</Text>
+    </Group>
+  );
+}
+
+export function ListLogItem({
+  label,
+  content,
+  listColor = "",
+  id = "",
+  field = "",
+}: {
+  label: string;
+  content: string | string[] | null;
+  listColor?: string;
+  id?: string;
+  field?: string;
+}) {
+  if (content === null) content = [];
+  if (content instanceof String) content = [content as string];
+
+  const [editValue, setEditValue] = useState<string[]>(content as string[]);
+
+  const [editOpened, { open: openEdit, close: closeEdit }] =
+    useDisclosure(false);
+
+  const updateValue = usePatchFlight(id, field, closeEdit);
+
+  const editForm = (
+    <ListInput label={label} value={editValue} setValue={setEditValue} />
+  );
+
+  return (
+    <>
+      <Modal
+        opened={editOpened}
+        onClose={closeEdit}
+        title={`Edit ${label}`}
+        centered
+      >
+        <Stack>
+          {editForm}
+          <Group justify="flex-end">
+            {updateValue.isPending ? <Loader /> : null}
+            {updateValue.isError ? (
+              <Text c="red">{updateValue.error?.message}</Text>
+            ) : null}
+            <Button
+              onClick={() => {
+                updateValue.mutate(editValue);
+              }}
+              leftSection={<IconPencil />}
+            >
+              Update
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+      <Card shadow="sm" withBorder h="100%">
+        <Stack gap="xs" align="center" h="100%">
+          <Text c="dimmed" style={{ textalign: "center" }}>
+            {label}
+          </Text>
+          <Tooltip label={`Edit ${label}`}>
+            <UnstyledButton onClick={openEdit}>
+              {(content as string[]).length > 0 ? (
+                <Text size="lg">
+                  {(content as string[]).map((item) => (
+                    <Badge key={randomId()} size="lg" mx="xs" color={listColor}>
+                      {item}
+                    </Badge>
+                  ))}
+                </Text>
+              ) : (
+                <Text size="lg" style={{ textAlign: "center" }} c="dimmed">
+                  <IconX />
+                </Text>
+              )}
+            </UnstyledButton>
+          </Tooltip>
+        </Stack>
+      </Card>
+    </>
+  );
+}