gitscope
← marzneshin / v0.5.6 / dashboard/src/features/services/components/tables/inbounds/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/components/tables/inbounds/index.tsx · TypeScript
Blame Raw
 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};