1
 2import { Button } from "@marzneshin/components";
 3import { SelectableEntityTable, useRowSelection } from "@marzneshin/features/entity-table";
 4import { columns } from "./columns";
 5import {
 6    type UserType,
 7    useUsersUpdateMutation,
 8} from "@marzneshin/modules/users";
 9import { useTranslation } from "react-i18next";
10import { fetchUserServices } from "@marzneshin/features/services";
11import { useState, useCallback, FC } from "react";
12
13interface UserServicesTableProps {
14    user: UserType;
15}
16
17export const UserServicesTable: FC<UserServicesTableProps> = ({ user }) => {
18    const { mutate: updateUser } = useUsersUpdateMutation();
19    const { selectedRow, setSelectedRow } =
20        useRowSelection(
21            Object.fromEntries(
22                user.service_ids.map(entityId => [String(entityId), true])
23            )
24        );
25    const [selectedService, setSelectedService] = useState<number[]>(user.service_ids);
26    const { t } = useTranslation();
27
28    const handleApply = useCallback(() => {
29        updateUser({ ...user, service_ids: selectedService });
30    }, [selectedService, user, updateUser]);
31
32    return (
33        <div className="flex flex-col gap-4">
34            <SelectableEntityTable
35                fetchEntity={fetchUserServices}
36                columns={columns}
37                primaryFilter="name"
38                existingEntityIds={user.service_ids}
39                entityKey="services"
40                parentEntityKey="users"
41                parentEntityId={user.username}
42                rowSelection={{ selectedRow: selectedRow, setSelectedRow: setSelectedRow }}
43                entitySelection={{ selectedEntity: selectedService, setSelectedEntity: setSelectedService }}
44            />
45
46            <Button onClick={handleApply} disabled={selectedService.length === 0}>
47                {t("apply")}
48            </Button>
49        </div>
50    );
51};