Issue #5: As a user, I can specify a date format for the data I'm pro…

…viding Fixed bug with wrong error message Added calendar icon"
data-team-uhn · Oct 15, 2020 · 1f78986 · 1f78986
1 parent c0469aa
commit 1f78986
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/guids-generator.html b/guids-generator.html
@@ -63,6 +63,9 @@
             width: theme.spacing(70),
             color: theme.palette.text.primary,
         },
+        selectInputLabel: {
+            marginLeft : theme.spacing(4),
+        },
         main: {
             margin : theme.spacing(6),
         },
@@ -100,7 +103,6 @@
 
         let onDateFormatChange = (value) => {
             setDateFormat(value);
-            validate();
         }
 
         let validatedateDate = (dateText) => {
@@ -312,6 +314,22 @@
             <div className={classes.main}>
                 <Typography variant="h3">GUID generator</Typography>
                 <Grid container direction="column" wrap="nowrap" spacing={6} className={classes.bform}>
+                    <Grid item>
+                        <TextField
+                          id="projectid"
+                          label="Project Id (* optional)"
+                          value={projectId}
+                          className={classes.projectidinput}
+                          onChange={(event) => { setProjectId(event.target.value); setBhashes({}); }}
+                          InputProps={{
+                              startAdornment: (
+                                <InputAdornment position="start">
+                                  <Icon color="primary">label</Icon>
+                                </InputAdornment>
+                              ),
+                           }}
+                        />
+                    </Grid>
                     <Grid item>
                         <TextField
                           multiline
@@ -344,19 +362,22 @@
                     </Grid>
                     <Grid item>
                         <FormControl className={classes.formControl}>
-                            <InputLabel shrink id="date-format">
-                              Date format for the dates of birth
+                            <InputAdornment position="start" className={classes.binputIcon}>
+                              <Icon color="primary">date_range</Icon> 
+                            </InputAdornment>
+                            <InputLabel shrink id="date-format" className={classes.selectInputLabel}>
+                                Date format for the dates of birth
                             </InputLabel>
                             <Select
                               value={dateFormat}
                               onChange={(event) => { onDateFormatChange(event.target.value);}}
-                              className={classes.selectEmpty}
+                              onBlur={(event) => {validate()}}
                             >
                               <MenuItem value="yyyy-MM-dd">yyyy-MM-dd, E.g. 2010-12-23</MenuItem>
                               <MenuItem value="yyyy/MM/dd">yyyy/MM/dd, E.g. 2010/12/23</MenuItem>
                               <MenuItem value="yyyy.MM.dd">yyyy.MM.dd, E.g. 2010.12.23</MenuItem>
                               <MenuItem value="yyyy MM dd">yyyy MM dd, E.g. 2010 12 23</MenuItem>
-                              <MenuItem value="dd-MM-yyyy">yyyy-MM-dd, E.g. 23-12-2010</MenuItem>
+                              <MenuItem value="dd-MM-yyyy">dd-MM-yyyy, E.g. 23-12-2010</MenuItem>
                               <MenuItem value="dd/MM/yyyy">dd/MM/yyyy, E.g. 23/12/2010</MenuItem>
                               <MenuItem value="dd.MM.yyyy">dd.MM.yyyy, E.g. 23.12.2010</MenuItem>
                               <MenuItem value="dd MM yyyy">dd MM yyyy, E.g. 23 12 2010</MenuItem>
@@ -368,22 +389,6 @@
                             <FormHelperText>Please specify the format of the dates of birth by selecting one of the supported formats</FormHelperText>
                         </FormControl>
                     </Grid>
-                    <Grid item>
-                        <TextField
-                          id="projectid"
-                          label="Project Id (* optional)"
-                          value={projectId}
-                          className={classes.projectidinput}
-                          onChange={(event) => { setProjectId(event.target.value); setBhashes({}); }}
-                          InputProps={{
-                              startAdornment: (
-                                <InputAdornment position="start">
-                                  <Icon color="primary">label</Icon>
-                                </InputAdornment>
-                              ),
-                           }}
-                        />
-                    </Grid>
                     <Grid item>
                         <Button onClick={() => onSubmit()} variant="contained" color="primary" disabled={binput?.trim().length == 0} className={classes.bbutton}>Generate GUIDs</Button>
                     </Grid>