93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
|
|
import { FormActions } from "@repo/shadcn-ui/components/form-dialog";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
import { Label } from "@repo/shadcn-ui/components/label";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useEffect, useId, useRef } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { DepartmentDTO, DepartmentRequestDTO } from "../../common";
|
|
import { DepartmentRequestSchema } from "../../common";
|
|
import { EntityHelp } from "../access/entity-help";
|
|
import { companyApi, companyKeys } from "../api/company-api";
|
|
|
|
import { CompanyFeedback } from "./company-feedback";
|
|
|
|
export function DepartmentForm({
|
|
companyId,
|
|
department,
|
|
csrfToken,
|
|
onSaved,
|
|
requireActive = false,
|
|
}: {
|
|
companyId: string;
|
|
department?: DepartmentDTO | undefined;
|
|
csrfToken: string;
|
|
onSaved: (id: string) => void;
|
|
requireActive?: boolean;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
const id = useId();
|
|
const client = useQueryClient();
|
|
const mounted = useRef(true);
|
|
useEffect(() => {
|
|
mounted.current = true;
|
|
return () => {
|
|
mounted.current = false;
|
|
};
|
|
}, []);
|
|
const form = useForm<DepartmentRequestDTO>({
|
|
resolver: zodResolver(DepartmentRequestSchema),
|
|
defaultValues: { name: department?.name ?? "", active: department?.active ?? true },
|
|
});
|
|
const mutation = useMutation({
|
|
mutationFn: (values: DepartmentRequestDTO) =>
|
|
companyApi.department(companyId, department?.id, values, csrfToken),
|
|
onSuccess: (response) => {
|
|
client.setQueryData(companyKeys.detail(companyId), response);
|
|
const saved = department
|
|
? response.company.departments.find((item) => item.id === department.id)
|
|
: response.company.departments.at(-1);
|
|
if (saved && mounted.current) {
|
|
onSaved(saved.id);
|
|
}
|
|
},
|
|
});
|
|
return (
|
|
<form className="space-y-4" onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor={id}>{t("name")}</Label>
|
|
<Input id={id} maxLength={100} required {...form.register("name")} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={form.watch("active")}
|
|
disabled={requireActive}
|
|
id={`${id}-active`}
|
|
onCheckedChange={(checked) =>
|
|
form.setValue("active", checked === true, { shouldDirty: true })
|
|
}
|
|
/>
|
|
<Label htmlFor={`${id}-active`}>{t("activeDepartment")}</Label>
|
|
</div>
|
|
{department && (
|
|
<p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
|
|
)}
|
|
<CompanyFeedback
|
|
error={mutation.error}
|
|
invalid={Object.keys(form.formState.errors).length > 0}
|
|
/>
|
|
|
|
<EntityHelp kind="department" />
|
|
<FormActions>
|
|
<Button disabled={mutation.isPending} type="submit">
|
|
{t(mutation.isPending ? "saving" : "save")}
|
|
</Button>
|
|
</FormActions>
|
|
</form>
|
|
);
|
|
}
|