diff --git a/src/API/LayoutApi/teams.ts b/src/API/LayoutApi/teams.ts index 60a77de..df2e5c3 100644 --- a/src/API/LayoutApi/teams.ts +++ b/src/API/LayoutApi/teams.ts @@ -38,6 +38,13 @@ export interface UpdateTeamMonitorVars { }; } +export interface UpdateTeamMonitorCompaniesVars { + id: string; + payload: { + company_ids: number[]; + }; +} + export const teamController = { async read(obj: TTeamGetParams) { const params = { ...obj }; @@ -148,4 +155,25 @@ export const teamController = { throw new Error("Failed to update team monitor"); } }, + async updateTeamMonitorCompanies( + id: string, + payload: { company_ids: number[] }, + ) { + try { + const { data } = await instance.put( + `/team-monitor/${id}/companies/`, + payload, + ); + return data; + } catch (error: any) { + const errorMessage = + error?.response?.data?.message || + error?.response?.data?.detail || + "Something went wrong"; + + message.error(errorMessage); + + throw error; + } + }, }; diff --git a/src/Components/Companies/BulkEditModal.tsx b/src/Components/Companies/BulkEditModal.tsx new file mode 100644 index 0000000..60f07d3 --- /dev/null +++ b/src/Components/Companies/BulkEditModal.tsx @@ -0,0 +1,80 @@ +import { Modal, Form, Select, message } from "antd"; +import { + useTeamsMonitorData, + useUpdateTeamMonitorCompanies, +} from "../../Hooks/Teams"; + +interface Props { + open: boolean; + selectedIds: number[]; + onCancel: () => void; + + refetch: any; +} + +const BulkEditModal = ({ open, selectedIds, onCancel, refetch }: Props) => { + const [form] = Form.useForm(); + + const { data, isLoading: teamsLoading } = useTeamsMonitorData({}); + const updateMutation = useUpdateTeamMonitorCompanies(); + + const handleSubmit = async () => { + try { + const values = await form.validateFields(); + + await updateMutation.mutateAsync({ + id: String(values.monitoringTeamId), + payload: { + company_ids: selectedIds, + }, + }); + + message.success("Monitoring team updated successfully"); + form.resetFields(); + refetch(); + onCancel(); + } catch (error: any) { + console.log(error?.message || error || "Something went wrong"); + } + }; + + return ( + +
+ + - */}
} onChange={handleSearchChange} @@ -122,7 +104,7 @@ const Company = () => {
- + ([]); + + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedIds, setSelectedIds] = useState([]); + const [isBulkModalOpen, setIsBulkModalOpen] = useState(false); + + const rowSelection = { + selectedRowKeys, + onChange: (keys: React.Key[], rows: TCompany[]) => { + setSelectedRowKeys(keys); + setSelectedIds(rows.map((row) => row?.id)); + }, + }; + function getStatusClassName() { if (role !== "Owner") { return "isnot"; @@ -37,8 +46,6 @@ function CompanyTable({ } } - const { token } = theme.useToken(); - const getImageSource = (source: string) => { switch (source) { case "Zippy": @@ -58,12 +65,34 @@ function CompanyTable({ return (
+ {selectedIds.length !== 0 && ( +
+ +
+ )} ({ ...u, no: i + 1, created: moment(u?.created_at, "YYYY-MM-DD HH:mm:ss").format( - "DD.MM.YYYY HH:mm" + "DD.MM.YYYY HH:mm", ), key: u?.id, action: { ...u }, @@ -152,25 +181,15 @@ function CompanyTable({ } size="small" scroll={{ x: "768px" }} - // pagination={{ - // pageSize: 10, - // size: "default", - // style: { - // margin: 0, - // justifyContent: "end", - // position: "fixed", - // bottom: 0, - // left: 0, - // width: "100%", - // backgroundColor: token.colorBgContainer, - // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", - // padding: "10px 0", - // zIndex: 1000, - // }, - // }} pagination={false} bordered /> + setIsBulkModalOpen(false)} + refetch={refetch} + /> ); } diff --git a/src/Hooks/Teams/index.ts b/src/Hooks/Teams/index.ts index fa0dff2..4bad54a 100644 --- a/src/Hooks/Teams/index.ts +++ b/src/Hooks/Teams/index.ts @@ -1,6 +1,7 @@ import { useMutation, useQuery, useQueryClient } from "react-query"; import { TTeamGetParams, + UpdateTeamMonitorCompaniesVars, UpdateTeamMonitorVars, teamController, } from "../../API/LayoutApi/teams"; @@ -16,7 +17,7 @@ export const useTeamData = ({ () => teamController.read({ name, company_id, page, page_size }), { refetchOnWindowFocus: false, - } + }, ); }; @@ -24,7 +25,7 @@ export const useTeamOne = (teamId: number | string | undefined): any => { return useQuery( [`team/${teamId || "all"}`, teamId], () => teamController.teamOne(teamId), - { refetchOnWindowFocus: false } + { refetchOnWindowFocus: false }, ); }; @@ -40,7 +41,7 @@ export const useTeamsMonitorData = ({ () => teamController.readTeamsMonitor({ name, page, page_size }), { refetchOnWindowFocus: false, - } + }, ); }; @@ -90,6 +91,25 @@ export const useUpdateTeamMonitor = () => { onError: (error) => { console.error("Update team monitor failed:", error); }, - } + }, + ); +}; + +export const useUpdateTeamMonitorCompanies = () => { + const queryClient = useQueryClient(); + + return useMutation( + ({ id, payload }: UpdateTeamMonitorCompaniesVars) => + teamController.updateTeamMonitorCompanies(id, payload), + + { + onSuccess: () => { + queryClient.invalidateQueries("teams-monitor"); + queryClient.invalidateQueries("companies"); + }, + onError: (error) => { + console.error("Update team monitor companies failed:", error); + }, + }, ); };