← marzneshin
/
v0.5.6
/
dashboard/src/features/services/components/tables/inbounds/index.tsx
https://dev.kronoz.win/r/marzneshin.git
1import { type FC, useCallback, useState } from "react";
2import { Button } from "@marzneshin/components";
3import { SelectableEntityTable, useRowSelection } from "@marzneshin/features/entity-table";
4import { columns } from "./columns";
5import { type ServiceType, useServicesUpdateMutation, fetchSelectableServiceInbounds } from "@marzneshin/features/services";
6import { useTranslation } from "react-i18next";
7
8interface ServiceInboundsTableProps {
9 service: ServiceType;
10}
11
12export const ServiceInboundsTable: FC<ServiceInboundsTableProps> = ({
13 service,
14}) => {
15 const { mutate: updateService } = useServicesUpdateMutation();
16 const { selectedRow, setSelectedRow } =
17 useRowSelection(Object.fromEntries(service.inbound_ids.map(entityId => [String(entityId), true])));
18 const [selectedInbound, setSelectedInbound] = useState<number[]>(service.inbound_ids);
19 const { t } = useTranslation();
20
21 const handleApply = useCallback(() => {
22 console.log(selectedInbound)
23 updateService({ id: service.id, name: service.name, inbound_ids: selectedInbound });
24 }, [selectedInbound, service, updateService]);
25
26 const disabled = Object.keys(selectedRow).length < 1;
27
28 return (
29 <div className="flex flex-col gap-4">
30 <SelectableEntityTable
31 columns={columns}
32 entityKey="inbounds"
33 parentEntityKey="services"
34 parentEntityId={service.id}
35 existingEntityIds={service.inbound_ids}
36 fetchEntity={fetchSelectableServiceInbounds}
37 primaryFilter="tag"
38 rowSelection={{ selectedRow: selectedRow, setSelectedRow: setSelectedRow }}
39 entitySelection={{ selectedEntity: selectedInbound, setSelectedEntity: setSelectedInbound }}
40 />
41
42 <Button onClick={handleApply} disabled={disabled}>
43 {t("apply")}
44 </Button>
45 </div>
46 );
47};