Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Cleanup #1231

Merged
merged 10 commits into from
Mar 6, 2024
Merged

UI Cleanup #1231

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9ad4266
Fix Inconsistant Alerts, Funding and Permit Accessibility Improvements
jeznorth Mar 4, 2024
68bf1c8
Fix Species Autocomplete
jeznorth Mar 4, 2024
ca5293e
Fix Spacing
jeznorth Mar 4, 2024
d09bc3a
Accessiblity Improvements
jeznorth Mar 5, 2024
9d1c872
Fix Formatting
jeznorth Mar 5, 2024
1ce16b3
Merge branch 'dev' into UI-Cleanup
NickPhura Mar 5, 2024
5239dfe
Reverting unintended change
jeznorth Mar 6, 2024
b9b5817
Merge branch 'UI-Cleanup' of https://github.com/bcgov/biohubbc into U…
jeznorth Mar 6, 2024
d7b7d03
Merge remote-tracking branch 'origin/dev' into UI-Cleanup
jeznorth Mar 6, 2024
8d710a8
Fix missing closing tag
jeznorth Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 27 additions & 28 deletions app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Species Inventory Management System</title>

<base href="/" />

<meta name="color-scheme" content="light dark" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.ico" />

<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Species Inventory Management System" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
<div id="root"></div>
</body>
</html>

<head>
<meta charset="utf-8" />
<title>Species Inventory Management System</title>

<base href="/" />

<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0 />
<meta name=" format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.ico" />

<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Species Inventory Management System" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
<div id="root"></div>
</body>

</html>
24 changes: 11 additions & 13 deletions app/src/components/species/FocalSpeciesComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box } from '@mui/material';
import Stack from '@mui/material/Stack';
import AlertBar from 'components/alert/AlertBar';
import { useFormikContext } from 'formik';
import { ITaxonomy } from 'interfaces/useTaxonomyApi.interface';
Expand All @@ -23,7 +23,15 @@ const FocalSpeciesComponent = () => {
};

return (
<>
<Stack>
{submitCount > 0 && errors && get(errors, 'species.focal_species') && (
<AlertBar
severity="error"
variant="outlined"
title="Focal Species missing"
text={get(errors, 'species.focal_species') || 'Select a species'}
/>
)}
<SpeciesAutocompleteField
formikFieldName={'species.focal_species'}
label={'Focal Species'}
Expand All @@ -32,17 +40,7 @@ const FocalSpeciesComponent = () => {
clearOnSelect={true}
/>
<SelectedSpecies selectedSpecies={selectedSpecies} handleRemoveSpecies={handleRemoveSpecies} />
{submitCount > 0 && errors && get(errors, 'species.focal_species') && (
<Box mt={3}>
<AlertBar
severity="error"
variant="standard"
title="Missing Species"
text={get(errors, 'species.focal_species') || 'Select a species'}
/>
</Box>
)}
</>
</Stack>
);
};

