display/handle result files correctly;resultfile remove endpoint

2025-03-09 00:00:01 +01:00 · 2021-02-10 16:26:11 +01:00 · 2021-02-10 16:26:11 +01:00 · c6467b169d
commit c6467b169d
parent 60b8e63350
4 changed files with 101 additions and 83 deletions
--- a/src/result/edit-result.js
+++ b/src/result/edit-result.js
@ -16,7 +16,7 @@
 ******************************************************************************/

 import React from 'react';
-import {FormGroup, FormControl, FormLabel, Col, Button, ProgressBar} from 'react-bootstrap';
+import { FormGroup, FormControl, FormLabel, Col, Button, ProgressBar } from 'react-bootstrap';
 import AppDispatcher from "../common/app-dispatcher";
 import FileStore from "../file/file-store"

@ -53,26 +53,38 @@ class EditResultDialog extends React.Component {
    this.setState({ [event.target.id]: event.target.value });
  };

-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.resultExists && this.props.files != prevProps.files) {
-      this.setState({files: FileStore.getState().filter(file => this.state.result.resultFileIDs.includes(file.id))});
+  static isEmpty(val) {
+    return (val === undefined || val == null || val.length <= 0);
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    let result = props.results[props.resultId];
+
+    if (result && Object.keys(result).length != 0) {
+      let hasFiles = !EditResultDialog.isEmpty(result.resultFileIDs);
+      if (hasFiles) {
+        return {
+          id: result.id,
+          description: result.description,
+          files: FileStore.getState().filter(file => result.resultFileIDs.includes(file.id)),
+        }
+      } else {
+        return {
+          id: result.id,
+          description: result.description,
+          files: null,
+        }
+      }
+    } else {
+      return {}
    }
-    if (this.props.result != prevProps.result && Object.keys(this.props.result).length != 0) {
-      this.setState({
-        id: this.props.result.id,
-        description: this.props.result.description,
-        result: this.props.result,
-        resultExists: true,
-        files: FileStore.getState().filter(file => this.props.result.resultFileIDs.includes(file.id)),
-      })
-    }
-  }
+  };

  selectUploadFile(event) {
    this.setState({ uploadFile: event.target.files[0] });
  };

