105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { clientUpdateMutation } from "@/lib/queries";
|
|
import type { Client, Group } from "@/lib/types";
|
|
import InlineError from "@/lib/InlineError";
|
|
import Dialog from "@/ui/Dialog";
|
|
import Select from "@/ui/Select";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
|
|
|
|
interface Props {
|
|
client: Client;
|
|
groups: Group[];
|
|
onClose: () => void;
|
|
}
|
|
|
|
const styles = stylex.create({
|
|
heading: {
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.75rem",
|
|
fontWeight: 600,
|
|
},
|
|
form: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
marginTop: "1rem",
|
|
},
|
|
fieldLabel: {
|
|
display: "block",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
fontWeight: 500,
|
|
},
|
|
dialogInput: {
|
|
marginTop: "0.25rem",
|
|
width: "100%",
|
|
},
|
|
actions: {
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
gap: "0.5rem",
|
|
},
|
|
});
|
|
|
|
export default function ClientEditDialog({ client, groups, onClose }: Props) {
|
|
const queryClient = useQueryClient();
|
|
const mutation = useMutation(clientUpdateMutation(queryClient));
|
|
const readOnly = useReadOnlyConfig();
|
|
// Adopting the learned name as a typed one is the natural gesture, but only
|
|
// where the save can land: under file authority the PUT answers 403, and the
|
|
// file's declared name is the one that wins.
|
|
const [name, setName] = useState(client.name === "" && !readOnly ? client.learned_name : client.name);
|
|
const [groupId, setGroupId] = useState(client.group_id);
|
|
|
|
return (
|
|
<Dialog label={`Edit client ${client.ip}`} isOpen onClose={onClose}>
|
|
<h2 {...stylex.props(styles.heading)}>Edit {client.ip}</h2>
|
|
<form
|
|
{...stylex.props(styles.form)}
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
mutation.mutate(
|
|
{ id: client.id, edit: { name: name.trim(), group_id: groupId } },
|
|
{ onSuccess: onClose },
|
|
);
|
|
}}
|
|
>
|
|
<label {...stylex.props(styles.fieldLabel)}>
|
|
Name
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
autoFocus
|
|
{...stylex.props(shared.smallInput, styles.dialogInput, shared.focusRing)}
|
|
/>
|
|
</label>
|
|
<Select
|
|
label="Group"
|
|
variant="compactField"
|
|
value={String(groupId)}
|
|
onChange={(value) => setGroupId(Number(value))}
|
|
options={groups.map((group) => ({ value: String(group.id), label: group.name }))}
|
|
/>
|
|
<InlineError error={mutation.error} />
|
|
<div {...stylex.props(styles.actions)}>
|
|
<button type="button" onClick={onClose} {...stylex.props(shared.button, shared.focusRing)}>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={mutation.isPending || readOnly}
|
|
title={readOnly ? READ_ONLY_HINT : undefined}
|
|
{...stylex.props(shared.primaryButton, shared.focusRing)}
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
);
|
|
}
|