diff --git a/src/components/SampleForm/SampleForm.js b/src/components/SampleForm/SampleForm.js
index b0e7c521958eefc2543db4b01cbcaa0bb6d94237..4985f492e791cf926b4ced408f22008e78e61b6a 100644
--- a/src/components/SampleForm/SampleForm.js
+++ b/src/components/SampleForm/SampleForm.js
@@ -1,8 +1,27 @@
import React, { useState } from "react";
import classnames from "classnames";
import UnitForm from "../UnitForm/UnitForm";
+import Grid from "@material-ui/core/Grid";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import Typography from "@material-ui/core/Typography";
+import TextField from "@material-ui/core/TextField";
+import InputLabel from "@material-ui/core/InputLabel";
+import { makeStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+const useStyles = makeStyles((theme) => ({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+}));
const SampleForm = () => {
- const blankSample = { sample: " sdsqdqsd", type: " sdqsd" };
+ const classes = useStyles();
+
+ const blankSample = { sample: " " };
const [sampleState, setSampleState] = useState([{ ...blankSample }]);
const addSample = () => {
@@ -14,57 +33,43 @@ const SampleForm = () => {
setSampleState(updatedSamples);
};
return (
- <div className="container">
- <div className="row">
- <div className="col s8 offset-s2">
- <div className="input-field col s12">
- <input type="button" onClick={addSample} value="Add New Sample" />
+ <Grid container spacing={3}>
+ {sampleState.map((val, idx) => {
+ const sampleId = `sample${idx}`;
+ return (
+ <div key={`sample-${idx}`}>
+ <Grid item xs={12} gutterBottom>
+ <FormControl className={classes.formControl}>
+ <TextField
+ id={sampleId}
+ data-idx={idx}
+ label={`sample-${idx + 1}`}
+ className={classnames("", {
+ invalid: sampleState.sample,
+ })}
+ name={sampleId}
+ type="text"
+ required
+ onChange={handleSampleChange}
+ value={sampleState.sample}
+ error={sampleState.sample}
+ />
+ </FormControl>
+ </Grid>
+ <UnitForm classes={classes} />
</div>
- {sampleState.map((val, idx) => {
- const sampleId = `sample-${idx}`;
- const typeId = `type-${idx}`;
- return (
- <div key={`sample-${idx}`}>
- <div className="input-field col s12">
- <input
- onChange={handleSampleChange}
- value={sampleState.sample}
- error={sampleState.sample}
- data-idx={idx}
- className={classnames("", {
- invalid: sampleState.sample,
- })}
- id={sampleId}
- name={sampleId}
- type="text"
- />
- <label htmlFor="name">Name</label>
- <span className="red-text">{sampleState.sample}</span>
- </div>
- <div className="input-field col s12">
- <input
- onChange={handleSampleChange}
- value={sampleState.type}
- error={sampleState.type}
- data-idx={idx}
- className={classnames("", {
- invalid: sampleState.type,
- })}
- id={typeId}
- name={typeId}
- type="text"
- ></input>
- <label htmlFor="type">Type</label>
- <span className="red-text">{sampleState.type}</span>
- </div>
- <UnitForm />
- </div>
- );
- })}
- <input type="submit" value="Submit" />
- </div>
- </div>
- </div>
+ );
+ })}
+ <Fab
+ size="small"
+ onClick={addSample}
+ value="Add New Sample"
+ color="primary"
+ aria-label="add"
+ >
+ <AddIcon />
+ </Fab>
+ </Grid>
);
};
diff --git a/src/components/Stepper/AddressForm.js b/src/components/Stepper/AddressForm.js
index ae4e9037ba5d4246ff0728601470f394e95d3fc9..49820628af907e20620db299a2b462cba45baa8f 100644
--- a/src/components/Stepper/AddressForm.js
+++ b/src/components/Stepper/AddressForm.js
@@ -126,15 +126,14 @@ export default function AddressForm() {
<MenuItem value={5}>Upload</MenuItem>
</label>
</Select>
- <FormHelperText>Choose adapters.</FormHelperText>
+ <FormHelperText>Choose adapters</FormHelperText>
</FormControl>
</Grid>
- <Grid item xs={12}>
+ <Grid item xs={12} sm={6}>
<FormControl className={classes.formControl}>
<InputLabel id="genome">Genome</InputLabel>
<TextField
type="file"
- hidden
required
id="genome"
name="genome"
@@ -148,6 +147,25 @@ export default function AddressForm() {
<FormHelperText>Choose genome in .fasta Format</FormHelperText>
</FormControl>
</Grid>
+ <Grid item xs={12} sm={6}>
+ <FormControl className={classes.formControl}>
+ <InputLabel id="outdir">Output</InputLabel>
+ <TextField
+ type="file"
+ required
+ id="outdir"
+ name="outdir"
+ label="Output"
+ inputProps={{
+ directory: "",
+ webkitdirectory: "",
+ }}
+ fullWidth
+ autoComplete="family-name"
+ />
+ <FormHelperText>Choose an output directory</FormHelperText>
+ </FormControl>
+ </Grid>
<Grid item xs={12} sm={4}>
<FormControl className={classes.formControl}>
<Typography id="minlen" gutterBottom>
@@ -161,7 +179,7 @@ export default function AddressForm() {
max={100}
valueLabelDisplay="auto"
/>{" "}
- <FormHelperText>Choose minimal read length.</FormHelperText>
+ <FormHelperText>Choose minimal read length</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12} sm={4}>
@@ -200,20 +218,10 @@ export default function AddressForm() {
valueLabelDisplay="auto"
/>{" "}
<FormHelperText>
- Choose k-mer length for alignment. Higher : Slower.
+ Choose k-mer length for alignment. Higher : Slower
</FormHelperText>
</FormControl>
</Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- required
- id="country"
- name="country"
- label="Country"
- fullWidth
- autoComplete="shipping country"
- />
- </Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="secondary" name="subsample" />}
diff --git a/src/components/Stepper/PaymentForm.js b/src/components/Stepper/PaymentForm.js
index 9809a0527551c7bf3b60185477c3fd1c89f6661b..59fc8ac6f4d1a553ca1cf107b6c0bf93f5c301b5 100644
--- a/src/components/Stepper/PaymentForm.js
+++ b/src/components/Stepper/PaymentForm.js
@@ -1,9 +1,6 @@
import React from "react";
import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
+import SampleForm from "../SampleForm/SampleForm";
export default function PaymentForm() {
return (
@@ -11,51 +8,7 @@ export default function PaymentForm() {
<Typography variant="h6" gutterBottom>
Experimental design{" "}
</Typography>
- <Grid container spacing={3}>
- <Grid item xs={12} md={6}>
- <TextField
- required
- id="cardName"
- label="Name on card"
- fullWidth
- autoComplete="cc-name"
- />
- </Grid>
- <Grid item xs={12} md={6}>
- <TextField
- required
- id="cardNumber"
- label="Card number"
- fullWidth
- autoComplete="cc-number"
- />
- </Grid>
- <Grid item xs={12} md={6}>
- <TextField
- required
- id="expDate"
- label="Expiry date"
- fullWidth
- autoComplete="cc-exp"
- />
- </Grid>
- <Grid item xs={12} md={6}>
- <TextField
- required
- id="cvv"
- label="CVV"
- helperText="Last three digits on signature strip"
- fullWidth
- autoComplete="cc-csc"
- />
- </Grid>
- <Grid item xs={12}>
- <FormControlLabel
- control={<Checkbox color="secondary" name="saveCard" value="yes" />}
- label="Remember credit card details for next time"
- />
- </Grid>
- </Grid>
+ <SampleForm />
</React.Fragment>
);
}
diff --git a/src/components/UnitForm/UnitForm.js b/src/components/UnitForm/UnitForm.js
index 37d7d977452c9dbbf03295ca3bb738ad81b3d5ae..783135bfff4a15601bf104ffeb3b552125747e25 100644
--- a/src/components/UnitForm/UnitForm.js
+++ b/src/components/UnitForm/UnitForm.js
@@ -1,6 +1,11 @@
import React, { useState } from "react";
+import Grid from "@material-ui/core/Grid";
+import Fab from "@material-ui/core/Fab";
+import AddIcon from "@material-ui/icons/Add";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";
-const UnitForm = () => {
+const UnitForm = ({ classes }) => {
const blankUnit = { r1: "", r2: "" };
const [unitState, setUnitState] = useState([{ ...blankUnit }]);
@@ -13,51 +18,51 @@ const UnitForm = () => {
setUnitState(updatedUnits);
};
return (
- <div className="container">
- <div className="row">
- <div className="col s12 ">
- <div className="input-field col s12">
- <input type="button" onClick={addUnit} value="Add Unit Pair" />
- </div>
- {unitState.map((val, idx) => {
- const r1Id = `read1-${idx}`;
- const r2Id = `read2-${idx}`;
- return (
- <div key={`unit-${idx}`}>
- <div className="s12">
- <label>
- Select Left read(s) , different lanes will be joined into a
- single r1 file
- </label>
- <input
- type="file"
- id={r1Id}
- name="r1"
- data-idx={idx}
- multiple
- onChange={handleUnitChange}
- />
- </div>
- <div className="s12">
- <label>
- Select Right read(s) , different lanes will be joined into a
- single r2 file
- </label>
- <input
- type="file"
- id={r2Id}
- name="r2"
- data-idx={idx}
- multiple
- onChange={handleUnitChange}
- />
- </div>
- </div>
- );
- })}
- </div>
- </div>
- </div>
+ <Grid item xs={12}>
+ <Fab
+ size="small"
+ onClick={addUnit}
+ value="Add Unit Pair"
+ color="primary"
+ aria-label="add"
+ >
+ <AddIcon />
+ </Fab>{" "}
+ {unitState.map((val, idx) => {
+ const r1Id = `read1-${idx}`;
+ const r2Id = `read2-${idx}`;
+ return (
+ <Grid key={`unit-${idx}`} container>
+ <Grid item xs={12} md={6}>
+ <FormControl className={classes.formControl}>
+ <input
+ type="file"
+ id={r1Id}
+ name="r1"
+ data-idx={idx}
+ multiple
+ onChange={handleUnitChange}
+ />
+ <FormHelperText>Insert Forward Read(s)</FormHelperText>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <FormControl className={classes.formControl}>
+ <input
+ type="file"
+ id={r2Id}
+ name="r2"
+ data-idx={idx}
+ multiple
+ onChange={handleUnitChange}
+ />
+ <FormHelperText>Insert Reverse Read(s)</FormHelperText>
+ </FormControl>
+ </Grid>
+ </Grid>
+ );
+ })}
+ </Grid>
);
};