feat: added new input for numeric comparators with floats - Ref gesti…

…on-de-projet#2595

src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/HospitForm/index.tsx

@@ -17,6 +17,7 @@ import SearchbarWithCheck from 'components/ui/Inputs/SearchbarWithCheck'
 import { mappingCriteria } from '../DemographicForm'
 import CriteriaLayout from 'components/ui/CriteriaLayout'
 import CalendarRange from 'components/ui/Inputs/CalendarRange'
+import NumericConditionInput from 'components/ui/Inputs/OccurencesWithFloats'
 
 enum Error {
   EMPTY_FORM,
@@ -767,7 +768,7 @@ const HospitForm = ({
             <FormLabel component="legend" className={classes.durationLegend}>
               Mensurations naissance - Poids (percentile)
             </FormLabel>
-            <OccurenceInput
+            <NumericConditionInput
               value={birthMensurationsPercentil}
               comparator={birthMensurationsPercentilComparator}
               onchange={(newbirthMensurationsPercentil, newComparator) => {
@@ -837,7 +838,7 @@ const HospitForm = ({
             <FormLabel component="legend" className={classes.durationLegend}>
               pH artériel au cordon
             </FormLabel>
-            <OccurenceInput
+            <NumericConditionInput
               value={arterialPhCord}
               comparator={arterialPhCordComparator}
               onchange={(newarterialPhCord, newComparator) => {
@@ -851,7 +852,7 @@ const HospitForm = ({
             <FormLabel component="legend" className={classes.durationLegend}>
               Lactate artériel au cordon (mmol/L)
             </FormLabel>
-            <OccurenceInput
+            <NumericConditionInput
               value={arterialCordLactates}
               comparator={arterialCordLactatesComparator}
               onchange={(newarterialCordLactates, newComparator) => {

src/components/ui/Inputs/OccurencesWithFloats/index.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react'
+import { MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material'
+import { Comparators } from 'types/requestCriterias'
+import { OccurenceInputWrapper } from '../Occurences/styles'
+
+type NumericConditionInputProps = {
+  value: number
+  comparator: Comparators
+  onchange: (value: number, comparator: Comparators) => void
+  enableNegativeValues?: boolean
+}
+
+const NumericConditionInput = ({
+  value,
+  comparator,
+  onchange,
+  enableNegativeValues = false
+}: NumericConditionInputProps) => {
+  const [occurrenceValue, setOccurrenceValue] = useState<number | string>(value)
+  const [comparatorValue, setComparatorValue] = useState(comparator)
+
+  useEffect(() => {
+    if (
+      !enableNegativeValues &&
+      comparatorValue === Comparators.LESS &&
+      (occurrenceValue === 0 || occurrenceValue === '0')
+    ) {
+      setOccurrenceValue(1)
+      onchange(1, comparatorValue)
+    }
+  }, [comparatorValue, occurrenceValue, enableNegativeValues, onchange])
+
+  const handleOccurrenceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+
+    if (newValue === '' || newValue.match(enableNegativeValues ? /^-?\d*\.?\d*$/ : /^\d*\.?\d*$/)) {
+      setOccurrenceValue(newValue)
+      if (newValue !== '' && newValue !== '-' && newValue !== '.') {
+        onchange(parseFloat(newValue), comparatorValue)
+      } else {
+        setOccurrenceValue(newValue)
+      }
+    }
+  }
+  const handleComparatorChange = (event: SelectChangeEvent<Comparators>) => {
+    const newComparator = event.target.value as Comparators
+    setComparatorValue(newComparator)
+    if (
+      !enableNegativeValues &&
+      newComparator === Comparators.LESS &&
+      (occurrenceValue === 0 || occurrenceValue === '0')
+    ) {
+      setOccurrenceValue(1)
+      onchange(1, newComparator)
+    } else {
+      onchange(typeof occurrenceValue === 'string' ? parseFloat(occurrenceValue) : occurrenceValue, newComparator)
+    }
+  }
+
+  return (
+    <OccurenceInputWrapper>
+      <Select
+        style={{ marginRight: '1em' }}
+        id="criteria-occurrenceComparator-select"
+        value={comparatorValue}
+        onChange={handleComparatorChange}
+      >
+        <MenuItem value={Comparators.LESS_OR_EQUAL}>{Comparators.LESS_OR_EQUAL}</MenuItem>
+        <MenuItem value={Comparators.LESS}>{Comparators.LESS}</MenuItem>
+        <MenuItem value={Comparators.EQUAL}>{Comparators.EQUAL}</MenuItem>
+        <MenuItem value={Comparators.GREATER}>{Comparators.GREATER}</MenuItem>
+        <MenuItem value={Comparators.GREATER_OR_EQUAL}>{Comparators.GREATER_OR_EQUAL}</MenuItem>
+      </Select>
+
+      <TextField
+        required
+        type="text"
+        id="criteria-occurrence-required"
+        value={occurrenceValue}
+        onChange={handleOccurrenceChange}
+      />
+    </OccurenceInputWrapper>
+  )
+}
+
+export default NumericConditionInput

src/utils/valueComparator.ts

@@ -42,12 +42,12 @@ export const filterToComparator = (filter: string) => {
 }
 
 export const parseOccurence = (value: string) => {
-  const match = value.match(/^(lt|le|gt|ge)?(-?\d+)$/)
+  const match = value.match(/^(lt|le|gt|ge)?(-?\d*\.?\d*)$/)
   if (match) {
     const [, comparator, number] = match
     const criterion = {
       comparator: comparator ? filterToComparator(comparator) : Comparators.GREATER_OR_EQUAL,
-      value: parseInt(number, 10)
+      value: parseFloat(number)
     }
     return criterion
   } else {