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
20// TODO: Implement pagination for row selectable with appliedable action table
21export const UserServicesTable: FC<UserServicesTableProps> = ({ user }) => {
22    const { mutate: updateUser } = useUsersUpdateMutation();
23    const { data } = useServicesQuery({ page: 1, size: 100 });
24    const [selectedService, setSelectedService] = useState<{ [key: number]: boolean }>({})
25    const { t } = useTranslation()
26
27    useEffect(() => {
28        setSelectedService((prevSelected) => {
29            const updatedSelected: RowSelectionState = { ...prevSelected };
30            user.services.forEach((serviceId) => {
31                data.entity.forEach((fetchedService: ServiceType, i) => {
32                    if (fetchedService.id === serviceId) {
33                        updatedSelected[i] = true;
34                    }
35                });
36            });
37            return updatedSelected;
38        });
39    }, [data, user.services])
40
41    const handleApply = useCallback(() => {
42        const selectedServiceIds = Object.keys(selectedService)
43            .filter(key => selectedService[parseInt(key)])
44            .map(key => data.entity[parseInt(key)].id);
45        updateUser({ ...user, services: selectedServiceIds });
46    }, [data, selectedService, user, updateUser]);
47
48    const disabled = (Object.keys(selectedService).length < 1) ? true : false
49
50    return (
51        <div className="flex flex-col gap-4">
52            <DataTable
53                columns={columns}
54                data={data.entity}
55                filteredColumn='name'
56                selectedRow={selectedService}
57                setSelectedRow={setSelectedService}
58            />
59
60            <Button onClick={handleApply} disabled={disabled}>{t('apply')}</Button>
61        </div>
62    )
63}