mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
User edit and remove
This commit is contained in:
Ricardo Hernandez-Montoya
parent
a4ea7af429
commit
8f6e1fc439
3 changed files with 130 additions and 36 deletions
104
src/components/dialog/edit-user.js
Normal file
104
src/components/dialog/edit-user.js
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* File: edit-user.js
|
||||
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
|
||||
* Date: 02.05.2017
|
||||
*
|
||||
* 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, { Component, PropTypes } from 'react';
|
||||
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
|
||||
|
||||
import Dialog from './dialog';
|
||||
|
||||
class EditUserDialog extends Component {
|
||||
static propTypes = {
|
||||
show: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
valid: true;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: '',
|
||||
role: '',
|
||||
_id: ''
|
||||
}
|
||||
}
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
this.props.onClose(this.state);
|
||||
} else {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({
|
||||
username: this.props.user.username,
|
||||
role: this.props.user.role,
|
||||
_id: this.props.user._id
|
||||
});
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
var username = true;
|
||||
|
||||
if (this.state.username === '') {
|
||||
username = false;
|
||||
}
|
||||
|
||||
this.valid = username;
|
||||
|
||||
// return state to control
|
||||
if (target === 'username') return username ? "success" : "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit user" buttonTitle="save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="username" validationState={this.validateForm('username')}>
|
||||
<ControlLabel>Username</ControlLabel>
|
||||
<FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="role" validationState={this.validateForm('role')}>
|
||||
<ControlLabel>Simulation</ControlLabel>
|
||||
<FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
|
||||
<option key='1' value='admin'>Admin</option>
|
||||
<option key='2' disabled value='operator'>Operator</option>
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EditUserDialog;
|
||||
|
|
@ -21,8 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
// import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import UserStore from '../stores/user-store';
|
||||
|
|
@ -31,7 +30,7 @@ import UsersStore from '../stores/users-store';
|
|||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewUserDialog from '../components/dialog/new-user';
|
||||
// import EditUserDialog from '../components/dialog/edit-user';
|
||||
import EditUserDialog from '../components/dialog/edit-user';
|
||||
|
||||
class Users extends Component {
|
||||
static getStores() {
|
||||
|
|
@ -73,36 +72,27 @@ class Users extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// confirmDeleteModal() {
|
||||
// this.setState({ deleteModal: false });
|
||||
confirmDeleteModal() {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
// AppDispatcher.dispatch({
|
||||
// type: 'projects/start-remove',
|
||||
// data: this.state.modalData
|
||||
// });
|
||||
// }
|
||||
AppDispatcher.dispatch({
|
||||
type: 'users/start-remove',
|
||||
data: this.state.modalData,
|
||||
token: this.state.token
|
||||
});
|
||||
}
|
||||
|
||||
// closeEditModal(data) {
|
||||
// this.setState({ editModal: false });
|
||||
closeEditModal(data) {
|
||||
this.setState({ editModal: false });
|
||||
|
||||
// if (data) {
|
||||
// AppDispatcher.dispatch({
|
||||
// type: 'users/start-edit',
|
||||
// data: data,
|
||||
// token: this.state.token
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// getSimulationName(id) {
|
||||
// for (var i = 0; i < this.state.simulations.length; i++) {
|
||||
// if (this.state.simulations[i]._id === id) {
|
||||
// return this.state.simulations[i].name;
|
||||
// }
|
||||
// }
|
||||
|
||||
// return id;
|
||||
// }
|
||||
if (data) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'users/start-edit',
|
||||
data: data,
|
||||
token: this.state.token
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
|
@ -120,22 +110,22 @@ class Users extends Component {
|
|||
|
||||
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
|
||||
{/*<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} />*/}
|
||||
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
|
||||
{/*<Modal show={this.state.deleteModal}>
|
||||
<Modal show={this.state.deleteModal}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Project</Modal.Title>
|
||||
<Modal.Title>Delete user</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the project <strong>'{this.state.modalData.name}'</strong>?
|
||||
Are you sure you want to delete the user <strong>'{this.state.modalData.username}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false})}>Cancel</Button>
|
||||
<Button bsStyle='danger' onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>*/}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ class RestDataManager {
|
|||
var obj = {};
|
||||
obj[this.type] = this.filterKeys(object);
|
||||
|
||||
RestAPI.put(this.makeURL(this.url + '/' + object._id, token), obj).then(response => {
|
||||
RestAPI.put(this.makeURL(this.url + '/' + object._id), obj, token).then(response => {
|
||||
AppDispatcher.dispatch({
|
||||
type: this.type + 's/edited',
|
||||
data: response[this.type]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue