Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uploads Adjustments #663

Merged
merged 2 commits into from
Sep 27, 2021
Merged

Uploads Adjustments #663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
279d561
Deliniates behavior beterrn submit & save buttons on Upload Edit Scre…
BirdMachine Sep 27, 2021
2468886
Adds helper text to Submiy & Save button zones if the Upload is in a …
BirdMachine Sep 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 23 additions & 12 deletions src/src/components/search/SearchComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, { Component, useState } from "react";
import { withRouter, useHistory } from 'react-router-dom';
import React, { Component } from "react";
import { withRouter } from 'react-router-dom';
import { DataGrid } from '@material-ui/data-grid';
import Paper from '@material-ui/core/Paper';

import { Redirect } from 'react-router'

import axios from "axios";
import DonorForm from "../uuid/donor_form_components/donorForm";
import TissueForm from "../uuid/tissue_form_components/tissueForm";
import UploadsEdit from "../uploads/editUploads";
import DatasetEdit from "../ingest/dataset_edit";
import { SAMPLE_TYPES, ORGAN_TYPES } from "../../constants";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import LinearProgress from '@material-ui/core/LinearProgress';
import { api_search2, search_api_search_group_list } from '../../service/search_api';
import { COLUMN_DEF_DONOR, COLUMN_DEF_SAMPLE, COLUMN_DEF_DATASET, COLUMN_DEF_UPLOADS } from './table_constants';
Expand Down Expand Up @@ -473,7 +474,7 @@ class SearchComponent extends Component {
// console.debug('From Page ', this.state.page);
// console.debug('From Page size', this.state.pageSize);
// console.debug("this.state.page", this.state.page);
if(this.state.page != 0 ){
if(this.state.page !== 0 ){
this.setState({
table_loading:true,
});
Expand Down Expand Up @@ -598,13 +599,18 @@ class SearchComponent extends Component {

onUpdated = data => {
//this.filterEntity();
//console.debug(this.props)
console.debug("onUpdated SC", data)
this.setState({
updateSuccess: true,
editingEntity: data,
show_search: true,
show_search: false,
loading: false
});
}, () => {
console.debug("onUpdated state", this.state)
// ONLY works for functional components and all oura are class components
// this.props.history.push("/"+this.state.formType+"/"+this.state.editNewEntity.uuid)
this.setState({ redirect: true })
});
setTimeout(() => {
this.setState({ updateSuccess: null });
}, 5000);
Expand All @@ -613,7 +619,9 @@ class SearchComponent extends Component {
this.setState({
editingEntity: this.props.editNewEntity
});
console.debug("EditNewEntity")
}

//this.props.onCancel();
};

Expand Down Expand Up @@ -713,14 +721,16 @@ class SearchComponent extends Component {
**/

render() {
const { redirect } = this.state;
if (this.state.isAuthenticated) {
return (

<div className={"searchWrapper"+this.state.show_search} style={{ width: '100%' }}>

{!this.state.show_search && (
<Forms formType={this.state.formType} onCancel={this.handleClose} />
)}
{/* {!this.state.show_search && (
// Being brought in via the renderEditForm call below though
// <Forms formType={this.state.formType} onCancel={this.handleClose} />
)} */}


{/*
Expand Down Expand Up @@ -759,9 +769,10 @@ class SearchComponent extends Component {



renderEditForm() {
renderEditForm = () => {
console.debug("START rendereditForm",this.state)
if (this.state.editingEntity) {

console.debug("editingEntity: ", this.state.editingEntity)
// Loads in for editing things, not new things
const dataType = this.state.editingEntity.entity_type;
if (dataType === "Donor") {
Expand Down
105 changes: 89 additions & 16 deletions src/src/components/uploads/editUploads.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,17 +213,21 @@ class EditUploads extends Component {
};

handleSubmitUpload = (data) =>{
this.setState({
submitting_submission:true,
submitting: false,
})
ingest_api_submit_upload(this.props.editingUpload.uuid, JSON.stringify(data), JSON.parse(localStorage.getItem("info")).nexus_token)
.then((response) => {
console.debug(response.results);
if (response.status === 200) {
this.props.onUpdated(response.results);
} else {
this.setState({ submit_error: true, submitting: false });
this.setState({ submit_error: true, submitting: false, submitting_submission:false });
}
})
.catch((error) => {
this.setState({ submit_error: true, submitting: false });
this.setState({ submit_error: true, submitting: false, submitting_submission:false });
console.debug("SUBMIT error", error)
});

Expand Down Expand Up @@ -262,12 +266,60 @@ class EditUploads extends Component {
// if user selected Publish
ingest_api_validate_upload(this.props.editingUpload.uuid, JSON.stringify(data), JSON.parse(localStorage.getItem("info")).nexus_token)
.then((response) => {
console.debug(response.results);
if (response.status === 200) {
this.props.onUpdated(response.results);
} else {
this.setState({ submit_error: true, submitting: false });
}
console.debug("ingest_api_validate_upload",response.results);
if (response.status === 200) {
this.props.onUpdated(this.props.editingUpload);
this.setState({ submit_error: false, submit_success:true, submitting: false });
} else {
this.setState({ submit_error: true, submitting: false });
}
});
}
}
}
});
};

//@TODO: DRY this out
handleValidateUploadSubmission = (i) => {
this.validateForm().then((isValid) => {
if (isValid) {
if (
!this.props.editingUpload &&
this.state.groups.length > 1 &&
!this.state.GroupSelectShow
){
this.setState({ GroupSelectShow: true });
} else {
this.setState({
GroupSelectShow: false,
submitting_submission: true,
});
this.setState({ submitting_submission: true });


// package the data up
let data = {
title: this.state.title,
description: this.state.description
};


if (this.props.editingUpload) {

console.debug(JSON.stringify(data));
console.debug(JSON.parse(localStorage.getItem("info")));
// if user selected Publish
ingest_api_validate_upload(this.props.editingUpload.uuid, JSON.stringify(data), JSON.parse(localStorage.getItem("info")).nexus_token)
.then((response) => {
console.debug("ingest_api_validate_upload",response.results);
if (response.status === 200) {
this.props.onUpdated(this.props.editingUpload);
//@TODO: Maybe control this in different stat functions we can call, that'll turn off the buttons and generate the right respinse alert perhaps in a switch ?
this.setState({ submit_error: false, submit_success:true, submitting_submission:false, submitting: false });
} else {
this.setState({ submit_error: true, submit_success:false, submitting_submission:false, submitting: false });
}
});
}
}
Expand Down Expand Up @@ -323,6 +375,8 @@ class EditUploads extends Component {
<div className="col-sm-12">
<Divider />
</div>

{this.renderHelperText()}
<div className='col-md-12 text-right pads'>
{this.renderActionButton()}
<button
Expand All @@ -348,24 +402,24 @@ class EditUploads extends Component {
<button
type='button'
className='btn btn-info mr-1'
disabled={this.state.submitting}
onClick={() => this.handleButtonClick(this.state.status.toLowerCase()) }
disabled={this.state.submitting_submission}
onClick={() => this.handleButtonClick(this.state.status.toLowerCase(),"submit") }
data-status={this.state.status.toLowerCase()}
>
{this.state.submitting && (
{this.state.submitting_submission && (
<FontAwesomeIcon
className='inline-icon'
icon={faSpinner}
spin
/>
)}
{!this.state.submitting && "Submit"}
{!this.state.submitting_submission && "Submit"}
</button>
<button
type='button'
className='btn btn-primary mr-1'
disabled={this.state.submitting}
onClick={() => this.handleButtonClick(this.state.status.toLowerCase()) }
onClick={() => this.handleButtonClick(this.state.status.toLowerCase(),"save") }
data-status={this.state.status.toLowerCase()}
>
{this.state.submitting && (
Expand All @@ -385,7 +439,7 @@ class EditUploads extends Component {
type='button'
className='btn btn-info mr-1'
disabled={this.state.submitting}
onClick={() => this.handleButtonClick(this.state.status.toLowerCase()) }
onClick={() => this.handleButtonClick(this.state.status.toLowerCase(),"create") }
data-status={this.state.status.toLowerCase()}
>
{this.state.submitting && (
Expand All @@ -408,6 +462,16 @@ class EditUploads extends Component {
}
};

renderHelperText = () => {
if(this.state.writeable){
return(
<div className="helper-text p-2 m-2 align-right w-100 text-right">
<p className="text-small text-end p-0 m-0">Use the <strong>Submit</strong> button when all data has been uploaded and is ready for HIVE review.</p>
<p className="text-small text-end p-0 m-0">Use the <strong>Save</strong> button to save any updates to the Title or Description.</p>
</div>
)
}
}

componentDidUpdate(prevProps) {
// console.log("componentDidUpdate");
Expand All @@ -427,11 +491,20 @@ class EditUploads extends Component {
"/"+targetPath);
}

handleButtonClick = (i) => {
handleButtonClick = (i,action) => {
this.setState({
new_status: i
}, () => {
this.handleValidateUpload(i);
console.debug("handleButtonClick ",i, action)
if(action){
if(action === "save" || action === "create"){
this.handleValidateUpload(i);
}else if(action==="submit"){
this.handleValidateUploadSubmission(i);
}
}


})
};

Expand Down