Expand Down
2 changes: 1 addition & 1 deletion app/src/components/species/components/SpeciesAutocompleteField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => {
filterSelectedOptions
noOptionsText="No matching options"
options={options}
getOptionLabel={(option) => option.commonName || option.scientificName}
getOptionLabel={(option) => option.scientificName}
isOptionEqualToValue={(option, value) => {
return option.tsn === value.tsn;
}}
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/user/UserCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ const UserCard: React.FC<IUserCard> = (props) => {
return (
<Box>
<Box>
<Typography variant="subtitle1" fontWeight="bold">
<Typography component="div" variant="body2" fontWeight="bold">
{props.name}
</Typography>
</Box>
<Box>
<Typography variant="subtitle2" color="textSecondary">
<Typography component="div" variant="subtitle2" color="textSecondary">
{subTitle}
</Typography>
</Box>
Expand Down
3 changes: 3 additions & 0 deletions app/src/components/user/UserRoleSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ const UserRoleSelector: React.FC<IUserRoleSelectorProps> = (props) => {
<Box flex="0 0 auto">
<Select
size="small"
inputProps={{
'aria-label': 'Select a role'
}}
data-testid={`select-user-role-button-${index}`}
sx={{ width: '200px', backgroundColor: '#fff' }}
displayEmpty
Expand Down
177 changes: 88 additions & 89 deletions app/src/features/surveys/SurveyPermitForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,24 @@
import { mdiPlus, mdiTrashCanOutline } from '@mdi/js';
import { mdiClose, mdiPlus } from '@mdi/js';
import Icon from '@mdi/react';
import { Theme } from '@mui/material';
import { Collapse } from '@mui/material';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import grey from '@mui/material/colors/grey';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import Grid from '@mui/material/Grid';
import IconButton from '@mui/material/IconButton';
import InputLabel from '@mui/material/InputLabel';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import ListItemText from '@mui/material/ListItemText';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { makeStyles } from '@mui/styles';
import CustomTextField from 'components/fields/CustomTextField';
import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
import React from 'react';
import { TransitionGroup } from 'react-transition-group';
import yup from 'utils/YupSchema';

const useStyles = makeStyles((theme: Theme) => ({
permitList: {
'& li:first-of-type': {
marginTop: theme.spacing(-1.5)
},
'& .MuiListItemSecondaryAction-root': {
top: '35px'
}
}
}));

export interface ISurveyPermitFormArrayItem {
permit_id: number;
permit_number: string;
Expand Down Expand Up @@ -77,97 +64,109 @@ export const SurveyPermitFormYupSchema = yup.object().shape({
* @return {*}
*/
const SurveyPermitForm: React.FC = () => {
const classes = useStyles();
const { values, handleChange, getFieldMeta, errors } = useFormikContext<ISurveyPermitForm>();

return (
<FieldArray
name="permit.permits"
render={(arrayHelpers: FieldArrayRenderProps) => (
<>
<List dense disablePadding className={classes.permitList}>
<Stack gap={1}>
<TransitionGroup
component={Stack}
role="list"
gap={1}
sx={{
'&:not(:has(div[role=listitem]))': {
display: 'none'
}
}}>
{values.permit.permits?.map((permit, index) => {
const permitNumberMeta = getFieldMeta(`permit.permits.[${index}].permit_number`);
const permitTypeMeta = getFieldMeta(`permit.permits.[${index}].permit_type`);

return (
<ListItem disableGutters key={index}>
<ListItemText>
<Box>
<Grid container spacing={2}>
<Grid item sm={6}>
<CustomTextField
name={`permit.permits.[${index}].permit_number`}
label="Permit Number"
other={{
required: true,
value: permit.permit_number,
error: permitNumberMeta.touched && Boolean(permitNumberMeta.error),
helperText: permitNumberMeta.touched && permitNumberMeta.error
}}
/>
</Grid>
<Grid item sm={6}>
<FormControl
variant="outlined"
fullWidth
required={true}
error={permitTypeMeta.touched && Boolean(permitTypeMeta.error)}>
<InputLabel id="permit_type">Permit Type</InputLabel>
<Select
id={`permit.permits.[${index}].permit_type`}
name={`permit.permits.[${index}].permit_type`}
labelId="permit_type"
label="Permit Type"
value={permit.permit_type}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Permit Type' }}>
<MenuItem key={1} value="Park Use Permit">
Park Use Permit
</MenuItem>
<MenuItem key={2} value="Wildlife Permit - General">
Wildlife Permit - General
</MenuItem>
<MenuItem key={3} value="Scientific Fish Collection Permit">
Scientific Fish Collection Permit
</MenuItem>
</Select>
<FormHelperText>{permitTypeMeta.touched && permitTypeMeta.error}</FormHelperText>
</FormControl>
</Grid>
</Grid>
</Box>
</ListItemText>
<ListItemSecondaryAction>
<Collapse role="listitem" key={index}>
<Card
jeznorth marked this conversation as resolved.
Show resolved Hide resolved
component={Stack}
variant="outlined"
flexDirection="row"
alignItems="flex-start"
gap={2}
sx={{
width: '100%',
p: 2,
backgroundColor: grey[100]
}}>
<CustomTextField
name={`permit.permits.[${index}].permit_number`}
label="Permit Number"
other={{
required: true,
value: permit.permit_number,
error: permitNumberMeta.touched && Boolean(permitNumberMeta.error),
helperText: permitNumberMeta.touched && permitNumberMeta.error
}}
/>

<FormControl
variant="outlined"
fullWidth
required={true}
error={permitTypeMeta.touched && Boolean(permitTypeMeta.error)}>
<InputLabel id="permit_type">Permit Type</InputLabel>
<Select
id={`permit.permits.[${index}].permit_type`}
name={`permit.permits.[${index}].permit_type`}
labelId="permit_type"
label="Permit Type"
value={permit.permit_type}
onChange={handleChange}
inputProps={{ 'aria-label': 'Permit Type' }}>
<MenuItem key={1} value="Park Use Permit">
Park Use Permit
</MenuItem>
<MenuItem key={2} value="Wildlife Permit - General">
Wildlife Permit - General
</MenuItem>
<MenuItem key={3} value="Scientific Fish Collection Permit">
Scientific Fish Collection Permit
</MenuItem>
</Select>
<FormHelperText>{permitTypeMeta.touched && permitTypeMeta.error}</FormHelperText>
</FormControl>

<IconButton
data-testid="delete-icon"
aria-label="remove permit"
onClick={() => arrayHelpers.remove(index)}>
<Icon path={mdiTrashCanOutline} size={1} />
aria-label="Remove permit from survey"
onClick={() => arrayHelpers.remove(index)}
sx={{
mt: 1.125
}}>
<Icon path={mdiClose} size={1} />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Card>
</Collapse>
);
})}
</List>
</TransitionGroup>
{errors.permit?.permits && !Array.isArray(errors?.permit.permits) && (
<Box pt={2}>
<Typography style={{ fontSize: '12px', color: '#f44336' }}>{errors.permit.permits}</Typography>
</Box>
)}
<Box>
<Button
type="button"
variant="outlined"
color="primary"
aria-label="add permit"
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => arrayHelpers.push(SurveyPermitFormArrayItemInitialValues)}>
Add New Permit
</Button>
</Box>
</>

<Button
type="button"
variant="outlined"
color="primary"
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => arrayHelpers.push(SurveyPermitFormArrayItemInitialValues)}
sx={{
alignSelf: 'flex-start'
}}>
Add New Permit
</Button>
</Stack>
)}
/>
);
Expand Down
1 change: 1 addition & 0 deletions app/src/features/surveys/components/GeneralInformationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ const GeneralInformationForm: React.FC<IGeneralInformationFormProps> = (props) =
<CustomTextField
name="survey_details.survey_name"
label="Survey Name"
maxLength={200}
other={{
required: true
}}
Expand Down
4 changes: 1 addition & 3 deletions app/src/features/surveys/components/SamplingStrategyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ const SamplingStrategyForm = () => {
<>
<Box component="fieldset">
<Typography component="legend">Site Selection Strategies</Typography>
<Box mt={1}>
<SurveySiteSelectionForm onChangeStratumEntryVisibility={setShowStratumForm} />
</Box>
<SurveySiteSelectionForm onChangeStratumEntryVisibility={setShowStratumForm} />
</Box>
<Collapse in={showStratumForm}>
<Box component="fieldset" mt={5}>
Expand Down
Loading
Loading