diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx index 24fcf0b..2d5ddda 100644 --- a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx +++ b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx @@ -1,4 +1,3 @@ -import { Tooltip, makeStyles, CircularProgress } from "@material-ui/core"; import { styled } from "@mui/material/styles"; import IconButton, { IconButtonProps } from "@mui/material/IconButton"; import Card from "@mui/material/Card"; @@ -13,6 +12,15 @@ import EditIcon from "@material-ui/icons/Edit"; import { red, green } from "@material-ui/core/colors"; import "./StructuralElementInputAccordion.scss"; import { BaseStructuralElementProps } from "./StructuralElementInputProps"; +import React from "react"; +import { + Alert, + CircularProgress, + List, + ListItem, + Tooltip, +} from "@mui/material"; +import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles(() => ({ cardHeaderAction: { @@ -42,6 +50,7 @@ interface StructuralElementInputAccordionProps setExpanded?: React.Dispatch>; inputElements?: JSX.Element; validated: boolean; + errors?: string[]; icon: JSX.Element; pendingResponse?: boolean; } @@ -71,10 +80,13 @@ const StructuralElementInputAccordion: React.FC< handleDelete, inputElements, validated, + errors, icon, pendingResponse, }) => { const classes = useStyles(); + console.log(errors); + console.log(validated); return ( @@ -121,7 +133,7 @@ const StructuralElementInputAccordion: React.FC< root: classes.cardActionsRoot, }} > - {validated ? ( + {errors?.length === 0 && validated ? ( ) : ( - - - + <> + {errors && errors.length ? ( + + {errors?.map((e) => { + return {e}; + })} + + ) : ( + <> + )} + )} {inputElements ? ( = ({ element, - index, handleSave, handleDelete, icon, @@ -51,6 +50,8 @@ const TxSegmentCompInput: React.FC = ({ : null ); + const [errors, setErrors] = useState([]); + // "Text" variables refer to helper or warning text to set under input fields // TODO: this needs refactored so badly const [txAc, setTxAc] = useState(element.inputTx || ""); @@ -234,6 +235,7 @@ const TxSegmentCompInput: React.FC = ({ txSegmentResponse.warnings && txSegmentResponse.warnings?.length > 0 ) { + setErrors(txSegmentResponse.warnings); CheckGenomicCoordWarning(txSegmentResponse.warnings); } else { const inputParams = { @@ -244,6 +246,7 @@ const TxSegmentCompInput: React.FC = ({ inputGenomicStart: txStartingGenomic, inputGenomicEnd: txEndingGenomic, }; + setErrors([]); handleTxElementResponse(txSegmentResponse, inputParams); } }); @@ -278,10 +281,13 @@ const TxSegmentCompInput: React.FC = ({ setEndingExonText("Invalid"); } } + setPendingResponse(false); + setErrors(txSegmentResponse.warnings); } else { setTxAcText(""); setStartingExonText(""); setEndingExonText(""); + setErrors([]); const inputParams = { inputType: txInputType, inputTx: txAc, @@ -678,6 +684,7 @@ const TxSegmentCompInput: React.FC = ({ handleDelete, inputElements, validated, + errors, icon, pendingResponse, });