Commit 2c664c30 authored by Matija Obreza's avatar Matija Obreza
Browse files

Dataset accession ref with Loading indicator

parent b2d467d9
......@@ -726,6 +726,7 @@
"excel": "Copy and paste the table from Excel into the text field \"List of accessions described in the dataset\".",
"listDescribed": "List of accessions described in the dataset",
"rowCount": "{{count, number}} accession",
"rowCount_pural": "{{count, number}} accessions",
"placeholder": "Paste accessions data here (comma separated)",
"rematch": "Rematch accessions",
"clearList": "Clear list"
......
......@@ -122,9 +122,11 @@ function updateDatasetAccessionRefs(dataset: Dataset, accessionRefs: AccessionRe
.then((saved) => {
dispatch(receiveDataset(saved));
dispatch(loadMoreAccessions(saved.uuid));
return saved;
}).catch((error) => {
log('Publish error', error);
});
throw error;
});
};
}
......
......@@ -115,6 +115,7 @@
"excel": "Copy and paste the table from Excel into the text field \"List of accessions described in the dataset\".",
"listDescribed": "List of accessions described in the dataset",
"rowCount": "{{count, number}} accession",
"rowCount_pural": "{{count, number}} accessions",
"placeholder": "Paste accessions data here (comma separated)",
"rematch": "Rematch accessions",
"clearList": "Clear list"
......
......@@ -15,10 +15,11 @@ import { CSV, ICsvConfiguration } from 'utilities/CSV';
import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConfiguration';
import ActionButton from 'ui/common/buttons/ActionButton';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Loading from 'ui/common/Loading';
interface IListOfAccession extends React.ClassAttributes<any> {
classes: any;
onAccessionsUpdated: (accessionRefs: AccessionRef[]) => void;
onAccessionsUpdated: (AccessionRefs: AccessionRef[]) => Promise<Dataset>;
accessionRefs: Page<AccessionRef>;
loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
t: any;
......@@ -46,8 +47,12 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
public dataPasted = (e) => {
e.preventDefault();
console.log('Pasted', e.clipboardData);
this.setState({ ...this.state, uploading: true, uploadText: 'Parsing' });
// 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), 50);
}
public textBlurred = (e) => {
this.parseCsv(e.target.value);
......@@ -74,12 +79,14 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
quote: '"',
autodetect: false,
},
uploading: false,
};
}
public render() {
const {classes, accessionRefs, t, loadAccessions} = this.props;
const { classes, accessionRefs, t, loadAccessions } = this.props;
const { uploading, uploadText } = this.state;
return (
<div className={ `${ classes.root } m-20 p-20 even-row` }>
......@@ -113,14 +120,18 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
</div>
{ uploading && <Loading message={ uploadText } /> }
<h3>
{ t('datasets.dashboard.p.stepper.listOfAccessions.rowCount', { count: accessionRefs ? accessionRefs.totalElements : 0 }) }
<span className="float-right">
<ButtonBar>
<ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.rematch') } action={ this.rematchAccessions }/>
<ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.clearList') } action={ this.clearList }/>
</ButtonBar>
</span>
{ !uploading &&
<span className="float-right">
<ButtonBar>
<ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.rematch') } action={ this.rematchAccessions }/>
<ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.clearList') } action={ this.clearList }/>
</ButtonBar>
</span>
}
</h3>
<AccessionRefsTable
loadNextPage={ loadAccessions }
......@@ -133,6 +144,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;
}
......@@ -150,8 +162,15 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
// log(aid);
}).then(() => {
log('All CSV parsed');
this.setState({ ...this.state, uploading: true, uploadText: 'Uploading to server' });
this.props.onAccessionsUpdated(newIdentifiers);
this.setState({ ...this.state, uploading: true, uploadText: `Uploading ${newIdentifiers.length} references to server` });
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);
});
});
}
}
......
......@@ -59,7 +59,7 @@ class AccessionsListStep extends StepperTemplate<IAccessionsListStep> {
protected updateAccessionsRefs = (AccessionRefs: AccessionRef[]) => {
const { item: dataset, updateDatasetAccessionRefs } = this.props;
updateDatasetAccessionRefs(dataset, AccessionRefs);
return updateDatasetAccessionRefs(dataset, AccessionRefs);
}
public componentWillMount() {
......
......@@ -137,7 +137,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
// log(aid);
}).then(() => {
log('All CSV parsed');
this.setState({ ...this.state, uploading: true, uploadText: 'Uploading to server' });
this.setState({ ...this.state, uploading: true, uploadText: `Uploading ${newIdentifiers.length} references to server` });
this.props.onAccessionsUpdated(newIdentifiers)
.then((dataset) => {
console.log('Done', dataset);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment