106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
import { Button } from "@minmon/ui/components/button";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { toast } from "sonner";
|
|
import { FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
|
|
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
|
|
|
export const Route = createFileRoute("/dashboard/domains/new")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
type DomainFormValues = {
|
|
serviceId: string;
|
|
name: string;
|
|
expectedServerIp: string;
|
|
remarks: string;
|
|
};
|
|
|
|
function RouteComponent() {
|
|
const navigate = useNavigate();
|
|
const services = useQuery(trpc.domains.serviceOptions.queryOptions());
|
|
const createDomain = useMutation({
|
|
mutationFn: async (values: DomainFormValues) =>
|
|
trpcClient.domains.create.mutate({
|
|
serviceId: values.serviceId,
|
|
name: values.name,
|
|
expectedServerIp: values.expectedServerIp || undefined,
|
|
remarks: values.remarks || null,
|
|
}),
|
|
onSuccess: async (created) => {
|
|
toast.success("Domain created");
|
|
await queryClient.invalidateQueries();
|
|
navigate({ to: "/dashboard/domains/$domainId", params: { domainId: created.id } });
|
|
},
|
|
onError: (error) => toast.error(error.message),
|
|
});
|
|
|
|
const defaultValues: DomainFormValues = {
|
|
serviceId: "",
|
|
name: "",
|
|
expectedServerIp: "",
|
|
remarks: "",
|
|
};
|
|
|
|
const form = useForm({
|
|
defaultValues,
|
|
onSubmit: async ({ value }) => {
|
|
await createDomain.mutateAsync(value);
|
|
},
|
|
});
|
|
|
|
if (services.isLoading) {
|
|
return <QueryStateCard title="Loading services" description="Fetching service options for the domain form." />;
|
|
}
|
|
|
|
if (services.isError || !services.data) {
|
|
return <QueryStateCard title="Service options unavailable" description="Create a service before adding domains." />;
|
|
}
|
|
|
|
return (
|
|
<PageSection title="Add domain" description="Create a domain or subdomain attached to a service.">
|
|
<form
|
|
className="grid gap-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
form.handleSubmit();
|
|
}}
|
|
>
|
|
<FormCard
|
|
title="Domain details"
|
|
description="Expected server IP will default from the selected service's server when omitted."
|
|
footer={
|
|
<>
|
|
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/domains" })}>
|
|
Cancel
|
|
</Button>
|
|
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
|
|
{({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save domain"}</Button>}
|
|
</form.Subscribe>
|
|
</>
|
|
}
|
|
>
|
|
<form.Field name="serviceId">
|
|
{(field) => (
|
|
<TextField
|
|
label="Service ID"
|
|
name={field.name}
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={(e) => field.handleChange(e.target.value)}
|
|
description={`Available: ${services.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
|
|
/>
|
|
)}
|
|
</form.Field>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<form.Field name="name">{(field) => <TextField label="Domain name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder="dashboard.minmon.dev" />}</form.Field>
|
|
<form.Field name="expectedServerIp">{(field) => <TextField label="Expected server IP" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder="203.0.113.10" />}</form.Field>
|
|
</div>
|
|
<form.Field name="remarks">{(field) => <TextAreaField label="Remarks" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
|
</FormCard>
|
|
</form>
|
|
</PageSection>
|
|
);
|
|
}
|