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