From 5829a2b62d0144d0c2c3e47263ceb0cdc927fed2 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 11 Sep 2024 10:32:17 +0200 Subject: [PATCH 01/17] draft refacto improve filter ihm Signed-off-by: Mathieu DEHARBE --- src/components/filter/filter-form.tsx | 48 +++++++++++++++++++-------- 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/src/components/filter/filter-form.tsx b/src/components/filter/filter-form.tsx index 059d3fc7..7269e9ca 100644 --- a/src/components/filter/filter-form.tsx +++ b/src/components/filter/filter-form.tsx @@ -29,16 +29,10 @@ interface FilterFormProps { }; } -function FilterForm(props: FilterFormProps) { +function HeaderFilterForm(props: FilterFormProps) { const { sourceFilterForExplicitNamingConversion, creation, activeDirectory, elementExists } = props; - const { setValue } = useFormContext(); - - const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); - // We do this because setValue don't set the field dirty - const handleChange = (_event: React.ChangeEvent, value: string) => { - setValue(FieldConstants.FILTER_TYPE, value); - }; + const { setValue } = useFormContext(); useEffect(() => { if (sourceFilterForExplicitNamingConversion) { @@ -46,8 +40,13 @@ function FilterForm(props: FilterFormProps) { } }, [sourceFilterForExplicitNamingConversion, setValue]); + // We do this because setValue don't set the field dirty + const handleChange = (_event: React.ChangeEvent, value: string) => { + setValue(FieldConstants.FILTER_TYPE, value); + }; + return ( - + <> )} - {filterType === FilterType.CRITERIA_BASED.id && } - {filterType === FilterType.EXPLICIT_NAMING.id && ( - + ); +} + +function FilterForm(props: FilterFormProps) { + const { sourceFilterForExplicitNamingConversion, creation, activeDirectory, elementExists } = props; + + const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); + + return ( + + + - )} - {filterType === FilterType.EXPERT.id && } + + + {filterType === FilterType.CRITERIA_BASED.id && } + {filterType === FilterType.EXPLICIT_NAMING.id && ( + + )} + {filterType === FilterType.EXPERT.id && } + ); } From e6a882f10b22b2fb05cf6d8902defe054994f789 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 18 Sep 2024 15:45:08 +0200 Subject: [PATCH 02/17] new FilterForm file Signed-off-by: Mathieu DEHARBE --- src/components/filter/FilterForm.tsx | 76 +++------------------- src/components/filter/HeaderFilterForm.tsx | 72 ++++++++++++++++++++ 2 files changed, 80 insertions(+), 68 deletions(-) create mode 100644 src/components/filter/HeaderFilterForm.tsx diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index ecb012be..0f792ed9 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -5,81 +5,21 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { useEffect } from 'react'; -import { useFormContext, useWatch } from 'react-hook-form'; +import { useWatch } from 'react-hook-form'; import { Grid } from '@mui/material'; -import { UUID } from 'crypto'; import FieldConstants from '../../utils/constants/fieldConstants'; import CriteriaBasedFilterForm from './criteriaBased/CriteriaBasedFilterForm'; +import HeaderFilterForm, { FilterFormProps } from './HeaderFilterForm'; import ExplicitNamingFilterForm from './explicitNaming/ExplicitNamingFilterForm'; import ExpertFilterForm from './expert/ExpertFilterForm'; import { FilterType } from './constants/FilterConstants'; -import RadioInput from '../inputs/reactHookForm/booleans/RadioInput'; -import { ElementExistsType, ElementType } from '../../utils/types/elementType'; -import UniqueNameInput from '../inputs/reactHookForm/text/UniqueNameInput'; -import DescriptionField from '../inputs/reactHookForm/text/DescriptionField'; - -interface FilterFormProps { - creation?: boolean; - activeDirectory?: UUID; - elementExists?: ElementExistsType; - sourceFilterForExplicitNamingConversion?: { - id: UUID; - equipmentType: string; - }; -} - -function HeaderFilterForm(props: FilterFormProps) { - const { sourceFilterForExplicitNamingConversion, creation, activeDirectory, elementExists } = props; - - const { setValue } = useFormContext(); - - useEffect(() => { - if (sourceFilterForExplicitNamingConversion) { - setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id); - } - }, [sourceFilterForExplicitNamingConversion, setValue]); - - // We do this because setValue don't set the field dirty - const handleChange = (_event: React.ChangeEvent, value: string) => { - setValue(FieldConstants.FILTER_TYPE, value); - }; - - return ( - <> - - - - {creation && ( - <> - - - - {!sourceFilterForExplicitNamingConversion && ( - - - - )} - - )} - - ); -} - -function FilterForm(props: FilterFormProps) { - const { sourceFilterForExplicitNamingConversion, creation, activeDirectory, elementExists } = props; +function FilterForm({ + sourceFilterForExplicitNamingConversion, + creation, + activeDirectory, + elementExists, +}: FilterFormProps) { const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( diff --git a/src/components/filter/HeaderFilterForm.tsx b/src/components/filter/HeaderFilterForm.tsx new file mode 100644 index 00000000..d84dc67c --- /dev/null +++ b/src/components/filter/HeaderFilterForm.tsx @@ -0,0 +1,72 @@ +import { useFormContext } from 'react-hook-form'; +import React, { useEffect } from 'react'; +import { Grid } from '@mui/material'; +import { UUID } from 'crypto'; +import FieldConstants from '../../utils/constants/fieldConstants'; +import { FilterType } from './constants/FilterConstants'; +import UniqueNameInput from '../inputs/reactHookForm/text/UniqueNameInput'; +import { ElementExistsType, ElementType } from '../../utils/types/elementType'; +import DescriptionField from '../inputs/reactHookForm/text/DescriptionField'; +import RadioInput from '../inputs/reactHookForm/booleans/RadioInput'; + +export interface FilterFormProps { + creation?: boolean; + activeDirectory?: UUID; + elementExists?: ElementExistsType; + sourceFilterForExplicitNamingConversion?: { + id: UUID; + equipmentType: string; + }; +} + +function HeaderFilterForm({ + sourceFilterForExplicitNamingConversion, + creation, + activeDirectory, + elementExists, +}: FilterFormProps) { + const { setValue } = useFormContext(); + + useEffect(() => { + if (sourceFilterForExplicitNamingConversion) { + setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id); + } + }, [sourceFilterForExplicitNamingConversion, setValue]); + + // We do this because setValue don't set the field dirty + const handleChange = (_event: React.ChangeEvent, value: string) => { + setValue(FieldConstants.FILTER_TYPE, value); + }; + + return ( + <> + + + + {creation && ( + <> + + + + {!sourceFilterForExplicitNamingConversion && ( + + + + )} + + )} + + ); +} +export default HeaderFilterForm; From 4f53a68ff0390b0b78200c270696dc1aa69bf319 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 18 Sep 2024 16:06:53 +0200 Subject: [PATCH 03/17] corrects errors Signed-off-by: Mathieu DEHARBE --- src/components/filter/FilterForm.tsx | 2 +- src/components/filter/HeaderFilterForm.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index 0f792ed9..53bd8582 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -19,7 +19,7 @@ function FilterForm({ creation, activeDirectory, elementExists, -}: FilterFormProps) { +}: Readonly) { const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( diff --git a/src/components/filter/HeaderFilterForm.tsx b/src/components/filter/HeaderFilterForm.tsx index d84dc67c..95b7ada0 100644 --- a/src/components/filter/HeaderFilterForm.tsx +++ b/src/components/filter/HeaderFilterForm.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + import { useFormContext } from 'react-hook-form'; import React, { useEffect } from 'react'; import { Grid } from '@mui/material'; @@ -24,7 +31,7 @@ function HeaderFilterForm({ creation, activeDirectory, elementExists, -}: FilterFormProps) { +}: Readonly) { const { setValue } = useFormContext(); useEffect(() => { From 7950a93488121b114e4f275f9794a24c431bdc03 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Thu, 19 Sep 2024 12:56:37 +0200 Subject: [PATCH 04/17] fixed window height Signed-off-by: Mathieu DEHARBE --- src/components/filter/FilterForm.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index 53bd8582..42fbcc9a 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -14,6 +14,12 @@ import ExplicitNamingFilterForm from './explicitNaming/ExplicitNamingFilterForm' import ExpertFilterForm from './expert/ExpertFilterForm'; import { FilterType } from './constants/FilterConstants'; +const styles = { + filterForm: { + height: '80vh', + }, +}; + function FilterForm({ sourceFilterForExplicitNamingConversion, creation, @@ -23,7 +29,7 @@ function FilterForm({ const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( - + Date: Tue, 24 Sep 2024 16:13:49 +0200 Subject: [PATCH 05/17] draft scrolling update Signed-off-by: Mathieu DEHARBE --- .../customMuiDialog/CustomMuiDialog.tsx | 7 ++- src/components/filter/FilterForm.tsx | 37 +++++---------- src/components/filter/HeaderFilterForm.tsx | 4 +- .../criteriaBased/CriteriaBasedFilterForm.tsx | 47 ++++++++++++++++--- .../criteriaBased/CriteriaBasedForm.tsx | 30 +----------- 5 files changed, 64 insertions(+), 61 deletions(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index 5972af87..4f11b245 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -38,8 +38,13 @@ const styles = { width: 'auto', minWidth: '1100px', margin: 'auto', + height: '90vh', // devrait être valable seulement pour une version non scrollable spécifique }, }, + unscrollable: { // devrait être valable seulement pour une version non scrollable spécifique + overflowY: 'hidden', + maxHeight: '80vh', + }, }; function CustomMuiDialog({ @@ -120,7 +125,7 @@ function CustomMuiDialog({ - {children} + {children} - - + + {filterType === FilterType.CRITERIA_BASED.id && } + {filterType === FilterType.EXPLICIT_NAMING.id && ( + - - - {filterType === FilterType.CRITERIA_BASED.id && } - {filterType === FilterType.EXPLICIT_NAMING.id && ( - - )} - {filterType === FilterType.EXPERT.id && } - - + )} + {filterType === FilterType.EXPERT.id && } + ); } diff --git a/src/components/filter/HeaderFilterForm.tsx b/src/components/filter/HeaderFilterForm.tsx index 95b7ada0..ffc4435f 100644 --- a/src/components/filter/HeaderFilterForm.tsx +++ b/src/components/filter/HeaderFilterForm.tsx @@ -46,7 +46,7 @@ function HeaderFilterForm({ }; return ( - <> + )} - + ); } export default HeaderFilterForm; diff --git a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx index 74215d4f..641edffb 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx @@ -5,6 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import Grid from '@mui/material/Grid'; +import { useFormContext } from 'react-hook-form'; import FilterProperties, { filterPropertiesYupSchema } from './FilterProperties'; import FieldConstants from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; @@ -12,6 +13,8 @@ import CriteriaBasedForm from './CriteriaBasedForm'; import { getCriteriaBasedFormData, getCriteriaBasedSchema } from './criteriaBasedFilterUtils'; import { FILTER_EQUIPMENTS } from '../utils/filterFormUtils'; import { FreePropertiesTypes } from './FilterFreeProperties'; +import InputWithPopupConfirmation from '../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation'; +import SelectInput from '../../inputs/reactHookForm/selectInputs/SelectInput'; export const criteriaBasedFilterSchema = getCriteriaBasedSchema({ [FieldConstants.ENERGY_SOURCE]: yup.string().nullable(), @@ -24,14 +27,46 @@ export const criteriaBasedFilterEmptyFormData = getCriteriaBasedFormData(null, { [FreePropertiesTypes.FREE_FILTER_PROPERTIES]: [], }); +const styles = { + scrollablePart: { + height: '500px', // tmp : pas trouvé de moyen de déterminer dynamiquement la hauteur, et sans ça overflow ne fonctionne pas... + overflowY: 'auto', + flex: '1 1 auto', + }, +}; + function CriteriaBasedFilterForm() { + const { getValues, setValue } = useFormContext(); + const defaultValues: Record = criteriaBasedFilterEmptyFormData[FieldConstants.CRITERIA_BASED]; + + const openConfirmationPopup = () => { + return JSON.stringify(getValues(FieldConstants.CRITERIA_BASED)) !== JSON.stringify(defaultValues); + }; + + const handleResetOnConfirmation = () => { + Object.keys(defaultValues).forEach((field) => + setValue(`${FieldConstants.CRITERIA_BASED}.${field}`, defaultValues[field]) + ); + }; + return ( - - - + + + + + + + + ); } diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index 5e176e3d..c36f9172 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -5,22 +5,18 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useFormContext, useWatch } from 'react-hook-form'; +import { useWatch } from 'react-hook-form'; import { Grid } from '@mui/material'; import { useEffect } from 'react'; import FieldConstants from '../../../utils/constants/fieldConstants'; -import SelectInput from '../../inputs/reactHookForm/selectInputs/SelectInput'; -import InputWithPopupConfirmation from '../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation'; import { FormEquipment } from '../utils/filterFormUtils'; import { useSnackMessage } from '../../../hooks/useSnackMessage'; export interface CriteriaBasedFormProps { equipments: Record; - defaultValues: Record; } -function CriteriaBasedForm({ equipments, defaultValues }: CriteriaBasedFormProps) { - const { getValues, setValue } = useFormContext(); +function CriteriaBasedForm({ equipments }: CriteriaBasedFormProps) { const { snackError } = useSnackMessage(); const watchEquipmentType = useWatch({ @@ -35,30 +31,8 @@ function CriteriaBasedForm({ equipments, defaultValues }: CriteriaBasedFormProps } }, [snackError, equipments, watchEquipmentType]); - const openConfirmationPopup = () => { - return JSON.stringify(getValues(FieldConstants.CRITERIA_BASED)) !== JSON.stringify(defaultValues); - }; - - const handleResetOnConfirmation = () => { - Object.keys(defaultValues).forEach((field) => - setValue(`${FieldConstants.CRITERIA_BASED}.${field}`, defaultValues[field]) - ); - }; - return ( - - - {watchEquipmentType && equipments[watchEquipmentType] && equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { From 1591f18b457412e1795eb21ee43905d564e2d052 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 24 Sep 2024 18:05:50 +0200 Subject: [PATCH 06/17] much better scrolling Signed-off-by: Mathieu DEHARBE --- .../customMuiDialog/CustomMuiDialog.tsx | 5 ++- src/components/filter/FilterForm.tsx | 16 +++++++- .../criteriaBased/CriteriaBasedFilterForm.tsx | 38 ++++++++++++------- 3 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index 4f11b245..59a0651b 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -41,9 +41,10 @@ const styles = { height: '90vh', // devrait être valable seulement pour une version non scrollable spécifique }, }, - unscrollable: { // devrait être valable seulement pour une version non scrollable spécifique + unscrollable: { + // devrait être valable seulement pour une version non scrollable spécifique + height: '100%', overflowY: 'hidden', - maxHeight: '80vh', }, }; diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index 71e42d61..f81ef512 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -6,6 +6,7 @@ */ import { useWatch } from 'react-hook-form'; +import { Box } from '@mui/material'; import FieldConstants from '../../utils/constants/fieldConstants'; import CriteriaBasedFilterForm from './criteriaBased/CriteriaBasedFilterForm'; import HeaderFilterForm, { FilterFormProps } from './HeaderFilterForm'; @@ -13,6 +14,17 @@ import ExplicitNamingFilterForm from './explicitNaming/ExplicitNamingFilterForm' import ExpertFilterForm from './expert/ExpertFilterForm'; import { FilterType } from './constants/FilterConstants'; +const styles = { + NonScrollableContainer: { + height: '100%', + '&::before': { + content: '""', + height: '100%', + float: 'left', + }, + }, +}; + function FilterForm({ sourceFilterForExplicitNamingConversion, creation, @@ -22,7 +34,7 @@ function FilterForm({ const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( - <> + )} {filterType === FilterType.EXPERT.id && } - + ); } diff --git a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx index 641edffb..618d954e 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx @@ -4,8 +4,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import Grid from '@mui/material/Grid'; import { useFormContext } from 'react-hook-form'; +import { Box } from '@mui/material'; import FilterProperties, { filterPropertiesYupSchema } from './FilterProperties'; import FieldConstants from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; @@ -28,10 +28,20 @@ export const criteriaBasedFilterEmptyFormData = getCriteriaBasedFormData(null, { }); const styles = { - scrollablePart: { - height: '500px', // tmp : pas trouvé de moyen de déterminer dynamiquement la hauteur, et sans ça overflow ne fonctionne pas... - overflowY: 'auto', - flex: '1 1 auto', + ScrollableContainer: { + position: 'relative', + zIndex: '1', + '&::after': { + content: '""', + clear: 'both', + display: 'block', + }, + }, + ScrollableContent: { + position: 'absolute', + width: '100%', + height: '100%', + overflow: 'auto', }, }; @@ -50,8 +60,8 @@ function CriteriaBasedFilterForm() { }; return ( - - + <> + - - - - - - + + + + + + + + ); } From 3139240aeaf4f67f36cda5eb937e0954331b823e Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 24 Sep 2024 18:20:08 +0200 Subject: [PATCH 07/17] read only prop Signed-off-by: Mathieu DEHARBE --- src/components/filter/criteriaBased/CriteriaBasedForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index c36f9172..ca106e83 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -16,7 +16,7 @@ export interface CriteriaBasedFormProps { equipments: Record; } -function CriteriaBasedForm({ equipments }: CriteriaBasedFormProps) { +function CriteriaBasedForm({ equipments }: Readonly) { const { snackError } = useSnackMessage(); const watchEquipmentType = useWatch({ From dedbbd0a1eb25a2d609c1adc790033618b5d1aae Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 1 Oct 2024 10:41:49 +0200 Subject: [PATCH 08/17] 95vh Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index 59a0651b..37686734 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -38,7 +38,7 @@ const styles = { width: 'auto', minWidth: '1100px', margin: 'auto', - height: '90vh', // devrait être valable seulement pour une version non scrollable spécifique + height: '95vh', // devrait être valable seulement pour une version non scrollable spécifique }, }, unscrollable: { From 51d29a1029c55d24b9965e5f2e9d503972863fee Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 1 Oct 2024 13:13:55 +0200 Subject: [PATCH 09/17] unscrollableFullHeight props parameter Signed-off-by: Mathieu DEHARBE --- .../customMuiDialog/CustomMuiDialog.tsx | 21 +++++++++++++++---- .../filter/FilterCreationDialog.tsx | 1 + .../CriteriaBasedFilterEditionDialog.tsx | 1 + .../expert/ExpertFilterEditionDialog.tsx | 1 + .../ExplicitNamingFilterEditionDialog.tsx | 1 + 5 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index 37686734..5417f0d5 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -30,6 +30,7 @@ export interface CustomMuiDialogProps { isDataFetching?: boolean; language?: string; confirmationMessageKey?: string; + unscrollableFullHeight?: boolean; } const styles = { @@ -38,11 +39,17 @@ const styles = { width: 'auto', minWidth: '1100px', margin: 'auto', - height: '95vh', // devrait être valable seulement pour une version non scrollable spécifique + }, + }, + dialogPaperFullHeight: { + '.MuiDialog-paper': { + width: 'auto', + minWidth: '1100px', + margin: 'auto', + height: '95vh', }, }, unscrollable: { - // devrait être valable seulement pour une version non scrollable spécifique height: '100%', overflowY: 'hidden', }, @@ -63,6 +70,7 @@ function CustomMuiDialog({ children, language, confirmationMessageKey, + unscrollableFullHeight = false, }: Readonly) { const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [validatedData, setValidatedData] = useState(undefined); @@ -119,14 +127,19 @@ function CustomMuiDialog({ removeOptional={removeOptional} language={language} > - + {isDataFetching && } - {children} + {children} {isDataReady && } diff --git a/src/components/filter/expert/ExpertFilterEditionDialog.tsx b/src/components/filter/expert/ExpertFilterEditionDialog.tsx index 88ff9e45..d94d9e1c 100644 --- a/src/components/filter/expert/ExpertFilterEditionDialog.tsx +++ b/src/components/filter/expert/ExpertFilterEditionDialog.tsx @@ -143,6 +143,7 @@ function ExpertFilterEditionDialog({ disabledSave={!!nameError || !!isValidating} isDataFetching={dataFetchStatus === FetchStatus.FETCHING} language={language} + unscrollableFullHeight > {isDataReady && } diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx index 6b85a7f0..32763aa1 100644 --- a/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx +++ b/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx @@ -145,6 +145,7 @@ function ExplicitNamingFilterEditionDialog({ disabledSave={!!nameError || !!isValidating} isDataFetching={dataFetchStatus === FetchStatus.FETCHING} language={language} + unscrollableFullHeight > {isDataReady && } From 51a45a27f6c1d93f6322c5d1e59e5877e11fed93 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 1 Oct 2024 14:19:01 +0200 Subject: [PATCH 10/17] padding Signed-off-by: Mathieu DEHARBE --- src/components/filter/FilterForm.tsx | 4 ++-- src/components/filter/HeaderFilterForm.tsx | 2 +- .../filter/criteriaBased/CriteriaBasedFilterForm.tsx | 4 ++-- src/components/filter/criteriaBased/CriteriaBasedForm.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index f81ef512..83ccd7a0 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -15,7 +15,7 @@ import ExpertFilterForm from './expert/ExpertFilterForm'; import { FilterType } from './constants/FilterConstants'; const styles = { - NonScrollableContainer: { + FillerContainer: { height: '100%', '&::before': { content: '""', @@ -34,7 +34,7 @@ function FilterForm({ const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( - + + - + ) { }, [snackError, equipments, watchEquipmentType]); return ( - + {watchEquipmentType && equipments[watchEquipmentType] && equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { From 5e3374f9cc271c065fdf880f0e53ab27cca9a4c0 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 1 Oct 2024 17:20:34 +0200 Subject: [PATCH 11/17] draft scroll for exmplicit naming filters Signed-off-by: Mathieu DEHARBE --- .../ExplicitNamingFilterForm.tsx | 84 ++++++++++++------- 1 file changed, 53 insertions(+), 31 deletions(-) diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx index ae8e2fa6..908451df 100644 --- a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx +++ b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx @@ -7,10 +7,10 @@ import { useCallback, useEffect, useMemo } from 'react'; import { useIntl } from 'react-intl'; import { useFormContext, useWatch } from 'react-hook-form'; -import Grid from '@mui/material/Grid'; import { ValueParserParams } from 'ag-grid-community'; import { v4 as uuid4 } from 'uuid'; import { UUID } from 'crypto'; +import { Box } from '@mui/material'; import FieldConstants from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; import CustomAgGridTable, { @@ -26,11 +26,30 @@ import { FILTER_EQUIPMENTS } from '../utils/filterFormUtils'; import { useSnackMessage } from '../../../hooks/useSnackMessage'; import { ElementType } from '../../../utils/types/elementType'; import ModifyElementSelection from '../../dialogs/modifyElementSelection/ModifyElementSelection'; -import { exportFilter } from '../../../services/study'; +import { exportFilter } from "../../../services"; import { EquipmentType } from '../../../utils/types/equipmentType'; export const FILTER_EQUIPMENTS_ATTRIBUTES = 'filterEquipmentsAttributes'; +const styles = { + ScrollableContainer: { + position: 'relative', + '&::after': { + content: '""', + clear: 'both', + display: 'block', + }, + }, + ScrollableContent: { + // should not be scrollable ! + paddingTop: '10px', + position: 'absolute', + width: '100%', + height: '100%', + overflow: 'auto', // not + }, +}; + function isGeneratorOrLoad(equipmentType: string): boolean { return equipmentType === Generator.type || equipmentType === Load.type; } @@ -212,8 +231,8 @@ function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversion }: E }; return ( - - + <> + )} - + {watchEquipmentType && ( - - - + + + + + )} - + ); } From 8e6a88bee8323db170295a7f17a3255e589d73ef Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 1 Oct 2024 17:51:13 +0200 Subject: [PATCH 12/17] expert filters scroll Signed-off-by: Mathieu DEHARBE --- .../filter/expert/ExpertFilterForm.tsx | 38 ++++++++--- .../filter/expert/stylesExpertFilter.css | 5 -- .../ExplicitNamingFilterForm.tsx | 5 +- .../CustomReactQueryBuilder.tsx | 64 +++++++++---------- 4 files changed, 63 insertions(+), 49 deletions(-) diff --git a/src/components/filter/expert/ExpertFilterForm.tsx b/src/components/filter/expert/ExpertFilterForm.tsx index 8e2a223f..fc01ec72 100644 --- a/src/components/filter/expert/ExpertFilterForm.tsx +++ b/src/components/filter/expert/ExpertFilterForm.tsx @@ -7,7 +7,6 @@ import { useCallback, useMemo } from 'react'; -import Grid from '@mui/material/Grid'; import type { RuleGroupTypeAny } from 'react-querybuilder'; import { formatQuery } from 'react-querybuilder'; import './stylesExpertFilter.css'; @@ -15,6 +14,7 @@ import { useFormContext, useWatch } from 'react-hook-form'; import * as yup from 'yup'; import { v4 as uuid4 } from 'uuid'; import { useIntl } from 'react-intl'; +import { Box } from '@mui/material'; import { testQuery } from './expertFilterUtils'; import { COMBINATOR_OPTIONS, EXPERT_FILTER_EQUIPMENTS, fields, OPERATOR_OPTIONS, RULES } from './expertFilterConstants'; @@ -37,6 +37,24 @@ yup.setLocale({ }, }); +const styles = { + ScrollableContainer: { + position: 'relative', + '&::after': { + content: '""', + clear: 'both', + display: 'block', + }, + }, + ScrollableContent: { + position: 'absolute', + width: '100%', + height: '100%', + maxHeight: '100%', + overflow: 'auto', + }, +}; + export const EXPERT_FILTER_QUERY = 'rules'; function isSupportedEquipmentType(equipmentType: string): boolean { @@ -119,8 +137,8 @@ function ExpertFilterForm() { }, [intl, watchEquipmentType]); return ( - - + <> + - - {watchEquipmentType && isSupportedEquipmentType(watchEquipmentType) && ( - - )} - + + + + {watchEquipmentType && isSupportedEquipmentType(watchEquipmentType) && ( + + )} + + + ); } diff --git a/src/components/filter/expert/stylesExpertFilter.css b/src/components/filter/expert/stylesExpertFilter.css index 6b57ecd7..d0630750 100644 --- a/src/components/filter/expert/stylesExpertFilter.css +++ b/src/components/filter/expert/stylesExpertFilter.css @@ -129,11 +129,6 @@ border-bottom: 2px solid #ba000d; } -.queryBuilder { - overflow: auto; - max-height: 600px; -} - /* DnD section, copied from original, just 'border-bottom-color: lightgrey' change */ [data-inlinecombinators='disabled'] .dndOver.rule, [data-inlinecombinators='disabled'] .dndOver.ruleGroup-header { diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx index 908451df..f0281fd5 100644 --- a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx +++ b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx @@ -26,7 +26,7 @@ import { FILTER_EQUIPMENTS } from '../utils/filterFormUtils'; import { useSnackMessage } from '../../../hooks/useSnackMessage'; import { ElementType } from '../../../utils/types/elementType'; import ModifyElementSelection from '../../dialogs/modifyElementSelection/ModifyElementSelection'; -import { exportFilter } from "../../../services"; +import { exportFilter } from '../../../services'; import { EquipmentType } from '../../../utils/types/equipmentType'; export const FILTER_EQUIPMENTS_ATTRIBUTES = 'filterEquipmentsAttributes'; @@ -41,12 +41,11 @@ const styles = { }, }, ScrollableContent: { - // should not be scrollable ! paddingTop: '10px', position: 'absolute', width: '100%', height: '100%', - overflow: 'auto', // not + overflow: 'auto', }, }; diff --git a/src/components/inputs/reactQueryBuilder/CustomReactQueryBuilder.tsx b/src/components/inputs/reactQueryBuilder/CustomReactQueryBuilder.tsx index 119a9983..70f39efe 100644 --- a/src/components/inputs/reactQueryBuilder/CustomReactQueryBuilder.tsx +++ b/src/components/inputs/reactQueryBuilder/CustomReactQueryBuilder.tsx @@ -5,7 +5,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import Grid from '@mui/material/Grid'; import { QueryBuilderDnD } from '@react-querybuilder/dnd'; import * as ReactDnD from 'react-dnd'; import * as ReactDndHtml5Backend from 'react-dnd-html5-backend'; @@ -14,6 +13,7 @@ import { ActionWithRulesAndAddersProps, Field, formatQuery, QueryBuilder, RuleGr import { useIntl } from 'react-intl'; import { useFormContext } from 'react-hook-form'; import { useCallback, useMemo } from 'react'; +import { Box } from '@mui/material'; import CombinatorSelector from './CombinatorSelector'; import AddButton from './AddButton'; import ValueEditor from './ValueEditor'; @@ -76,39 +76,37 @@ function CustomReactQueryBuilder(props: Readonly) return ( <> - - - - getOperators(fieldName, intl)} - validator={queryValidator} - controlClassnames={{ - queryBuilder: 'queryBuilder-branches', - }} - controlElements={{ - addRuleAction: RuleAddButton, - addGroupAction: GroupAddButton, - combinatorSelector: CombinatorSelector, - removeRuleAction: RemoveButton, - removeGroupAction: RemoveButton, - valueEditor: ValueEditor, - operatorSelector: ValueSelector, - fieldSelector: ValueSelector, - valueSourceSelector: ValueSelector, - }} - listsAsArrays - /> - - - - + + + getOperators(fieldName, intl)} + validator={queryValidator} + controlClassnames={{ + queryBuilder: 'queryBuilder-branches', + }} + controlElements={{ + addRuleAction: RuleAddButton, + addGroupAction: GroupAddButton, + combinatorSelector: CombinatorSelector, + removeRuleAction: RemoveButton, + removeGroupAction: RemoveButton, + valueEditor: ValueEditor, + operatorSelector: ValueSelector, + fieldSelector: ValueSelector, + valueSourceSelector: ValueSelector, + }} + listsAsArrays + /> + + + - + ); } From e8e8f8cba54a06ba7868320adb2d089f3242033e Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 2 Oct 2024 11:45:48 +0200 Subject: [PATCH 13/17] reset CriteriaForm to make it usable with aleas Signed-off-by: Mathieu DEHARBE --- .../criteriaBased/CriteriaBasedFilterForm.tsx | 61 ++----------- .../criteriaBased/CriteriaBasedForm.tsx | 87 +++++++++++++++---- 2 files changed, 76 insertions(+), 72 deletions(-) diff --git a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx index bbeba175..c6075932 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx @@ -4,8 +4,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useFormContext } from 'react-hook-form'; -import { Box } from '@mui/material'; import FilterProperties, { filterPropertiesYupSchema } from './FilterProperties'; import FieldConstants from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; @@ -13,8 +11,6 @@ import CriteriaBasedForm from './CriteriaBasedForm'; import { getCriteriaBasedFormData, getCriteriaBasedSchema } from './criteriaBasedFilterUtils'; import { FILTER_EQUIPMENTS } from '../utils/filterFormUtils'; import { FreePropertiesTypes } from './FilterFreeProperties'; -import InputWithPopupConfirmation from '../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation'; -import SelectInput from '../../inputs/reactHookForm/selectInputs/SelectInput'; export const criteriaBasedFilterSchema = getCriteriaBasedSchema({ [FieldConstants.ENERGY_SOURCE]: yup.string().nullable(), @@ -27,59 +23,14 @@ export const criteriaBasedFilterEmptyFormData = getCriteriaBasedFormData(null, { [FreePropertiesTypes.FREE_FILTER_PROPERTIES]: [], }); -const styles = { - ScrollableContainer: { - position: 'relative', - '&::after': { - content: '""', - clear: 'both', - display: 'block', - }, - }, - ScrollableContent: { - paddingTop: '10px', - position: 'absolute', - width: '100%', - height: '100%', - overflow: 'auto', - }, -}; - function CriteriaBasedFilterForm() { - const { getValues, setValue } = useFormContext(); - const defaultValues: Record = criteriaBasedFilterEmptyFormData[FieldConstants.CRITERIA_BASED]; - - const openConfirmationPopup = () => { - return JSON.stringify(getValues(FieldConstants.CRITERIA_BASED)) !== JSON.stringify(defaultValues); - }; - - const handleResetOnConfirmation = () => { - Object.keys(defaultValues).forEach((field) => - setValue(`${FieldConstants.CRITERIA_BASED}.${field}`, defaultValues[field]) - ); - }; - return ( - <> - - - - - - - - - - + + + ); } diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index 08403491..e1126989 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -5,18 +5,42 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useWatch } from 'react-hook-form'; -import { Grid } from '@mui/material'; -import { useEffect } from 'react'; +import { useFormContext, useWatch } from 'react-hook-form'; +import { Box, Grid } from '@mui/material'; +import { ReactElement, useEffect } from 'react'; import FieldConstants from '../../../utils/constants/fieldConstants'; import { FormEquipment } from '../utils/filterFormUtils'; import { useSnackMessage } from '../../../hooks/useSnackMessage'; +import InputWithPopupConfirmation from '../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation'; +import SelectInput from '../../inputs/reactHookForm/selectInputs/SelectInput'; export interface CriteriaBasedFormProps { equipments: Record; + defaultValues: Record; + children?: ReactElement; } -function CriteriaBasedForm({ equipments }: Readonly) { +const styles = { + ScrollableContainer: { + paddingY: '12px', + position: 'relative', + '&::after': { + content: '""', + clear: 'both', + display: 'block', + }, + }, + ScrollableContent: { + paddingY: '12px', + position: 'absolute', + width: '100%', + height: '100%', + overflow: 'auto', + }, +}; + +function CriteriaBasedForm({ equipments, defaultValues, children }: Readonly) { + const { getValues, setValue } = useFormContext(); const { snackError } = useSnackMessage(); const watchEquipmentType = useWatch({ @@ -31,20 +55,49 @@ function CriteriaBasedForm({ equipments }: Readonly) { } }, [snackError, equipments, watchEquipmentType]); + const openConfirmationPopup = () => { + return JSON.stringify(getValues(FieldConstants.CRITERIA_BASED)) !== JSON.stringify(defaultValues); + }; + + const handleResetOnConfirmation = () => { + Object.keys(defaultValues).forEach((field) => + setValue(`${FieldConstants.CRITERIA_BASED}.${field}`, defaultValues[field]) + ); + }; + return ( - - {watchEquipmentType && - equipments[watchEquipmentType] && - equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { - const EquipmentForm = equipment.renderer; - const uniqueKey = `${watchEquipmentType}-${index}`; - return ( - - - - ); - })} - + <> + + + + + + + {watchEquipmentType && + equipments[watchEquipmentType] && + equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { + const EquipmentForm = equipment.renderer; + const uniqueKey = `${watchEquipmentType}-${index}`; + return ( + + + + ); + })} + {children} + + + + ); } From 1b3d7d289a3057d79c75fc23387fa12fece03017 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 2 Oct 2024 13:12:53 +0200 Subject: [PATCH 14/17] min height Signed-off-by: Mathieu DEHARBE --- src/components/filter/criteriaBased/CriteriaBasedForm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index e1126989..2ee040cd 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -35,6 +35,7 @@ const styles = { position: 'absolute', width: '100%', height: '100%', + minHeight: '200px', overflow: 'auto', }, }; From aadba6aedb0e141d346a713c1289ebc935a9e0ec Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 11 Oct 2024 17:33:10 +0200 Subject: [PATCH 15/17] adds a Readonly Signed-off-by: Mathieu DEHARBE --- src/components/filter/criteriaBased/CriteriaBasedForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index d234abba..6409e30e 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -40,7 +40,7 @@ const styles = { }, }; -export function CriteriaBasedForm({ equipments, defaultValues, children }: CriteriaBasedFormProps) { +export function CriteriaBasedForm({ equipments, defaultValues, children }: Readonly) { const { getValues, setValue } = useFormContext(); const { snackError } = useSnackMessage(); From 6930ffb97746bd78996a07a63f8a353dc566e0e2 Mon Sep 17 00:00:00 2001 From: Thang PHAM Date: Wed, 16 Oct 2024 12:42:32 +0200 Subject: [PATCH 16/17] Improve filter IHM (by using box with flex system) Signed-off-by: Thang PHAM --- .../customMuiDialog/CustomMuiDialog.tsx | 3 + src/components/filter/FilterForm.tsx | 54 ++++++++------- .../criteriaBased/CriteriaBasedForm.tsx | 68 ++++++++----------- .../filter/utils/filterFormUtils.ts | 2 +- 4 files changed, 62 insertions(+), 65 deletions(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index 16bb21ec..cafac452 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -47,9 +47,12 @@ const styles = { minWidth: '1000px', margin: 'auto', height: '95vh', + overflowY: 'hidden', }, }, unscrollable: { + display: 'flex', + flexDirection: 'column', height: '100%', overflowY: 'hidden', }, diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index 423a23a5..5ead60e4 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -7,24 +7,13 @@ import { Box } from '@mui/material'; import { useWatch } from 'react-hook-form'; -import { HeaderFilterForm, FilterFormProps } from './HeaderFilterForm'; +import { FilterFormProps, HeaderFilterForm } from './HeaderFilterForm'; import { FieldConstants } from '../../utils/constants/fieldConstants'; import { CriteriaBasedFilterForm } from './criteriaBased/CriteriaBasedFilterForm'; import { ExplicitNamingFilterForm } from './explicitNaming/ExplicitNamingFilterForm'; import { ExpertFilterForm } from './expert/ExpertFilterForm'; import { FilterType } from './constants/FilterConstants'; -const styles = { - FillerContainer: { - height: '100%', - '&::before': { - content: '""', - height: '100%', - float: 'left', - }, - }, -}; - export function FilterForm({ sourceFilterForExplicitNamingConversion, creation, @@ -34,20 +23,35 @@ export function FilterForm({ const filterType = useWatch({ name: FieldConstants.FILTER_TYPE }); return ( - - - {filterType === FilterType.CRITERIA_BASED.id && } - {filterType === FilterType.EXPLICIT_NAMING.id && ( - + + - )} - {filterType === FilterType.EXPERT.id && } - + + + {filterType === FilterType.CRITERIA_BASED.id && } + {filterType === FilterType.EXPLICIT_NAMING.id && ( + + )} + {filterType === FilterType.EXPERT.id && } + + ); } diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index 6409e30e..ef129fc1 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -20,27 +20,7 @@ export interface CriteriaBasedFormProps { children?: ReactElement; } -const styles = { - ScrollableContainer: { - paddingY: '12px', - position: 'relative', - '&::after': { - content: '""', - clear: 'both', - display: 'block', - }, - }, - ScrollableContent: { - paddingY: '12px', - position: 'absolute', - width: '100%', - height: '100%', - minHeight: '200px', - overflow: 'auto', - }, -}; - -export function CriteriaBasedForm({ equipments, defaultValues, children }: Readonly) { +export function CriteriaBasedForm({ equipments, defaultValues, children }: CriteriaBasedFormProps) { const { getValues, setValue } = useFormContext(); const { snackError } = useSnackMessage(); @@ -68,7 +48,13 @@ export function CriteriaBasedForm({ equipments, defaultValues, children }: Reado return ( <> - + - - - - {watchEquipmentType && - equipments[watchEquipmentType] && - equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { - const EquipmentForm = equipment.renderer; - const uniqueKey = `${watchEquipmentType}-${index}`; - return ( - - - - ); - })} - {children} - - + + + {watchEquipmentType && + equipments[watchEquipmentType] && + equipments[watchEquipmentType].fields.map((equipment: any, index: number) => { + const EquipmentForm = equipment.renderer; + const uniqueKey = `${watchEquipmentType}-${index}`; + return ( + + + + ); + })} + {children} + ); diff --git a/src/components/filter/utils/filterFormUtils.ts b/src/components/filter/utils/filterFormUtils.ts index 81502717..01626094 100644 --- a/src/components/filter/utils/filterFormUtils.ts +++ b/src/components/filter/utils/filterFormUtils.ts @@ -75,7 +75,7 @@ const energySource = { ], }, }; -type FormField = { +export type FormField = { renderer: FunctionComponent; props: { label: string; From fda5dbdabdeba43754bb68565f3e09f978644b98 Mon Sep 17 00:00:00 2001 From: Thang PHAM Date: Wed, 16 Oct 2024 16:02:15 +0200 Subject: [PATCH 17/17] Remove a wrapper box and set padding to 1 for all box Signed-off-by: Thang PHAM --- .../customMuiDialog/CustomMuiDialog.tsx | 1 - src/components/filter/FilterForm.tsx | 24 +++++++------------ .../criteriaBased/CriteriaBasedForm.tsx | 5 ++-- 3 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx index cafac452..0d0a1b31 100644 --- a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx +++ b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx @@ -53,7 +53,6 @@ const styles = { unscrollable: { display: 'flex', flexDirection: 'column', - height: '100%', overflowY: 'hidden', }, }; diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx index 5ead60e4..20ef6009 100644 --- a/src/components/filter/FilterForm.tsx +++ b/src/components/filter/FilterForm.tsx @@ -27,6 +27,7 @@ export function FilterForm({ - - {filterType === FilterType.CRITERIA_BASED.id && } - {filterType === FilterType.EXPLICIT_NAMING.id && ( - - )} - {filterType === FilterType.EXPERT.id && } - + {filterType === FilterType.CRITERIA_BASED.id && } + {filterType === FilterType.EXPLICIT_NAMING.id && ( + + )} + {filterType === FilterType.EXPERT.id && } ); } diff --git a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx index ef129fc1..e67f89f3 100644 --- a/src/components/filter/criteriaBased/CriteriaBasedForm.tsx +++ b/src/components/filter/criteriaBased/CriteriaBasedForm.tsx @@ -51,8 +51,7 @@ export function CriteriaBasedForm({ equipments, defaultValues, children }: Crite