diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js index 70d6c71..942e495 100644 --- a/src/pages/usergroups/usergroups.js +++ b/src/pages/usergroups/usergroups.js @@ -16,24 +16,28 @@ ******************************************************************************/ import { useState } from "react"; -import { useGetUsergroupsQuery, useAddUserGroupMutation } from "../../store/apiSlice"; -import { Table, DataColumn, LinkColumn } from "../../common/table"; +import { useGetUsergroupsQuery, useAddUsergroupMutation,useDeleteUsergroupMutation } from "../../store/apiSlice"; +import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../common/table"; import IconButton from "../../common/buttons/icon-button"; import { buttonStyle, iconStyle } from "./styles"; import AddUsergroupDialog from "./dialogs/addUsergroupDialog"; +import DeleteDialog from "../../common/dialogs/delete-dialog"; const Usergroups = (props) => { const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery(); - const [addUserGroup] = useAddUserGroupMutation(); + const [addUsergroup] = useAddUsergroupMutation(); + const [deleteUsergroup] = useDeleteUsergroupMutation(); const [isAddDialogOpen, setIsAddDialogOpen] = useState(false); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const [dialogUsegroup, setDialogUsergroup] = useState({}); const handleAddNewGroup = async (response) => { if(response){ try { //put data in correct structure const usergroup = {Name: response.name, ScenarioMappings: [{Duplicate: response.isDuplicateSelected, ScenarioID: Number(response.scenarioID)}]}; - await addUserGroup(usergroup).unwrap(); + await addUsergroup(usergroup).unwrap(); refetchUsergroups(); } catch (err) { @@ -42,6 +46,20 @@ const Usergroups = (props) => { } setIsAddDialogOpen(false); } + + const handleDeleteUsergroup = async (isConfirmed) => { + if(isConfirmed){ + try{ + await deleteUsergroup(dialogUsegroup.id); + refetchUsergroups(); + } catch(error){ + console.log('Error deleting usergroup', error) + } + } + + setDialogUsergroup({}); + setIsDeleteDialogOpen(false); + } if(isLoading) return
Loading
; @@ -72,9 +90,24 @@ const Usergroups = (props) => { link="/usergroup/" linkKey="id" /> + { + setDialogUsergroup(usergroups[index]); + setIsDeleteDialogOpen(true); + }} + /> + handleDeleteUsergroup(isConfirmed)} + /> ); } } diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js index 7a0703d..f729557 100644 --- a/src/store/apiSlice.js +++ b/src/store/apiSlice.js @@ -107,5 +107,6 @@ export const { useLazyDownloadImageQuery, useUpdateComponentConfigMutation, useGetUsergroupsQuery, - useAddUserGroupMutation + useAddUsergroupMutation, + useDeleteUsergroupMutation } = apiSlice; diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js index 1531148..a710d6c 100644 --- a/src/store/endpoints/usergroup-endpoints.js +++ b/src/store/endpoints/usergroup-endpoints.js @@ -19,7 +19,7 @@ export const usergroupEndpoints = (builder) => ({ getUsergroups: builder.query({ query: () => 'usergroups', }), - addUserGroup: builder.mutation({ + addUsergroup: builder.mutation({ query: (usergroup) => ({ url: '/usergroups', method: 'POST', @@ -28,4 +28,10 @@ export const usergroupEndpoints = (builder) => ({ }, }), }), + deleteUsergroup: builder.mutation({ + query: (usergroupID) => ({ + url: `usergroups/${usergroupID}`, + method: 'DELETE', + }), + }), });