wip: make file (name) editable #219, edit files dialog now big enough to encompass table

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':

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]

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 <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+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 <Dialog show={this.props.show} title='Edit File' buttonTitle='Save' onClose={(c) => this.onClose(c)}  valid={true}>
+      <form>
+        <FormGroup as={Col} controlId='name'>
+          <FormLabel column={false}>Name</FormLabel>
+          <FormControl type='text' value={this.props.file.name} onChange={this.handleChange} />
+          <FormControl.Feedback />
+        </FormGroup>
+
+      </form>
+    </Dialog>;
+  }
+}
+
+export default EditFileName;

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 (
-      <Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" onClose={(c) => this.onClose(c)} blendOutCancel = {true} valid={true}>
+      <Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" onClose={(c) => this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'>
         <div>
 
-        <div className="edit-table">
-          <Table data={this.props.files} width = {467}>
-            <TableColumn title='ID' dataKey='id' width={42}  />
-            <TableColumn title='Name' dataKey='name'  width={107}/>
-            <TableColumn title='Size (bytes)' dataKey='size' width={83.3}/>
-            <TableColumn title='Type' dataKey='type' width={159.7}/>
+          <Table data={this.props.files}>
+            <TableColumn title='ID' dataKey='id'/>
+            <TableColumn title='Name' dataKey='name'/>
+            <TableColumn title='Size (bytes)' dataKey='size'/>
+            <TableColumn title='Type' dataKey='type'/>
             <TableColumn
-              title='Delete'
-              width='75'
+              title=''
               deleteButton
               onDelete={(index) => this.deleteFile(index)}
+              editButton
+              onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })}
             />
           </Table>
-        </div>
 
           <FormGroup as={Col} >
             <FormControl
@@ -157,8 +176,14 @@ class EditFilesDialog extends React.Component {
               style={progressBarStyle}
             />
           </FormGroup>
-        </div>
+          <div style={{ clear: 'both' }} />
+
+          <EditFileName show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} file={this.state.modalFile} />
+
+         </div>
       </Dialog>
+
+      
     );
   }
 }

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({

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
  */