Edit and delete brands and shops

Adds PATCH and DELETE endpoints for brands and shops that mirror the existing bins pattern: deleting a brand or shop nullifies referencing products (and strains, for brands) inside a transaction so nothing is lost. Brand renames return 409 when the new name collides with the UNIQUE constraint, surfaced inline in the edit modal. The Brands and Shops views now show inline edit/trash icons on each card; the trash button confirms with a preview of how many products will be unparented. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 21:33:42 -04:00
parent d00eb4c12b
commit 8ef8859c7d
6 changed files with 365 additions and 9 deletions
@@ -57,6 +57,70 @@ export function AddBrandModal({ onClose }: { onClose: () => void }) {
  );
 }

+export function EditBrandModal({
+  brand,
+  onClose,
+}: {
+  brand: { id: string; name: string };
+  onClose: () => void;
+}) {
+  const qc = useQueryClient();
+  const [name, setName] = useState(brand.name);
+  const update = useMutation({
+    mutationFn: () => api.updateBrand(brand.id, { name: name.trim() }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["bootstrap"] });
+      onClose();
+    },
+  });
+
+  return (
+    <ModalBackdrop onClose={onClose}>
+      <div
+        style={{
+          width: "min(480px, 96vw)",
+          margin: "40px 20px",
+          background: "var(--bg)",
+          border: "1px solid var(--line)",
+          borderRadius: "var(--r-lg)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <ModalHeader title="Edit brand" eyebrow="Catalog" onClose={onClose} />
+        <div style={{ padding: 32 }}>
+          <Field label="Brand name">
+            <Input
+              autoFocus
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Foxglove Farms"
+            />
+          </Field>
+          {update.isError && (
+            <div style={{ marginTop: 12, fontSize: 12, color: "var(--terracotta)" }}>
+              {String(update.error instanceof Error ? update.error.message : update.error)}
+            </div>
+          )}
+        </div>
+        <ModalFooter>
+          <div />
+          <div style={{ display: "flex", gap: 8 }}>
+            <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
+            <Btn
+              variant="primary"
+              icon="check"
+              disabled={!name.trim() || update.isPending}
+              onClick={() => update.mutate()}
+            >
+              {update.isPending ? "Saving…" : "Save changes"}
+            </Btn>
+          </div>
+        </ModalFooter>
+      </div>
+    </ModalBackdrop>
+  );
+}
+
 export function EditBinModal({
  bin,
  onClose,
@@ -211,6 +275,74 @@ export function AddBinModal({ onClose }: { onClose: () => void }) {
  );
 }

+export function EditShopModal({
+  shop,
+  onClose,
+}: {
+  shop: { id: string; name: string; location: string | null };
+  onClose: () => void;
+}) {
+  const qc = useQueryClient();
+  const [name, setName] = useState(shop.name);
+  const [location, setLocation] = useState(shop.location ?? "");
+  const update = useMutation({
+    mutationFn: () =>
+      api.updateShop(shop.id, { name: name.trim(), location: location.trim() }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["bootstrap"] });
+      onClose();
+    },
+  });
+
+  return (
+    <ModalBackdrop onClose={onClose}>
+      <div
+        style={{
+          width: "min(560px, 96vw)",
+          margin: "40px 20px",
+          background: "var(--bg)",
+          border: "1px solid var(--line)",
+          borderRadius: "var(--r-lg)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <ModalHeader title="Edit shop" eyebrow="Catalog" onClose={onClose} />
+        <div style={{ padding: 32, display: "grid", gap: 16 }}>
+          <Field label="Shop name">
+            <Input
+              autoFocus
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Greenleaf Co-op"
+            />
+          </Field>
+          <Field label="Location (optional)">
+            <Input
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              placeholder="e.g. Capitol Hill"
+            />
+          </Field>
+        </div>
+        <ModalFooter>
+          <div />
+          <div style={{ display: "flex", gap: 8 }}>
+            <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
+            <Btn
+              variant="primary"
+              icon="check"
+              disabled={!name.trim() || update.isPending}
+              onClick={() => update.mutate()}
+            >
+              {update.isPending ? "Saving…" : "Save changes"}
+            </Btn>
+          </div>
+        </ModalFooter>
+      </div>
+    </ModalBackdrop>
+  );
+}
+
 export function AddShopModal({ onClose }: { onClose: () => void }) {
  const qc = useQueryClient();
  const [name, setName] = useState("");