58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { DataTable } from "mantine-datatable";
|
|
import { IconChevronRight, IconSpace } from "@tabler/icons-react";
|
|
import clsx from "clsx";
|
|
import classes from "../../../OrganizationalStructureTab/components/DepartmentsTree/DepartmentsTree.module.css";
|
|
import { useState } from "react";
|
|
import { PlaceSchema } from "../../../../../../client";
|
|
import PlaceActions from "./PlaceActions.tsx";
|
|
|
|
type Props = {
|
|
place: PlaceSchema;
|
|
}
|
|
|
|
const Place = ({ place }: Props) => {
|
|
const [placeTypeIds, setPlaceTypeIds] = useState<number[]>([]);
|
|
|
|
return (
|
|
<DataTable
|
|
noHeader
|
|
columns={[
|
|
{
|
|
accessor: "name",
|
|
title: "Место",
|
|
noWrap: true,
|
|
render: ({ id, number, placeType }) => (
|
|
<>
|
|
<IconChevronRight
|
|
className={clsx(classes.icon, classes.expandIcon, {
|
|
[classes.expandIconRotated]: placeTypeIds?.includes(id),
|
|
})}
|
|
/>
|
|
<IconSpace className={classes.icon} />
|
|
<span>{placeType.name} {number}</span>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
accessor: "actions",
|
|
title: "",
|
|
width: "0%",
|
|
render: (place) => (
|
|
<PlaceActions place={place} />
|
|
),
|
|
},
|
|
]}
|
|
records={place.children?.sort((a, b) => a.id - b.id)}
|
|
rowExpansion={{
|
|
allowMultiple: true,
|
|
expanded: { recordIds: placeTypeIds, onRecordIdsChange: setPlaceTypeIds },
|
|
content: ({ record }) => (
|
|
<Place place={record} />
|
|
),
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Place;
|