metis-desk/modules/companies/src/web/components/configuration-quick-editor.tsx

import { AssetForm, catalogApi, catalogKeys } from "@metis/assets/client";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";

import type { AccessResponseDTO, CompanyDTO } from "../../common";
import { AccessForm } from "../access/access-form";
import { PersonForm } from "../components/person-form";
import { MailFeedback } from "../mail/mail-feedback";
export type ConfigurationQuickKind = "person" | "account" | "asset" | "authorization";

const titles = {
  person: "newPerson",
  account: "newAccount",
  asset: "newAsset",
  authorization: "authorize",
} as const;
export function ConfigurationQuickEditor({
  kind,
  title,
  company,
  csrfToken,
  values,
  data,
  onCreated,
  onClose,
}: {
  kind: ConfigurationQuickKind;
  title?: string;
  company: CompanyDTO;
  csrfToken: string;
  values: Readonly<{ personId: string; accountId: string }>;
  data: AccessResponseDTO | undefined;
  onCreated: (field: "personId" | "accountId" | "assetId", id?: string) => void;
  onClose: () => void;
}) {
  const { t } = useTranslation("companies");
  const active = useRef(true);
  useEffect(() => {
    active.current = true;
    return () => {
      active.current = false;
    };
  }, []);
  const created = (field: "personId" | "accountId" | "assetId", id?: string) => {
    if (active.current) {
      onCreated(field, id);
    }
  };
  const close = () => {
    active.current = false;
    onClose();
  };
  const catalog = useQuery({
    queryKey: catalogKeys.scope(company.id),
    queryFn: () => catalogApi.get(company.id),
    enabled: kind === "asset",
  });
  return (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={(open) => {
        if (!open) {
          close();
        }
      }}
      open
      title={title ?? t(`mail.${titles[kind]}`)}
      wide
    >
      {kind === "person" && (
        <PersonForm
          companyId={company.id}
          csrfToken={csrfToken}
          onSaved={(id) => created("personId", id)}
          requireActive
        />
      )}
      {(kind === "account" || kind === "authorization") && data && (
        <AccessForm
          allowQuickCreate={false}
          csrfToken={csrfToken}
          data={data}
          initialValues={
            kind === "authorization"
              ? { personId: values.personId, accountId: values.accountId }
              : {}
          }
          kind={kind === "account" ? "account" : "account_person"}
          lockedFields={kind === "authorization" ? ["personId", "accountId"] : []}
          onSaved={(id) => {
            if (kind === "account") {
              created("accountId", id);
            } else {
              close();
            }
          }}
          people={company.people}
          scope={company.id}
        />
      )}
      {kind === "asset" &&
        (catalog.data ? (
          <AssetForm
            allowQuickCreate={false}
            companyId={company.id}
            csrfToken={csrfToken}
            items={catalog.data.items}
            lookups={{
              sites: company.sites,
              people: company.people,
              onCreatePerson: () => undefined,
              onCreateSite: () => undefined,
            }}
            onSaved={(id) => created("assetId", id)}
          />
        ) : (
          <>
            <p role="status">{t("loading")}</p>
            <MailFeedback error={catalog.error} />
          </>
        ))}
    </FormDialog>
  );
}