99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import { useMemo } from "react";
|
||
import {
|
||
IconChevronDown,
|
||
IconChevronsDown,
|
||
IconChevronsRight,
|
||
IconChevronsUp,
|
||
IconChevronUp,
|
||
} from "@tabler/icons-react";
|
||
import { DataTableColumn } from "mantine-datatable";
|
||
import { Box, Center, Group, Text } from "@mantine/core";
|
||
import { GroupedServices } from "@/app/services/components/shared/ServicesTable/types/GroupedServices";
|
||
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
|
||
import useCategoriesActions from "@/app/services/hooks/useCategoriesActions";
|
||
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
|
||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||
|
||
type Props = {
|
||
expandedCategoryIds: number[];
|
||
setExpandedCategoryIds: (ids: number[]) => void;
|
||
};
|
||
|
||
const useServicesOuterTableColumns = ({
|
||
expandedCategoryIds,
|
||
setExpandedCategoryIds,
|
||
}: Props) => {
|
||
const isMobile = useIsMobile();
|
||
const { onChangeCategory } = useCategoriesActions();
|
||
const { categoriesCrud, categories } = useServicesContext();
|
||
|
||
const onExpandAllClick = () => {
|
||
if (expandedCategoryIds.length !== categories.length) {
|
||
setExpandedCategoryIds(categories.map(c => c.id));
|
||
return;
|
||
}
|
||
setExpandedCategoryIds([]);
|
||
};
|
||
|
||
const getExpandAllIcon = () => {
|
||
if (expandedCategoryIds.length === categories.length)
|
||
return <IconChevronsUp />;
|
||
if (expandedCategoryIds.length === 0) return <IconChevronsDown />;
|
||
return <IconChevronsRight />;
|
||
};
|
||
|
||
return useMemo(
|
||
() =>
|
||
[
|
||
{ accessor: "", hiddenContent: true, width: isMobile ? 1 : 3 },
|
||
{
|
||
accessor: "category.name",
|
||
title: (
|
||
<Group>
|
||
<Box
|
||
style={{ cursor: "pointer" }}
|
||
onClick={onExpandAllClick}>
|
||
{getExpandAllIcon()}
|
||
</Box>
|
||
Категория
|
||
</Group>
|
||
),
|
||
render: ({ category: { id, name } }) => (
|
||
<Group
|
||
key={id}
|
||
wrap={"nowrap"}>
|
||
{expandedCategoryIds.includes(id) ? (
|
||
<IconChevronUp />
|
||
) : (
|
||
<IconChevronDown />
|
||
)}
|
||
<Text>{name}</Text>
|
||
</Group>
|
||
),
|
||
width: isMobile ? 100 : 450,
|
||
},
|
||
{
|
||
accessor: "actions",
|
||
title: isMobile ? "" : "Действия",
|
||
sortable: false,
|
||
textAlign: "center",
|
||
width: isMobile ? 2 : 50,
|
||
render: ({ category }) => (
|
||
<Center>
|
||
<UpdateDeleteTableActions
|
||
onDelete={() =>
|
||
categoriesCrud.onDelete(category)
|
||
}
|
||
onChange={() => onChangeCategory(category)}
|
||
dotsForMobile
|
||
/>
|
||
</Center>
|
||
),
|
||
},
|
||
] as DataTableColumn<GroupedServices>[],
|
||
[expandedCategoryIds, categories]
|
||
);
|
||
};
|
||
|
||
export default useServicesOuterTableColumns;
|