BlazeComponent.extendComponent({ customFields() { return CustomFields.find({ boardIds: {$in: [Session.get('currentBoard')]}, }); }, events() { return [{ 'click .js-open-create-custom-field': Popup.open('createCustomField'), 'click .js-edit-custom-field': Popup.open('editCustomField'), }]; }, }).register('customFieldsSidebar'); const CreateCustomFieldPopup = BlazeComponent.extendComponent({ _types: ['text', 'number', '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() { 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() { const 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; }, getSettings() { const settings = {}; switch (this.type.get()) { case 'dropdown': { const 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) { const 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 .js-field-automatically-on-card'(evt) { let $target = $(evt.target); if(!$target.hasClass('js-field-automatically-on-card')){ $target = $target.parent(); } $target.find('.materialCheckBox').toggleClass('is-checked'); $target.toggleClass('is-checked'); }, 'click .js-field-showLabel-on-card'(evt) { let $target = $(evt.target); if(!$target.hasClass('js-field-showLabel-on-card')){ $target = $target.parent(); } $target.find('.materialCheckBox').toggleClass('is-checked'); $target.toggleClass('is-checked'); }, 'click .primary'(evt) { evt.preventDefault(); const data = { 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, showLabelOnMiniCard: this.find('.js-field-showLabel-on-card.is-checked') !== null, automaticallyOnCard: this.find('.js-field-automatically-on-card.is-checked') !== null, }; // insert or update if (!this.data()._id) { data.boardIds = [Session.get('currentBoard')]; CustomFields.insert(data); } else { CustomFields.update(this.data()._id, {$set: data}); } Popup.back(); }, 'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() { const customField = CustomFields.findOne(this._id); if (customField.boardIds.length > 1) { CustomFields.update(customField._id, { $pull: { boardIds: Session.get('currentBoard'), }, }); } else { CustomFields.remove(customField._id); } Popup.close(); }), }]; }, }); CreateCustomFieldPopup.register('createCustomFieldPopup'); (class extends CreateCustomFieldPopup { template() { return 'createCustomFieldPopup'; } }).register('editCustomFieldPopup'); /*Template.deleteCustomFieldPopup.events({ 'submit'(evt) { const customFieldId = this._id; CustomFields.remove(customFieldId); Popup.close(); } });*/