dropdown items

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,
+        }});
   },
-});
 
-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();
-    }
-    $target.find('.materialCheckBox').toggleClass('is-checked');
-    $target.toggleClass('is-checked');
+  isTypeNotSelected(type) {
+    return this.type.get() !== type;
   },
-  '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);
-
-    CustomFields.insert({
-      boardId: Session.get('currentBoard'),
-      name: name,
-      type: type,
-      showOnCard: showOnCard
+  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();
     });
-
-    Popup.back();
+    return items;
   },
-  'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() {
-    const customFieldId = this._id;
-    CustomFields.remove(customFieldId);
-    Popup.close();
-  }),
+
+  getSettings() {
+    let settings = {};
+    switch (this.type.get()) {
+      case 'dropdown':
+        let dropdownItems = this.getDropdownItems().filter(item => !!item.name.trim());
+        settings.dropdownItems = dropdownItems;
+        break;
+    }
+    return settings;
+  },
+
+  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
+        }
+
+        // insert or update
+        if (!this.data()._id) {
+          CustomFields.insert(data);
+        } else {
+          CustomFields.update(this.data()._id, {$set: data});
+        }
+
+        Popup.back();
+      },
+      '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) {