Merge pull request #3 from openimis/develop

merge develop - version 1.1.0

README.md

@@ -26,4 +26,5 @@ None
 ## Configurations Options
 * `cacheProducts`: wherever products picker caches the products or not
 * `debounceTime`: if products picker is not configured to cache products, debounce time (ms) after which search is triggered
-* `productsMinCharLookup`: if products picker is not configured to cache products, minimum number of characters before trigring the search. Default: 2
+* `productsMinCharLookup`: if products picker is not configured to cache products, minimum number of characters before trigring the search. Default: 2
+* `ProductPicker.selectThreshold`: product picker suggestions count threshold under which the AutoSuggestion switch to a SelectInut (drop down list), default: 10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openimis/fe-product",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "openIMIS Frontend Product reference module",
   "license": "AGPL-3.0-only",
   "repository": "openimis/openimis-fe-product_js",
@@ -24,14 +24,14 @@
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/pickers": "^3.2.2",
-    "@openimis/fe-core": ">=1.0.2",
+    "@openimis/fe-core": ">=1.1.0",
+    "react-autosuggest": "^9.4.3",
     "history": "^4.9.0",
     "lodash": "^4.17.15",
     "lodash-uuid": "^0.0.3",
     "moment": "^2.24.0",
     "prop-types": "^15.5.4",
     "react": "^16.8.6",
-    "react-autosuggest": "^9.4.3",
     "react-dom": "^16.8.6",
     "react-intl": "^2.9.0",
     "react-redux": "^7.0.3",
@@ -45,7 +45,8 @@
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/pickers": "^3.2.2",
-    "@openimis/fe-core": ">=1.0.2",
+    "@openimis/fe-core": ">=1.1.0",
+    "react-autosuggest": "^9.4.3",
     "@svgr/rollup": "^2.4.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
@@ -71,7 +72,6 @@
     "moment": "^2.24.0",
     "prop-types": "^15.5.4",
     "react": "^16.8.6",
-    "react-autosuggest": "^9.4.3",
     "react-dom": "^16.8.6",
     "react-intl": "^2.9.0",
     "react-redux": "^7.0.3",

src/pickers/ProductPicker.js

@@ -8,14 +8,31 @@ import _debounce from "lodash/debounce";
 
 class ProductPicker extends Component {
 
+    state = {
+        products: [],
+    }
+
     constructor(props) {
         super(props);
         this.cache = props.modulesManager.getConf("fe-product", "cacheProducts", true);
+        this.selectThreshold = props.modulesManager.getConf("fe-product", "ProductPicker.selectThreshold", 10);
     }
 
     componentDidMount() {
-        if (this.cache && !this.props.products) {
-            this.props.fetchProducts(this.props.modulesManager);
+        if (this.cache) {
+            if (!this.props.products) {
+                // prevent loading multiple times the cache when component is
+                // several times on tha page
+                setTimeout(
+                    () => {
+                        !this.props.fetching && this.props.fetchProducts(this.props.modulesManager);
+                    },
+                    Math.floor(Math.random() * 300)
+                );
+                this.props.fetchProducts(this.props.modulesManager);
+            } else {
+                this.setState({ items: this.props.items })
+            }
         }
     }
 
@@ -33,8 +50,10 @@ class ProductPicker extends Component {
     onSuggestionSelected = v => this.props.onChange(v, this.formatSuggestion(v));
 
     render() {
-        const { intl, products, withLabel=true, label, withPlaceholder=false, placeholder, value, reset,
-            readOnly = false, required = false } = this.props;
+        const { intl, products, withLabel = true, label, withPlaceholder = false, placeholder, value, reset,
+            readOnly = false, required = false,
+            withNull = false, nullLabel = null
+        } = this.props;
         return <AutoSuggestion
             items={products}
             label={!!withLabel && (label || formatMessage(intl, "product", "Product"))}
@@ -46,12 +65,16 @@ class ProductPicker extends Component {
             reset={reset}
             readOnly={readOnly}
             required={required}
+            selectThreshold={this.selectThreshold}
+            withNull={withNull}
+            nullLabel={nullLabel || formatMessage(intl, "product", "product.ProductPicker.null")}
         />
     }
 }
 
 const mapStateToProps = state => ({
     products: state.product.products,
+    fetching: state.product.fetchingProducts,
 });
 
 const mapDispatchToProps = dispatch => {

src/reducer.js

@@ -2,9 +2,9 @@ import { parseData, formatServerError, formatGraphQLError } from '@openimis/fe-c
 
 function reducer(
     state = {
-        fetchingProductPicker: false,
-        fetchedProductPicker: false,
-        errorProductPicker: null,
+        fetchingProducts: false,
+        fetchedProducts: false,
+        errorProducts: null,
         products: null,        
     },
     action,
@@ -13,24 +13,24 @@ function reducer(
         case 'PRODUCT_PRODUCT_PICKER_REQ':
             return {
                 ...state,
-                fetchingProductPicker: true,
-                fetchedProductPicker: false,
+                fetchingProducts: true,
+                fetchedProducts: false,
                 products: null,
-                errorProductPicker: null,
+                errorProducts: null,
             };
         case 'PRODUCT_PRODUCT_PICKER_RESP':
             return {
                 ...state,
-                fetchingProductPicker: false,
-                fetchedProductPicker: true,
+                fetchingProducts: false,
+                fetchedProducts: true,
                 products: parseData(action.payload.data.productsStr),
-                errorProductPicker: formatGraphQLError(action.payload)
+                errorProducts: formatGraphQLError(action.payload)
             };
         case 'PRODUCT_PRODUCT_PICKER_ERR':
             return {
                 ...state,
-                fetchingProductPicker: false,
-                errorProductPicker: formatServerError(action.payload)
+                fetchingProducts: false,
+                errorProducts: formatServerError(action.payload)
             };
         default:
             return state;

src/translations/en.json

@@ -1,4 +1,5 @@
 {
     "product.Product": "Product",
-    "product.ProductPicker.placehoder": "Search Product…"
+    "product.ProductPicker.placehoder": "Search Product…",
+    "product.ProductPicker.null": "Any"
 }