86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { clientUpdateMutation } from "@/lib/queries";
|
|
import type { Client, Group } from "@/lib/types";
|
|
import InlineError from "@/lib/InlineError";
|
|
import { buttonClass, primaryButtonClass, smallInputClass } from "@/ui/classes";
|
|
import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
|
|
|
|
interface Props {
|
|
client: Client;
|
|
groups: Group[];
|
|
onClose: () => void;
|
|
}
|
|
|
|
const dialogInputClass = `mt-1 w-full ${smallInputClass}`;
|
|
|
|
export default function ClientEditDialog({ client, groups, onClose }: Props) {
|
|
const queryClient = useQueryClient();
|
|
const mutation = useMutation(clientUpdateMutation(queryClient));
|
|
const [name, setName] = useState(client.name);
|
|
const [groupId, setGroupId] = useState(client.group_id);
|
|
const readOnly = useReadOnlyConfig();
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={`Edit client ${client.ip}`}
|
|
className="w-full max-w-md rounded-lg border border-zinc-200 bg-white p-6 shadow-lg dark:border-zinc-700 dark:bg-zinc-900"
|
|
>
|
|
<h2 className="text-lg font-semibold">Edit {client.ip}</h2>
|
|
<form
|
|
className="mt-4 space-y-4"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
mutation.mutate(
|
|
{ id: client.id, edit: { name: name.trim(), group_id: groupId } },
|
|
{ onSuccess: onClose },
|
|
);
|
|
}}
|
|
>
|
|
<label className="block text-sm font-medium">
|
|
Name
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
className={dialogInputClass}
|
|
autoFocus
|
|
/>
|
|
</label>
|
|
<label className="block text-sm font-medium">
|
|
Group
|
|
<select
|
|
value={String(groupId)}
|
|
onChange={(event) => setGroupId(Number(event.target.value))}
|
|
className={dialogInputClass}
|
|
>
|
|
{groups.map((group) => (
|
|
<option key={group.id} value={String(group.id)}>
|
|
{group.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<InlineError error={mutation.error} />
|
|
<div className="flex justify-end gap-2">
|
|
<button type="button" onClick={onClose} className={buttonClass}>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={mutation.isPending || readOnly}
|
|
title={readOnly ? READ_ONLY_HINT : undefined}
|
|
className={primaryButtonClass}
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|