Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@mauberti-bc
mauberti-bc committed Jan 29, 2025
1 parent 4394514 commit c071384
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 93 deletions.
3 changes: 2 additions & 1 deletion app/src/features/standards/view/components/AccordionStandardCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,13 @@ export const AccordionStandardCard = (props: PropsWithChildren<IAccordionStandar
e.stopPropagation();
}}
disabled={checkboxDisabled}
sx={{ mr: 1, ml: -1 }}
sx={{ mr: 1, ml: -1, position: 'absolute' }}
/>
)}
<Typography
variant="h5"
sx={{
ml: handleCheckboxChange ? 5 : 0,
'&::first-letter': {
textTransform: 'capitalize'
}
Expand Down
6 changes: 3 additions & 3 deletions ...ures/surveys/observations/observations-table/configure-columns/ConfigureColumnsButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ConfigureColumnsButton = (props: IConfigureColumnsButtonProps) => {
(key) => observationsTableContext.columnVisibilityModel[key] === false
);

// Utility function for finding qualitative options for a given measurement or environment column
// Columns that can be hidden from the table (visibility toggled on/off)
const hideableColumns: IHideableColumn[] = useMemo(() => {
// Map columns to their IHideableColumn definitions to ensure no duplicates
const columnMap = new Map<string, IHideableColumn>();
Expand All @@ -78,7 +78,7 @@ export const ConfigureColumnsButton = (props: IConfigureColumnsButtonProps) => {
columnMap.set(column.field, { ...column, options: [] });
});

// Map and update measurement columns
// Map and format measurement columns
columns
.filter((column) =>
observationsTableContext.measurementColumns.some(
Expand All @@ -101,7 +101,7 @@ export const ConfigureColumnsButton = (props: IConfigureColumnsButtonProps) => {
}
});

// Map and update environment columns
// Map and format environment columns
columns
.filter((column) =>
[
Expand Down
122 changes: 60 additions & 62 deletions ...servations-table/configure-columns/components/environment/ConfigureEnvironmentColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,71 +52,69 @@ export const ConfigureEnvironmentColumns = (props: IConfigureEnvironmentColumnsP
onAddEnvironmentColumn={(environmentColumn) => onAddEnvironmentColumns(environmentColumn)}
/>
{hasEnvironmentColumns ? (
<>
<Typography variant="h5" sx={{ fontWeight: 500 }} color="textSecondary" my={2}>
Selected environments
</Typography>
<Stack gap={2} sx={{ overflowY: 'auto' }} maxHeight={400}>
{environmentColumns.qualitative_environments.map((environment) => (
<Box
display="flex"
alignItems="flex-start"
key={`qualitative_environment_item_${environment.environment_qualitative_id}`}>
<AccordionStandardCard label={environment.name} subtitle={environment.description} colour={grey[100]}>
<Stack gap={1} my={2} flex="1 1 auto">
{environment.options.map((option) => (
<AccordionStandardCard
key={option.environment_qualitative_option_id}
label={option.name}
subtitle={option.description}
colour={grey[200]}
disableCollapse
/>
))}
</Stack>
</AccordionStandardCard>
<Box ml={1} mt={1}>
<IconButton
aria-label="Remove environment column"
onClick={() =>
onRemoveEnvironmentColumns({
qualitative_environments: [environment.environment_qualitative_id],
quantitative_environments: []
})
}
data-testid="configure-environment-qualitative-column-remove-button">
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
<Stack gap={2} sx={{ overflowY: 'auto', mt: 2 }} maxHeight={400}>
{environmentColumns.qualitative_environments.map((environment) => (
<Box
display="flex"
alignItems="flex-start"
key={`qualitative_environment_item_${environment.environment_qualitative_id}`}>
<AccordionStandardCard label={environment.name} subtitle={environment.description} colour={grey[100]}>
<Stack gap={1} my={2}>
{environment.options.map((option) => (
<AccordionStandardCard
key={option.environment_qualitative_option_id}
label={option.name}
subtitle={option.description}
colour={grey[200]}
disableCollapse
/>
))}
</Stack>
</AccordionStandardCard>
<Box ml={1} mt={1}>
<IconButton
aria-label="Remove environment column"
onClick={() =>
onRemoveEnvironmentColumns({
qualitative_environments: [environment.environment_qualitative_id],
quantitative_environments: []
})
}
data-testid="configure-environment-qualitative-column-remove-button">
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
))}
{environmentColumns.quantitative_environments.map((environment) => (
<Box display="flex" key={`quantitative_environment_item_${environment.environment_quantitative_id}`}>
<AccordionStandardCard
label={environment.name}
subtitle={environment.description}
colour={grey[100]}
ornament={
environment.unit ? <ColouredRectangleChip colour={blueGrey} label={environment.unit} /> : undefined
</Box>
))}
{environmentColumns.quantitative_environments.map((environment) => (
<Box
display="flex"
alignItems="flex-start"
key={`quantitative_environment_item_${environment.environment_quantitative_id}`}>
<AccordionStandardCard
label={environment.name}
subtitle={environment.description}
colour={grey[100]}
ornament={
environment.unit ? <ColouredRectangleChip colour={blueGrey} label={environment.unit} /> : undefined
}
/>
<Box ml={1} mt={1}>
<IconButton
aria-label="Remove environment column"
onClick={() =>
onRemoveEnvironmentColumns({
qualitative_environments: [],
quantitative_environments: [environment.environment_quantitative_id]
})
}
/>
<Box ml={1} mt={1}>
<IconButton
aria-label="Remove environment column"
onClick={() =>
onRemoveEnvironmentColumns({
qualitative_environments: [],
quantitative_environments: [environment.environment_quantitative_id]
})
}
data-testid="configure-environment-quantitative-column-remove-button">
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
data-testid="configure-environment-quantitative-column-remove-button">
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
))}
</Stack>
</>
</Box>
))}
</Stack>
) : (
<NoDataOverlay
minHeight="200px"
Expand Down
79 changes: 55 additions & 24 deletions ...tions/observations-table/configure-columns/components/general/ConfigureGeneralColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,45 @@ import Checkbox from '@mui/material/Checkbox';
import grey from '@mui/material/colors/grey';
import FormControlLabel from '@mui/material/FormControlLabel';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
import { IHideableColumn } from '../../ConfigureColumnsButton';

export interface IConfigureGeneralColumnsProps {
/**
* Controls the disabled state of the component controls.
*
* @type {boolean}
* @memberof IConfigureColumnsProps
*/
disabled: boolean;
/**
* The column field names of the hidden columns.
*
* @type {GridColDef<IObservationTableRow>[]}
* @memberof IConfigureColumnsProps
*/
hiddenFields: string[];
/**
* The column definitions of the columns that may be toggled to hidden or visible.
*
* @type {IHideableColumn[]}
* @memberof IConfigureColumnsProps
*/
hideableColumns: IHideableColumn[];
/**
* Callback fired on toggling the visibility of all columns.
*
* @memberof IConfigureGeneralColumnsProps
*/
onToggleShowHideAll: () => void;
/**
* Callback fired on toggling the visibility of a column.
*
* @memberof IConfigureGeneralColumnsProps
*/
onToggleColumnVisibility: (field: string) => void;
}

Expand Down Expand Up @@ -57,37 +86,39 @@ export const ConfigureGeneralColumns = (props: IConfigureGeneralColumnsProps) =>
gap={0.5}
sx={{
my: 2,
p: 0.5,
py: 0.5,
pr: 1,
maxHeight: '100%',
overflowY: 'auto',
textAlign: 'left'
overflowY: 'auto'
}}
disablePadding>
{hideableColumns.map((column) => {
const isSelected = !hiddenFields.includes(column.field);

return (
<AccordionStandardCard
key={column.field}
label={column.headerName ?? column.field}
colour={isSelected ? grey[100] : grey[50]}
subtitle={column.description}
handleCheckboxChange={() => onToggleColumnVisibility(column.field)}
checkboxDisabled={disabled}
checkboxSelected={isSelected}>
{column.options.length > 0 && (
<Stack gap={1} my={2}>
{column.options.map((option) => (
<AccordionStandardCard
key={option.name}
label={option.name}
subtitle={option.description}
colour={grey[200]}
/>
))}
</Stack>
)}
</AccordionStandardCard>
<ListItem sx={{ p: 0 }}>
<AccordionStandardCard
key={column.field}
label={column.headerName ?? column.field}
colour={isSelected ? grey[100] : grey[50]}
subtitle={column.description}
handleCheckboxChange={() => onToggleColumnVisibility(column.field)}
checkboxDisabled={disabled}
checkboxSelected={isSelected}>
{column.options.length > 0 && (
<Stack gap={1} my={2}>
{column.options.map((option) => (
<AccordionStandardCard
key={option.name}
label={option.name}
subtitle={option.description}
colour={grey[200]}
/>
))}
</Stack>
)}
</AccordionStandardCard>
</ListItem>
);
})}
</List>
Expand Down
9 changes: 6 additions & 3 deletions ...ervations-table/configure-columns/components/measurements/ConfigureMeasurementColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import ColouredRectangleChip from 'components/chips/ColouredRectangleChip';
Expand Down Expand Up @@ -86,13 +87,15 @@ export const ConfigureMeasurementColumns = (props: IConfigureMeasurementColumnsP
gap={1}
sx={{
my: 1,
p: 0.5,
py: 0.5,
maxHeight: '100%',
overflowY: 'auto'
}}
disablePadding>
{measurementColumns.map((measurement) => (
<Box display="flex" alignItems="flex-start" key={`measurement_item_${measurement.taxon_measurement_id}`}>
<ListItem
sx={{ p: 0, display: 'flex', alignItems: 'flex-start' }}
key={`measurement_item_${measurement.taxon_measurement_id}`}>
<AccordionStandardCard
label={measurement.measurement_name}
subtitle={measurement.measurement_desc ?? ''}
Expand Down Expand Up @@ -123,7 +126,7 @@ export const ConfigureMeasurementColumns = (props: IConfigureMeasurementColumnsP
<Icon path={mdiTrashCanOutline} size={1} />
</IconButton>
</Box>
</Box>
</ListItem>
))}
</List>
) : (
Expand Down

0 comments on commit c071384

Please sign in to comment.