-  startFileUpload(){
+  startFileUpload() {
    const formData = new FormData();
    formData.append("file", this.state.uploadFile);

@ -97,24 +109,27 @@ class EditResultDialog extends React.Component {
    this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
  };

-  deleteFile(index){
+  deleteFile(index) {
    let file = this.state.files[index];
    AppDispatcher.dispatch({
-      type: 'files/start-remove',
-      data: file,
+      type: 'resultfiles/start-remove',
+      resultID: this.state.id,
+      fileID: file.id,
+      scenarioID: this.props.scenarioID,
      token: this.props.sessionToken
    });
+
  }

  render() {

    return <Dialog show={this.props.show}
-                  title={'Edit Result No. '+this.state.id}
-                  buttonTitle='Close'
-                  onClose={() => this.onClose()}
-                  blendOutCancel = {true}
-                  valid={true}
-                  size = 'lg'>
+      title={'Edit Result No. ' + this.state.id}
+      buttonTitle='Close'
+      onClose={() => this.onClose()}
+      blendOutCancel={true}
+      valid={true}
+      size='lg'>


      <div>
@ -125,40 +140,40 @@ class EditResultDialog extends React.Component {
        </FormGroup>

        <Table data={this.state.files}>
-            <TableColumn title='ID' dataKey='id'/>
-            <TableColumn title='Name' dataKey='name'/>
-            <TableColumn title='Size (bytes)' dataKey='size'/>
-            <TableColumn title='Type' dataKey='type'/>
-            <TableColumn
-              title=''
-              deleteButton
-              onDelete={(index) => this.deleteFile(index)}
-            />
+          <TableColumn title='ID' dataKey='id' />
+          <TableColumn title='Name' dataKey='name' />
+          <TableColumn title='Size (bytes)' dataKey='size' />
+          <TableColumn title='Type' dataKey='type' />
+          <TableColumn
+            title=''
+            deleteButton
+            onDelete={(index) => this.deleteFile(index)}
+          />
        </Table>


        <FormGroup controlId='resultfile'>
-            <FormLabel>Add Result File</FormLabel>
-            <FormControl type='file' onChange={(event) => this.selectUploadFile(event)} />
+          <FormLabel>Add Result File</FormLabel>
+          <FormControl type='file' onChange={(event) => this.selectUploadFile(event)} />
        </FormGroup>

-          <FormGroup as={Col} >
-            <Button
-              disabled={this.state.uploadFile === null}
-              onClick={() => this.startFileUpload()}>
-              Upload
+        <FormGroup as={Col} >
+          <Button
+            disabled={this.state.uploadFile === null}
+            onClick={() => this.startFileUpload()}>
+            Upload
            </Button>
-          </FormGroup>
+        </FormGroup>
+
+        <FormGroup as={Col} >
+          <ProgressBar
+            striped={true}
+            animated={true}
+            now={this.state.uploadProgress}
+            label={this.state.uploadProgress + '%'}
+          />
+        </FormGroup>

-          <FormGroup as={Col} >
-            <ProgressBar
-              striped={true}
-              animated={true}
-              now={this.state.uploadProgress}
-              label={this.state.uploadProgress + '%'}
-            />
-          </FormGroup>
-      
      </div>
    </Dialog>;
  }
--- a/src/result/result-store.js
+++ b/src/result/result-store.js
@ -25,30 +25,6 @@ class ResultStore extends ArrayStore {
    super('results', ResultsDataManager);
  }

-  saveFile(state, action){
-
-    let fileID = parseInt(action.id)
-    state.forEach((element, index, array) => {
-         if (element.id === fileID) {
-           // save blob object
-           array[index]["data"] = new Blob([action.data.data], {type: action.data.type});
-           // update file type
-           array[index]["type"] = action.data.type;
-
-           if (array[index]["objectURL"] !== ''){
-             // free memory of previously generated object URL
-             URL.revokeObjectURL(array[index]["objectURL"]);
-           }
-           // create an object URL for the file
-           array[index]["objectURL"] = URL.createObjectURL(array[index]["data"])
-        }
-    });
-
-    // announce change to listeners
-    this.__emitChange();
-    return state
-  }
-
  simplify(timestamp) {
    let parts = timestamp.split("T");
    let datestr = parts[0];
@ -67,7 +43,11 @@ class ResultStore extends ArrayStore {
  reduce(state, action) {
    switch (action.type) {
      case 'results/loaded':
-        this.simplifyTimestamps(action.data);
+        if (Array.isArray(action.data)) {
+          this.simplifyTimestamps(action.data);
+        } else {
+          this.simplifyTimestamps([action.data]);
+        }
        return super.reduce(state, action);

      case 'results/added':
@ -78,6 +58,10 @@ class ResultStore extends ArrayStore {
        ResultsDataManager.uploadFile(action.data, action.resultID, action.token, action.progressCallback, action.finishedCallback, action.scenarioID);
        return state;

+      case 'resultfiles/start-remove':
+        ResultsDataManager.removeFile(action.resultID, action.fileID, action.scenarioID, action.token);
+        return state;
+
      default:
        return super.reduce(state, action);
    }
--- a/src/result/results-data-manager.js
+++ b/src/result/results-data-manager.js
@ -19,24 +19,24 @@ import RestDataManager from '../common/data-managers/rest-data-manager';
 import RestAPI from '../common/api/rest-api';
 import AppDispatcher from '../common/app-dispatcher';

-class ResultsDataManager extends RestDataManager{
+class ResultsDataManager extends RestDataManager {

  constructor() {
    super('result', '/results');
  }

  uploadFile(file, resultID, token = null, progressCallback = null, finishedCallback = null, scenarioID) {
-    RestAPI.upload(this.makeURL(this.url + '/' + resultID + '/file') , file, token, progressCallback, scenarioID).then(response => {
+    RestAPI.upload(this.makeURL(this.url + '/' + resultID + '/file'), file, token, progressCallback, scenarioID).then(response => {

      AppDispatcher.dispatch({
        type: 'files/uploaded',
      });

-      // Trigger a results reload
+      // Trigger a result reload
      AppDispatcher.dispatch({
        type: 'results/start-load',
-        param: '?scenarioID=' + scenarioID,
-        token: token
+        data: resultID,
+        token: token,
      });

      // Trigger a files reload
@ -57,6 +57,24 @@ class ResultsDataManager extends RestDataManager{
    });
  }

+  removeFile(resultID, fileID, scenarioID, token) {
+    RestAPI.delete(this.makeURL(this.url + '/' + resultID + '/file/' + fileID), token).then(response => {
+      // reload result
+      AppDispatcher.dispatch({
+        type: 'results/start-load',
+        data: resultID,
+        token: token,
+      });
+
+      // update files
+      AppDispatcher.dispatch({
+        type: 'files/removed',
+        data: fileID,
+        token: token,
+      });
+      console.log(response);
+    });
+  }
 }

 export default new ResultsDataManager();
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@ -114,7 +114,7 @@ class Scenario extends React.Component {

      editResultsModal: prevState.editResultsModal || false,
      modalResultsData: {},
-      modalResultsIndex: 0,
+      modalResultsIndex: prevState.modalResultsIndex,
      newResultModal: false,
      filesToDownload: [],

@ -760,7 +760,7 @@ class Scenario extends React.Component {
              editButton
              downloadAllButton
              deleteButton
-              onEdit={index => this.setState({ editResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
+              onEdit={index => this.setState({ editResultsModal: true, modalResultsIndex: index })}
              onDownloadAll={(index) => this.downloadResultData(this.state.results[index])}
              onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
            />
@ -770,7 +770,8 @@ class Scenario extends React.Component {
            sessionToken={this.state.sessionToken}
            show={this.state.editResultsModal}
            files={this.state.files}
-            result={this.state.modalResultsData}
+            results={this.state.results}
+            resultId={this.state.modalResultsIndex}
            scenarioID={this.state.scenario.id}
            onClose={this.closeEditResultsModal.bind(this)} />
          <DeleteDialog title="result" name={this.state.modalResultsData.id} show={this.state.deleteResultsModal} onClose={(e) => this.closeDeleteResultsModal(e)} />