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.

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

CDE-62 Connect filter dialog and functionalities #30

Merged
merged 10 commits into from
Mar 19, 2024
10 changes: 8 additions & 2 deletions lib/components/common/CheckBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import {CheckboxDefault, CheckboxSelected} from "../../icons";

interface ICheckbox {
label: string;
sx?: SxProps<Theme>
sx?: SxProps<Theme>;
checked?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
name?: string;
}

const Checkbox: React.FC<ICheckbox> = ({label = '', sx = {}}) => {
const Checkbox: React.FC<ICheckbox> = ({label = '', sx = {}, checked, onChange, name}) => {
return (
<FormControlLabel
sx={sx}
Expand All @@ -17,6 +20,9 @@ const Checkbox: React.FC<ICheckbox> = ({label = '', sx = {}}) => {
disableRipple
icon={<CheckboxDefault/>}
checkedIcon={<CheckboxSelected/>}
checked={checked}
onChange={onChange}
name={name}
/>
}
label={label}
Expand Down
73 changes: 20 additions & 53 deletions lib/components/common/Filters.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
import {Popover, Box, Typography, Button, FormGroup} from '@mui/material';
import React from 'react';
import { Popover, Box, Typography, Button, FormGroup } from '@mui/material';
import Checkbox from "../common/CheckBox";
import { EntityType } from '../../models';

interface CheckedState {
[EntityType.CDE]: boolean;
[EntityType.CustomDictionaryField]: boolean,
[EntityType.Unknown]: boolean,
}

interface FiltersProps {
anchorEl: Element | null;
handleClose: () => void;
handleClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
open: boolean;
id: string | undefined;
checked: CheckedState;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onReset: () => void;
}

const Filters: React.FC<FiltersProps> = ({anchorEl, handleClose, open, id}) => {
const Filters: React.FC<FiltersProps> = ({ anchorEl, handleClose, open, id, checked, onChange, onReset }) => {

return (
<Popover
Expand Down Expand Up @@ -40,6 +51,7 @@ const Filters: React.FC<FiltersProps> = ({anchorEl, handleClose, open, id}) => {
}}>Filter by</Typography>
<Button
variant="text"
onClick={onReset}
sx={{
p: 0,
fontSize: '0.75rem',
Expand All @@ -52,68 +64,23 @@ const Filters: React.FC<FiltersProps> = ({anchorEl, handleClose, open, id}) => {
</Button>
</Box>

<Box p='1rem' sx={{borderBottom: '0.0625rem solid #ECEDEE'}}>
<Box p='1rem' sx={{ borderBottom: '0.0625rem solid #ECEDEE' }}>
<Typography sx={{
fontSize: '0.75rem',
fontWeight: 500,
lineHeight: '150%',
color: '#676C74',
mb: '0.75rem'
}}>Status</Typography>
<Checkbox label="All"/>

<Box pl={3} mt="0.75rem" sx={{
position: 'relative',
'&:before': {
content: '""',
width: '0.0625rem',
height: '100%',
background: '#ECEDEE',
position: 'absolute',
top: 0,
left: '0.4688rem'
}
}}>
<Box mt="0.75rem">
<FormGroup>
<Checkbox label="Mapped to CDE"/>
<Checkbox label="Mapped to Data Dictionary field"/>
<Checkbox label="Unmapped"/>
<Checkbox checked={checked[EntityType.CDE]} onChange={onChange} name={EntityType.CDE} label="Mapped to CDE" />
<Checkbox checked={checked[EntityType.CustomDictionaryField]} onChange={onChange} name={EntityType.CustomDictionaryField} label="Mapped to Data Dictionary field" />
<Checkbox checked={checked[EntityType.Unknown]} onChange={onChange} name={EntityType.Unknown} label="Unmapped" />
</FormGroup>
</Box>
</Box>
<Box p='1rem' sx={{borderBottom: '0.0625rem solid #ECEDEE'}}>
<Typography
sx={{fontSize: '0.75rem', fontWeight: 500, lineHeight: '150%', color: '#676C74', mb: '0.75rem'}}>Type
of mapping</Typography>
<Checkbox label="All"/>
<Box pl={3} mt="0.75rem" sx={{
position: 'relative',
'&:before': {
content: '""',
width: '0.0625rem',
height: '100%',
background: '#ECEDEE',
position: 'absolute',
top: 0,
left: '0.4688rem'
}
}}>
<FormGroup>
<Checkbox label="Mapped to CDE"/>
<Checkbox label="Mapped to Data Dictionary field"/>
<Checkbox label="Unmapped"/>
</FormGroup>
</Box>
</Box>

<Box sx={{
padding: '1rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}}>
<Checkbox label="Hide previously mapped columns"/>
</Box>
</Popover>
)
}
Expand Down
37 changes: 30 additions & 7 deletions lib/components/steps/mapping/MappingSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,53 @@ import {Box, Button, InputAdornment, TextField} from "@mui/material";
import {FilterIcon, SearchIcon} from "../../../icons";
import Filters from "../../common/Filters.tsx";
import { useDebounce } from "../../../hooks.ts";

import { EntityType, FiltersState } from "../../../models.ts";

interface MappingSearchProps {
onChange: (searchTerm: string) => void;
onChange: (searchTerm: string, checked: FiltersState) => void;
}

export default function MappingSearch({onChange}: MappingSearchProps) {

const [searchString, setSearchString] = useState('');
const [filtersState, setFiltersState] = React.useState({
[EntityType.CDE]: false,
[EntityType.CustomDictionaryField]: false,
[EntityType.Unknown]: false,
});

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setFiltersState({
...filtersState,
[event.target.name]: event.target.checked,
});
};

const handleReset = () => {
setFiltersState({
[EntityType.CDE]: false,
[EntityType.CustomDictionaryField]: false,
[EntityType.Unknown]: false
})
};

const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const debouncedSearchValue = useDebounce(searchString);

const handleFiltersClose = () => {
setAnchorEl(null);
onChange(debouncedSearchValue)
};

const handleFiltersOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
}

const open = Boolean(anchorEl);
const id = open ? 'filter-popover' : undefined;

React.useEffect(() => {
onChange(debouncedSearchValue);
}, [debouncedSearchValue, onChange])
onChange(debouncedSearchValue, filtersState);
}, [debouncedSearchValue, filtersState, onChange])


return <Box alignItems="center" display="flex" gap={1.5} mb={3}>
Expand All @@ -42,12 +65,12 @@ export default function MappingSearch({onChange}: MappingSearchProps) {
/>
<Button
variant="outlined"
onClick={handleFiltersClose}
onClick={handleFiltersOpen}
>
<FilterIcon/>
Filter
</Button>

<Filters anchorEl={anchorEl} handleClose={handleFiltersClose} open={open} id={id}/>
<Filters anchorEl={anchorEl} handleClose={handleFiltersClose} open={open} id={id} checked={filtersState} onChange={handleChange} onReset={handleReset}/>
</Box>;
}
17 changes: 13 additions & 4 deletions lib/components/steps/mapping/MappingTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import MappingSearch from "./MappingSearch.tsx";
import {useDataContext} from "../../../contexts/data/DataContext.ts";
import {PairingTooltip} from "./PairingTooltip.tsx";
import {PairingSuggestion} from "./PairingSuggestion.tsx";
import {EntityType, Option, SelectableCollection} from "../../../models.ts";
import {EntityType, Option, SelectableCollection, FiltersState} from "../../../models.ts";
import {getId, getType, isRowMapped} from "../../../helpers/getters.ts";
import {useServicesContext} from "../../../contexts/services/ServicesContext.ts";
import {mapRowToOption} from "../../../helpers/mappers.ts";
Expand Down Expand Up @@ -180,18 +180,28 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
}
}

const handleFiltering = useCallback((searchTerm: string, checked: FiltersState) => {
const allTrue = Object.values(checked).every(value => value === true);

const handleFiltering = useCallback((searchTerm: string) => {
const filteredData = Object.keys(datasetMapping).filter(variableName => {
const variableNameMatch = variableName.toLowerCase().includes(searchTerm.toLowerCase());
const preciseAbbreviation = datasetMapping[variableName][headerIndexes.preciseAbbreviation] || '';
const row = datasetMapping[variableName]
const preciseAbbreviation = row[headerIndexes.preciseAbbreviation] || '';
const preciseAbbreviationMatch = preciseAbbreviation.toLowerCase().includes(searchTerm.toLowerCase());

const entityType = getType(row, headerIndexes);
const isAnyTrue = Object.values(checked).some(value => value === true);

if (isAnyTrue && !allTrue) {
return checked[entityType];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note (non-blocking): This assumes that all filters will be on the row type. Ideally I would prefer a more generic approach but I won't mark it as a blocker since the code correctly addresses the current scope.

}

return variableNameMatch || preciseAbbreviationMatch;
});
setVisibleRows(filteredData);
}, [datasetMapping, headerIndexes]);


const getChipComponent = (key: string) => {
const row = datasetMapping[key];
const entityType = getType(row, headerIndexes);
Expand Down Expand Up @@ -240,7 +250,6 @@ const MappingTab = ({defaultCollection}: MappingProps) => {

const searchText = "Search in " + (selectableCollections.length === 1 ? `${selectableCollections[0].name} collection` : 'multiple collections');


return (
<>
<ModalHeightWrapper pb={10} height='15rem'>
Expand Down
6 changes: 6 additions & 0 deletions lib/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ export interface SelectableCollection {
selected: boolean;
}

export interface FiltersState {
[EntityType.CDE]: boolean;
[EntityType.CustomDictionaryField]: boolean,
[EntityType.Unknown]: boolean,
}

export interface EmailTemplateParams {
email: string;
title: string;
Expand Down