3 files changed, 109 insertions, 45 deletions

diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index 0ff73215..59a2b42c 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -5,7 +5,7 @@ const defaultView = 'home';
 const viewTitles = {
   filter: 'filter-cards',
   multiselection: 'multi-selection',
-  customFields: 'configure-custom-fields',
+  customFields: 'custom-fields',
   archives: 'archives',
 };
 
diff --git a/client/components/sidebar/sidebarCustomFields.jade b/client/components/sidebar/sidebarCustomFields.jade
index e17bb75d..def083e9 100644
--- a/client/components/sidebar/sidebarCustomFields.jade
+++ b/client/components/sidebar/sidebarCustomFields.jade
@@ -19,31 +19,34 @@ template(name="createCustomFieldPopup")
         label
             | {{_ 'name'}}
             unless _id
-                input.js-field-name(type="text" name="field-name" autofocus)
+                input.js-field-name(type="text" autofocus)
             else
-                input.js-field-name(type="text" name="field-name" value=name)
+                input.js-field-name(type="text" value=name)
 
         label
             | {{_ 'type'}}
-            select.js-field-type(name="field-type" disabled="{{#if _id}}disabled{{/if}}")
+            select.js-field-type(disabled="{{#if _id}}disabled{{/if}}")
                 each types
                     if selected
-                        option(value=type selected="selected") {{name}}
+                        option(value=value selected="selected") {{name}}
                     else
-                        option(value=type) {{name}}
+                        option(value=value) {{name}}
+        div.js-field-settings.js-field-settings-dropdown(class="{{#if isTypeNotSelected 'dropdown'}}hide{{/if}}")
+            label
+                | {{_ 'custom-field-dropdown-options'}}
+            each dropdownItems.get
+                input.js-dropdown-item(type="text" value=name placeholder="")
+            input.js-dropdown-item.last(type="text" value="" placeholder="{{_ 'custom-field-dropdown-options-placeholder'}}")
         a.flex.js-field-show-on-card
             .materialCheckBox(class="{{#if showOnCard}}is-checked{{/if}}")
 
             span {{_ 'show-field-on-card'}}
-        button.primary.wide.left(type="submit")
+        button.primary.wide.left(type="button")
             | {{_ 'save'}}
         if _id
-            button.negate.wide.right.js-delete-custom-field
+            button.negate.wide.right.js-delete-custom-field(type="button")
                 | {{_ 'delete'}}
 
-template(name="editCustomFieldPopup")
-    | {{> createCustomFieldPopup}}
-
 template(name="deleteCustomFieldPopup")
     p {{_ "custom-field-delete-pop"}}
     button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
\ No newline at end of file
diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js
index 6ddd466e..139b8a42 100644
--- a/client/components/sidebar/sidebarCustomFields.js
+++ b/client/components/sidebar/sidebarCustomFields.js
@@ -15,50 +15,111 @@ BlazeComponent.extendComponent({
 
 }).register('customFieldsSidebar');
 
-Template.createCustomFieldPopup.helpers({
+const CreateCustomFieldPopup = BlazeComponent.extendComponent({
+
+  _types: ['text', 'number', 'checkbox', 'date', 'dropdown'],
+
+  onCreated() {
+    this.type = new ReactiveVar((this.data().type) ? this.data().type : this._types[0]);
+    this.dropdownItems = new ReactiveVar((this.data().settings && this.data().settings.dropdownItems) ? this.data().settings.dropdownItems : []);
+  },
+
   types() {
-    var currentType = this.type;
-    return ['text', 'number', 'checkbox', 'date', 'dropdown'].
-      map(type => {return {
-        type: type,
-        name: TAPi18n.__('custom-field-' + type),
-        selected: type == currentType,
-      }});
+    const currentType = this.data().type;
+    return this._types.
+        map(type => {return {
+          value: type,
+          name: TAPi18n.__('custom-field-' + type),
+          selected: type == currentType,
+        }});
+  },
+
+  isTypeNotSelected(type) {
+    return this.type.get() !== type;
+  },
+
+  getDropdownItems() {
+    var items = this.dropdownItems.get();
+    Array.from(this.findAll('.js-field-settings-dropdown input')).forEach((el, index) => {
+      //console.log('each item!', index, el.value);
+      if (!items[index]) items[index] = {
+        _id: Random.id(6),
+      };
+      items[index].name = el.value.trim();
+    });
+    return items;
   },
-});
 
-Template.createCustomFieldPopup.events({
-  'click .js-field-show-on-card'(event) {
-    let $target = $(event.target);
-    if(!$target.hasClass('js-field-show-on-card')){
-      $target = $target.parent();
+  getSettings() {
+    let settings = {};
+    switch (this.type.get()) {
+      case 'dropdown':
+        let dropdownItems = this.getDropdownItems().filter(item => !!item.name.trim());
+        settings.dropdownItems = dropdownItems;
+        break;
     }
-    $target.find('.materialCheckBox').toggleClass('is-checked');
-    $target.toggleClass('is-checked');
+    return settings;
   },
-  'submit'(evt, tpl) {
-    evt.preventDefault();
 
-    const name = tpl.find('.js-field-name').value.trim();
-    const type = tpl.find('.js-field-type').value.trim();
-    const showOnCard = tpl.find('.js-field-show-on-card.is-checked') != null;
-    //console.log('Create',name,type,showOnCard);
+  events() {
+    return [{
+      'change .js-field-type'(evt) {
+        const value = evt.target.value;
+        this.type.set(value);
+      },
+      'keydown .js-dropdown-item.last'(evt) {
+        if (evt.target.value.trim() && evt.keyCode === 13) {
+          let items = this.getDropdownItems();
+          this.dropdownItems.set(items);
+          evt.target.value = '';
+        }
+      },
+      'click .js-field-show-on-card'(evt) {
+        let $target = $(evt.target);
+        if(!$target.hasClass('js-field-show-on-card')){
+          $target = $target.parent();
+        }
+        $target.find('.materialCheckBox').toggleClass('is-checked');
+        $target.toggleClass('is-checked');
+      },
+      'click .primary'(evt) {
+        evt.preventDefault();
+
+        const data = {
+          boardId: Session.get('currentBoard'),
+          name: this.find('.js-field-name').value.trim(),
+          type: this.type.get(),
+          settings: this.getSettings(),
+          showOnCard: this.find('.js-field-show-on-card.is-checked') != null
+        }
 
-    CustomFields.insert({
-      boardId: Session.get('currentBoard'),
-      name: name,
-      type: type,
-      showOnCard: showOnCard
-    });
+        // insert or update
+        if (!this.data()._id) {
+          CustomFields.insert(data);
+        } else {
+          CustomFields.update(this.data()._id, {$set: data});
+        }
 
-    Popup.back();
+        Popup.back();
+      },
+      'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() {
+        const customFieldId = this._id;
+        CustomFields.remove(customFieldId);
+        Popup.close();
+      }),
+    }];
   },
-  'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() {
-    const customFieldId = this._id;
-    CustomFields.remove(customFieldId);
-    Popup.close();
-  }),
+
 });
+CreateCustomFieldPopup.register('createCustomFieldPopup');
+
+(class extends CreateCustomFieldPopup {
+
+  template() {
+    return 'createCustomFieldPopup';
+  }
+
+}).register('editCustomFieldPopup');
 
 /*Template.deleteCustomFieldPopup.events({
   'submit'(evt) {