diff --git a/src/pages/users/dialogs/edit-user.js b/src/pages/users/dialogs/edit-user.js
new file mode 100644
index 0000000..97fdc20
--- /dev/null
+++ b/src/pages/users/dialogs/edit-user.js
@@ -0,0 +1,136 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import { Form, Col } from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+import NotificationsDataManager from "../../../common/data-managers/notifications-data-manager";
+import NotificationsFactory from "../../../common/data-managers/notifications-factory";
+
+class EditUserDialog extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ username: '',
+ mail: '',
+ role: '',
+ active: '',
+ password: "",
+ confirmPassword: "",
+ oldPassword: "",
+ }
+ }
+
+ onClose(canceled) {
+ if (canceled === false) {
+
+ let user = {}
+ user.id = this.props.user.id;
+
+ if (this.state.username != null && this.state.username !== this.props.user.username){
+ user.username = this.state.username
+ }
+
+ if (this.state.mail != null && this.state.mail !== this.props.user.mail){
+ user.mail = this.state.mail
+ }
+
+ if (this.state.role != null && this.state.role !== this.props.user.role){
+ user.role = this.state.role
+ }
+
+ if (this.state.active != null && this.state.active !== this.props.user.active){
+ user.active = this.state.active
+ }
+
+ if (this.state.password !== '' && this.state.oldPassword !== '' && this.state.password === this.state.confirmPassword) {
+ user.password = this.state.password;
+ user.oldpassword = this.state.oldPassword
+ } else if (this.state.password !== '' && this.state.password !== this.state.confirmPassword){
+ NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR("New password not correctly confirmed"))
+ }
+
+ this.props.onClose(user);
+
+ } else {
+ this.props.onClose();
+ }
+ }
+
+ handleChange(e) {
+ this.setState({ [e.target.id]: e.target.value });
+ }
+
+ resetState() {
+ this.setState({
+ username: this.props.user.username,
+ mail: this.props.user.mail,
+ role: this.props.user.role,
+ password: "",
+ confirmPassword: "",
+ oldPassword: "",
+ });
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default EditUserDialog;
diff --git a/src/pages/users/dialogs/new-user.js b/src/pages/users/dialogs/new-user.js
new file mode 100644
index 0000000..4addc41
--- /dev/null
+++ b/src/pages/users/dialogs/new-user.js
@@ -0,0 +1,108 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import { Form, Col } from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+
+class NewUserDialog extends React.Component {
+ valid = false;
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ username: '',
+ mail: '',
+ role: 'User',
+ password: '',
+ };
+ }
+
+ onClose(canceled) {
+ if (canceled === false) {
+ if (this.valid) {
+ this.props.onClose(this.state);
+ }
+ } else {
+ this.props.onClose();
+ }
+ }
+
+ handleChange(e) {
+ this.setState({ [e.target.id]: e.target.value });
+
+ // check all controls
+ let username = this.state.username !== '' && this.state.username.length >= 3;
+ let password = this.state.password !== '';
+ let role = this.state.role !== '';
+ let mail = this.state.mail !== '';
+
+ this.valid = username && password && role && mail;
+ }
+
+ resetState() {
+ this.setState({
+ username: '',
+ mail: '',
+ role: 'User',
+ password: '',
+ });
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default NewUserDialog;
diff --git a/src/pages/users/dialogs/users-to-scenario.js b/src/pages/users/dialogs/users-to-scenario.js
new file mode 100644
index 0000000..cd19e3d
--- /dev/null
+++ b/src/pages/users/dialogs/users-to-scenario.js
@@ -0,0 +1,70 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import { Table } from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+
+class UsersToScenarioDialog extends React.Component {
+ valid = true;
+
+ onClose(canceled) {
+ if (this.props.onClose != null) {
+ this.props.onClose(canceled);
+ }
+ };
+
+ renderRow(value, key) {
+ return (
+ | {key} |
+ {value} |
+
);
+ }
+
+ renderData() {
+ let arr = [];
+ this.props.users.forEach(user => {
+ arr.push(this.renderRow(user.username, user.id))
+ })
+ return arr;
+ }
+
+ render() {
+ return ;
+ }
+}
+
+export default UsersToScenarioDialog;
diff --git a/src/pages/users/styles.js b/src/pages/users/styles.js
new file mode 100644
index 0000000..a075bf2
--- /dev/null
+++ b/src/pages/users/styles.js
@@ -0,0 +1,8 @@
+export const buttonStyle = {
+ marginLeft: '10px',
+ }
+
+export const iconStyle = {
+ height: '30px',
+ width: '30px'
+}
diff --git a/src/pages/users/users.js b/src/pages/users/users.js
new file mode 100644
index 0000000..8d98374
--- /dev/null
+++ b/src/pages/users/users.js
@@ -0,0 +1,248 @@
+import { useState } from "react";
+import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { Table, ButtonColumn, CheckboxColumn, DataColumn } from "../../common/table";
+import Icon from "../../common/icon";
+import IconButton from "../../common/buttons/icon-button";
+import NewUserDialog from "./dialogs/new-user";
+import EditUserDialog from "./dialogs/edit-user";
+import UsersToScenarioDialog from "./dialogs/users-to-scenario";
+import DeleteDialog from "../../common/dialogs/delete-dialog";
+import { buttonStyle, iconStyle } from "./styles";
+import {currentUser} from '../../localStorage';
+import NotificationsFactory from "../../common/data-managers/notifications-factory";
+import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import {
+ useGetUsersQuery,
+ useAddUserMutation,
+ useUpdateUserMutation,
+ useDeleteUserMutation,
+ useGetScenariosQuery,
+ useAddUserToScenarioMutation,
+} from "../../store/apiSlice";
+
+const Users = ({}) => {
+
+ const {data: fetchedUsers, refetch: refetchUsers} = useGetUsersQuery();
+ const users = fetchedUsers ? fetchedUsers.users : [];
+ const { data: fetchedScenarios } = useGetScenariosQuery();
+ const scenarios = fetchedScenarios ? fetchedScenarios.scenarios : [];
+ const [checkedUsersIDs, setCheckedUsersIDs] = useState([]);
+ const [addUserMutation] = useAddUserMutation();
+ const [updateUserMutation] = useUpdateUserMutation();
+ const [deleteUserMutation] = useDeleteUserMutation();
+ const [addUserToScenarioMutation] = useAddUserToScenarioMutation();
+ const [isNewModalOpened, setIsNewModalOpened] = useState(false);
+ const [isEditModalOpened, setIsEditModalOpened] = useState(false);
+ const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false);
+ const [scenario, setScenario] = useState({name: ''});
+ const [isUsersToScenarioModalOpened, setUsersToScenarioModalOpened] = useState(false);
+ const [userToEdit, setUserToEdit] = useState({});
+ const [userToDelete, setUserToDelete] = useState({});
+ const [areAllUsersChecked, setAreAllUsersChecked] = useState(false);
+
+ const handleAddNewUser = async (data) => {
+ if(data){
+ try {
+ const res = await addUserMutation({user: data});
+ if(res.error){
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(res.error.data.message));
+ }
+ refetchUsers();
+ } catch (error){
+ if(error.data){
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+ } else {
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+ }
+ }
+ }
+
+ setIsNewModalOpened(false);
+ }
+
+ const handleEditUser = async (data) => {
+ if(data){
+ try {
+ await updateUserMutation(data);
+ refetchUsers();
+ } catch (error) {
+ if(error.data){
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+ } else {
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+ }
+ }
+ }
+
+ refetchUsers();
+ setIsEditModalOpened(false);
+ setUserToEdit({});
+ }
+
+ const handleDeleteUser = async (isConfimed) => {
+ if(isConfimed){
+ try {
+ await deleteUserMutation(userToDelete.id);
+ } catch(error) {
+ if(error.data){
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+ } else {
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+ }
+ }
+ }
+
+ refetchUsers();
+ setIsDeleteModalOpened(false);
+ setUserToDelete({});
+ }
+
+ const handleAddUserToScenario = async (isCanceled) => {
+ if(!isCanceled){
+ try {
+ for(let i = 0; i < checkedUsersIDs.length; i++){
+ await addUserToScenarioMutation({ scenarioID: scenario.id, username: users.find(u => u.id === checkedUsersIDs[i]).username }).unwrap();
+ }
+ } catch (error) {
+ console.log('ERROR', error)
+ if(error.data){
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+ } else {
+ notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+ }
+ }
+ }
+
+ setUsersToScenarioModalOpened(false);
+ setCheckedUsersIDs([]);
+ setScenario({name: ''});
+ setAreAllUsersChecked(false);
+ }
+
+ const toggleCheckAllUsers = () => {
+ if(checkedUsersIDs.length === users.length){
+ setCheckedUsersIDs([]);
+ setAreAllUsersChecked(false);
+ } else {
+ users.forEach(user => {
+ if(!checkedUsersIDs.includes(user.id)){
+ setCheckedUsersIDs(prevState => ([...prevState, user.id]));
+ }
+ })
+ setAreAllUsersChecked(true);
+ }
+ }
+
+ const isUserChecked = (user) => {
+ return checkedUsersIDs.includes(user.id);
+ }
+
+ const handleUserCheck = (user, event) => {
+ if(!checkedUsersIDs.includes(user.id)){
+ setCheckedUsersIDs(prevState => ([...prevState, user.id]));
+ } else {
+ const index = checkedUsersIDs.indexOf(user.id);
+ setCheckedUsersIDs(prevState => prevState.filter((_, i) => i !== index));
+ }
+ }
+
+ return (
+
+
Users
+
+ setIsNewModalOpened(true)}
+ icon='plus'
+ buttonStyle={buttonStyle}
+ iconStyle={iconStyle}
+ />
+
+
+
+
+ {currentUser.role === "Admin" ?
+
+ : <>
+ }
+ {currentUser.role === "Admin" ?
+ toggleCheckAllUsers()}
+ allChecked={areAllUsersChecked}
+ checked={(user) => isUserChecked(user)}
+ onChecked={(user, event) => handleUserCheck(user, event)}
+ width='30'
+ />
+ : <>
+ }
+
+
+
+ {}}/>
+ {
+ setIsEditModalOpened(true);
+ setUserToEdit(users[index]);
+ }}
+ onDelete={index => {
+ setIsDeleteModalOpened(true);
+ setUserToDelete(users[index]);
+ }}
+ />
+
+
+ {
+ let scenario;
+ if(scenarios.length > 0) {
+ scenario = scenarios.find(s => s.id == id);
+ }
+ setScenario(scenario);
+ setUsersToScenarioModalOpened(true);
+ }}
+ >
+ {scenarios.map(scenario => (
+ {scenario.name}
+ ))}
+
+
+
+
checkedUsersIDs.includes(user.id))}
+ scenario={scenario.name}
+ onClose={(canceled) => handleAddUserToScenario(canceled)}
+ />
+ handleAddNewUser(data)}
+ />
+ handleEditUser(data)}
+ user={userToEdit}
+ />
+ handleDeleteUser(e)}
+ />
+