300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
import {
|
|
EntityAction,
|
|
EntityListHeader,
|
|
EntityRowActions,
|
|
EntityTable,
|
|
} from "@repo/rdx-ui/components/entity-list";
|
|
import { PhoneLink } from "@repo/rdx-ui/components/phone-link";
|
|
import {
|
|
BriefcaseIcon,
|
|
ChevronLeftIcon,
|
|
MailIcon,
|
|
PencilIcon,
|
|
PhoneIcon,
|
|
} from "@repo/rdx-ui/lib/icons";
|
|
import { createTextMatcher } from "@repo/rdx-ui/lib/text-search";
|
|
import { AvatarBadge } from "@repo/shadcn-ui/components/avatar";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CompanyDTO, PersonDTO } from "../../../../common";
|
|
import { AssignmentEditorDialog, AssignmentHistoryDialog } from "../../../assignments";
|
|
import { deleteAssignment } from "../../../assignments/shared/api";
|
|
import { useDetailTableContext } from "../../../shared/hooks/use-detail-table-context";
|
|
import { PersonAvatar } from "../../shared";
|
|
import { deletePerson } from "../../shared/api";
|
|
|
|
import { CurrentWorkstations } from "./current-workstations";
|
|
|
|
export function PersonDetails({
|
|
company,
|
|
person,
|
|
onBack,
|
|
onEdit,
|
|
}: {
|
|
company: CompanyDTO;
|
|
person: PersonDTO;
|
|
onBack: () => void;
|
|
onEdit: () => void;
|
|
}) {
|
|
const { t, i18n } = useTranslation("companies");
|
|
const [editor, setEditor] = useState<string | undefined>();
|
|
const [historyId, setHistoryId] = useState<string | undefined>();
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [deletingAssignment, setDeletingAssignment] = useState<string | undefined>();
|
|
const assignments = company.assignments.filter((item) => item.personId === person.id);
|
|
const tableContext = useDetailTableContext(
|
|
`/companies/${company.id}/people/${person.id}`,
|
|
"assignments",
|
|
true
|
|
);
|
|
const selected = assignments.find((item) => item.id === editor);
|
|
const history = assignments.find((item) => item.id === historyId);
|
|
|
|
const departmentName = (id: string) =>
|
|
company.departments.find((item) => item.id === id)?.name ?? "—";
|
|
|
|
const matches = createTextMatcher(tableContext.search);
|
|
const visible = assignments.filter((item) =>
|
|
[
|
|
departmentName(item.departmentId),
|
|
item.position,
|
|
item.startDate,
|
|
item.endDate,
|
|
item.isPrimary,
|
|
].some(matches)
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<button
|
|
className="app-link inline-flex cursor-pointer items-center gap-1 text-sm font-medium"
|
|
onClick={onBack}
|
|
type="button"
|
|
>
|
|
<ChevronLeftIcon aria-hidden="true" className="size-4" />
|
|
{t("backToPeople")}
|
|
</button>
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div className="flex min-w-0 flex-1 items-start gap-4">
|
|
<PersonAvatar
|
|
className="size-14"
|
|
companyId={company.id}
|
|
name={person.name}
|
|
personId={person.id}
|
|
photoVersion={person.photoVersion}
|
|
>
|
|
<AvatarBadge
|
|
className={person.active ? "bg-emerald-500" : "bg-muted-foreground"}
|
|
title={t(person.active ? "activePerson" : "inactivePerson")}
|
|
>
|
|
<span className="sr-only">
|
|
{t(person.active ? "activePerson" : "inactivePerson")}
|
|
</span>
|
|
</AvatarBadge>
|
|
</PersonAvatar>
|
|
<div className="min-w-0 space-y-2">
|
|
<h2 className="break-words text-2xl font-semibold">{person.name}</h2>
|
|
<div className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground">
|
|
<span className="inline-flex min-w-0 items-center gap-2">
|
|
<BriefcaseIcon aria-hidden="true" className="size-4 shrink-0" />
|
|
<span className="sr-only">{t("generalPosition")}: </span>
|
|
<span className="break-words">{person.position ?? "—"}</span>
|
|
</span>
|
|
<span className="inline-flex min-w-0 items-center gap-2">
|
|
<MailIcon aria-hidden="true" className="size-4 shrink-0" />
|
|
<span className="sr-only">{t("email")}: </span>
|
|
{person.email ? (
|
|
<a className="app-link break-all" href={`mailto:${person.email}`}>
|
|
{person.email}
|
|
</a>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</span>
|
|
<span className="inline-flex min-w-0 items-center gap-2">
|
|
<span
|
|
className="group/contact"
|
|
data-contact={person.isContact}
|
|
title={person.isContact ? t("isContact") : undefined}
|
|
>
|
|
<PhoneIcon
|
|
aria-hidden="true"
|
|
className="size-4 shrink-0 group-data-[contact=true]/contact:text-primary"
|
|
/>
|
|
</span>
|
|
{person.phone ? <PhoneLink label={t("phone")} phone={person.phone} /> : "—"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button onClick={onEdit} variant="outline">
|
|
{t("editPerson")}
|
|
</Button>
|
|
<Button
|
|
disabled={deleting}
|
|
onClick={async () => {
|
|
if (!window.confirm(t("deletePersonConfirm", { name: person.name }))) {
|
|
return;
|
|
}
|
|
setDeleting(true);
|
|
try {
|
|
await deletePerson(company.id, person.id);
|
|
onBack();
|
|
} catch {
|
|
window.alert(t("deletePersonError"));
|
|
} finally {
|
|
setDeleting(false);
|
|
}
|
|
}}
|
|
variant="destructive"
|
|
>
|
|
{t(deleting ? "deletingPerson" : "deletePerson")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{!person.active && assignments.some((item) => item.endDate === null) && (
|
|
<p className="rounded-md border p-3" role="status">
|
|
{t("inactiveMembershipWarning")}
|
|
</p>
|
|
)}
|
|
<CurrentWorkstations company={company} personId={person.id} />
|
|
<Card>
|
|
<CardContent className="space-y-4 pt-6">
|
|
<EntityListHeader
|
|
actions={
|
|
<Button disabled={!person.active} onClick={() => setEditor("new")}>
|
|
<BriefcaseIcon aria-hidden="true" />
|
|
{t("addAssignment")}
|
|
</Button>
|
|
}
|
|
icon={<BriefcaseIcon />}
|
|
locale={i18n.language}
|
|
title={t("departmentAssignments")}
|
|
/>
|
|
<EntityTable
|
|
columns={[
|
|
{
|
|
id: "department",
|
|
label: t("department"),
|
|
value: (item) => departmentName(item.departmentId),
|
|
hideable: false,
|
|
render: (item) => (
|
|
<p>
|
|
<span className="font-medium">{departmentName(item.departmentId)}</span>
|
|
{company.departments.find((entry) => entry.id === item.departmentId)?.active ===
|
|
false && <span className="text-xs">{t("inactiveDepartment")}</span>}
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
id: "position",
|
|
label: t("position"),
|
|
value: (item) => item.position,
|
|
render: (item) => <>{item.position ?? "—"}</>,
|
|
},
|
|
{
|
|
id: "start",
|
|
label: t("startDate"),
|
|
value: (item) => item.startDate,
|
|
render: (item) => <>{item.startDate}</>,
|
|
},
|
|
{
|
|
id: "end",
|
|
label: t("endDateColumn"),
|
|
value: (item) => item.endDate,
|
|
render: (item) => <>{item.endDate ?? "—"}</>,
|
|
},
|
|
{
|
|
id: "primary",
|
|
label: t("primary"),
|
|
value: (item) => item.isPrimary,
|
|
render: (item) => <>{item.isPrimary ? t("yes") : "—"}</>,
|
|
},
|
|
{
|
|
id: "actions",
|
|
label: t("actions"),
|
|
hideable: false,
|
|
render: (item) => (
|
|
<EntityRowActions
|
|
label={t("actions")}
|
|
primaryAction={{
|
|
label: t("edit"),
|
|
icon: <PencilIcon aria-hidden="true" />,
|
|
onClick: () => setEditor(item.id),
|
|
}}
|
|
>
|
|
<EntityAction onClick={() => setHistoryId(item.id)}>
|
|
{t("history")}
|
|
</EntityAction>
|
|
<EntityAction
|
|
onClick={async () => {
|
|
if (
|
|
!window.confirm(
|
|
t("deleteAssignmentConfirm", {
|
|
name: departmentName(item.departmentId),
|
|
})
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
setDeletingAssignment(item.id);
|
|
try {
|
|
await deleteAssignment(company.id, person.id, item.id);
|
|
window.location.reload();
|
|
} catch {
|
|
window.alert(t("deleteAssignmentError"));
|
|
} finally {
|
|
setDeletingAssignment(undefined);
|
|
}
|
|
}}
|
|
>
|
|
{t(
|
|
deletingAssignment === item.id ? "deletingAssignment" : "deleteAssignment"
|
|
)}
|
|
</EntityAction>
|
|
</EntityRowActions>
|
|
),
|
|
},
|
|
]}
|
|
emptyMessage={t("noAssignments")}
|
|
items={visible}
|
|
locale={i18n.language}
|
|
navigation={tableContext.navigation}
|
|
onSearchChange={tableContext.onSearchChange}
|
|
search={tableContext.search}
|
|
title={t("departmentAssignments")}
|
|
/>
|
|
{!company.departments.some((item) => item.active) && (
|
|
<p className="text-sm text-muted-foreground">{t("createDepartmentFirst")}</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
<AssignmentEditorDialog
|
|
company={company}
|
|
editor={editor}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setEditor(undefined);
|
|
}
|
|
}}
|
|
onSaved={() => setEditor(undefined)}
|
|
personId={person.id}
|
|
selected={selected}
|
|
/>
|
|
<AssignmentHistoryDialog
|
|
departmentName={departmentName}
|
|
history={history}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setHistoryId(undefined);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|