feat: open the last locked fields for editing, keeping their history intact
Four fields were still frozen because changing them would have bypassed the record that makes the change traceable, and a user's login data could not be corrected at all. Locking a field is the wrong trade: a wrong value stays in the system forever. The fix is to let the edit write the same history entry the dedicated endpoint writes. - A colony's apiary is editable through PATCH and writes the same ColonyApiaryHistory entry POST /colonies/:id/move writes, so the location history never skips a stand the colony was recorded on. - A honey batch's storage container is editable through PATCH and writes the same HoneyBatchRelocation entry POST /honey-batches/:id/relocate writes. - A stock item's quantity is editable and books the difference as an ADJUSTMENT movement, so the stored level stays the sum of its movements. - A role's key is editable (system roles were already rejected outright by RolesService.update, which keeps the seed's ADMIN lookup intact). - A user's e-mail - the login identity - is editable. A typo there previously locked the account out for good. - New POST /users/:id/reset-password lets an administrator set someone else's password: there is no self-service reset flow, so a forgotten password was the one thing no edit could repair. It revokes every refresh token and clears the permission cache exactly as a self-service change does, refuses to act on your own account (that goes through /profile/password, which proves ownership by asking for the current one), and never writes the password to the log. Frontend: - Users had no edit UI at all, although PATCH /users/:id existed. New EditUserDialog covers name, e-mail, role and an optional new password. - Colony, honey batch and stock item forms gained the newly editable fields, each with a note saying the correction is recorded as a move, a relocation or a stock adjustment. - The role dialog gained the key field. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5 committed
1 parent
bee2199647
commit
b0e05daa42
28 files changed
+633
-34
No files matched your search
@@ -2,9 +2,10 @@
|
||||
|
||||
import { FormEvent, useState } from "react";
|
||||
import { Layers } from "lucide-react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { updateColony } from "@/lib/colonies/api";
|
||||
import { fetchApiaries } from "@/lib/apiaries/api";
|
||||
import { Colony, ColonyCondition, ColonyStatus, ColonyType } from "@/lib/colonies/types";
|
||||
import {
|
||||
COLONY_CONDITIONS,
|
||||
@@ -76,6 +77,7 @@ function ConditionSelect({
|
||||
|
||||
export function ColonyEditCard({ colony }: { colony: Colony }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [apiaryId, setApiaryId] = useState(colony.apiaryId);
|
||||
const [code, setCode] = useState(colony.code);
|
||||
const [status, setStatus] = useState<ColonyStatus>(colony.status);
|
||||
const [colonyType, setColonyType] = useState<ColonyType>(colony.colonyType);
|
||||
@@ -93,9 +95,15 @@ export function ColonyEditCard({ colony }: { colony: Colony }) {
|
||||
);
|
||||
const [notes, setNotes] = useState(colony.notes ?? "");
|
||||
|
||||
const { data: apiaries } = useQuery({
|
||||
queryKey: ["apiaries"],
|
||||
queryFn: () => fetchApiaries(),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
updateColony(colony.id, {
|
||||
apiaryId,
|
||||
code,
|
||||
status,
|
||||
colonyType,
|
||||
@@ -110,8 +118,10 @@ export function ColonyEditCard({ colony }: { colony: Colony }) {
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ["colonies"] });
|
||||
void queryClient.invalidateQueries({ queryKey: ["colonies", colony.id] });
|
||||
void queryClient.invalidateQueries({ queryKey: ["apiaries"] });
|
||||
},
|
||||
onError: () => toast.error("Volk konnte nicht gespeichert werden"),
|
||||
onError: (error: Error) =>
|
||||
toast.error(error.message || "Volk konnte nicht gespeichert werden"),
|
||||
});
|
||||
|
||||
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
@@ -135,6 +145,28 @@ export function ColonyEditCard({ colony }: { colony: Colony }) {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="colony-apiary">Bienenstand</Label>
|
||||
<Select
|
||||
value={apiaryId}
|
||||
onValueChange={(value) => setApiaryId(value ?? apiaryId)}
|
||||
>
|
||||
<SelectTrigger id="colony-apiary">
|
||||
<SelectValue placeholder="Bienenstand wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(apiaries ?? []).map((apiary) => (
|
||||
<SelectItem key={apiary.id} value={apiary.id}>
|
||||
{apiary.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Eine Korrektur wird wie ein Umsetzen in der Standort-Historie
|
||||
festgehalten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="colony-code">Volksnummer</Label>
|
||||
<Input
|
||||
|
||||
@@ -8,6 +8,7 @@ import { updateHoneyBatch } from "@/lib/honey-batches/api";
|
||||
import { HoneyBatch, HoneyBatchStatus } from "@/lib/honey-batches/types";
|
||||
import { HONEY_BATCH_STATUS_LABELS } from "@/lib/honey-batches/labels";
|
||||
import { fetchExtractions } from "@/lib/extractions/api";
|
||||
import { fetchStorageContainers } from "@/lib/storage/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -33,6 +34,9 @@ export function HoneyBatchEditDialog({ honeyBatch }: { honeyBatch: HoneyBatch })
|
||||
const [batchNumber, setBatchNumber] = useState(honeyBatch.batchNumber);
|
||||
const [extractionId, setExtractionId] = useState(honeyBatch.extractionId);
|
||||
const [status, setStatus] = useState<HoneyBatchStatus>(honeyBatch.status);
|
||||
const [storageContainerId, setStorageContainerId] = useState(
|
||||
honeyBatch.storageContainerId ?? "",
|
||||
);
|
||||
const [honeyType, setHoneyType] = useState(honeyBatch.honeyType ?? "");
|
||||
const [amount, setAmount] = useState(honeyBatch.amount?.toString() ?? "");
|
||||
const [waterContent, setWaterContent] = useState(honeyBatch.waterContent?.toString() ?? "");
|
||||
@@ -41,6 +45,10 @@ export function HoneyBatchEditDialog({ honeyBatch }: { honeyBatch: HoneyBatch })
|
||||
queryKey: ["extractions"],
|
||||
queryFn: () => fetchExtractions(),
|
||||
});
|
||||
const { data: containers } = useQuery({
|
||||
queryKey: ["storage-containers"],
|
||||
queryFn: () => fetchStorageContainers(),
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () =>
|
||||
@@ -48,6 +56,7 @@ export function HoneyBatchEditDialog({ honeyBatch }: { honeyBatch: HoneyBatch })
|
||||
batchNumber,
|
||||
extractionId,
|
||||
status,
|
||||
storageContainerId: storageContainerId || undefined,
|
||||
honeyType: honeyType || undefined,
|
||||
amount: amount ? Number(amount) : undefined,
|
||||
waterContent: waterContent ? Number(waterContent) : undefined,
|
||||
@@ -108,6 +117,29 @@ export function HoneyBatchEditDialog({ honeyBatch }: { honeyBatch: HoneyBatch })
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="batch-edit-container">Lagerbehälter</Label>
|
||||
<Select
|
||||
value={storageContainerId}
|
||||
onValueChange={(value) => setStorageContainerId(value ?? "")}
|
||||
>
|
||||
<SelectTrigger id="batch-edit-container" className="w-full">
|
||||
<SelectValue placeholder="Behälter wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(containers ?? []).map((container) => (
|
||||
<SelectItem key={container.id} value={container.id}>
|
||||
{container.code}
|
||||
{container.location ? ` · ${container.location}` : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Eine Korrektur wird wie eine Umlagerung in der Lagerhistorie
|
||||
festgehalten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="batch-edit-status">Status</Label>
|
||||
<Select
|
||||
|
||||
@@ -24,6 +24,7 @@ interface EditRoleFormProps {
|
||||
|
||||
function EditRoleForm({ role, onClose }: EditRoleFormProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [key, setKey] = useState(role.key);
|
||||
const [name, setName] = useState(role.name);
|
||||
const [description, setDescription] = useState(role.description ?? "");
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set(role.permissionKeys));
|
||||
@@ -35,8 +36,12 @@ function EditRoleForm({ role, onClose }: EditRoleFormProps) {
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (input: { name: string; description?: string; permissionKeys: string[] }) =>
|
||||
updateRole(role.id, input),
|
||||
mutationFn: (input: {
|
||||
key: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
permissionKeys: string[];
|
||||
}) => updateRole(role.id, input),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ["roles"] });
|
||||
onClose();
|
||||
@@ -48,6 +53,7 @@ function EditRoleForm({ role, onClose }: EditRoleFormProps) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
mutation.mutate({
|
||||
key,
|
||||
name,
|
||||
description: description || undefined,
|
||||
permissionKeys: Array.from(selected),
|
||||
@@ -56,6 +62,15 @@ function EditRoleForm({ role, onClose }: EditRoleFormProps) {
|
||||
|
||||
return (
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-role-key">Schlüssel</Label>
|
||||
<Input
|
||||
id="edit-role-key"
|
||||
required
|
||||
value={key}
|
||||
onChange={(event) => setKey(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-role-name">Name</Label>
|
||||
<Input
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useState } from "react";
|
||||
import { Pencil } from "lucide-react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { fetchRoles } from "@/lib/roles/api";
|
||||
import { resetUserPassword, updateUser } from "@/lib/users/api";
|
||||
import { User } from "@/lib/users/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
/**
|
||||
* Corrects a user's name, login address and role. The e-mail is the login
|
||||
* identity, so a typo there would otherwise lock the account out permanently
|
||||
* with no way back through the UI.
|
||||
*
|
||||
* The backend refuses a few of these on its own - changing your own role, or
|
||||
* taking the last system-role user's role away - and those refusals are shown
|
||||
* as they come back rather than second-guessed here.
|
||||
*/
|
||||
function EditUserForm({ user, onSaved }: { user: User; onSaved: () => void }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState(user.name);
|
||||
const [email, setEmail] = useState(user.email);
|
||||
const [roleId, setRoleId] = useState(user.roleId);
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { data: roles } = useQuery({ queryKey: ["roles"], queryFn: fetchRoles });
|
||||
// A deactivated role cannot be assigned, but the one already held stays
|
||||
// listed so opening the dialog does not silently reassign the user.
|
||||
const selectableRoles = (roles ?? []).filter(
|
||||
(role) => role.status === "ACTIVE" || role.id === user.roleId,
|
||||
);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await updateUser(user.id, { name, email, roleId });
|
||||
// Only sent when actually filled in - an empty field means "leave the
|
||||
// password alone", not "clear it".
|
||||
if (newPassword) {
|
||||
await resetUserPassword(user.id, newPassword);
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ["users"] });
|
||||
onSaved();
|
||||
},
|
||||
onError: (mutationError: Error) =>
|
||||
setError(
|
||||
mutationError.message || "Benutzer konnte nicht gespeichert werden.",
|
||||
),
|
||||
});
|
||||
|
||||
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
mutation.mutate();
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-user-name">Name</Label>
|
||||
<Input
|
||||
id="edit-user-name"
|
||||
required
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-user-email">E-Mail</Label>
|
||||
<Input
|
||||
id="edit-user-email"
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Zugleich die Anmeldeadresse - nach dem Speichern meldet sich der
|
||||
Benutzer damit an.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-user-role">Rolle</Label>
|
||||
<Select
|
||||
value={roleId}
|
||||
onValueChange={(value) => setRoleId(value ?? roleId)}
|
||||
>
|
||||
<SelectTrigger id="edit-user-role" className="w-full">
|
||||
<SelectValue placeholder="Rolle wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{selectableRoles.map((role) => (
|
||||
<SelectItem key={role.id} value={role.id}>
|
||||
{role.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="edit-user-password">Neues Passwort</Label>
|
||||
<Input
|
||||
id="edit-user-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
minLength={8}
|
||||
placeholder="Leer lassen, um es nicht zu ändern"
|
||||
value={newPassword}
|
||||
onChange={(event) => setNewPassword(event.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Setzt das Passwort neu und meldet den Benutzer auf allen Geräten ab.
|
||||
Das eigene Passwort wird stattdessen im eigenen Profil geändert.
|
||||
</p>
|
||||
</div>
|
||||
{error ? (
|
||||
<p role="alert" className="text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
<Button type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? "Speichert…" : "Speichern"}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function EditUserDialog({ user }: { user: User }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger
|
||||
render={
|
||||
<Button variant="outline" size="sm">
|
||||
<Pencil className="size-3.5" />
|
||||
Bearbeiten
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Benutzer bearbeiten</DialogTitle>
|
||||
</DialogHeader>
|
||||
{open ? (
|
||||
<EditUserForm user={user} onSaved={() => setOpen(false)} />
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { CreateUserDialog } from "./create-user-dialog";
|
||||
import { EditUserDialog } from "./edit-user-dialog";
|
||||
|
||||
export function UsersTab() {
|
||||
const queryClient = useQueryClient();
|
||||
@@ -101,6 +102,7 @@ export function UsersTab() {
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<EditUserDialog user={user} />
|
||||
{user.mfaEnabled ? (
|
||||
<ConfirmDialog
|
||||
triggerLabel="MFA zurücksetzen"
|
||||
|
||||
@@ -33,6 +33,7 @@ export function EditStockItemDialog({ item }: { item: StockItem }) {
|
||||
const [name, setName] = useState(item.name);
|
||||
const [category, setCategory] = useState<StockCategory>(item.category);
|
||||
const [unit, setUnit] = useState(item.unit);
|
||||
const [quantity, setQuantity] = useState(item.quantity.toString());
|
||||
const [minThreshold, setMinThreshold] = useState(item.minThreshold?.toString() ?? "");
|
||||
const [notes, setNotes] = useState(item.notes ?? "");
|
||||
|
||||
@@ -42,11 +43,13 @@ export function EditStockItemDialog({ item }: { item: StockItem }) {
|
||||
name,
|
||||
category,
|
||||
unit,
|
||||
quantity: Number(quantity),
|
||||
minThreshold: minThreshold ? Number(minThreshold) : undefined,
|
||||
notes: notes || undefined,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ["stock-items"] });
|
||||
void queryClient.invalidateQueries({ queryKey: ["stock-movements"] });
|
||||
setOpen(false);
|
||||
},
|
||||
onError: () => toast.error("Lagerartikel konnte nicht gespeichert werden"),
|
||||
@@ -108,6 +111,22 @@ export function EditStockItemDialog({ item }: { item: StockItem }) {
|
||||
onChange={(event) => setUnit(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="item-edit-quantity">Bestand</Label>
|
||||
<Input
|
||||
id="item-edit-quantity"
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
min={0}
|
||||
required
|
||||
value={quantity}
|
||||
onChange={(event) => setQuantity(event.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Eine Korrektur wird als Bestandskorrektur gebucht und bleibt in der
|
||||
Bewegungshistorie sichtbar.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="item-edit-min-threshold">Mindestbestand</Label>
|
||||
<Input
|
||||
|
||||
Reference in new issue
Block a user