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