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