77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import { BrowserLink } from "@metis/core/client";
|
|
import { EntityListStatus } from "@repo/rdx-ui/components/entity-list-status";
|
|
import { FormSectionTitle } from "@repo/rdx-ui/components/form-section-title";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { MailboxUseEditorDialog } from "../../../mailbox-uses";
|
|
import { useCompanyListState } from "../../../shared/hooks/use-company-list-state";
|
|
import { useMailboxRelationsController } from "../controllers";
|
|
import type { MailboxRelationsProps } from "../types";
|
|
|
|
export function MailboxRelations(props: MailboxRelationsProps) {
|
|
const { company, mailboxId } = props;
|
|
const { editor, setEditor, query, uses, edited } = useMailboxRelationsController(props);
|
|
const { t } = useTranslation("companies");
|
|
const { state, denied } = useCompanyListState([query]);
|
|
const available = state.status !== "loading" && state.status !== "unavailable";
|
|
|
|
return (
|
|
<section className="space-y-3 border-t pt-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<FormSectionTitle layout="inline">{t("people")}</FormSectionTitle>
|
|
<Button disabled={!available} onClick={() => setEditor("new")} size="sm" variant="outline">
|
|
{t("mailbox.linkPerson")}
|
|
</Button>
|
|
</div>
|
|
<EntityListStatus
|
|
onRetry={denied ? undefined : () => query.refetch()}
|
|
retryLabel={t("retry")}
|
|
state={state}
|
|
/>
|
|
<ul className="space-y-2">
|
|
{available &&
|
|
uses.map((item) => (
|
|
<li
|
|
className="flex flex-wrap items-center justify-between gap-3 text-sm"
|
|
data-entity-id={item.id}
|
|
key={item.id}
|
|
>
|
|
<span>
|
|
{company.people.find((person) => person.id === item.values.personId) ? (
|
|
<BrowserLink href={`/companies/${company.id}/people/${item.values.personId}`}>
|
|
{company.people.find((person) => person.id === item.values.personId)?.name}
|
|
</BrowserLink>
|
|
) : (
|
|
"—"
|
|
)}{" "}
|
|
· {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>
|
|
{available && uses.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">{t("mailbox.noUses")}</p>
|
|
)}
|
|
{editor && (
|
|
<MailboxUseEditorDialog
|
|
company={company}
|
|
mailboxId={mailboxId}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setEditor(undefined);
|
|
}
|
|
}}
|
|
onSaved={() => setEditor(undefined)}
|
|
use={edited}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|