add the 'currency' custom field type

2 files changed, 47 insertions, 1 deletions

diff --git a/client/components/sidebar/sidebarCustomFields.jade b/client/components/sidebar/sidebarCustomFields.jade
index 4d023f45..4cff73f4 100644
--- a/client/components/sidebar/sidebarCustomFields.jade
+++ b/client/components/sidebar/sidebarCustomFields.jade
@@ -33,6 +33,17 @@ template(name="createCustomFieldPopup")
                         option(value=value selected="selected") {{name}}
                     else
                         option(value=value) {{name}}
+
+        div.js-field-settings.js-field-settings-currency(class="{{#if isTypeNotSelected 'currency'}}hide{{/if}}")
+            label
+                | {{_ 'custom-field-currency-option'}}
+            select.js-field-currency
+              each getCurrencySymbols
+                if selected
+                  option(value=value selected="selected") {{name}}
+                else
+                  option(value=value) {{name}}
+
         div.js-field-settings.js-field-settings-dropdown(class="{{#if isTypeNotSelected 'dropdown'}}hide{{/if}}")
             label
                 | {{_ 'custom-field-dropdown-options'}}
diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js
index 92e93641..41aecea4 100644
--- a/client/components/sidebar/sidebarCustomFields.js
+++ b/client/components/sidebar/sidebarCustomFields.js
@@ -16,12 +16,26 @@ BlazeComponent.extendComponent({
 }).register('customFieldsSidebar');
 
 const CreateCustomFieldPopup = BlazeComponent.extendComponent({
-  _types: ['text', 'number', 'date', 'dropdown'],
+  _types: ['text', 'number', 'date', 'dropdown', 'currency'],
+
+  _defaultCurrencySymbols: [
+    { symbol: '$' },
+    { symbol: '€' },
+    { symbol: '￡' },
+    { symbol: '¥' },
+  ],
 
   onCreated() {
     this.type = new ReactiveVar(
       this.data().type ? this.data().type : this._types[0],
     );
+
+    this.currencySymbol = new ReactiveVar(
+      this.data().settings && this.data().settings.currencySymbol
+        ? this.data().settings.currencySymbol
+        : this._defaultCurrencySymbols[0].symbol,
+    );
+
     this.dropdownItems = new ReactiveVar(
       this.data().settings && this.data().settings.dropdownItems
         ? this.data().settings.dropdownItems
@@ -44,6 +58,18 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
     return this.type.get() !== type;
   },
 
+  getCurrencySymbols() {
+    const currentSymbol = this.currencySymbol.get();
+
+    return this._defaultCurrencySymbols.map(({ symbol }) => {
+      return {
+        name: symbol,
+        value: symbol,
+        selected: symbol === currentSymbol,
+      };
+    });
+  },
+
   getDropdownItems() {
     const items = this.dropdownItems.get();
     Array.from(this.findAll('.js-field-settings-dropdown input')).forEach(
@@ -62,6 +88,11 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
   getSettings() {
     const settings = {};
     switch (this.type.get()) {
+      case 'currency': {
+        const currencySymbol = this.currencySymbol.get();
+        settings.currencySymbol = currencySymbol;
+        break;
+      }
       case 'dropdown': {
         const dropdownItems = this.getDropdownItems().filter(
           item => !!item.name.trim(),
@@ -80,6 +111,10 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
           const value = evt.target.value;
           this.type.set(value);
         },
+        'change .js-field-currency'(evt) {
+          const value = evt.target.value;
+          this.currencySymbol.set(value);
+        },
         'keydown .js-dropdown-item.last'(evt) {
           if (evt.target.value.trim() && evt.keyCode === 13) {
             const items = this.getDropdownItems();