1
 2import { FC, useCallback, useEffect, useState } from "react";
 3import {
 4    useInboundsQuery,
 5} from '@marzneshin/features/inbounds';
 6import { Button, DataTable } from "@marzneshin/components";
 7import { columns } from "./columns";
 8import { ServiceType, useServicesUpdateMutation } from "../..";
 9import { useTranslation } from "react-i18next";
10import { RowSelectionState } from "@tanstack/react-table";
11
12interface ServiceInboundsTableProps {
13    service: ServiceType
14}
15
16export const ServiceInboundsTable: FC<ServiceInboundsTableProps> = ({ service }) => {
17    const { mutate: updateService } = useServicesUpdateMutation();
18    const { data } = useInboundsQuery();
19    const [selectedInbound, setSelectedInbound] = useState<{ [key: number]: boolean }>({})
20    const { t } = useTranslation()
21
22    useEffect(() => {
23        setSelectedInbound((prevSelected) => {
24            const updatedSelected: RowSelectionState = { ...prevSelected };
25            service.inbounds.forEach((inboundId) => {
26                data.forEach((fetchedInbound, i) => {
27                    if (fetchedInbound.id === inboundId) {
28                        updatedSelected[i] = true;
29                    }
30                });
31            });
32            return updatedSelected;
33        });
34    }, [data, service.inbounds])
35
36    const handleApply = useCallback(() => {
37        const selectedInboundIds = Object.keys(selectedInbound)
38            .filter(key => selectedInbound[parseInt(key)])
39            .map(key => data[parseInt(key)].id);
40        updateService({ ...service, inbounds: selectedInboundIds });
41    }, [data, selectedInbound, service, updateService]);
42
43    const disabled = (Object.keys(selectedInbound).length < 1) ? true : false
44
45    return (
46        <div className="flex flex-col gap-4">
47            <DataTable
48                columns={columns}
49                data={data}
50                filteredColumn='tag'
51                selectedRow={selectedInbound}
52                setSelectedRow={setSelectedInbound}
53            />
54
55            <Button onClick={handleApply} disabled={disabled}>{t('apply')}</Button>
56        </div>
57    )
58}