gitscope
← marzneshin / v0.3.0-alpha5 / 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
 1
 2import {
 3    HostType,
 4    HostsDeleteConfirmationDialog,
 5    HostsMutationDialog,
 6    useHostsQuery
 7} from '@marzneshin/features/hosts'
 8import { InboundHostsDataTable } from './table'
 9import { useState } from 'react'
10import { useInboundsQuery } from '@marzneshin/features/inbounds'
11import { columns } from './columns'
12import { HostSettingsDialog } from '../../dialogs/settings'
13
14export const InboundHostsTable = () => {
15    const { data: inbounds } = useInboundsQuery()
16    const [selectedInbound, setSelectedInbound] = useState<string>(String(inbounds[0]?.id))
17    const { data } = useHostsQuery(Number(selectedInbound))
18
19    const [mutationDialogOpen, setMutationDialogOpen] = useState<boolean>(false);
20    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
21    const [settingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);
22    const [selectedEntity, selectEntity] = useState<HostType | null>(null);
23
24    const onEdit = (entity: HostType) => {
25        selectEntity(entity);
26        setMutationDialogOpen(true);
27    };
28
29    const onDelete = (entity: HostType) => {
30        selectEntity(entity);
31        setDeleteDialogOpen(true);
32    };
33
34    const onCreate = () => {
35        selectEntity(null);
36        setMutationDialogOpen(true);
37    };
38
39    const onOpen = (entity: HostType) => {
40        selectEntity(entity);
41        setSettingsDialogOpen(true);
42    };
43
44    return (
45        <div>
46            <HostSettingsDialog
47                open={settingsDialogOpen}
48                onOpenChange={setSettingsDialogOpen}
49                entity={selectedEntity}
50            />
51            <HostsDeleteConfirmationDialog
52                open={deleteDialogOpen}
53                onOpenChange={setDeleteDialogOpen}
54                entity={selectedEntity}
55            />
56            <HostsMutationDialog
57                open={mutationDialogOpen}
58                onOpenChange={setMutationDialogOpen}
59                entity={selectedEntity}
60                inboundId={Number(selectedInbound)}
61            />
62            <InboundHostsDataTable
63                data={data}
64                inbounds={inbounds}
65                selectedInbound={selectedInbound}
66                columns={columns({ onDelete, onOpen, onEdit })}
67                filteredColumn='remark'
68                setSelectedInbound={setSelectedInbound}
69                onCreate={onCreate}
70                onOpen={onOpen}
71            />
72        </div>
73    )
74}