gitscope
/
← marzneshin / dashboard/src/features/users/components/tables/services/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/components/tables/services/index.tsx · v0.5.0
Source
1 3072f60 Mrdn 2y ago import { type FC, useCallback, useEffect, useState } from "react";
2 3072f60 Mrdn 2y ago import { } from "@marzneshin/features/inbounds";
3 857e289 Mrdn 2y ago import { Button, DataTable } from "@marzneshin/components";
4 857e289 Mrdn 2y ago import { columns } from "./columns";
5 857e289 Mrdn 2y ago import {
6 3072f60 Mrdn 2y ago type UserType,
7 3072f60 Mrdn 2y ago useUsersUpdateMutation,
8 3072f60 Mrdn 2y ago } from "@marzneshin/features/users";
9 3072f60 Mrdn 2y ago import { useTranslation } from "react-i18next";
10 3072f60 Mrdn 2y ago import type { RowSelectionState } from "@tanstack/react-table";
11 3072f60 Mrdn 2y ago import { useServicesQuery } from "@marzneshin/features/services";
12 857e289 Mrdn 2y ago
13 857e289 Mrdn 2y ago interface UserServicesTableProps {
14 3072f60 Mrdn 2y ago user: UserType;
15 857e289 Mrdn 2y ago }
16 857e289 Mrdn 2y ago
17 3072f60 Mrdn 2y ago // TODO: #322 Implement pagination for row selectable with appliedable action table
18 857e289 Mrdn 2y ago export const UserServicesTable: FC<UserServicesTableProps> = ({ user }) => {
19 857e289 Mrdn 2y ago const { mutate: updateUser } = useUsersUpdateMutation();
20 578311c Mrdn 2y ago const { data } = useServicesQuery({ page: 1, size: 100 });
21 3072f60 Mrdn 2y ago const [selectedService, setSelectedService] = useState<{
22 3072f60 Mrdn 2y ago [key: number]: boolean;
23 3072f60 Mrdn 2y ago }>({});
24 3072f60 Mrdn 2y ago const { t } = useTranslation();
25 857e289 Mrdn 2y ago
26 857e289 Mrdn 2y ago useEffect(() => {
27 857e289 Mrdn 2y ago setSelectedService((prevSelected) => {
28 857e289 Mrdn 2y ago const updatedSelected: RowSelectionState = { ...prevSelected };
29 db68a58 Dawsh 2y ago for (const serviceId of user.service_ids) {
30 3072f60 Mrdn 2y ago for (const [i, fetchedService] of data.entity.entries()) {
31 857e289 Mrdn 2y ago if (fetchedService.id === serviceId) {
32 857e289 Mrdn 2y ago updatedSelected[i] = true;
33 857e289 Mrdn 2y ago }
34 3072f60 Mrdn 2y ago }
35 3072f60 Mrdn 2y ago }
36 857e289 Mrdn 2y ago return updatedSelected;
37 857e289 Mrdn 2y ago });
38 db68a58 Dawsh 2y ago }, [data, user.service_ids]);
39 857e289 Mrdn 2y ago
40 857e289 Mrdn 2y ago const handleApply = useCallback(() => {
41 857e289 Mrdn 2y ago const selectedServiceIds = Object.keys(selectedService)
42 3072f60 Mrdn 2y ago .filter((key) => selectedService[Number.parseInt(key)])
43 3072f60 Mrdn 2y ago .map((key) => data.entity[Number.parseInt(key)].id);
44 db68a58 Dawsh 2y ago updateUser({ ...user, service_ids: selectedServiceIds });
45 857e289 Mrdn 2y ago }, [data, selectedService, user, updateUser]);
46 857e289 Mrdn 2y ago
47 3072f60 Mrdn 2y ago const disabled = Object.keys(selectedService).length < 1;
48 857e289 Mrdn 2y ago
49 857e289 Mrdn 2y ago return (
50 857e289 Mrdn 2y ago <div className="flex flex-col gap-4">
51 857e289 Mrdn 2y ago <DataTable
52 857e289 Mrdn 2y ago columns={columns}
53 578311c Mrdn 2y ago data={data.entity}
54 3072f60 Mrdn 2y ago filteredColumn="name"
55 857e289 Mrdn 2y ago selectedRow={selectedService}
56 857e289 Mrdn 2y ago setSelectedRow={setSelectedService}
57 857e289 Mrdn 2y ago />
58 857e289 Mrdn 2y ago
59 3072f60 Mrdn 2y ago <Button onClick={handleApply} disabled={disabled}>
60 3072f60 Mrdn 2y ago {t("apply")}
61 3072f60 Mrdn 2y ago </Button>
62 857e289 Mrdn 2y ago </div>
63 3072f60 Mrdn 2y ago );
64 3072f60 Mrdn 2y ago };