gitscope
/
← marzneshin / dashboard/src/features/services/tables/inbounds/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/tables/inbounds/index.tsx · v0.3.0
Source
1 3072f60 Mrdn 2y ago import { type FC, useCallback, useEffect, useState } from "react";
2 3072f60 Mrdn 2y ago import { useInboundsQuery } from "@marzneshin/features/inbounds";
3 3b7feef Mrdn 2y ago import { Button, DataTable } from "@marzneshin/components";
4 3b7feef Mrdn 2y ago import { columns } from "./columns";
5 3072f60 Mrdn 2y ago import { type ServiceType, useServicesUpdateMutation } from "../..";
6 3b7feef Mrdn 2y ago import { useTranslation } from "react-i18next";
7 3072f60 Mrdn 2y ago import type { RowSelectionState } from "@tanstack/react-table";
8 3b7feef Mrdn 2y ago
9 3b7feef Mrdn 2y ago interface ServiceInboundsTableProps {
10 3072f60 Mrdn 2y ago service: ServiceType;
11 3b7feef Mrdn 2y ago }
12 3b7feef Mrdn 2y ago
13 3072f60 Mrdn 2y ago export const ServiceInboundsTable: FC<ServiceInboundsTableProps> = ({
14 3072f60 Mrdn 2y ago service,
15 3072f60 Mrdn 2y ago }) => {
16 3b7feef Mrdn 2y ago const { mutate: updateService } = useServicesUpdateMutation();
17 3b7feef Mrdn 2y ago const { data } = useInboundsQuery();
18 3072f60 Mrdn 2y ago const [selectedInbound, setSelectedInbound] = useState<{
19 3072f60 Mrdn 2y ago [key: number]: boolean;
20 3072f60 Mrdn 2y ago }>({});
21 3072f60 Mrdn 2y ago const { t } = useTranslation();
22 3b7feef Mrdn 2y ago
23 3b7feef Mrdn 2y ago useEffect(() => {
24 3b7feef Mrdn 2y ago setSelectedInbound((prevSelected) => {
25 3b7feef Mrdn 2y ago const updatedSelected: RowSelectionState = { ...prevSelected };
26 3072f60 Mrdn 2y ago for (const inboundId of service.inbounds) {
27 3072f60 Mrdn 2y ago for (const [i, fetchedInbound] of data.entries()) {
28 3b7feef Mrdn 2y ago if (fetchedInbound.id === inboundId) {
29 3b7feef Mrdn 2y ago updatedSelected[i] = true;
30 3b7feef Mrdn 2y ago }
31 3072f60 Mrdn 2y ago }
32 3072f60 Mrdn 2y ago }
33 3b7feef Mrdn 2y ago return updatedSelected;
34 3b7feef Mrdn 2y ago });
35 3072f60 Mrdn 2y ago }, [data, service.inbounds]);
36 3b7feef Mrdn 2y ago
37 3b7feef Mrdn 2y ago const handleApply = useCallback(() => {
38 3b7feef Mrdn 2y ago const selectedInboundIds = Object.keys(selectedInbound)
39 3072f60 Mrdn 2y ago .filter((key) => selectedInbound[Number.parseInt(key)])
40 3072f60 Mrdn 2y ago .map((key) => data[Number.parseInt(key)].id);
41 3b7feef Mrdn 2y ago updateService({ ...service, inbounds: selectedInboundIds });
42 3b7feef Mrdn 2y ago }, [data, selectedInbound, service, updateService]);
43 3b7feef Mrdn 2y ago
44 3072f60 Mrdn 2y ago const disabled = Object.keys(selectedInbound).length < 1;
45 3b7feef Mrdn 2y ago
46 3b7feef Mrdn 2y ago return (
47 3b7feef Mrdn 2y ago <div className="flex flex-col gap-4">
48 3b7feef Mrdn 2y ago <DataTable
49 3b7feef Mrdn 2y ago columns={columns}
50 3b7feef Mrdn 2y ago data={data}
51 3072f60 Mrdn 2y ago filteredColumn="tag"
52 3b7feef Mrdn 2y ago selectedRow={selectedInbound}
53 3b7feef Mrdn 2y ago setSelectedRow={setSelectedInbound}
54 3b7feef Mrdn 2y ago />
55 3b7feef Mrdn 2y ago
56 3072f60 Mrdn 2y ago <Button onClick={handleApply} disabled={disabled}>
57 3072f60 Mrdn 2y ago {t("apply")}
58 3072f60 Mrdn 2y ago </Button>
59 3b7feef Mrdn 2y ago </div>
60 3072f60 Mrdn 2y ago );
61 3072f60 Mrdn 2y ago };