From 7bc16dc538a022088e66e61c6741debd97361c23 Mon Sep 17 00:00:00 2001 From: veronikaslc Date: Tue, 20 Oct 2020 16:32:12 -0400 Subject: [PATCH] Issue #10: Improved output formatting (#11) --- guids-generator.html | 119 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 96 insertions(+), 23 deletions(-) diff --git a/guids-generator.html b/guids-generator.html index bc9c241..47c5a7e 100644 --- a/guids-generator.html +++ b/guids-generator.html @@ -15,6 +15,7 @@ + @@ -30,7 +31,8 @@ require(["bcrypt"], function(bcrypt) { const { useState } = window['React']; - const { TextField, InputAdornment, Icon, Button, IconButton, Typography, makeStyles, Grid, List, ListItem, ListItemText, FormControl, Select, MenuItem, FormHelperText, InputLabel } = window['MaterialUI']; + const { TextField, InputAdornment, Icon, Button, IconButton, Typography, makeStyles, withStyles, Grid, FormControl, Select, MenuItem, FormHelperText, InputLabel, Table, TableHead, TableRow, TableCell, TableBody, TableContainer, Paper } = window['MaterialUI']; + const { CopyToClipboard } = window['CopyToClipboard']; const useStyles = makeStyles((theme) => ({ bform: { @@ -53,10 +55,6 @@ formControl: { width: theme.spacing(50), }, - boutput: { - width: theme.spacing(70), - marginBottom: theme.spacing(0), - }, labelRoot: { width: theme.spacing(70), color: theme.palette.text.primary, @@ -74,11 +72,46 @@ helperText: { lineHeight: "normal", }, - listItem: { - padding: "0", + copyButton: { + width: theme.spacing(17), + }, + copyButtonSuccess: { + width: theme.spacing(17), + backgroundColor: theme.palette.success.light, + "&:hover,&:focus,&:visited,&": { + backgroundColor: theme.palette.success.main, + } }, })); + const StyledTableCell = withStyles((theme) => ({ + head: { + backgroundColor: theme.palette.action.hover, + padding: theme.spacing(1), + '&:nth-of-type(1)': { + width: theme.spacing(12), + }, + '&:nth-of-type(2)': { + width: theme.spacing(8), + }, + '&:nth-of-type(3)': { + width: theme.spacing(12), + }, + '&:nth-of-type(4)': { + width: theme.spacing(63), + }, + }, + body: { + padding: theme.spacing(1), + }, + }))(TableCell); + + const StyledButton = withStyles((theme) => ({ + label: { + textTransform: "none", + }, + }))(Button); + const salt = "$2a$10$biRUcRBR1wroz1r45ORKs."; // Health card number processing utils @@ -227,6 +260,7 @@ const [ binput, setBinput ] = useState(); const [ projectId, setProjectId ] = useState(new URLSearchParams(window.location.search).get('project_id') || ''); const [ bhashes, setBhashes ] = useState({}); + const [ copied, setCopied ] = useState(false); const [ validatedData, setValidatedData ] = useState([]); const [ dateFormat, setDateFormat ] = useState(DEFAULT_DATE_FORMAT); const HC = 0, PROVINCE = 1, DOB = 2, COMPONENTS = 3; @@ -283,6 +317,7 @@ let value = binput; setBhashes({}); setValidatedData([]); + setCopied(false); if (!value) return; @@ -301,14 +336,14 @@ // There should be 3 pieces per each line: Health card #, Province code, Date of birth let countErr = checkInfoCount(info); if (countErr) { - postProcessed.push({"index": index, "value" : countErr, "isError": true}); + postProcessed.push({"index": index, "info" : info.filter((item)=>true), "value" : countErr, "isError": true}); continue; } // Validate DOB let date = validateDOB(info[DOB]); if (date.error) { - postProcessed.push({"index": index, "value": date.error, "isError": true}); + postProcessed.push({"index": index, "info" : info.filter((item)=>true), "value": date.error, "isError": true}); continue; } else { info[DOB] = date; @@ -317,7 +352,7 @@ // Validate Province code let province = validateProvince(info[PROVINCE]); if (province.error) { - postProcessed.push({"index": index, "value": province.error, "isError": true}); + postProcessed.push({"index": index, "info" : info.filter((item)=>true), "value": province.error, "isError": true}); continue; } else { info[PROVINCE] = province; @@ -326,7 +361,7 @@ // Validate Health card number y province let healthCard = validateHealthCard(info[HC], info[PROVINCE], info[DOB]); if (healthCard.error) { - postProcessed.push({"index": index, "value": healthCard.error, "isError": true}); + postProcessed.push({"index": index, "info" : info.filter((item)=>true), "value": healthCard.error, "isError": true}); continue; } else { info[HC] = healthCard; @@ -335,7 +370,7 @@ // Check duplicated pair let duplicates = checkDuplicates(info, postProcessed); if (duplicates.error) { - postProcessed.push({"index": index, "value": duplicates.error, "isError": true}); + postProcessed.push({"index": index, "info" : info.filter((item)=>true), "value": duplicates.error, "isError": true}); continue; } @@ -376,6 +411,13 @@ }) } + let onCopyButtonClick = () => { + setCopied(true); + setTimeout(function() { + setCopied(false); + }, 3000); + } + return (
GUID generator @@ -430,9 +472,6 @@ className: classes.helperText }} /> - { Object.keys(validatedData).map( item => -
{validatedData[item].isError ? "Line " + (+item+1) + ": " + validatedData[item].value : ""}
- )} - + onSubmit()} variant="contained" color="primary" disabled={!(binput?.trim().length > 0)}>Generate GUIDs { Object.keys(bhashes).length > 0 && - - { validatedData.map( item => - - - - )} - + + + + + Health card # + Province + Date of birth + + + GUID + + item.isError ? '' : bhashes[item.index].value).join('\r\n')} + onCopy={() => onCopyButtonClick()} + options={{"format" : "text/plain", "debug" : true}} + > + {copied ? "check" : "file_copy"}}> + {copied ? "Copied" : "Copy GUIDs"} + + + + + + + + + { validatedData.map( item => + + {item.info[HC]} + {item.info[PROVINCE]} + {item.info[DOB]} + {bhashes[item.index].value} + + ) + } + +
+ }
);