From 1e229d9b2e57a4d58986f727a5b5d83e8dc6409b Mon Sep 17 00:00:00 2001
From: Matt Eddy <matteddy1@gmail.com>
Date: Sat, 24 Sep 2016 11:37:24 -0700
Subject: [PATCH] Add number-input which optionally uses a sanitizer

---
 app/components/erf-html-input.js              | 15 +++++++
 app/components/number-input.js                | 13 ++++++
 app/initializers/i18n.js                      |  2 +-
 app/templates/components/html-input.hbs       | 17 ++++++++
 app/templates/components/number-input.hbs     |  1 +
 .../components/number-input-test.js           | 42 +++++++++++++++++++
 6 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 app/components/erf-html-input.js
 create mode 100644 app/components/number-input.js
 create mode 100644 app/templates/components/html-input.hbs
 create mode 100644 app/templates/components/number-input.hbs
 create mode 100644 tests/integration/components/number-input-test.js

diff --git a/app/components/erf-html-input.js b/app/components/erf-html-input.js
new file mode 100644
index 0000000000..407f6e456a
--- /dev/null
+++ b/app/components/erf-html-input.js
@@ -0,0 +1,15 @@
+import HTMLInput from 'ember-rapid-forms/components/html-input';
+import layout from '../templates/components/html-input';
+
+export default HTMLInput.extend({
+  layout,
+  actions: {
+    update(value) {
+      let sanitize = this.get('mainComponent.sanitize');
+      if (sanitize && sanitize.call) {
+        value = sanitize(value);
+      }
+      this.set('selectedValue', value);
+    }
+  }
+});
diff --git a/app/components/number-input.js b/app/components/number-input.js
new file mode 100644
index 0000000000..dc47e74d8a
--- /dev/null
+++ b/app/components/number-input.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  sanitizeFunction(value) {
+    return value.replace(new RegExp(/([^0-9|.]+)/g), '');
+  },
+  tagName: '',
+  actions: {
+    sanitize(value) {
+      return this.get('sanitizeFunction')(value);
+    }
+  }
+});
diff --git a/app/initializers/i18n.js b/app/initializers/i18n.js
index 3f727d9ec2..33056b782b 100644
--- a/app/initializers/i18n.js
+++ b/app/initializers/i18n.js
@@ -9,4 +9,4 @@ export default {
     app.inject('mixin', 'i18n', 'service:i18n');
     app.inject('model', 'i18n', 'service:i18n');
   }
-};
\ No newline at end of file
+};
diff --git a/app/templates/components/html-input.hbs b/app/templates/components/html-input.hbs
new file mode 100644
index 0000000000..b408151204
--- /dev/null
+++ b/app/templates/components/html-input.hbs
@@ -0,0 +1,17 @@
+{{input
+  type=mainComponent.type
+
+  placeholder=mainComponent.placeholder
+  value=(readonly selectedValue)
+  name=mainComponent.name
+  disabled=mainComponent.disabled
+  class=(concat "form-control " mainComponent.elementClass)
+  id=mainComponent.id
+  required=mainComponent.required
+  title=mainComponent.title
+  pattern=mainComponent.pattern
+  autofocus=mainComponent.autofocus
+  readonly=mainComponent.readonly
+  autoresize=mainComponent.autoresize
+  input=(action "update" value="target.value")
+}}
diff --git a/app/templates/components/number-input.hbs b/app/templates/components/number-input.hbs
new file mode 100644
index 0000000000..a688d31bd3
--- /dev/null
+++ b/app/templates/components/number-input.hbs
@@ -0,0 +1 @@
+{{em-input property=property label=label class=class sanitize=(action 'sanitize')}}
diff --git a/tests/integration/components/number-input-test.js b/tests/integration/components/number-input-test.js
new file mode 100644
index 0000000000..ca4db8a419
--- /dev/null
+++ b/tests/integration/components/number-input-test.js
@@ -0,0 +1,42 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+moduleForComponent('number-input', 'Integration | Component | number input', {
+  integration: true
+});
+
+test('the number-input renders', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{#em-form model=model}}
+      {{number-input property='petType' label='Pet Type' class='test-number-input'}}
+    {{/em-form}}
+  `);
+
+  assert.equal(this.$('label').text().trim(), 'Pet Type', 'it renders the label');
+  assert.ok(Ember.isPresent(this.$('.test-number-input')), 'it renders the input field');
+});
+
+test('the number input sanitizes the data', function(assert) {
+  assert.expect(1);
+
+  this.set('sanitizeFunction', (value) => {
+    assert.equal(value, 'dragons', 'it passes the value to the sanitize function');
+  });
+
+  this.render(hbs`
+    {{#em-form model=model}}
+      {{number-input
+        property='petType'
+        sanitizeFunction=sanitizeFunction
+        label='Pet Type'
+        class='test-number-input'}}
+    {{/em-form}}
+  `);
+
+  this.$('input').eq(0).val('dragons');
+  this.$('input').trigger('input');
+  this.$('input').trigger('change');
+});