Skip to content
Snippets Groups Projects
Commit 091983f9 authored by Skander Hatira's avatar Skander Hatira
Browse files

second form almost done

parent 574839bf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/SampleForm/SampleForm.js
+ 56
− 51
View file @ 091983f9
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>
);
};
......
src/components/Stepper/AddressForm.js
+ 23
− 15
View file @ 091983f9
......@@ -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" />}
......
src/components/Stepper/PaymentForm.js
+ 2
− 49
View file @ 091983f9
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>
);
}
src/components/UnitForm/UnitForm.js
+ 51
− 46
View file @ 091983f9
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>
);
};
......
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