mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add delete-dialog component
This commit is contained in:
Markus Grigull
parent
32eea44827
commit
9c669c611d
7 changed files with 113 additions and 109 deletions
52
src/components/dialog/delete-dialog.js
Normal file
52
src/components/dialog/delete-dialog.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* 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 from 'react';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
|
||||
class DeleteDialog extends React.Component {
|
||||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
this.props.onClose(false);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Modal keyboard show={this.props.show} onHide={() => this.props.onClose(false)} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete {this.props.title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the {this.props.title} <strong>'{this.props.name}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.props.onClose(false)}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.props.onClose(true)}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>;
|
||||
}
|
||||
}
|
||||
|
||||
export default DeleteDialog;
|
||||
|
|
@ -21,7 +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 FileSaver from 'file-saver';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
|
@ -36,6 +36,8 @@ import NewVisualzationDialog from '../components/dialog/new-visualization';
|
|||
import EditVisualizationDialog from '../components/dialog/edit-visualization';
|
||||
import ImportVisualizationDialog from '../components/dialog/import-visualization';
|
||||
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Visualizations extends Component {
|
||||
static getStores() {
|
||||
return [ ProjectStore, VisualizationStore, UserStore, SimulationStore ];
|
||||
|
|
@ -113,9 +115,13 @@ class Visualizations extends Component {
|
|||
this.setState({ newModal: false });
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-remove',
|
||||
data: this.state.modalData,
|
||||
|
|
@ -206,20 +212,7 @@ class Visualizations extends Component {
|
|||
<EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />
|
||||
<ImportVisualizationDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} simulation={this.state.simulation} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Visualization</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the visualization <strong>'{this.state.modalData.name}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<DeleteDialog title="visualization" name={this.state.modalData.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import ProjectStore from '../stores/project-store';
|
||||
|
|
@ -33,6 +33,8 @@ import TableColumn from '../components/table-column';
|
|||
import NewProjectDialog from '../components/dialog/new-project';
|
||||
import EditProjectDialog from '../components/dialog/edit-project';
|
||||
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Projects extends React.Component {
|
||||
static getStores() {
|
||||
return [ ProjectStore, SimulationStore, UserStore ];
|
||||
|
|
@ -75,9 +77,13 @@ class Projects extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'projects/start-remove',
|
||||
data: this.state.modalData,
|
||||
|
|
@ -143,20 +149,7 @@ class Projects extends React.Component {
|
|||
<NewProjectDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} simulations={this.state.simulations} />
|
||||
<EditProjectDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Project</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the project <strong>'{this.state.modalData.name}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false})}>Cancel</Button>
|
||||
<Button bsStyle='danger' onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<DeleteDialog title="project" name={this.state.modalData.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
|
|
@ -34,7 +34,9 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulationModelDialog from '../components/dialog/new-simulation-model';
|
||||
import EditSimulationModelDialog from '../components/dialog/edit-simulation-model';
|
||||
import ImportSimulationModelDialog from '../components/dialog/import-simulation-model';
|
||||
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Simulation extends React.Component {
|
||||
static getStores() {
|
||||
|
|
@ -102,12 +104,19 @@ class Simulation extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
console.log('closeDeleteModal called');
|
||||
|
||||
if (confirmDelete === false) {
|
||||
this.setState({ deleteModal: false });
|
||||
return;
|
||||
}
|
||||
|
||||
// remove model from simulation
|
||||
var simulation = this.state.simulation;
|
||||
const simulation = this.state.simulation;
|
||||
simulation.models.splice(this.state.modalIndex, 1);
|
||||
|
||||
this.setState({ deleteModal: false, simulation: simulation });
|
||||
this.setState({ deleteModal: false, simulation });
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulations/start-edit',
|
||||
|
|
@ -168,14 +177,6 @@ class Simulation extends React.Component {
|
|||
FileSaver.saveAs(blob, 'simulation model - ' + simulationModel.name + '.json');
|
||||
}
|
||||
|
||||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
this.confirmDeleteModal();
|
||||
}
|
||||
}
|
||||
|
||||
onSimulationModelChecked(index, event) {
|
||||
const selectedSimulationModels = this.state.selectedSimulationModels;
|
||||
for (let key in selectedSimulationModels) {
|
||||
|
|
@ -263,24 +264,11 @@ class Simulation extends React.Component {
|
|||
<Button onClick={() => this.setState({ importModal: true })}><Glyphicon glyph="import" /> Import</Button>
|
||||
</div>
|
||||
|
||||
<NewSimulationModelDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} simulators={this.state.simulators} />
|
||||
<EditSimulationModelDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} data={this.state.modalData} simulators={this.state.simulators} />
|
||||
<NewSimulationModelDialog show={this.state.newModal} onClose={data => this.closeNewModal(data)} simulators={this.state.simulators} />
|
||||
<EditSimulationModelDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} data={this.state.modalData} simulators={this.state.simulators} />
|
||||
<ImportSimulationModelDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} simulators={this.state.simulators} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Simulation Model</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the simulation model <strong>'{this.state.modalData.name}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<DeleteDialog title="simulation model" name={this.state.modalData.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +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 FileSaver from 'file-saver';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
|
@ -34,7 +34,9 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulationDialog from '../components/dialog/new-simulation';
|
||||
import EditSimulationDialog from '../components/dialog/edit-simulation';
|
||||
import ImportSimulationDialog from '../components/dialog/import-simulation';
|
||||
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Simulations extends Component {
|
||||
static getStores() {
|
||||
|
|
@ -89,9 +91,13 @@ class Simulations extends Component {
|
|||
this.setState({ deleteModal: true, modalSimulation: deleteSimulation });
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulations/start-remove',
|
||||
data: this.state.modalSimulation,
|
||||
|
|
@ -251,20 +257,7 @@ class Simulations extends Component {
|
|||
<EditSimulationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} simulation={this.state.modalSimulation} />
|
||||
<ImportSimulationDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} nodes={this.state.nodes} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Simulation</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the simulation <strong>'{this.state.modalSimulation.name}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<DeleteDialog title="simulation" name={this.state.modalSimulation.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +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 FileSaver from 'file-saver';
|
||||
import _ from 'lodash';
|
||||
|
||||
|
|
@ -34,7 +34,9 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulatorDialog from '../components/dialog/new-simulator';
|
||||
import EditSimulatorDialog from '../components/dialog/edit-simulator';
|
||||
import ImportSimulatorDialog from '../components/dialog/import-simulator';
|
||||
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Simulators extends Component {
|
||||
static getStores() {
|
||||
|
|
@ -88,9 +90,13 @@ class Simulators extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-remove',
|
||||
data: this.state.modalSimulator,
|
||||
|
|
@ -196,20 +202,7 @@ class Simulators extends Component {
|
|||
<EditSimulatorDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} simulator={this.state.modalSimulator} />
|
||||
<ImportSimulatorDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete Simulator</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
Are you sure you want to delete the simulator<strong>'{_.get(this.state.modalSimulator, 'properties.name') || _.get(this.state.modalSimulator, 'rawProperties.name') || 'Unknown'}'</strong>?
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
|
||||
<Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<DeleteDialog title="simulator" name={_.get(this.state.modalSimulator, 'properties.name') || _.get(this.state.modalSimulator, 'rawProperties.name') || 'Unknown'} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +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 AppDispatcher from '../app-dispatcher';
|
||||
import UserStore from '../stores/user-store';
|
||||
|
|
@ -32,6 +32,8 @@ import TableColumn from '../components/table-column';
|
|||
import NewUserDialog from '../components/dialog/new-user';
|
||||
import EditUserDialog from '../components/dialog/edit-user';
|
||||
|
||||
import DeleteDialog from '../components/dialog/delete-dialog';
|
||||
|
||||
class Users extends Component {
|
||||
static getStores() {
|
||||
return [ UserStore, UsersStore ];
|
||||
|
|
@ -72,9 +74,13 @@ class Users extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
confirmDeleteModal() {
|
||||
closeDeleteModal = confirmDelete => {
|
||||
this.setState({ deleteModal: false });
|
||||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'users/start-remove',
|
||||
data: this.state.modalData,
|
||||
|
|
@ -124,23 +130,9 @@ class Users extends Component {
|
|||
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
|
||||
|
||||
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
|
||||
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
|
||||
<Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Delete user</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
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>
|
||||
<DeleteDialog title="user" name={this.state.modalData.username} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue