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

Enhance description field in filter form proposed #1

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
fix unused import
  • Loading branch information
ghazwarhili committed Jun 19, 2024
commit 8435a0dc055ace52896885ca60813fade6637bee
16 changes: 15 additions & 1 deletion src/components/filter/filter-form.tsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import { UUID } from 'crypto';
import { elementExistsType } from './criteria-based/criteria-based-filter-edition-dialog';
import { FilterType } from './constants/filter-constants';
import { DescriptionField } from './utils/description-field';
import RadioInput from '../inputs/react-hook-form/radio-input';

interface FilterFormProps {
creation?: boolean;
@@ -60,7 +61,20 @@ export const FilterForm: FunctionComponent<FilterFormProps> = (props) => {
elementExists={props.elementExists}
/>
</Grid>
{props.creation && <DescriptionField />}
{props.creation && (
<>
{props.creation && <DescriptionField />}
{!props.sourceFilterForExplicitNamingConversion && (
<Grid item>
<RadioInput
name={FieldConstants.FILTER_TYPE}
options={Object.values(FilterType)}
formProps={{ onChange: handleChange }} // need to override this in order to do not activate the validate button when changing the filter type
/>
</Grid>
)}
</>
)}
{filterType === FilterType.CRITERIA_BASED.id && (
<CriteriaBasedFilterForm />
)}
101 changes: 44 additions & 57 deletions src/components/filter/utils/description-field.tsx
Original file line number Diff line number Diff line change
@@ -16,20 +16,19 @@ import {
} from '@mui/material';
import { ExpandCircleDown, ExpandMore } from '@mui/icons-material';
import { FormattedMessage } from 'react-intl';
import ExpandingTextField from '../../inputs/react-hook-form/ExpandingTextField';
import { FieldConstants } from '../../../utils/field-constants';
import ExpandingTextField from '../../inputs/react-hook-form/ExpandingTextField';

export const styles = {
descriptionForm: (theme: Theme) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
marginTop: theme.spacing(1),
}),
descriptionAccordion: {
descriptionAccordion: (theme: Theme) => ({
'&:before': {
display: 'none',
},
background: 'none',
},
}),
descriptionAccordionSummary: (theme: Theme) => ({
flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper': {
@@ -38,67 +37,55 @@ export const styles = {
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(0deg)',
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(0),
},
'& .MuiAccordionSummary-root': {
padding: theme.spacing(0),
},
}),
descriptionAccordionDetails: (theme: Theme) => ({
paddingLeft: theme.spacing(3),
}),
};

export function LineSeparator() {
return (
<Grid item xs={12} sx={styles.descriptionAccordionDetails}>
<Divider />
</Grid>
);
}

export const DescriptionField = () => {
const [showDescription, setShowDescription] = useState(false);
const [mouseHover, setMouseHover] = useState(false);

return (
<Grid item xs={12} sx={styles.descriptionForm}>
<Accordion
sx={styles.descriptionAccordion}
disableGutters
elevation={0}
expanded={showDescription}
onChange={(event, showed) => setShowDescription(showed)}
>
<AccordionSummary
sx={styles.descriptionAccordionSummary}
expandIcon={
mouseHover ? <ExpandCircleDown /> : <ExpandMore />
}
onMouseEnter={(event) => setMouseHover(true)}
onMouseLeave={(event) => setMouseHover(false)}
<>
<Grid item xs={12} sx={styles.descriptionForm}>
<Accordion
sx={styles.descriptionAccordion}
disableGutters
elevation={0}
expanded={showDescription}
onChange={(event, showed) => setShowDescription(showed)}
>
<Typography
sx={{
width: '50%',
flexShrink: 0,
marginLeft: '5px',
}}
<AccordionSummary
sx={styles.descriptionAccordionSummary}
expandIcon={
mouseHover ? <ExpandCircleDown /> : <ExpandMore />
}
onMouseEnter={(event) => setMouseHover(true)}
onMouseLeave={(event) => setMouseHover(false)}
>
<FormattedMessage id={'Description'} />
</Typography>
</AccordionSummary>
<AccordionDetails sx={styles.descriptionAccordionDetails}>
<ExpandingTextField
name={FieldConstants.DESCRIPTION}
label={'descriptionProperty'}
minRows={3}
rows={5}
/>
</AccordionDetails>
</Accordion>
{!showDescription && <LineSeparator />}
</Grid>
<Typography
sx={{
width: '50%',
flexShrink: 0,
marginLeft: '5px',
}}
>
<FormattedMessage id={'Description'} />
</Typography>
</AccordionSummary>
<AccordionDetails>
<ExpandingTextField
name={FieldConstants.DESCRIPTION}
minRows={3}
rows={5}
/>
</AccordionDetails>
</Accordion>
</Grid>
{!showDescription && (
<Grid item xs={12}>
<Divider />
</Grid>
)}
</>
);
};