mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
add multiple users at once to scenario (#308)
This commit is contained in:
irismarie
parent
be618b94ce
commit
f7a3a88c57
2 changed files with 191 additions and 53 deletions
71
src/user/users-to-scenario.js
Normal file
71
src/user/users-to-scenario.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* 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 <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { Table } from 'react-bootstrap';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
class UsersToScenarioDialog extends React.Component {
|
||||
valid = true;
|
||||
|
||||
onClose() {
|
||||
if (this.props.onClose != null) {
|
||||
this.props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
renderRow(value, key) {
|
||||
return ( <tr>
|
||||
<td>{key}</td>
|
||||
<td>{value}</td>
|
||||
</tr> );
|
||||
}
|
||||
|
||||
renderData() {
|
||||
let arr = [];
|
||||
this.props.users.forEach((value, key) => {
|
||||
arr.push(this.renderRow(value,key))
|
||||
})
|
||||
return arr;
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Dialog
|
||||
size='md'
|
||||
show={this.props.show}
|
||||
title={'Add to \'' + this.props.scenario + '\'?'}
|
||||
buttonTitle='Confirm'
|
||||
onClose={() => this.onClose()}
|
||||
valid={true}
|
||||
>
|
||||
<Table size='sm' striped>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ this.renderData() }
|
||||
</tbody>
|
||||
</Table>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
||||
export default UsersToScenarioDialog;
|
||||
|
|
@ -20,13 +20,16 @@ import { Container } from 'flux/utils';
|
|||
|
||||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import UsersStore from './users-store';
|
||||
import ScenarioStore from '../scenario/scenario-store';
|
||||
|
||||
import Icon from '../common/icon';
|
||||
import IconButton from '../common/icon-button';
|
||||
import { Dropdown, DropdownButton } from 'react-bootstrap';
|
||||
import Table from '../common/table';
|
||||
import TableColumn from '../common/table-column';
|
||||
import NewUserDialog from './new-user';
|
||||
import EditUserDialog from './edit-user';
|
||||
import UsersToScenarioDialog from './users-to-scenario';
|
||||
|
||||
import DeleteDialog from '../common/dialogs/delete-dialog';
|
||||
import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
|
||||
|
|
@ -34,7 +37,7 @@ import NotificationsFactory from "../common/data-managers/notifications-factory"
|
|||
|
||||
class Users extends Component {
|
||||
static getStores() {
|
||||
return [ UsersStore ];
|
||||
return [UsersStore, ScenarioStore];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
|
@ -48,11 +51,20 @@ class Users extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
if (prevState == null) {
|
||||
prevState = {};
|
||||
}
|
||||
|
||||
return {
|
||||
token: token,
|
||||
users: UsersStore.getState(),
|
||||
scenarios: ScenarioStore.getState(),
|
||||
usersToAdd: prevState.usersToAdd || new Map(),
|
||||
selectedScenarioID: prevState.selectedScenarioID || null,
|
||||
selectedScenario: prevState.selectedScenario || '',
|
||||
|
||||
newModal: false,
|
||||
addUsersModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
modalData: {},
|
||||
|
|
@ -110,6 +122,35 @@ class Users extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
onUserChecked(user) {
|
||||
let temp = this.state.usersToAdd;
|
||||
const found = temp.get(user.id);
|
||||
if (!found) {
|
||||
temp.set(user.id, user.username);
|
||||
} else {
|
||||
temp.delete(user.id)
|
||||
}
|
||||
this.setState({ usersToAdd: temp });
|
||||
}
|
||||
|
||||
setScenario(ID) {
|
||||
let scenario = this.state.scenarios.find(s => s.id == ID);
|
||||
this.setState({ selectedScenarioID: scenario.id, selectedScenario: scenario.name, addUsersModal: true })
|
||||
};
|
||||
|
||||
closeAddUsersModal() {
|
||||
this.state.usersToAdd.forEach((value, key) => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'scenarios/add-user',
|
||||
data: this.state.selectedScenarioID,
|
||||
username: value,
|
||||
token: this.state.token
|
||||
});
|
||||
})
|
||||
|
||||
this.setState({ addUsersModal: false, selectedScenarioID: null })
|
||||
}
|
||||
|
||||
modifyActiveColumn(active) {
|
||||
return <Icon icon={active ? 'check' : 'times'} />
|
||||
}
|
||||
|
|
@ -125,65 +166,91 @@ class Users extends Component {
|
|||
}
|
||||
|
||||
return <div>
|
||||
<h1>Users
|
||||
<h1>Users
|
||||
<span className='icon-button'>
|
||||
<IconButton
|
||||
childKey={0}
|
||||
tooltip='Add User'
|
||||
onClick={() => this.setState({ newModal: true })}
|
||||
icon='plus'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
<IconButton
|
||||
childKey={0}
|
||||
tooltip='Add User'
|
||||
onClick={() => this.setState({ newModal: true })}
|
||||
icon='plus'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<Table data={this.state.users}>
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
title='ID'
|
||||
dataKey='id'
|
||||
/>
|
||||
: <></>
|
||||
}
|
||||
<Table data={this.state.users}>
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
title='Username'
|
||||
width='150'
|
||||
dataKey='username'
|
||||
title='ID'
|
||||
dataKey='id'
|
||||
/>
|
||||
: <></>
|
||||
}
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
title='E-mail'
|
||||
dataKey='mail'
|
||||
title='Add'
|
||||
checkbox
|
||||
onChecked={(index, event) => this.onUserChecked(index, event)}
|
||||
checkboxKey='checked'
|
||||
width='30'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Role'
|
||||
dataKey='role'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Active'
|
||||
dataKey='active'
|
||||
modifier={(active) => this.modifyActiveColumn(active)}
|
||||
/>
|
||||
<TableColumn
|
||||
width='200'
|
||||
align='right'
|
||||
editButton
|
||||
deleteButton
|
||||
onEdit={index => this.setState({
|
||||
editModal: true,
|
||||
modalData: this.state.users[index]
|
||||
})}
|
||||
onDelete={index => this.setState({
|
||||
deleteModal: true,
|
||||
modalData: this.state.users[index]
|
||||
})}
|
||||
/>
|
||||
</Table>
|
||||
: <></>
|
||||
}
|
||||
<TableColumn
|
||||
title='Username'
|
||||
width='150'
|
||||
dataKey='username'
|
||||
/>
|
||||
<TableColumn
|
||||
title='E-mail'
|
||||
dataKey='mail'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Role'
|
||||
dataKey='role'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Active'
|
||||
dataKey='active'
|
||||
modifier={(active) => this.modifyActiveColumn(active)}
|
||||
/>
|
||||
<TableColumn
|
||||
width='200'
|
||||
align='right'
|
||||
editButton
|
||||
deleteButton
|
||||
onEdit={index => this.setState({
|
||||
editModal: true,
|
||||
modalData: this.state.users[index]
|
||||
})}
|
||||
onDelete={index => this.setState({
|
||||
deleteModal: true,
|
||||
modalData: this.state.users[index]
|
||||
})}
|
||||
/>
|
||||
</Table>
|
||||
<span className='solid-button'>
|
||||
<DropdownButton
|
||||
title='Add to Scenario'
|
||||
onSelect={(id) => this.setScenario(id)}
|
||||
>
|
||||
{this.state.scenarios.map(scenario => (
|
||||
<Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
|
||||
))}
|
||||
</DropdownButton>
|
||||
</span>
|
||||
|
||||
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
<DeleteDialog title="user" name={this.state.modalData.username} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
|
||||
</div>;
|
||||
<UsersToScenarioDialog
|
||||
show={this.state.addUsersModal}
|
||||
users={this.state.usersToAdd}
|
||||
scenario={this.state.selectedScenario}
|
||||
onClose={() => this.closeAddUsersModal()}
|
||||
/>
|
||||
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
<DeleteDialog title="user" name={this.state.modalData.username} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue