add storage management features including update functionality and storage listing page

2026-05-27 22:20:12 +02:00
parent 96488a3137
commit b0731b22db
10 changed files with 252 additions and 13 deletions
@@ -0,0 +1,77 @@
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { updateStorage } from "../utils/uxFncs";
+import { useForm } from "@tanstack/react-form";
+import { useStore } from "@tanstack/react-store";
+import { Input, Button } from "@mui/joy";
+import type { Storage } from "../misc/interfaces";
+import { formatDate } from "../utils/uxFncs";
+
+interface StorageRowProps {
+  storage: Storage;
+}
+
+export const StorageRow = ({ storage }: StorageRowProps) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (values: Pick<Storage, "name" | "description">) =>
+      updateStorage(storage.uuid, values),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["storages"] });
+    },
+  });
+
+  const form = useForm({
+    defaultValues: {
+      name: storage.name,
+      description: storage.description ?? "",
+    },
+    onSubmit: async ({ value }) => {
+      await mutation.mutateAsync(value);
+    },
+  });
+
+  const values = useStore(form.baseStore, (state) => state.values);
+  const isDirty =
+    values.name !== storage.name ||
+    (values.description ?? "") !== (storage.description ?? "");
+
+  return (
+    <tr key={storage.uuid}>
+      <td>
+        <form.Field name="name">
+          {(field) => (
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              size="sm"
+            />
+          )}
+        </form.Field>
+      </td>
+      <td>
+        <form.Field name="description">
+          {(field) => (
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              size="sm"
+            />
+          )}
+        </form.Field>
+      </td>
+      <td>{formatDate(storage.created_at)}</td>
+      <td>{formatDate(storage.updated_at)}</td>
+      <td>
+        <Button
+          onClick={form.handleSubmit}
+          disabled={!isDirty || mutation.isPending}
+        >
+          {mutation.isPending ? "..." : "Save"}
+        </Button>
+      </td>
+    </tr>
+  );
+};