diff --git a/README.md b/README.md index 09bb97f..a05daf2 100644 --- a/README.md +++ b/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 \ No newline at end of file +* `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 \ No newline at end of file diff --git a/package.json b/package.json index 616a100..9781b26 100644 --- a/package.json +++ b/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", diff --git a/src/pickers/ProductPicker.js b/src/pickers/ProductPicker.js index 2b7d955..3dc0363 100644 --- a/src/pickers/ProductPicker.js +++ b/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 } } const mapStateToProps = state => ({ products: state.product.products, + fetching: state.product.fetchingProducts, }); const mapDispatchToProps = dispatch => { diff --git a/src/reducer.js b/src/reducer.js index 80163c6..465f160 100644 --- a/src/reducer.js +++ b/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; diff --git a/src/translations/en.json b/src/translations/en.json index c4d44d8..1c4f242 100644 --- a/src/translations/en.json +++ b/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" } \ No newline at end of file