gitscope
← marzneshin / v0.5.5 / dashboard/src/features/hosts/tables/inbound-hosts/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/hosts/tables/inbound-hosts/index.tsx · TypeScript
Blame Raw
 1import {
 2    HostType,
 3    fetchHosts
 4} from '@marzneshin/features/hosts';
 5import { useNavigate } from "@tanstack/react-router";
 6import { useState } from 'react';
 7import {
 8    useInboundsQuery,
 9} from '@marzneshin/features/inbounds';
10import { SidebarEntityTable } from '@marzneshin/features/entity-table';
11import { columns } from './columns';
12import { useDialog } from '@marzneshin/hooks';
13import {
14    InboundNotSelectedAlertDialog
15} from './inbound-not-selected-alert-dialog';
16import {
17    InboundCardHeader,
18    InboundCardContent,
19} from "./inbound-sidebar-card";
20
21export const InboundHostsTable = () => {
22    const { data: inbounds } = useInboundsQuery()
23    const [selectedInbound, setSelectedInbound] = useState<string | undefined>(inbounds[0]?.id !== undefined ? String(inbounds[0].id) : undefined)
24    const navigate = useNavigate({ from: "/hosts" })
25    const [inboundSelectionAlert, setInboundSelectionAlert] = useDialog();
26
27    const onEdit = (entity: HostType) => navigate({ to: "/hosts/$hostId/edit", params: { hostId: String(entity.id) } });
28    const onDelete = (entity: HostType) => navigate({ to: "/hosts/$hostId/delete", params: { hostId: String(entity.id) } });
29    const onOpen = (entity: HostType) => navigate({ to: "/hosts/$hostId", params: { hostId: String(entity.id) } });
30
31    const onCreate = () => {
32        if (selectedInbound) {
33            navigate({
34                to: "/hosts/$inboundId/create",
35                params: {
36                    inboundId: selectedInbound,
37                }
38            })
39        } else {
40            setInboundSelectionAlert(true)
41        }
42    };
43
44    return (
45        <div>
46            <InboundNotSelectedAlertDialog
47                open={inboundSelectionAlert}
48                onOpenChange={setInboundSelectionAlert}
49            />
50            <SidebarEntityTable
51                fetchEntity={fetchHosts}
52                entityKey="inbounds"
53                secondaryEntityKey="hosts"
54                sidebarEntities={inbounds}
55                sidebarEntityId={selectedInbound}
56                columnsFn={columns}
57                filteredColumn='remark'
58                setSidebarEntityId={setSelectedInbound}
59                onCreate={onCreate}
60                onOpen={onOpen}
61                onEdit={onEdit}
62                onDelete={onDelete}
63                sidebarCardProps={{
64                    header: InboundCardHeader,
65                    content: InboundCardContent
66                }}
67            />
68        </div>
69    )
70}