79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
|
import { Button } from "@repo/shadcn-ui/components/button";
|
||
|
|
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import type { CompanyDTO } from "../../common";
|
||
|
|
|
||
|
|
import { MailFeedback } from "./mail-feedback";
|
||
|
|
import { mailboxApi, mailboxKeys } from "./mailbox-api";
|
||
|
|
import { MailboxUseForm } from "./mailbox-use-form";
|
||
|
|
export function MailboxRelations({
|
||
|
|
company,
|
||
|
|
csrfToken,
|
||
|
|
mailboxId,
|
||
|
|
}: {
|
||
|
|
company: CompanyDTO;
|
||
|
|
csrfToken: string;
|
||
|
|
mailboxId: string;
|
||
|
|
}) {
|
||
|
|
const { t } = useTranslation("companies");
|
||
|
|
const [editor, setEditor] = useState<string>();
|
||
|
|
const query = useQuery({
|
||
|
|
queryKey: mailboxKeys.company(company.id),
|
||
|
|
queryFn: () => mailboxApi.request(company.id),
|
||
|
|
});
|
||
|
|
const uses = query.data?.uses.filter((item) => item.values.mailboxId === mailboxId) ?? [];
|
||
|
|
const edited = uses.find((item) => item.id === editor);
|
||
|
|
return (
|
||
|
|
<section className="space-y-3 border-t pt-4">
|
||
|
|
<div className="flex items-center justify-between gap-3">
|
||
|
|
<h3 className="font-medium">{t("people")}</h3>
|
||
|
|
<Button onClick={() => setEditor("new")} size="sm" variant="outline">
|
||
|
|
{t("mailbox.linkPerson")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<MailFeedback error={query.error} />
|
||
|
|
<ul className="space-y-2">
|
||
|
|
{uses.map((item) => (
|
||
|
|
<li className="flex items-center justify-between gap-3 text-sm" key={item.id}>
|
||
|
|
<span>
|
||
|
|
{company.people.find((person) => person.id === item.values.personId)?.name ??
|
||
|
|
t("people")}{" "}
|
||
|
|
· {item.values.startDate} → {item.values.endDate ?? t("mailbox.openPeriod")}
|
||
|
|
</span>
|
||
|
|
{!item.values.endDate && (
|
||
|
|
<Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
|
||
|
|
{t("mailbox.closeUse")}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
{editor && (
|
||
|
|
<FormDialog
|
||
|
|
cancelLabel={t("cancel")}
|
||
|
|
formActions
|
||
|
|
onOpenChange={(open) => {
|
||
|
|
if (!open) {
|
||
|
|
setEditor(undefined);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
open
|
||
|
|
title={t(edited ? "mailbox.closeUse" : "mailbox.linkPerson")}
|
||
|
|
>
|
||
|
|
<MailboxUseForm
|
||
|
|
allowQuickCreate={false}
|
||
|
|
company={company}
|
||
|
|
csrfToken={csrfToken}
|
||
|
|
initialMailboxId={mailboxId}
|
||
|
|
onSaved={() => setEditor(undefined)}
|
||
|
|
use={edited}
|
||
|
|
/>
|
||
|
|
</FormDialog>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|