From 708482ec1f03caa1d7f391d4755beb1e35525acb Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Wed, 15 Jul 2020 14:09:44 +0200 Subject: [PATCH] wip: make file (name) editable #219, edit files dialog now big enough to encompass table --- src/common/array-store.js | 5 ++ src/common/data-managers/rest-data-manager.js | 10 ++- src/file/edit-file-name.js | 79 +++++++++++++++++++ src/file/edit-files.js | 49 +++++++++--- src/scenario/scenario.js | 2 - src/styles/app.css | 21 ----- 6 files changed, 128 insertions(+), 38 deletions(-) create mode 100644 src/file/edit-file-name.js diff --git a/src/common/array-store.js b/src/common/array-store.js index 0c536f0..1c045e7 100644 --- a/src/common/array-store.js +++ b/src/common/array-store.js @@ -128,7 +128,12 @@ class ArrayStore extends ReduceStore { return super.reduce(state, action); case this.type + '/start-edit': + if(action.id){ + this.dataManager.update(action.data, action.token,action.param,action.id); + } + else{ this.dataManager.update(action.data, action.token,action.param); + } return state; case this.type + '/edited': diff --git a/src/common/data-managers/rest-data-manager.js b/src/common/data-managers/rest-data-manager.js index fb23eff..7727a4e 100644 --- a/src/common/data-managers/rest-data-manager.js +++ b/src/common/data-managers/rest-data-manager.js @@ -68,7 +68,11 @@ class RestDataManager { } } case 'remove/update': - if(param === null){ + if(id !== null){ + return this.makeURL(this.url + '/' + id); + + } + else if(param === null){ return this.makeURL(this.url + '/' + object.id); } else{ @@ -201,11 +205,11 @@ class RestDataManager { }); } - update(object, token = null, param = null) { + update(object, token = null, param = null, id = null) { var obj = {}; obj[this.type] = this.filterKeys(object); - RestAPI.put(this.requestURL('remove/update',null,param,object), obj, token).then(response => { + RestAPI.put(this.requestURL('remove/update',id,param,object), obj, token).then(response => { AppDispatcher.dispatch({ type: this.type + 's/edited', data: response[this.type] diff --git a/src/file/edit-file-name.js b/src/file/edit-file-name.js new file mode 100644 index 0000000..05481b3 --- /dev/null +++ b/src/file/edit-file-name.js @@ -0,0 +1,79 @@ +/** + * 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 {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; + +import Dialog from '../common/dialogs/dialog'; + +class EditFileName extends React.Component { + valid = true; + + constructor(props) { + super(props); + + this.state = { + file: {}, + + }; + } + + onClose = canceled => { + if (canceled) { + if (this.props.onClose != null) { + this.props.onClose(); + } + + return; + } + + if (this.valid && this.props.onClose != null) { + this.props.onClose(this.state.file); + } + }; + + handleChange = event => { + this.props.file.name = event.target.value; + this.setState({file: this.props.file}); + + let name = true; + + if (this.state.name === '') { + name = false; + } + + this.valid = name; + + }; + + + + render() { + return this.onClose(c)} valid={true}> +
+ + Name + + + + +
+ ; + } +} + +export default EditFileName; diff --git a/src/file/edit-files.js b/src/file/edit-files.js index 4f3c8a7..3e2e003 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -21,6 +21,7 @@ import Dialog from '../common/dialogs/dialog'; import AppDispatcher from "../common/app-dispatcher"; import Table from "../common/table"; import TableColumn from "../common/table-column"; +import EditFileName from "./edit-file-name"; class EditFilesDialog extends React.Component { @@ -32,7 +33,9 @@ class EditFilesDialog extends React.Component { this.state = { uploadFile: null, - uploadProgress: 0 + uploadProgress: 0, + editModal: false, + modalFile: {} }; } @@ -84,6 +87,22 @@ class EditFilesDialog extends React.Component { }; + closeEditModal(data){ + if(data !== {} || data !== "undefined"){ + const formData = new FormData(); + formData.append("object", data); + + AppDispatcher.dispatch({ + type: 'files/start-edit', + data: formData, + token: this.props.sessionToken, + id: data.id + }); + } + + this.setState({editModal: false}); + } + deleteFile(index){ let file = this.props.files[index] @@ -114,24 +133,24 @@ class EditFilesDialog extends React.Component { marginTop: '-40px' }; + return ( - this.onClose(c)} blendOutCancel = {true} valid={true}> + this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'>
-
- - - - - +
+ + + + this.deleteFile(index)} + editButton + onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })} />
-
-
+
+ + this.closeEditModal(data)} file={this.state.modalFile} /> + +
+ + ); } } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 5b413f3..44a332f 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -420,8 +420,6 @@ class Scenario extends React.Component { } onEditFiles(){ - console.log("here r the files in scenario:"); - console.log(this.state.file); let tempFiles = []; this.state.files.forEach( file => { tempFiles.push({ diff --git a/src/styles/app.css b/src/styles/app.css index 98888f1..84d330e 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -272,27 +272,6 @@ body { supported by Chrome and Opera */ } -.edit-table table { - background-color: #fff; - table-layout: fixed; - word-wrap: break-word; - width: 467px; -} - -.edit-table th { - position: sticky; - top: 0; - text-align: left; -} - -.edit-table td{ - text-align: left; -} - -.edit-table td { - padding: 2px 8px !important; -} - /** * Toolbox */