115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import type { ComponentType } from "react";
|
|
import { useEffect, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { AccessFieldsDTO, AccessResponseDTO, PersonDTO } from "../../common";
|
|
import { PersonForm } from "../components/person-form";
|
|
|
|
import { accessApi, accessKeys } from "./access-api";
|
|
import { createLabels } from "./access-fields";
|
|
import type { AccessFormProps } from "./access-form-props";
|
|
import { QuickCreateDialog } from "./quick-create-dialog";
|
|
import type { QuickCreatePlan } from "./quick-create-plan";
|
|
|
|
export function AccessQuickEditor({
|
|
plan,
|
|
scope,
|
|
data,
|
|
people,
|
|
csrfToken,
|
|
onCreated,
|
|
onClose,
|
|
nestedAccessForm: NestedAccessForm,
|
|
}: {
|
|
plan: QuickCreatePlan;
|
|
scope: string;
|
|
data: AccessResponseDTO;
|
|
people: readonly PersonDTO[];
|
|
csrfToken: string;
|
|
onCreated: (id?: string, values?: AccessFieldsDTO) => void;
|
|
onClose: () => void;
|
|
nestedAccessForm: ComponentType<AccessFormProps>;
|
|
}) {
|
|
const { t } = useTranslation("access");
|
|
const active = useRef(true);
|
|
useEffect(() => {
|
|
active.current = true;
|
|
return () => {
|
|
active.current = false;
|
|
};
|
|
}, []);
|
|
const close = () => {
|
|
active.current = false;
|
|
onClose();
|
|
};
|
|
const created = (id?: string, values?: AccessFieldsDTO) => {
|
|
if (active.current) {
|
|
onCreated(id, values);
|
|
}
|
|
};
|
|
const globalQuery = useQuery({
|
|
queryKey: accessKeys.scope("global"),
|
|
queryFn: () => accessApi.request("global"),
|
|
enabled: plan.type === "access" && plan.scope === "global" && scope !== "global",
|
|
});
|
|
if (plan.type === "simple") {
|
|
return (
|
|
<QuickCreateDialog
|
|
csrfToken={csrfToken}
|
|
items={data.items}
|
|
onClose={close}
|
|
onCreated={created}
|
|
scope={scope}
|
|
target={plan.target}
|
|
/>
|
|
);
|
|
}
|
|
const title = plan.type === "person" ? "quickAddPerson" : createLabels[plan.kind];
|
|
const childData = plan.type === "access" && plan.scope !== scope ? globalQuery.data : data;
|
|
return (
|
|
<FormDialog
|
|
cancelLabel={t("cancel")}
|
|
formActions
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
close();
|
|
}
|
|
}}
|
|
open
|
|
title={t(title)}
|
|
wide
|
|
>
|
|
{plan.type === "person" ? (
|
|
<>
|
|
<p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
|
|
<PersonForm companyId={scope} csrfToken={csrfToken} onSaved={created} requireActive />
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t(plan.scope === "global" ? "quickGlobalNotice" : "quickCreateNotice")}
|
|
</p>
|
|
{childData ? (
|
|
<NestedAccessForm
|
|
allowQuickCreate={false}
|
|
csrfToken={csrfToken}
|
|
data={childData}
|
|
initialValues={plan.defaults}
|
|
kind={plan.kind}
|
|
lockedFields={plan.locked}
|
|
onSaved={created}
|
|
people={people}
|
|
scope={plan.scope}
|
|
/>
|
|
) : (
|
|
<p role="status">{t("loading")}</p>
|
|
)}
|
|
{globalQuery.isError && <p role="alert">{t("errors.INTERNAL_ERROR")}</p>}
|
|
</>
|
|
)}
|
|
</FormDialog>
|
|
);
|
|
}
|