https://dev.kronoz.win/r/marzneshin.git
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 } = useInboundsQuery({ page: 1, size: 100 })
23 const [selectedInbound, setSelectedInbound] = useState<string | undefined>(data.entities[0]?.id !== undefined ? String(data.entities[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 className="w-full">
46 <InboundNotSelectedAlertDialog
47 open={inboundSelectionAlert}
48 onOpenChange={setInboundSelectionAlert}
49 />
50 <SidebarEntityTable
51 fetchEntity={fetchHosts}
52 entityKey="inbounds"
53 secondaryEntityKey="hosts"
54 sidebarEntities={data.entities}
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}