gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/entity-table/components/sidebar-entity-selection.tsx · v0.5.5
Source
1 4cebd65 Mardin 2y ago import {
2 4cebd65 Mardin 2y ago ToggleGroup, ToggleGroupItem,
3 4cebd65 Mardin 2y ago Table, TableHeader, TableRow, TableBody, TableHead,
4 4cebd65 Mardin 2y ago ScrollArea, Button,
5 4cebd65 Mardin 2y ago } from "@marzneshin/components";
6 38f7295 Mardin 2y ago import { useScreenBreakpoint } from "@marzneshin/hooks";
7 cf00df4 Mardin 2y ago import { cn } from "@marzneshin/utils";
8 4cebd65 Mardin 2y ago import {
9 4cebd65 Mardin 2y ago SidebarEntityCard,
10 4cebd65 Mardin 2y ago } from "@marzneshin/features/entity-table/components";
11 4cebd65 Mardin 2y ago import {
12 cf00df4 Mardin 2y ago useEntityTableContext,
13 4cebd65 Mardin 2y ago useSidebarEntityTableContext
14 4cebd65 Mardin 2y ago } from "@marzneshin/features/entity-table/contexts";
15 4cebd65 Mardin 2y ago import { useTranslation } from "react-i18next";
16 4cebd65 Mardin 2y ago
17 4cebd65 Mardin 2y ago export const SidebarEntitySelection = () => {
18 4cebd65 Mardin 2y ago const {
19 4cebd65 Mardin 2y ago sidebarEntityId,
20 4cebd65 Mardin 2y ago sidebarEntities,
21 4cebd65 Mardin 2y ago setSidebarEntityId,
22 cf00df4 Mardin 2y ago sidebarCardProps,
23 4cebd65 Mardin 2y ago } = useSidebarEntityTableContext()
24 cf00df4 Mardin 2y ago const { table } = useEntityTableContext()
25 38f7295 Mardin 2y ago const isDesktop = useScreenBreakpoint("md");
26 cf00df4 Mardin 2y ago
27 38f7295 Mardin 2y ago const scrollBarHeight = (table.getState().pagination.pageSize <= 10 && isDesktop) ? "max-h-[45rem]" : "max-h-[20rem]"
28 4cebd65 Mardin 2y ago const { t } = useTranslation();
29 4cebd65 Mardin 2y ago
30 4cebd65 Mardin 2y ago return (
31 4cebd65 Mardin 2y ago <Table className="w-full">
32 4cebd65 Mardin 2y ago <TableHeader>
33 4cebd65 Mardin 2y ago <TableRow>
34 4cebd65 Mardin 2y ago <TableHead className="hstack justify-between items-center">
35 4cebd65 Mardin 2y ago {t("inbounds")}
36 4cebd65 Mardin 2y ago <Button
37 4cebd65 Mardin 2y ago variant="ghost"
38 4cebd65 Mardin 2y ago size="sm"
39 4cebd65 Mardin 2y ago className="p-1"
40 4cebd65 Mardin 2y ago onMouseDown={() => setSidebarEntityId(undefined)}
41 4cebd65 Mardin 2y ago >
42 9f2486e Mardin 2y ago {t('deselect')}
43 4cebd65 Mardin 2y ago </Button>
44 4cebd65 Mardin 2y ago </TableHead>
45 4cebd65 Mardin 2y ago </TableRow>
46 4cebd65 Mardin 2y ago </TableHeader>
47 4cebd65 Mardin 2y ago <TableBody>
48 65afe33 Mardin 2y ago <ToggleGroup
49 65afe33 Mardin 2y ago type="single"
50 65afe33 Mardin 2y ago onValueChange={(value) => setSidebarEntityId(value === "" ? undefined : value)}
51 65afe33 Mardin 2y ago defaultValue={String(sidebarEntityId)}
52 65afe33 Mardin 2y ago >
53 65bbe9d Mardin 2y ago <ScrollArea className={cn("flex flex-col justify-start p-1 gap-3 h-full w-full", scrollBarHeight)}>
54 65afe33 Mardin 2y ago {sidebarEntities.map((entity: any) => (
55 65afe33 Mardin 2y ago <ToggleGroupItem
56 65afe33 Mardin 2y ago className="px-0 w-full h-full"
57 65afe33 Mardin 2y ago value={String(entity.id)}
58 65afe33 Mardin 2y ago key={String(entity.id)}
59 65afe33 Mardin 2y ago id={String(entity.id)}>
60 65afe33 Mardin 2y ago <SidebarEntityCard
61 65afe33 Mardin 2y ago {...sidebarCardProps}
62 65afe33 Mardin 2y ago entity={entity}
63 65afe33 Mardin 2y ago checked={sidebarEntityId === String(entity.id)}
64 65afe33 Mardin 2y ago />
65 65afe33 Mardin 2y ago </ToggleGroupItem>
66 65afe33 Mardin 2y ago ))}
67 65afe33 Mardin 2y ago </ScrollArea>
68 65afe33 Mardin 2y ago </ToggleGroup>
69 4cebd65 Mardin 2y ago </TableBody>
70 4cebd65 Mardin 2y ago </Table>
71 4cebd65 Mardin 2y ago )
72 4cebd65 Mardin 2y ago }