101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import {
|
|
EntityAction,
|
|
EntityListHeader,
|
|
EntityRowActions,
|
|
EntityStatus,
|
|
EntityTable,
|
|
} from "@repo/shadcn-ui/components/entity-list";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CompanyDTO } from "../../common";
|
|
|
|
import { DepartmentEditorDialog } from "./department-editor-dialog";
|
|
|
|
export function DepartmentSection({
|
|
company,
|
|
csrfToken,
|
|
}: {
|
|
company: CompanyDTO;
|
|
csrfToken: string;
|
|
}) {
|
|
const { t, i18n } = useTranslation("companies");
|
|
const [editor, setEditor] = useState<string | undefined>();
|
|
const selected = company.departments.find((item) => item.id === editor);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<EntityListHeader
|
|
actions={<Button onClick={() => setEditor("new")}>{t("newDepartment")}</Button>}
|
|
locale={i18n.language}
|
|
title={t("departments")}
|
|
/>
|
|
<EntityTable
|
|
columns={[
|
|
{
|
|
id: "name",
|
|
label: t("name"),
|
|
value: (item) => item.name,
|
|
hideable: false,
|
|
render: (item) => <>{item.name}</>,
|
|
},
|
|
{
|
|
id: "state",
|
|
label: t("status"),
|
|
value: (item) => t(item.active ? "active" : "inactive"),
|
|
render: (item) => (
|
|
<EntityStatus active={item.active}>
|
|
{t(item.active ? "active" : "inactive")}
|
|
</EntityStatus>
|
|
),
|
|
},
|
|
{
|
|
id: "people",
|
|
label: t("people"),
|
|
value: (item) =>
|
|
company.assignments.filter(
|
|
(entry) => entry.departmentId === item.id && entry.endDate === null
|
|
).length,
|
|
render: (item) => (
|
|
<>
|
|
{
|
|
company.assignments.filter(
|
|
(entry) => entry.departmentId === item.id && entry.endDate === null
|
|
).length
|
|
}
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "actions",
|
|
label: t("actions"),
|
|
hideable: false,
|
|
render: (item) => (
|
|
<EntityRowActions label={t("actions")}>
|
|
<EntityAction onClick={() => setEditor(item.id)}>{t("edit")}</EntityAction>
|
|
</EntityRowActions>
|
|
),
|
|
},
|
|
]}
|
|
emptyMessage={t("noDepartments")}
|
|
items={company.departments}
|
|
locale={i18n.language}
|
|
title={t("departments")}
|
|
/>
|
|
<DepartmentEditorDialog
|
|
companyId={company.id}
|
|
csrfToken={csrfToken}
|
|
department={selected}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setEditor(undefined);
|
|
}
|
|
}}
|
|
onSaved={() => setEditor(undefined)}
|
|
open={editor !== undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|