Dataset accessions: Show upload indicator

- update handling of dataset.version on updates to Creator, Location, File

src/datasets/actions/editor.ts

@@ -96,22 +96,29 @@ function deleteDataset(dataset: Dataset) {
 // Review step exports
 export { rejectDataset, approveDataset, publishDataset, deleteDataset };
 
+export const clearAccessionRefs = (dataset: Dataset) => (dispatch) => {
+    return DatasetService.upsertAccessions(dataset.uuid, dataset.version, [])
+        .then((saved) => {
+            dispatch(receiveDataset(saved));
+            return saved;
+        }).catch((error) => {
+            log('Publish error', error);
+            return Promise.reject(error);
+        });
+};
 
 // Accession identifiers step
-function updateDatasetAccessionRefs(dataset: Dataset, accessionRefs: AccessionRef[]) {
-    return (dispatch, getState) => {
-
-        return DatasetService.upsertAccessions(dataset.uuid, dataset.version, accessionRefs)
-            .then((saved) => {
-                dispatch(receiveDataset(saved));
-            }).catch((error) => {
-                log('Publish error', error);
-            });
-    };
-}
+export const updateDatasetAccessionRefs = (dataset: Dataset, accessionRefs: AccessionRef[]) => (dispatch) => {
 
-// Accession identifiers step exports
-export { updateDatasetAccessionRefs };
+    return DatasetService.upsertAccessions(dataset.uuid, dataset.version, accessionRefs)
+        .then((saved) => {
+            dispatch(receiveDataset(saved));
+            return saved;
+        }).catch((error) => {
+            log('Publish error', error);
+            return Promise.reject(error);
+        });
+};
 
 
 // Descriptors step
@@ -238,8 +245,10 @@ function updateCreatorRequest(uuid: string, creator: DatasetCreator) {
     return (dispatch, getState) => {
 
         return DatasetService.updateDatasetCreator(uuid, creator)
-            .then((obj) => {
-                dispatch(updateCreator(obj));
+            .then((saved) => {
+                if (saved.version !== creator.version) {
+                    dispatch(updateCreator(saved));
+                }
             }).catch((error) => {
                 log('Update creator error', error);
             });
@@ -313,7 +322,9 @@ function updateLocationRequest(datasetUUID: string, location: DatasetLocation) {
 
         return DatasetService.updateLocation(datasetUUID, location)
             .then((saved) => {
-                dispatch(receiveLocation(saved));
+                if (saved.version !== location.version) {
+                    dispatch(receiveLocation(saved));
+                }
                 dispatch(receiveDataset(refreshStartEndDates(getState().datasets.dashboard.dataset)));
             }).catch((error) => {
                 log('Save error', error);
@@ -340,15 +351,16 @@ export { createLocationRequest, updateLocationRequest, deleteLocationRequest, re
 
 // Common actions
 function loadDataset(uuid: string) {
-    return (dispatch, getState) => {
-
+    return (dispatch): Promise<Dataset> => {
 
         return DatasetService.getDataset(uuid)
             .then((dataset) => {
                 dispatch(receiveDataset(dataset));
+                return dataset;
             })
             .catch((error) => {
                 log('Error', error);
+                return null;
             });
     };
 }
@@ -365,11 +377,12 @@ const saveDataset = (dataset: Dataset) => (dispatch, getState) => {
 
     // remove normalized data here
     const data: Dataset = {
+        ...dataset,
         repositoryFiles: [],
         creators: [],
         locations: [],
         descriptors: [],
-        ...dataset,
+        accessionRefs: [],
     };
 
     return saveOrUpdate(data)

src/datasets/reducers/dashboard.ts

@@ -101,7 +101,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       log('Payload ADD_CREATOR_TO_DATASET', action);
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         return update(state, {
-          dataset: { creators: { $push: [action.payload.creator] } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            creators: { $push: [action.payload.creator] },
+          },
         });
       } else {
         return state;
@@ -112,7 +115,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       log('Payload REMOVE_CREATOR_FROM_DATASET', action);
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         return update(state, {
-          dataset: { creators: { $apply: (creators) => creators.filter((creator) => creator.uuid !== action.payload.creator.uuid) } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            creators: { $apply: (creators) => creators.filter((creator) => creator.uuid !== action.payload.creator.uuid) },
+          },
         });
       } else {
         return state;
@@ -124,7 +130,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         const index = state.dataset.creators.findIndex((creator) => creator.uuid === action.payload.creator.uuid);
         return update(state, {
-          dataset: { creators: { [index]: { $set: action.payload.creator } } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            creators: { [index]: { $set: action.payload.creator } },
+          },
         });
       } else {
         return state;
@@ -136,7 +145,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       log('Payload ADD_LOCATION', action);
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         return update(state, {
-          dataset: { locations: { $push: [action.payload.location] } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            locations: { $push: [action.payload.location] },
+          },
         });
       } else {
         return state;
@@ -147,7 +159,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       log('Payload REMOVE_LOCATION', action);
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         return update(state, {
-          dataset: { locations: { $apply: (locations) => locations.filter((location) => location.uuid !== action.payload.location.uuid) } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            locations: { $apply: (locations) => locations.filter((location) => location.uuid !== action.payload.location.uuid) },
+          },
         });
       } else {
         return state;
@@ -159,7 +174,10 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       if (state.dataset) { // && action.payload.datasetUUID === state.dataset.uuid) {
         const index = state.dataset.locations.findIndex((location) => location.uuid === action.payload.location.uuid);
         return update(state, {
-          dataset: { locations: { [index]: { $set: action.payload.location } } },
+          dataset: {
+            version: { $set: state.dataset.version + 1 },
+            locations: { [index]: { $set: action.payload.location } },
+          },
         });
       } else {
         return state;

src/datasets/ui/dataset-stepper/steps/accessions-list/ListOfAccesion.tsx

@@ -10,10 +10,12 @@ import AccessionRef from 'model/accession/AccessionRef';
 import AccessionRefsTable from 'ui/catalog/accession/AccessionRefsTable';
 import { CSV, ICsvConfiguration } from 'utilities/CSV';
 import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConfiguration';
+import Dataset from 'model/catalog/Dataset';
+import Loading from 'ui/common/Loading';
 
 interface IListOfAccession extends React.ClassAttributes<any> {
     classes: any;
-    onAccessionsUpdated: (accessionRefs: AccessionRef[]) => void;
+    onAccessionsUpdated: (accessionRefs: AccessionRef[]) => Promise<Dataset>;
     accessionRefs: AccessionRef[];
 }
 
@@ -43,14 +45,19 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
             quote: '"',
             autodetect: false,
           },
+          uploading: false,
         };
     }
 
     public dataPasted = (e) => {
       e.preventDefault();
+      this.setState({ ...this.state, uploading: true, uploadText: 'Parsing' });
       console.log('Pasted', e.clipboardData);
       // console.log(e.clipboardData.getData('text/plain'));
-      this.parseCsv(e.clipboardData.getData('text/plain'));
+
+      // Delay parsing a little bit for UI to update
+      const data = e.clipboardData.getData('text/plain');
+      setTimeout(() => this.parseCsv(data), 10);
     }
 
     public textBlurred = (e) => {
@@ -64,6 +71,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
     private parseCsv(csvText: string) {
       // log('CSV text', csvText);
       if (! csvText) {
+        this.setState({ ...this.state, uploading: false, uploadText: undefined });
         return;
       }
 
@@ -78,16 +86,25 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
         .on('json', (jsonObj) => {
           const aid: AccessionRef = jsonObj as AccessionRef;
           newIdentifiers.push(aid);
-          log(aid);
+          // log(aid);
         }).on('end', () => {
-          log('All CSV parsed');
-          this.props.onAccessionsUpdated(newIdentifiers);
+            this.setState({ ...this.state, uploading: true, uploadText: 'Uploading to server' });
+            log('All CSV parsed');
+            this.props.onAccessionsUpdated(newIdentifiers)
+                .then((dataset) => {
+                    console.log('Done', dataset);
+                    this.setState({ ...this.state, uploading: false });
+                }).catch((err) => {
+                    this.setState({ ...this.state, uploading: false });
+                    console.log('Error uploading', err);
+                });
         });
     }
 
     public render() {
 
         const {classes, accessionRefs} = this.props;
+        const { uploading, uploadText } = this.state;
 
         return (
             <div className={ `${ classes.root } m-20 p-20 even-row` }>
@@ -111,9 +128,10 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
                             <Input multiline placeholder="Paste accessions data here (comma separated)" onPaste={ this.dataPasted } onBlur={ this.textBlurred }/>
                         </FormControl>
                     </form>
-
                 </div>
 
+                { uploading && <Loading message={ uploadText } /> }
+
                 <h3>Accession list: { accessionRefs ? accessionRefs.length : 0 } rows</h3>
                 <AccessionRefsTable accessionRefs={ accessionRefs } />
             </div>