feat(uiMoneyMask): allow currency simble after value (#275)

* added possibility to add currency after value in money directive * update spec test * update spec test
assisrafael · May 30, 2017 · 4f5c2de · 4f5c2de
1 parent 3f51cad
commit 4f5c2de
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -124,6 +124,10 @@ <h2>ui-money-mask</h2>
 		<h4>ui-money-mask without space after currency symbol</h4>
 		Money: <input type="text" name="field30" ng-model="moneyWithDynamicDecimals" ui-hide-space ui-money-mask="mdecimals">
 
+		<br>
+		<h4>ui-money-mask with currency after value</h4>
+		Money: <input type="text" name="field31" ng-model="defaultMoney" ui-currency-after ui-money-mask="mdecimals" currency-symbol="EUR">
+
 		<h2>ui-br-phone-number</h2>
 		<input type="text" name="phoneNumber" ng-model="phoneNumber" ui-br-phone-number><br>
 		<span ng-bind="phoneNumber">-</span> - {{form.phoneNumber.$error}}<br>

diff --git a/src/global/money/money.html b/src/global/money/money.html
@@ -35,6 +35,8 @@ <h2>ui-money-mask</h2>
 		<span ng-bind="moneyWithDynamicDecimals"></span> - {{form.field27.$error}}
 		<h4>ui-money-mask without space after currency symbol</h4>
 		Money: <input type="text" name="field30" ng-model="moneyWithoutSpace" ui-hide-space ui-money-mask="mdecimals">
+		<h4>ui-money-mask with currency after value</h4>
+		Money: <input type="text" name="field30" ng-model="currencyAfterValue"  ui-currency-after ui-money-mask="mdecimals">
 	</form>
 </body>
 </html>
diff --git a/src/global/money/money.js b/src/global/money/money.js
@@ -12,12 +12,21 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 				thousandsDelimiter = $locale.NUMBER_FORMATS.GROUP_SEP,
 				currencySym = $locale.NUMBER_FORMATS.CURRENCY_SYM,
 				symbolSeparation = ' ',
-				decimals = $parse(attrs.uiMoneyMask)(scope);
+				decimals = $parse(attrs.uiMoneyMask)(scope),
+				backspacePressed = false;
 
+			element.bind('keydown keypress', function(event) {
+				backspacePressed = event.which === 8;
+			});
 
 			function maskFactory(decimals) {
 				var decimalsPattern = decimals > 0 ? decimalDelimiter + new Array(decimals + 1).join('0') : '';
-				var maskPattern = symbolSeparation + '#' + thousandsDelimiter + '##0' + decimalsPattern;
+				var maskPattern =  '#' + thousandsDelimiter + '##0' + decimalsPattern;
+				if (angular.isDefined(attrs.uiCurrencyAfter)) {
+					maskPattern += symbolSeparation;
+				} else {
+					maskPattern =  symbolSeparation + maskPattern;
+				}
 				return new StringMask(maskPattern, {reverse: true});
 			}
 
@@ -48,6 +57,9 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 				}
 				var prefix = (angular.isDefined(attrs.uiNegativeNumber) && value < 0) ? '-' : '';
 				var valueToFormat = PreFormatters.prepareNumberToFormatter(value, decimals);
+				if (angular.isDefined(attrs.uiCurrencyAfter)) {
+					return prefix + moneyMask.apply(valueToFormat) + currencySym;
+				}
 				return prefix + currencySym + moneyMask.apply(valueToFormat);
 			}
 
@@ -56,10 +68,19 @@ function MoneyMaskDirective($locale, $parse, PreFormatters) {
 					return value;
 				}
 
-				var actualNumber = value.replace(/[^\d]+/g,'');
+				var actualNumber = value.replace(/[^\d]+/g,''), formatedValue;
 				actualNumber = actualNumber.replace(/^[0]+([1-9])/,'$1');
 				actualNumber = actualNumber || '0';
-				var formatedValue = currencySym + moneyMask.apply(actualNumber);
+
+				if (backspacePressed && angular.isDefined(attrs.uiCurrencyAfter) && actualNumber !== 0) {
+					actualNumber = actualNumber.substring(0, actualNumber.length - 1);
+					backspacePressed = false;
+				}
+				if (angular.isDefined(attrs.uiCurrencyAfter)) {
+					formatedValue = moneyMask.apply(actualNumber) + currencySym;
+				} else {
+					formatedValue = currencySym + moneyMask.apply(actualNumber);
+				}
 
 				if (angular.isDefined(attrs.uiNegativeNumber)) {
 					var isNegative = (value[0] === '-'),

diff --git a/src/global/money/money.spec.js b/src/global/money/money.spec.js
@@ -108,5 +108,16 @@ describe('ui.utils.masks.money', function() {
 
 			expect(input.getAttribute('value')).toEqual(currency + '0,00');
 		});
+
+		it('should add currency after value', function() {
+			var currency = ' R$';
+
+			var input = element(by.model('currencyAfterValue'));
+
+			input.clear(); //Clear to send invalid content
+			input.sendKeys('1');
+
+			expect(input.getAttribute('value')).toEqual('0,01' + currency);
+		});
 	});
 });
diff --git a/src/global/money/money.test.js b/src/global/money/money.test.js
@@ -207,4 +207,13 @@ describe('ui-money-mask', function() {
 		var model = input.controller('ngModel');
 		expect(model.$viewValue).toBe('345.00');
 	});
+
+	it('should add currency after value', function() {
+		var input = TestUtil.compile('<input ng-model="model" currency-symbol="EUR"  ui-currency-after ui-money-mask="mdecimals">', {
+			model: 345.00
+		});
+
+		var model = input.controller('ngModel');
+		expect(model.$viewValue).toBe('345.00 EUR');
+	});
 });