Release 1.8.0-RC1 back into develop (#94)

* prepare release 1.8.0-RC1

* Feature/money filter (#92)

* Replace concept nodes by concept lists (#88)

* Make concept lists the default node type, remove special handling

* Add code list resolution to demo data

* initial money range filter

* update moneyRange

* remove accounting
update yarn.lock

* update demo data

* update formatted value for money range

* fix decimal scale expect number

* fixed wrong result display position (#93)

* update money range

* fix type imports

* update demo data

* reset max-len in eslintrc.json

frontend/app/api/stored-queries/25.json

@@ -31,7 +31,17 @@
             "type": "CONCEPT",
             "tables": [
               {
-                "id": "feature_films"
+                "id": "feature_films",
+                "filters": [
+                  {
+                    "id": "budget",
+                    "type": "MONEY_RANGE",
+                    "value": {
+                      "min": 10000000,
+                      "max": 150000000
+                    }
+                  }
+                ]
               },
               {
                 "id": "tv_series"

frontend/lib/js/common/types/backend.js

@@ -18,17 +18,19 @@ export type InfoType = {
 }
 
 export type RangeFilterValueType = { min?: number, max?: number, exact?: number }
+export type RangeFilterFormattedValueType = { min?: number, max?: number, exact?: number }
 export type RangeFilterType = {
   id: number,
   label: string,
   description?: string,
-  type: 'INTEGER_RANGE' | 'REAL_RANGE',
+  type: 'INTEGER_RANGE' | 'REAL_RANGE' | 'MONEY_RANGE',
+  value: ?RangeFilterValueType,
+  formattedValue: ?RangeFilterFormattedValueType,
   unit?: string,
   mode: 'range' | 'exact',
   precision?: number,
   min?: number,
   max?: number,
-  defaultValue: ?RangeFilterValueType
 }
 
 export type MultiSelectFilterValueType = (string | number)[];

frontend/lib/js/form-components/ClearableInput.js

@@ -2,28 +2,59 @@
 
 import React                from 'react';
 import T                    from 'i18n-react';
+import NumberFormat         from 'react-number-format';
 
 import { isEmpty }          from '../common/helpers';
+import { MONEY_RANGE }      from './filterTypes';
 
 type PropsType = {
   inputType: string,
+  valueType?: string,
   placeholder?: string,
   value: ?(number | string),
+  formattedValue?: string,
   inputProps?: Object,
   onChange: Function,
 };
 
+type NumberFormatValueType = {
+  floatValue:number,
+  formattedValue: string,
+  value: string
+};
+
 const ClearableInput = (props: PropsType) => {
   return (
     <span className="clearable-input">
-      <input
-        className="clearable-input__input"
-        placeholder={props.placeholder}
-        type={props.inputType}
-        onChange={(e) => props.onChange(e.target.value)}
-        value={props.value}
-        {...props.inputProps}
-      />
+      {
+        props.valueType === MONEY_RANGE
+        ? <NumberFormat
+            prefix={T.translate('moneyRange.prefix')}
+            thousandSeparator={T.translate('moneyRange.thousandSeparator')}
+            decimalSeparator={T.translate('moneyRange.decimalSeparator')}
+            decimalScale={parseInt(T.translate('moneyRange.decimalScale'))}
+            className="clearable-input__input"
+            placeholder={props.placeholder}
+            type={props.inputType}
+            onValueChange={(values: NumberFormatValueType) => {
+              const { formattedValue, floatValue } = values;
+              props.onChange({
+                formattedValue,
+                raw: floatValue * (T.translate('moneyRange.factor') || 1)
+              });
+            }}
+            value={props.formattedValue}
+            {...props.inputProps}
+          />
+        : <input
+            className="clearable-input__input"
+            placeholder={props.placeholder}
+            type={props.inputType}
+            onChange={(e) => props.onChange(e.target.value)}
+            value={props.value}
+            {...props.inputProps}
+          />
+      }
       {
         !isEmpty(props.value) &&
         <span

frontend/lib/js/form-components/InputRange.js

@@ -1,16 +1,17 @@
 // @flow
 
-import React                   from 'react';
-import T                       from 'i18n-react';
-import classnames              from 'classnames';
+import React from 'react';
+import T from 'i18n-react';
+import classnames from 'classnames';
 import { type FieldPropsType } from 'redux-form';
 
-import InputWithLabel          from './InputWithLabel';
-import ToggleButton            from './ToggleButton';
-import InputRangeHeader        from './InputRangeHeader';
+import InputWithLabel from './InputWithLabel';
+import ToggleButton from './ToggleButton';
+import InputRangeHeader from './InputRangeHeader';
 
 type PropsType = FieldPropsType & {
   inputType: string,
+  valueType?: string,
   label: string,
   unit?: string,
   limits?: {
@@ -30,15 +31,26 @@ type PropsType = FieldPropsType & {
       min?: number,
       max?: number
     },
+    formattedValue: ?{
+      exact?: string,
+      min?: string,
+      max?: string
+    }
   }
 };
 
 const InputRange = (props: PropsType) => {
-  const { value } = props.input;
+  const { value, formattedValue } = props.input;
   // Make sure undefined / null is never set as a value, but an empty string instead
   const minValue = (value && value.min) || '';
   const maxValue = (value && value.max) || '';
   const exactValue = (value && value.exact) || '';
+
+  const factor = T.translate('moneyRange.factor') || 1;
+  const minFormattedValue = ((formattedValue && formattedValue.min) || (parseInt(minValue) / factor)) || '';
+  const maxFormattedValue = ((formattedValue && formattedValue.max) || (parseInt(maxValue) / factor)) || '';
+  const exactFormattedValue = ((formattedValue && formattedValue.exact) || (parseInt(exactValue) / factor)) || '';
+
   const isRangeMode = props.mode === 'range';
   const inputProps = {
     step: props.stepSize || null,
@@ -48,28 +60,23 @@ const InputRange = (props: PropsType) => {
 
   const onChangeValue = (type, newValue) => {
     const { value } = props.input;
-    const nextValue = newValue || null;
+    const { formattedValue, raw } = newValue;
+    const nextValue = raw || null;
 
     if (type === 'exact')
-      // SET ENTIRE VALUE TO NULL IF POSSIBLE
-      if (nextValue === null)
-        props.input.onChange(null);
-      else
-        props.input.onChange({ exact: nextValue });
+        props.input.onChange({
+          exact: nextValue
+        });
     else if (type === 'min' || type === 'max')
-      // SET ENTIRE VALUE TO NULL IF POSSIBLE
-      if (
-        nextValue === null && (
-          (value && value.min == null && type === 'max') ||
-          (value && value.max == null && type === 'min')
-        )
-      )
-        props.input.onChange(null);
-      else
         props.input.onChange({
           min: value ? value.min : null,
           max: value ? value.max : null,
           [type]: nextValue
+        },
+        {
+          min: props.input.formattedValue ? props.input.formattedValue.min : null,
+          max: props.input.formattedValue ? props.input.formattedValue.max : null,
+          [type]: formattedValue
         });
     else
       props.input.onChange(null);
@@ -102,12 +109,14 @@ const InputRange = (props: PropsType) => {
         <div className="input-range__input-container">
           <InputWithLabel
             inputType={props.inputType}
+            valueType={props.valueType}
             className="input-range__input-with-label"
             placeholder="-"
             label={T.translate('inputRange.exactLabel')}
             tinyLabel={props.smallLabel || true}
             input={{
               value: exactValue,
+              formattedValue: exactFormattedValue,
               onChange: (value) => onChangeValue('exact', value)
             }}
             inputProps={inputProps}
@@ -119,24 +128,28 @@ const InputRange = (props: PropsType) => {
         <div className="input-range__input-container">
           <InputWithLabel
             inputType={props.inputType}
+            valueType={props.valueType}
             className="input-range__input-with-label"
             placeholder={props.placeholder}
             label={T.translate('inputRange.minLabel')}
             tinyLabel={props.smallLabel || true}
             input={{
               value: minValue,
+              formattedValue: minFormattedValue,
               onChange: value => onChangeValue('min', value),
             }}
             inputProps={inputProps}
           />
           <InputWithLabel
             inputType={props.inputType}
+            valueType={props.valueType}
             className="input-range__input-with-label"
             placeholder={props.placeholder}
             label={T.translate('inputRange.maxLabel')}
             tinyLabel={props.smallLabel || true}
             input={{
               value: maxValue,
+              formattedValue: maxFormattedValue,
               onChange: value => onChangeValue('max', value),
             }}
             inputProps={inputProps}

frontend/lib/js/form-components/InputWithLabel.js

@@ -11,6 +11,7 @@ import ClearableInput          from './ClearableInput';
 type PropsType = FieldPropsType & {
   label: string,
   inputType: string,
+  valueType?: string,
   className?: string,
   placeholder?: string,
   tinyLabel?: boolean,
@@ -38,8 +39,10 @@ const InputWithLabel = (props: PropsType) => {
       </span>
       <ClearableInput
         inputType={props.inputType}
+        valueType={props.valueType}
         placeholder={props.placeholder}
         value={props.input.value || ""}
+        formattedValue={props.input.formattedValue || ""}
         onChange={props.input.onChange}
         inputProps={props.inputProps}
       />

frontend/lib/js/form-components/filterTypes.js

@@ -6,6 +6,7 @@ export const INTEGER_RANGE = 'INTEGER_RANGE';
 export const REAL_RANGE = 'REAL_RANGE';
 export const STRING = 'STRING';
 export const BIG_MULTI_SELECT = 'BIG_MULTI_SELECT';
+export const MONEY_RANGE = 'MONEY_RANGE';
 
 export const SUPPORTED_FILTERS = {
   SELECT: SELECT,
@@ -14,8 +15,8 @@ export const SUPPORTED_FILTERS = {
   REAL_RANGE: REAL_RANGE,
   STRING: STRING,
   BIG_MULTI_SELECT: BIG_MULTI_SELECT,
+  MONEY_RANGE: MONEY_RANGE,
   // Maybe later:
-  // 'MONEY_RANGE'
   // 'DATE_RANGE'
   // 'BOOLEAN'
 };

frontend/lib/js/query-node-editor/ParameterTableFilters.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react';
+import T     from 'i18n-react';
 
 import {
   includes,
@@ -19,6 +20,7 @@ import {
   REAL_RANGE,
   STRING,
   BIG_MULTI_SELECT,
+  MONEY_RANGE,
 } from '../form-components';
 
 import {
@@ -134,6 +136,24 @@ const ParameterTableFilters = (props: PropsType) => (
                     tooltip={filter.description}
                   />
                 );
+              case MONEY_RANGE:
+                return (
+                  <InputRange
+                    inputType="text"
+                    valueType={MONEY_RANGE}
+                    input={{
+                      value: filter.value || "",
+                      formattedValue: filter.formattedValue,
+                      onChange: (value, formattedValue) => props.onSetFilterValue(filterIdx, value, formattedValue),
+                    }}
+                    label={filter.label}
+                    mode={filter.mode || 'range'}
+                    disabled={!!props.excludeTable}
+                    onSwitchMode={(mode) => props.onSwitchFilterMode(filterIdx, mode)}
+                    placeholder="-"
+                    tooltip={filter.description}
+                  />
+                );
               case STRING:
                 return (
                   <InputWithLabel

frontend/lib/js/query-node-editor/QueryNodeEditor.js

@@ -89,10 +89,11 @@ const QueryNodeEditor = (props: PropsType) => {
                   tableIdx,
                   !table.exclude
                 )}
-                onSetFilterValue={(filterIdx, value) => props.onSetFilterValue(
+                onSetFilterValue={(filterIdx, value, formattedValue) => props.onSetFilterValue(
                   tableIdx,
                   filterIdx,
-                  value
+                  value,
+                  formattedValue
                 )}
                 onSwitchFilterMode={(filterIdx, mode) => props.onSwitchFilterMode(
                   tableIdx,

frontend/lib/js/standard-query-editor/StandardQueryNodeEditor.js

@@ -40,11 +40,12 @@ const mapDispatchToProps = (dispatch) => ({
       tableIdx,
       isExcluded
     )),
-  onSetFilterValue: (tableIdx, filterIdx, value) =>
+  onSetFilterValue: (tableIdx, filterIdx, value, formattedValue) =>
     dispatch(setFilterValue(
       tableIdx,
       filterIdx,
-      value
+      value,
+      formattedValue
     )),
   onSwitchFilterMode: (tableIdx, filterIdx, mode) =>
     dispatch(switchFilterMode(

frontend/lib/js/standard-query-editor/actions.js

@@ -156,9 +156,9 @@ export const toggleTable = (tableIdx, isExcluded) => ({
   payload: { tableIdx, isExcluded }
 });
 
-export const setFilterValue = (tableIdx, filterIdx, value) => ({
+export const setFilterValue = (tableIdx, filterIdx, value, formattedValue) => ({
   type: SET_FILTER_VALUE,
-  payload: { tableIdx, filterIdx, value }
+  payload: { tableIdx, filterIdx, value, formattedValue }
 });
 
 export const resetAllFilters = (andIdx: number, orIdx: number) => ({

frontend/lib/js/standard-query-editor/reducer.js

@@ -342,9 +342,9 @@ const setNodeFilterProperties = (state, action, obj) => {
 };
 
 const setNodeFilterValue = (state, action) => {
-  const { value } = action.payload;
+  const { value, formattedValue } = action.payload;
 
-  return setNodeFilterProperties(state, action, { value });
+  return setNodeFilterProperties(state, action, { value, formattedValue });
 };
 
 const switchNodeFilterMode = (state, action) => {

frontend/lib/js/standard-query-editor/types.js

@@ -20,7 +20,6 @@ export type ConceptType =  {
   matchingEntries?: number
 };
 
-
 export type SelectOptionType = {
   label: string,
   value: number | string,

frontend/lib/localization/de.yml

@@ -111,6 +111,13 @@ inputRange:
   minLabel: 'min'
   maxLabel: 'max'
 
+moneyRange:
+  factor: "100"
+  thousandSeparator: "."
+  decimalSeparator: ","
+  decimalScale: "2"
+  prefix: "€"
+
 previousQueries:
   loading: "Lade Anfragen"
   error: "Konnte Anfragen nicht laden"