| 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 |
} |