Money range fixes (#98)

* Add some fixes for the money range input * Reset formattedValue when switching range filter modes * Fix indentation
ingef · Mar 27, 2018 · 3a00001 · 3a00001
1 parent 94941d2
commit 3a00001
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 22 deletions.
diff --git a/frontend/lib/js/external-forms/form-concept-group/FormConceptGroup.js b/frontend/lib/js/external-forms/form-concept-group/FormConceptGroup.js
@@ -109,7 +109,15 @@ const toggleTable = (value, valueIdx, conceptIdx, tableIdx, isExcluded) => {
   ];
 };
 
-const setFilterValue = (value, valueIdx, conceptIdx, tableIdx, filterIdx, filterValue) => {
+const setFilterValue = (
+  value,
+  valueIdx,
+  conceptIdx,
+  tableIdx,
+  filterIdx,
+  filterValue,
+  formattedFilterValue
+) => {
   const concepts = value[valueIdx].concepts;
   const tables = concepts[conceptIdx].tables;
   const filters = tables[tableIdx].filters;
@@ -123,7 +131,8 @@ const setFilterValue = (value, valueIdx, conceptIdx, tableIdx, filterIdx, filter
           ...filters.slice(0, filterIdx),
           {
             ...filters[filterIdx],
-            value: filterValue
+            value: filterValue,
+            formattedValue: formattedFilterValue,
           },
           ...filters.slice(filterIdx + 1),
         ]
@@ -164,7 +173,8 @@ const switchFilterMode = (value, valueIdx, conceptIdx, tableIdx, filterIdx, mode
                 {
                   ...filters[filterIdx],
                   mode: mode,
-                  value: null
+                  value: null,
+                  formattedValue: null,
                 },
                 ...filters.slice(filterIdx + 1),
               ]
@@ -279,15 +289,23 @@ export const FormConceptGroup = (props: PropsType) => (
           toggleTable(props.input.value, valueIdx, conceptIdx, tableIdx, isExcluded)
         )
       }
-      onSetFilterValue={(valueIdx, conceptIdx, tableIdx, filterIdx, filterValue) =>
+      onSetFilterValue={(
+        valueIdx,
+        conceptIdx,
+        tableIdx,
+        filterIdx,
+        filterValue,
+        formattedFilterValue
+      ) =>
         props.input.onChange(
           setFilterValue(
             props.input.value,
             valueIdx,
             conceptIdx,
             tableIdx,
             filterIdx,
-            filterValue
+            filterValue,
+            formattedFilterValue
           )
         )
       }

diff --git a/frontend/lib/js/form-components/ClearableInput.js b/frontend/lib/js/form-components/ClearableInput.js
@@ -38,10 +38,7 @@ const ClearableInput = (props: PropsType) => {
             type={props.inputType}
             onValueChange={(values: NumberFormatValueType) => {
               const { formattedValue, floatValue } = values;
-              props.onChange({
-                formattedValue,
-                raw: floatValue * (T.translate('moneyRange.factor') || 1)
-              });
+              props.onChange(floatValue * (T.translate('moneyRange.factor') || 1), formattedValue);
             }}
             value={props.formattedValue}
             {...props.inputProps}

diff --git a/frontend/lib/js/form-components/InputRange.js b/frontend/lib/js/form-components/InputRange.js
@@ -48,11 +48,11 @@ const InputRange = (props: PropsType) => {
 
   const factor = T.translate('moneyRange.factor') || 1;
   const minFormattedValue =
-    (formattedValue && formattedValue.min) || (parseInt(minValue) / factor) || '';
+    (formattedValue && formattedValue.min) || (parseInt(minValue) / factor) || null;
   const maxFormattedValue =
-    (formattedValue && formattedValue.max) || (parseInt(maxValue) / factor) || '';
+    (formattedValue && formattedValue.max) || (parseInt(maxValue) / factor) || null;
   const exactFormattedValue =
-    (formattedValue && formattedValue.exact) || (parseInt(exactValue) / factor) || '';
+    (formattedValue && formattedValue.exact) || (parseInt(exactValue) / factor) || null;
 
   const isRangeMode = props.mode === 'range';
   const inputProps = {
@@ -61,16 +61,30 @@ const InputRange = (props: PropsType) => {
     max: (props.limits && props.limits.max) || null,
   };
 
-  const onChangeValue = (type, newValue) => {
+  const onChangeValue = (type, newValue, newFormattedValue) => {
     const { value } = props.input;
-    const { formattedValue, raw } = newValue;
-    const nextValue = raw || null;
+    const nextValue = newValue || null;
+    const nextFormattedValue = newFormattedValue || null;
 
     if (type === 'exact')
+      // SET ENTIRE VALUE TO NULL IF POSSIBLE
+      if (nextValue === null)
+        props.input.onChange(null, null);
+      else
         props.input.onChange({
           exact: nextValue
+        }, {
+          exact: nextFormattedValue
         });
     else if (type === 'min' || type === 'max')
+    if (
+      nextValue === null && (
+        (value && value.min == null && type === 'max') ||
+        (value && value.max == null && type === 'min')
+      )
+    )
+      props.input.onChange(null, null);
+    else
         props.input.onChange({
           min: value ? value.min : null,
           max: value ? value.max : null,
@@ -79,10 +93,10 @@ const InputRange = (props: PropsType) => {
         {
           min: props.input.formattedValue ? props.input.formattedValue.min : null,
           max: props.input.formattedValue ? props.input.formattedValue.max : null,
-          [type]: formattedValue
+          [type]: nextFormattedValue
         });
     else
-      props.input.onChange(null);
+      props.input.onChange(null, null);
   };
 
   return (
@@ -120,7 +134,7 @@ const InputRange = (props: PropsType) => {
             input={{
               value: exactValue,
               formattedValue: exactFormattedValue,
-              onChange: (value) => onChangeValue('exact', value)
+              onChange: (value, formattedValue) => onChangeValue('exact', value, formattedValue)
             }}
             inputProps={inputProps}
           />
@@ -139,7 +153,7 @@ const InputRange = (props: PropsType) => {
             input={{
               value: minValue,
               formattedValue: minFormattedValue,
-              onChange: value => onChangeValue('min', value),
+              onChange: (value, formattedValue) => onChangeValue('min', value, formattedValue),
             }}
             inputProps={inputProps}
           />
@@ -153,7 +167,7 @@ const InputRange = (props: PropsType) => {
             input={{
               value: maxValue,
               formattedValue: maxFormattedValue,
-              onChange: value => onChangeValue('max', value),
+              onChange: (value, formattedValue) => onChangeValue('max', value, formattedValue),
             }}
             inputProps={inputProps}
           />

diff --git a/frontend/lib/js/model/table.js b/frontend/lib/js/model/table.js
@@ -16,7 +16,8 @@ export const resetAllFiltersInTables = (tables: TableType[]) => {
     const filters = table.filters
       ? table.filters.map((filter) => ({
           ...filter,
-          value: filter.defaultValue
+          value: filter.defaultValue,
+          formattedValue: undefined
         }))
       : null;
 

diff --git a/frontend/lib/js/query-node-editor/ParameterTableFilters.js b/frontend/lib/js/query-node-editor/ParameterTableFilters.js
@@ -142,6 +142,7 @@ const ParameterTableFilters = (props: PropsType) => (
                       onChange: (value, formattedValue) =>
                         props.onSetFilterValue(filterIdx, value, formattedValue),
                     }}
+                    unit={filter.unit}
                     label={filter.label}
                     mode={filter.mode || 'range'}
                     disabled={!!props.excludeTable}

diff --git a/frontend/lib/js/standard-query-editor/reducer.js b/frontend/lib/js/standard-query-editor/reducer.js
@@ -355,7 +355,8 @@ const switchNodeFilterMode = (state, action) => {
 
   return setNodeFilterProperties(state, action, {
     mode,
-    value: null
+    value: null,
+    formattedValue: null,
   });
 };