mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
moved usergroups table to the users page, removed usergroups page and added a new button to add users selected from users table
Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
This commit is contained in:
Andrii Podriez
Youssef Nakti
parent
b744fda3da
commit
21bf384e6e
6 changed files with 103 additions and 52 deletions
|
|
@ -38,7 +38,6 @@ import './styles/login.css';
|
|||
import branding from './branding/branding';
|
||||
import Logout from './pages/login/logout';
|
||||
import Infrastructure from './pages/infrastructure/infrastructure';
|
||||
import Usergroups from './pages/usergroups/usergroups';
|
||||
import Usergroup from './pages/usergroups/usergroup';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
|
|
@ -113,9 +112,6 @@ const App = () => {
|
|||
<Route path="/users">
|
||||
<Users />
|
||||
</Route>
|
||||
<Route path="/usergroups">
|
||||
<Usergroups />
|
||||
</Route>
|
||||
<Route path="/usergroup/:usergroup">
|
||||
<Usergroup />
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,6 @@ class Branding {
|
|||
pages.scenarios = true;
|
||||
pages.infrastructure = true;
|
||||
pages.users = true;
|
||||
pages.usergroups = true;
|
||||
pages.account = true;
|
||||
pages.api = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -99,13 +99,6 @@ const SideBarMenu = (props) => {
|
|||
</NavLink>
|
||||
</li> : ''
|
||||
}
|
||||
<li>
|
||||
<NavLink
|
||||
to="/usergroups"
|
||||
title="Usegroups">
|
||||
Usergroups
|
||||
</NavLink>
|
||||
</li>
|
||||
<li hidden={!values.pages.account}>
|
||||
<NavLink
|
||||
to="/account"
|
||||
|
|
@ -163,15 +156,6 @@ const SideBarMenu = (props) => {
|
|||
</NavLink>
|
||||
</li> : ''
|
||||
}
|
||||
{currentUser.role === 'Admin' ?
|
||||
<li>
|
||||
<NavLink
|
||||
to="/usergroups"
|
||||
title="Usegroups">
|
||||
Usergroups
|
||||
</NavLink>
|
||||
</li> : ''
|
||||
}
|
||||
<li hidden={!values.pages.account}>
|
||||
<NavLink
|
||||
to="/account"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom/cjs/react-router-dom.min";
|
||||
import { Row, Col } from "react-bootstrap";
|
||||
import { Row, Col, Spinner } from "react-bootstrap";
|
||||
import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
|
||||
import UsergroupUsersTable from "./tables/usergroup-users-table";
|
||||
import IconButton from "../../common/buttons/icon-button";
|
||||
|
|
@ -48,7 +48,7 @@ const Usergroup = () => {
|
|||
setIsRenameModalOpened(false);
|
||||
}
|
||||
|
||||
if(isLoading) return <div className='loading'>Loading...</div>;
|
||||
if(isLoading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div className='section'>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
|
|||
import moment from "moment";
|
||||
import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
|
||||
import NotificationsFactory from "../../common/data-managers/notifications-factory";
|
||||
import { Spinner } from "react-bootstrap";
|
||||
|
||||
const Usergroups = (props) => {
|
||||
const Usergroups = () => {
|
||||
const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
|
||||
const [addUsergroup] = useAddUsergroupMutation();
|
||||
const [deleteUsergroup] = useDeleteUsergroupMutation();
|
||||
|
|
@ -69,7 +70,7 @@ const Usergroups = (props) => {
|
|||
return `${date.fromNow()}`;
|
||||
};
|
||||
|
||||
if(isLoading) return <div>Loading</div>;
|
||||
if(isLoading) return <Spinner />;
|
||||
|
||||
if(usergroups){
|
||||
return (<div className="section">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Dropdown, DropdownButton } from 'react-bootstrap';
|
||||
import { Dropdown, DropdownButton, Spinner, Row, Col } from 'react-bootstrap';
|
||||
import { Table, ButtonColumn, CheckboxColumn, DataColumn } from "../../common/table";
|
||||
import Icon from "../../common/icon";
|
||||
import IconButton from "../../common/buttons/icon-button";
|
||||
|
|
@ -11,6 +11,7 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
|
|||
import { buttonStyle, iconStyle } from "./styles";
|
||||
import NotificationsFactory from "../../common/data-managers/notifications-factory";
|
||||
import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
|
||||
import Usergroups from "../usergroups/usergroups";
|
||||
import {
|
||||
useGetUsersQuery,
|
||||
useAddUserMutation,
|
||||
|
|
@ -18,26 +19,31 @@ import {
|
|||
useDeleteUserMutation,
|
||||
useGetScenariosQuery,
|
||||
useAddUserToScenarioMutation,
|
||||
useGetUsergroupsQuery,
|
||||
useAddUserToUsergroupMutation
|
||||
} from "../../store/apiSlice";
|
||||
|
||||
const Users = ({}) => {
|
||||
const Users = () => {
|
||||
|
||||
const { user: currentUser, token: sessionToken } = useSelector((state) => state.auth);
|
||||
|
||||
const {data: fetchedUsers, refetch: refetchUsers} = useGetUsersQuery();
|
||||
const users = fetchedUsers ? fetchedUsers.users : [];
|
||||
const { data: fetchedScenarios } = useGetScenariosQuery();
|
||||
const scenarios = fetchedScenarios ? fetchedScenarios.scenarios : [];
|
||||
const { data: {scenarios} = [], isLoading: isLoadingScenarios } = useGetScenariosQuery();
|
||||
const {data: {usergroups} = [], isLoading: isLoadingUsergroups } = useGetUsergroupsQuery();
|
||||
const [checkedUsersIDs, setCheckedUsersIDs] = useState([]);
|
||||
const [addUserMutation] = useAddUserMutation();
|
||||
const [updateUserMutation] = useUpdateUserMutation();
|
||||
const [deleteUserMutation] = useDeleteUserMutation();
|
||||
const [addUserToScenarioMutation] = useAddUserToScenarioMutation();
|
||||
const [addUserToUsergroup] = useAddUserToUsergroupMutation();
|
||||
const [isNewModalOpened, setIsNewModalOpened] = useState(false);
|
||||
const [isEditModalOpened, setIsEditModalOpened] = useState(false);
|
||||
const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false);
|
||||
const [scenario, setScenario] = useState({name: ''});
|
||||
const [usergroup, setUsergroup] = useState({name: ''});
|
||||
const [isUsersToScenarioModalOpened, setUsersToScenarioModalOpened] = useState(false);
|
||||
const [isUsersToUsegroupModalOpened, setUsersToUsegroupModalOpened] = useState(false);
|
||||
const [userToEdit, setUserToEdit] = useState({});
|
||||
const [userToDelete, setUserToDelete] = useState({});
|
||||
const [areAllUsersChecked, setAreAllUsersChecked] = useState(false);
|
||||
|
|
@ -124,6 +130,28 @@ const Users = ({}) => {
|
|||
setAreAllUsersChecked(false);
|
||||
}
|
||||
|
||||
const handleAddUsersToUsergroup = async (isCanceled) => {
|
||||
if(!isCanceled){
|
||||
try {
|
||||
for(let i = 0; i < checkedUsersIDs.length; i++){
|
||||
await addUserToUsergroup({ usergroupID: usergroup.id, username: users.find(u => u.id === checkedUsersIDs[i]).username }).unwrap();
|
||||
}
|
||||
} catch (error) {
|
||||
if(error.data){
|
||||
notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
|
||||
} else {
|
||||
console.log("error", error)
|
||||
notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setUsersToUsegroupModalOpened(false);
|
||||
setCheckedUsersIDs([]);
|
||||
setUsergroup({name: ''});
|
||||
setAreAllUsersChecked(false);
|
||||
}
|
||||
|
||||
const toggleCheckAllUsers = () => {
|
||||
if(checkedUsersIDs.length === users.length){
|
||||
setCheckedUsersIDs([]);
|
||||
|
|
@ -207,30 +235,69 @@ const Users = ({}) => {
|
|||
}}
|
||||
/>
|
||||
</Table>
|
||||
<span className='solid-button'>
|
||||
<DropdownButton
|
||||
title='Add to Scenario'
|
||||
onSelect={(id) => {
|
||||
let scenario;
|
||||
if(scenarios.length > 0) {
|
||||
scenario = scenarios.find(s => s.id == id);
|
||||
}
|
||||
setScenario(scenario);
|
||||
setUsersToScenarioModalOpened(true);
|
||||
}}
|
||||
>
|
||||
{scenarios.map(scenario => (
|
||||
<Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
|
||||
))}
|
||||
</DropdownButton>
|
||||
</span>
|
||||
|
||||
<UsersToScenarioDialog
|
||||
show={isUsersToScenarioModalOpened}
|
||||
users={users.filter(user => checkedUsersIDs.includes(user.id))}
|
||||
scenario={scenario.name}
|
||||
onClose={(canceled) => handleAddUserToScenario(canceled)}
|
||||
/>
|
||||
<Row>
|
||||
<Col md="auto">
|
||||
{isLoadingScenarios? <Spinner /> : <>
|
||||
<span className='solid-button'>
|
||||
<DropdownButton
|
||||
title='Add to Scenario'
|
||||
onSelect={(id) => {
|
||||
let scenario;
|
||||
if(scenarios.length > 0) {
|
||||
scenario = scenarios.find(s => s.id == id);
|
||||
}
|
||||
setScenario(scenario);
|
||||
setUsersToScenarioModalOpened(true);
|
||||
}}
|
||||
>
|
||||
{scenarios.map(scenario => (
|
||||
<Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
|
||||
))}
|
||||
</DropdownButton>
|
||||
</span>
|
||||
|
||||
|
||||
<UsersToScenarioDialog
|
||||
show={isUsersToScenarioModalOpened}
|
||||
users={users.filter(user => checkedUsersIDs.includes(user.id))}
|
||||
scenario={scenario.name}
|
||||
onClose={(canceled) => handleAddUserToScenario(canceled)}
|
||||
/>
|
||||
</>}
|
||||
</Col>
|
||||
|
||||
<Col md="auto">
|
||||
{isLoadingUsergroups? <Spinner /> : <>
|
||||
<span className='solid-button'>
|
||||
<DropdownButton
|
||||
title='Add to Usegroup'
|
||||
onSelect={(id) => {
|
||||
let usergroup;
|
||||
if(usergroups.length > 0) {
|
||||
usergroup = usergroups.find(s => s.id == id);
|
||||
}
|
||||
setUsergroup(usergroup);
|
||||
setUsersToUsegroupModalOpened(true);
|
||||
}}
|
||||
>
|
||||
{usergroups.map(usergroup => (
|
||||
<Dropdown.Item key={usergroup.id} eventKey={usergroup.id}>{usergroup.name}</Dropdown.Item>
|
||||
))}
|
||||
</DropdownButton>
|
||||
</span>
|
||||
|
||||
{/* re-using same modal to implement adding suers to usergroup */}
|
||||
<UsersToScenarioDialog
|
||||
show={isUsersToUsegroupModalOpened}
|
||||
users={users.filter(user => checkedUsersIDs.includes(user.id))}
|
||||
scenario={usergroup.name}
|
||||
onClose={(canceled) => handleAddUsersToUsergroup(canceled)}
|
||||
/>
|
||||
</>}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<NewUserDialog
|
||||
show={isNewModalOpened}
|
||||
onClose={(data) => handleAddNewUser(data)}
|
||||
|
|
@ -246,6 +313,10 @@ const Users = ({}) => {
|
|||
show={isDeleteModalOpened}
|
||||
onClose={(e) => handleDeleteUser(e)}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<Usergroups />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue