Amount formatting now uses intl.numberformat. refs #62 (#88)

* Amount formatting now uses intl.numberformat. refs #62 * Hopefully fixes failing test. _formatters undefined check * Code fix, now with passing locally run tests first. * Extra space * Code cleanup and refactor noref * Still not used to yarn lint. noref * Refactor noref Fixes #62
Neovici · Nov 16, 2017 · ec42cc7 · ec42cc7
1 parent 7d25f8e
commit ec42cc7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 38 deletions.
diff --git a/cosmoz-omnitable-column-amount.html b/cosmoz-omnitable-column-amount.html
@@ -2,13 +2,12 @@
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 
-<link rel="import" href="../cosmoz-behaviors/cosmoz-moneyhelper-behavior.html">
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 
 <dom-module id="cosmoz-omnitable-column-amount">
 	<template>
 		<template class="cell">
-			<span>[[ getString(item, valuePath) ]]</span>
+			<span>[[ getString(item, valuePath, _formatters) ]]</span>
 		</template>
 
 		<template class="edit-cell">
@@ -42,7 +41,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 
 			behaviors: [
 				Cosmoz.OmnitableColumnBehavior,
-				Cosmoz.MoneyHelperBehavior,
 				Cosmoz.TranslatableBehavior
 			],
 
@@ -67,11 +65,15 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 				},
 				_filterText: {
 					type: String,
-					computed: '_computeFilterText(filter.*)'
+					computed: '_computeFilterText(filter.*, _formatters)'
 				},
 				_possibleAmountRange: {
 					type: Object,
-					computed: '_computePossibleAmountRange(values.*)'
+					computed: '_computePossibleAmountRange(values)'
+				},
+				_formatters: {
+					type: Object,
+					computed: '_computePossibleFormatters(locale, values)'
 				},
 				_fromMin: {
 					type: Object,
@@ -117,11 +119,15 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 				headerCellClass: {
 					type: String,
 					value: 'amount-header-cell'
+				},
+				defaultCurrency: {
+					type: String,
+					value: 'SEK'
 				}
 			},
-
+		
 			_computeFilterText: function (filterNotify) {
-				var filter = filterNotify.base,
+				const filter = filterNotify.base,
 					text = [];
 				if (typeof filter.min.amount === 'number') {
 					text.push(this.renderAmount(filter.min));
@@ -133,9 +139,26 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 				return text.length > 1 ? text.join('') : null;
 			},
 
-			_computePossibleAmountRange: function (change) {
-				var values = change.base;
+			_computePossibleFormatters: function (locale, values) {
 				if (!values || !Array.isArray(values) || values.length < 1) {
+					return;
+				}
+				return values
+					// extract currencies
+					.map(value => value.currency)
+					// unique currencies
+					.filter((currency, index, array) => currency != null && array.indexOf(currency) === index)
+					.reduce((all, currency) =>
+						Object.assign(all, {
+							[currency]: new Intl.NumberFormat(locale || undefined, {
+								style: 'currency',
+								currency
+							})
+						}), {});
+			},
+
+			_computePossibleAmountRange: function (values) {
+				if (!Array.isArray(values) || values.length < 1) {
 					return {
 						min: { amount: null },
 						max: { amount: null }
@@ -154,7 +177,7 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 			},
 
 			_computeTooltip: function (title, filterText) {
-				var ret = title;
+				let ret = title;
 				if (filterText !== undefined && filterText !== null) {
 					ret += ': ' + filterText;
 				}
@@ -200,15 +223,15 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 				const value = this._getNumberValue(event.target.value);
 				this.set('filter.min', {
 					amount: value,
-					currency: this.currency
+					currency: this.defaultCurrency
 				});
 			},
 
 			_setMaxValue: function (event) {
 				const value = this._getNumberValue(event.target.value);
 				this.set('filter.max', {
 					amount: value,
-					currency: this.currency
+					currency: this.defaultCurrency
 				});
 			},
 
@@ -220,46 +243,45 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 			},
 
 			getString: function (item, valuePath) {
-				var value = this.get(valuePath || this.valuePath, item);
-				if (value) {
-					return this.renderAmount(value);
-				}
+				const value = this.get(valuePath || this.valuePath, item);
+				return this.renderAmount(value);
 			},
 			toXlsxValue: function () {
-				var value = Cosmoz.OmnitableColumnBehavior.toXlsxValue.apply(this, arguments);
-				if (!value) {
-					return '';
-				}
-
+				const value = Cosmoz.OmnitableColumnBehavior.toXlsxValue.apply(this, arguments);
 				return this.renderAmount(value);
 			},
 
+			renderAmount: function (value, _formatters = this._formatters) {
+				if (value && _formatters && _formatters[value.currency]) {
+					return _formatters[value.currency].format(value.amount);
+				}
+				return '';
+			},
+
 			renderAmountValue: function (item, valuePath) {
-				var value = this.get(valuePath, item);
+				const value = this.get(valuePath, item);
 				if (value) {
 					return value.amount;
 				}
 			},
 
 			_getCurrency: function (item, valuePath) {
-				var value = this.get(valuePath, item);
+				const value = this.get(valuePath, item);
 				return value && value.currency;
 			},
 
 			_amountValueChanged: function (event) {
-				var
+				const
 					input = event.target,
 					value = input.value,
 					item = event.model.item,
-					amountValue,
-					originalValue = this.get(this.valuePath, item),
-					newValue;
-
-				amountValue = Number(value);
-				newValue = {
-					amount: amountValue,
-					currency: originalValue.currency
-				};
+					originalValue = this.get(this.valuePath, item);
+
+				let amountValue = Number(value),
+					newValue = {
+						amount: amountValue,
+						currency: originalValue.currency
+					};
 				this.set(this.valuePath, newValue, item);
 				this._fireItemChangeEvent(item, this.valuePath, originalValue, this.renderAmount.bind(this));
 			},
@@ -301,8 +323,8 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 
 			_getDefaultFilter: function () {
 				return {
-					min: { currency: 'SEK' },
-					max: { currency: 'SEK' }
+					min: { currency: this.defaultCurrency },
+					max: { currency: this.defaultCurrency }
 				};
 			}
 		});

diff --git a/demo/table-demo-behavior.html b/demo/table-demo-behavior.html
@@ -62,6 +62,12 @@
 					'Himenaeos',
 					'maximus diam purus at mauris'
 				],
+				currencies = [
+					'SEK',
+					'USD',
+					'EUR',
+					'AUD'
+				],
 				listValue,
 				listValueCount;
 
@@ -94,7 +100,7 @@
 						dateJSON: getRandomDateJSON(),
 						amount: {
 							amount: getRandomInt(10, 100),
-							currency: 'SEK'
+							currency: currencies[n % currencies.length]
 						},
 						group: group,
 						list: listValue

diff --git a/docs/documentation.md b/docs/documentation.md
@@ -193,7 +193,7 @@ data (see [Filtering](#filtering)).
 ```
 
 This column can be used to render
-[Number](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number) values.
+[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) values.
 
 The `locale` properties can be used to render the value with a language sensitive representation, using
 [Number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
@@ -223,7 +223,7 @@ the following prototype:
 
 ```js
 {
-   amount: Numer,
+   amount: Number,
    currency: String
 }
 ```