gitscope
← marzneshin / v0.3.0-alpha10 / 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'
13import { useDialog } from '@marzneshin/components'
14import { InboundNotSelectedAlertDialog } from './inbound-not-selected-alert-dialog'
15
16export const InboundHostsTable = () => {
17    const { data: inbounds } = useInboundsQuery()
18    const [selectedInbound, setSelectedInbound] = useState<string>(String(inbounds[0]?.id))
19    const { data } = useHostsQuery(Number(selectedInbound))
20
21    const [mutationDialogOpen, setMutationDialogOpen] = useDialog();
22    const [deleteDialogOpen, setDeleteDialogOpen] = useDialog();
23    const [settingsDialogOpen, setSettingsDialogOpen] = useDialog();
24    const [inboundSelectionAlert, setInboundSelectionAlert] = useDialog();
25    const [selectedEntity, selectEntity] = useState<HostType | null>(null);
26
27    const onEdit = (entity: HostType) => {
28        selectEntity(entity);
29        setMutationDialogOpen(true);
30    };
31
32    const onDelete = (entity: HostType) => {
33        selectEntity(entity);
34        setDeleteDialogOpen(true);
35    };
36
37    const onCreate = () => {
38        if (selectedInbound) {
39            selectEntity(null);
40            setMutationDialogOpen(true);
41        } else {
42            setInboundSelectionAlert(true)
43        }
44    };
45
46    const onOpen = (entity: HostType) => {
47        selectEntity(entity);
48        setSettingsDialogOpen(true);
49    };
50
51    return (
52        <div>
53            <InboundNotSelectedAlertDialog
54                open={inboundSelectionAlert}
55                onOpenChange={setInboundSelectionAlert}
56            />
57            <HostSettingsDialog
58                open={settingsDialogOpen}
59                onOpenChange={setSettingsDialogOpen}
60                entity={selectedEntity}
61            />
62            <HostsDeleteConfirmationDialog
63                open={deleteDialogOpen}
64                onOpenChange={setDeleteDialogOpen}
65                entity={selectedEntity}
66            />
67            <HostsMutationDialog
68                open={mutationDialogOpen}
69                onOpenChange={setMutationDialogOpen}
70                entity={selectedEntity}
71                inboundId={Number(selectedInbound)}
72            />
73            <InboundHostsDataTable
74                data={data}
75                inbounds={inbounds}
76                selectedInbound={selectedInbound}
77                columns={columns({ onDelete, onOpen, onEdit })}
78                filteredColumn='remark'
79                setSelectedInbound={setSelectedInbound}
80                onCreate={onCreate}
81                onOpen={onOpen}
82            />
83        </div>
84    )
85}