Migrate rules, activities, and remaining components to Template

Convert all remaining BlazeComponent-based components to native Meteor
Template pattern: activities, comments, all rules actions/triggers,
swimlanes, users, gantt, import, and main utility components.

client/components/rules/actions/boardActions.js

@@ -1,12 +1,11 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    // Ensure boards are available for action dropdowns
-    this.subscribe('boards');
-  },
+Template.boardActions.onCreated(function () {
+  this.subscribe('boards');
+});
 
+Template.boardActions.helpers({
   boards() {
     const ret = ReactiveCache.getBoards(
       {
@@ -32,193 +31,195 @@ BlazeComponent.extendComponent({
     }
     return 'Loading boards...';
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-create-card-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const cardName = this.find('#card-name').value;
-          const listName = this.find('#list-name').value;
-          const swimlaneName = this.find('#swimlane-name2').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const triggerId = Triggers.insert(trigger);
-          const actionId = Actions.insert({
-            actionType: 'createCard',
-            swimlaneName,
-            cardName,
-            listName,
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-        'click .js-add-swimlane-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const swimlaneName = this.find('#swimlane-name').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const triggerId = Triggers.insert(trigger);
-          const actionId = Actions.insert({
-            actionType: 'addSwimlane',
-            swimlaneName,
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-        'click .js-add-spec-move-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#move-spec-action').value;
-          const swimlaneName = this.find('#swimlaneName').value || '*';
-          const listName = this.find('#listName').value || '*';
-          const boardId = Session.get('currentBoard');
-          const destBoardId = this.find('#board-id').value;
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'top') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'moveCardToTop',
-              listName,
-              swimlaneName,
-              boardId: destBoardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'bottom') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'moveCardToBottom',
-              listName,
-              swimlaneName,
-              boardId: destBoardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-gen-move-action'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const boardId = Session.get('currentBoard');
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#move-gen-action').value;
-          if (actionSelected === 'top') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'moveCardToTop',
-              listTitle: '*',
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'bottom') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'moveCardToBottom',
-              listTitle: '*',
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-arch-action'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const boardId = Session.get('currentBoard');
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#arch-action').value;
-          if (actionSelected === 'archive') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'archive',
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'unarchive') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'unarchive',
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-link-card-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const swimlaneName = this.find('#swimlaneName-link').value || '*';
-          const listName = this.find('#listName-link').value || '*';
-          const boardId = Session.get('currentBoard');
-          const destBoardId = this.find('#board-id-link').value;
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const triggerId = Triggers.insert(trigger);
-          const actionId = Actions.insert({
-            actionType: 'linkCard',
-            listName,
-            swimlaneName,
-            boardId: destBoardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-      },
-    ];
+Template.boardActions.events({
+  'click .js-create-card-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const cardName = tpl.find('#card-name').value;
+    const listName = tpl.find('#list-name').value;
+    const swimlaneName = tpl.find('#swimlane-name2').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const triggerId = Triggers.insert(trigger);
+    const actionId = Actions.insert({
+      actionType: 'createCard',
+      swimlaneName,
+      cardName,
+      listName,
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
   },
-}).register('boardActions');
+  'click .js-add-swimlane-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const swimlaneName = tpl.find('#swimlane-name').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const triggerId = Triggers.insert(trigger);
+    const actionId = Actions.insert({
+      actionType: 'addSwimlane',
+      swimlaneName,
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
+  },
+  'click .js-add-spec-move-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#move-spec-action').value;
+    const swimlaneName = tpl.find('#swimlaneName').value || '*';
+    const listName = tpl.find('#listName').value || '*';
+    const boardId = Session.get('currentBoard');
+    const destBoardId = tpl.find('#board-id').value;
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'top') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'moveCardToTop',
+        listName,
+        swimlaneName,
+        boardId: destBoardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'bottom') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'moveCardToBottom',
+        listName,
+        swimlaneName,
+        boardId: destBoardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-add-gen-move-action'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const boardId = Session.get('currentBoard');
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#move-gen-action').value;
+    if (actionSelected === 'top') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'moveCardToTop',
+        listTitle: '*',
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'bottom') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'moveCardToBottom',
+        listTitle: '*',
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-add-arch-action'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const boardId = Session.get('currentBoard');
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#arch-action').value;
+    if (actionSelected === 'archive') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'archive',
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'unarchive') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'unarchive',
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-link-card-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const swimlaneName = tpl.find('#swimlaneName-link').value || '*';
+    const listName = tpl.find('#listName-link').value || '*';
+    const boardId = Session.get('currentBoard');
+    const destBoardId = tpl.find('#board-id-link').value;
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const triggerId = Triggers.insert(trigger);
+    const actionId = Actions.insert({
+      actionType: 'linkCard',
+      listName,
+      swimlaneName,
+      boardId: destBoardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
+  },
+});
 /* eslint-no-undef */

client/components/rules/actions/cardActions.js

@@ -3,18 +3,23 @@ Meteor.startup(() => {
   cardColors = Cards.simpleSchema()._schema.color.allowedValues;
 });
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
-    this.cardColorButtonValue = new ReactiveVar('green');
-  },
+// Module-level shared state so the color popup can read/write the
+// cardColorButtonValue without relying on BlazeComponent.getOpenerComponent().
+let sharedCardColorButtonValue;
 
+Template.cardActions.onCreated(function () {
+  this.subscribe('allRules');
+  this.cardColorButtonValue = new ReactiveVar('green');
+  sharedCardColorButtonValue = this.cardColorButtonValue;
+});
+
+Template.cardActions.helpers({
   cardColorButton() {
-    return this.cardColorButtonValue.get();
+    return Template.instance().cardColorButtonValue.get();
   },
 
   cardColorButtonText() {
-    return `color-${this.cardColorButtonValue.get()}`;
+    return `color-${Template.instance().cardColorButtonValue.get()}`;
   },
 
   labels() {
@@ -26,215 +31,214 @@ BlazeComponent.extendComponent({
     }
     return labels;
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-set-date-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const triggerId = Triggers.insert(trigger);
-          const actionSelected = this.find('#setdate-action').value;
-          const dateFieldSelected = this.find('#setdate-datefield').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
+Template.cardActions.events({
+  'click .js-set-date-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const triggerId = Triggers.insert(trigger);
+    const actionSelected = tpl.find('#setdate-action').value;
+    const dateFieldSelected = tpl.find('#setdate-datefield').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
 
-          const actionId = Actions.insert({
-            actionType: actionSelected,
-            dateField: dateFieldSelected,
-            boardId,
-            desc,
-          });
+    const actionId = Actions.insert({
+      actionType: actionSelected,
+      dateField: dateFieldSelected,
+      boardId,
+      desc,
+    });
 
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-            desc,
-          });
-        },
-
-        'click .js-remove-datevalue-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const triggerId = Triggers.insert(trigger);
-          const dateFieldSelected = this.find('#setdate-removedatefieldvalue')
-            .value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-
-          const actionId = Actions.insert({
-            actionType: 'removeDate',
-            dateField: dateFieldSelected,
-            boardId,
-            desc,
-          });
-
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-            desc,
-          });
-        },
-        'click .js-add-label-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#label-action').value;
-          const labelId = this.find('#label-id').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'add') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'addLabel',
-              labelId,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'remove') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'removeLabel',
-              labelId,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-member-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#member-action').value;
-          const username = this.find('#member-name').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'add') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'addMember',
-              username,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-              desc,
-            });
-          }
-          if (actionSelected === 'remove') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'removeMember',
-              username,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-removeall-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const triggerId = Triggers.insert(trigger);
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const boardId = Session.get('currentBoard');
-          const actionId = Actions.insert({
-            actionType: 'removeMember',
-            //  deepcode ignore NoHardcodedCredentials: it's no credential
-            username: '*',
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-        'click .js-show-color-palette'(event) {
-          const funct = Popup.open('setCardActionsColor');
-          const colorButton = this.find('#color-action');
-          if (colorButton.value === '') {
-            colorButton.value = 'green';
-          }
-          funct.call(this, event);
-        },
-        'click .js-set-color-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const selectedColor = this.cardColorButtonValue.get();
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const triggerId = Triggers.insert(trigger);
-          const actionId = Actions.insert({
-            actionType: 'setColor',
-            selectedColor,
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-      },
-    ];
-  },
-}).register('cardActions');
-
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.currentAction = this.currentData();
-    this.colorButtonValue = Popup.getOpenerComponent().cardColorButtonValue;
-    this.currentColor = new ReactiveVar(this.colorButtonValue.get());
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+      desc,
+    });
   },
 
+  'click .js-remove-datevalue-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const triggerId = Triggers.insert(trigger);
+    const dateFieldSelected = tpl.find('#setdate-removedatefieldvalue')
+      .value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+
+    const actionId = Actions.insert({
+      actionType: 'removeDate',
+      dateField: dateFieldSelected,
+      boardId,
+      desc,
+    });
+
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+      desc,
+    });
+  },
+  'click .js-add-label-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#label-action').value;
+    const labelId = tpl.find('#label-id').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'add') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'addLabel',
+        labelId,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'remove') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'removeLabel',
+        labelId,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-add-member-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#member-action').value;
+    const username = tpl.find('#member-name').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'add') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'addMember',
+        username,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+        desc,
+      });
+    }
+    if (actionSelected === 'remove') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'removeMember',
+        username,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-add-removeall-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const triggerId = Triggers.insert(trigger);
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const boardId = Session.get('currentBoard');
+    const actionId = Actions.insert({
+      actionType: 'removeMember',
+      //  deepcode ignore NoHardcodedCredentials: it's no credential
+      username: '*',
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
+  },
+  'click .js-show-color-palette'(event, tpl) {
+    const funct = Popup.open('setCardActionsColor');
+    const colorButton = tpl.find('#color-action');
+    if (colorButton.value === '') {
+      colorButton.value = 'green';
+    }
+    funct.call(this, event);
+  },
+  'click .js-set-color-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const selectedColor = tpl.cardColorButtonValue.get();
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const triggerId = Triggers.insert(trigger);
+    const actionId = Actions.insert({
+      actionType: 'setColor',
+      selectedColor,
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
+  },
+});
+
+Template.setCardActionsColorPopup.onCreated(function () {
+  this.currentColor = new ReactiveVar(
+    sharedCardColorButtonValue.get()
+  );
+  this.colorButtonValue = sharedCardColorButtonValue;
+});
+
+Template.setCardActionsColorPopup.helpers({
   colors() {
     return cardColors.map(color => ({ color, name: '' }));
   },
 
   isSelected(color) {
-    return this.currentColor.get() === color;
+    return Template.instance().currentColor.get() === color;
   },
+});
 
-  events() {
-    return [
-      {
-        'click .js-palette-color'() {
-          this.currentColor.set(this.currentData().color);
-        },
-        'click .js-submit'() {
-          this.colorButtonValue.set(this.currentColor.get());
-          Popup.back();
-        },
-      },
-    ];
+Template.setCardActionsColorPopup.events({
+  'click .js-palette-color'(event, tpl) {
+    tpl.currentColor.set(Template.currentData().color);
   },
-}).register('setCardActionsColorPopup');
+  'click .js-submit'(event, tpl) {
+    tpl.colorButtonValue.set(tpl.currentColor.get());
+    Popup.back();
+  },
+});

client/components/rules/actions/checklistActions.js

@@ -1,150 +1,149 @@
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
+Template.checklistActions.onCreated(function () {
+  this.subscribe('allRules');
+});
+
+Template.checklistActions.events({
+  'click .js-add-checklist-items-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const checklistName = tpl.find('#checklist-name-3').value;
+    const checklistItems = tpl.find('#checklist-items').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const triggerId = Triggers.insert(trigger);
+    const actionId = Actions.insert({
+      actionType: 'addChecklistWithItems',
+      checklistName,
+      checklistItems,
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
   },
-  events() {
-    return [
-      {
-        'click .js-add-checklist-items-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const checklistName = this.find('#checklist-name-3').value;
-          const checklistItems = this.find('#checklist-items').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const triggerId = Triggers.insert(trigger);
-          const actionId = Actions.insert({
-            actionType: 'addChecklistWithItems',
-            checklistName,
-            checklistItems,
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-        'click .js-add-checklist-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#check-action').value;
-          const checklistName = this.find('#checklist-name').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'add') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'addChecklist',
-              checklistName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'remove') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'removeChecklist',
-              checklistName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-checkall-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const actionSelected = this.find('#checkall-action').value;
-          const checklistName = this.find('#checklist-name2').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'check') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'checkAll',
-              checklistName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'uncheck') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'uncheckAll',
-              checklistName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-        'click .js-add-check-item-action'(event) {
-          const ruleName = this.data().ruleName.get();
-          const trigger = this.data().triggerVar.get();
-          const checkItemName = this.find('#checkitem-name');
-          const checklistName = this.find('#checklist-name3');
-          const actionSelected = this.find('#check-item-action').value;
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          if (actionSelected === 'check') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'checkItem',
-              checklistName,
-              checkItemName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-          if (actionSelected === 'uncheck') {
-            const triggerId = Triggers.insert(trigger);
-            const actionId = Actions.insert({
-              actionType: 'uncheckItem',
-              checklistName,
-              checkItemName,
-              boardId,
-              desc,
-            });
-            Rules.insert({
-              title: ruleName,
-              triggerId,
-              actionId,
-              boardId,
-            });
-          }
-        },
-      },
-    ];
+  'click .js-add-checklist-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#check-action').value;
+    const checklistName = tpl.find('#checklist-name').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'add') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'addChecklist',
+        checklistName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'remove') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'removeChecklist',
+        checklistName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
   },
-}).register('checklistActions');
+  'click .js-add-checkall-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const actionSelected = tpl.find('#checkall-action').value;
+    const checklistName = tpl.find('#checklist-name2').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'check') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'checkAll',
+        checklistName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'uncheck') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'uncheckAll',
+        checklistName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+  'click .js-add-check-item-action'(event, tpl) {
+    const data = Template.currentData();
+    const ruleName = data.ruleName.get();
+    const trigger = data.triggerVar.get();
+    const checkItemName = tpl.find('#checkitem-name');
+    const checklistName = tpl.find('#checklist-name3');
+    const actionSelected = tpl.find('#check-item-action').value;
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    if (actionSelected === 'check') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'checkItem',
+        checklistName,
+        checkItemName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+    if (actionSelected === 'uncheck') {
+      const triggerId = Triggers.insert(trigger);
+      const actionId = Actions.insert({
+        actionType: 'uncheckItem',
+        checklistName,
+        checkItemName,
+        boardId,
+        desc,
+      });
+      Rules.insert({
+        title: ruleName,
+        triggerId,
+        actionId,
+        boardId,
+      });
+    }
+  },
+});

client/components/rules/actions/mailActions.js

@@ -1,34 +1,27 @@
-BlazeComponent.extendComponent({
-  onCreated() {},
-
-  events() {
-    return [
-      {
-        'click .js-mail-action'(event) {
-          const emailTo = this.find('#email-to').value;
-          const emailSubject = this.find('#email-subject').value;
-          const emailMsg = this.find('#email-msg').value;
-          const trigger = this.data().triggerVar.get();
-          const ruleName = this.data().ruleName.get();
-          const triggerId = Triggers.insert(trigger);
-          const boardId = Session.get('currentBoard');
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const actionId = Actions.insert({
-            actionType: 'sendEmail',
-            emailTo,
-            emailSubject,
-            emailMsg,
-            boardId,
-            desc,
-          });
-          Rules.insert({
-            title: ruleName,
-            triggerId,
-            actionId,
-            boardId,
-          });
-        },
-      },
-    ];
+Template.mailActions.events({
+  'click .js-mail-action'(event, tpl) {
+    const emailTo = tpl.find('#email-to').value;
+    const emailSubject = tpl.find('#email-subject').value;
+    const emailMsg = tpl.find('#email-msg').value;
+    const data = Template.currentData();
+    const trigger = data.triggerVar.get();
+    const ruleName = data.ruleName.get();
+    const triggerId = Triggers.insert(trigger);
+    const boardId = Session.get('currentBoard');
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const actionId = Actions.insert({
+      actionType: 'sendEmail',
+      emailTo,
+      emailSubject,
+      emailMsg,
+      boardId,
+      desc,
+    });
+    Rules.insert({
+      title: ruleName,
+      triggerId,
+      actionId,
+      boardId,
+    });
   },
-}).register('mailActions');
+});

client/components/rules/ruleDetails.js

@@ -1,15 +1,15 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
-    this.subscribe('allTriggers');
-    this.subscribe('allActions');
-    this.subscribe('boards');
-  },
+Template.ruleDetails.onCreated(function () {
+  this.subscribe('allRules');
+  this.subscribe('allTriggers');
+  this.subscribe('allActions');
+  this.subscribe('boards');
+});
 
+Template.ruleDetails.helpers({
   trigger() {
-    const ruleId = this.data().ruleId;
+    const ruleId = Template.currentData().ruleId;
     const rule = ReactiveCache.getRule(ruleId.get());
     const trigger = ReactiveCache.getTrigger(rule.triggerId);
     const desc = trigger.description();
@@ -17,15 +17,11 @@ BlazeComponent.extendComponent({
     return upperdesc;
   },
   action() {
-    const ruleId = this.data().ruleId;
+    const ruleId = Template.currentData().ruleId;
     const rule = ReactiveCache.getRule(ruleId.get());
     const action = ReactiveCache.getAction(rule.actionId);
     const desc = action.description();
     const upperdesc = desc.charAt(0).toUpperCase() + desc.substr(1);
     return upperdesc;
   },
-
-  events() {
-    return [{}];
-  },
-}).register('ruleDetails');
+});

client/components/rules/rulesActions.js

@@ -1,12 +1,20 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.currentActions = new ReactiveVar('board');
+Template.rulesActions.onCreated(function () {
+  this.currentActions = new ReactiveVar('board');
+});
+
+Template.rulesActions.helpers({
+  currentActions() {
+    return Template.instance().currentActions;
+  },
+
+  data() {
+    return Template.currentData();
   },
 
   ruleNameStr() {
-    const rn = this.data() && this.data().ruleName;
+    const rn = Template.currentData() && Template.currentData().ruleName;
     try {
       return rn && typeof rn.get === 'function' ? rn.get() : '';
     } catch (_) {
@@ -14,59 +22,59 @@ BlazeComponent.extendComponent({
     }
   },
 
-  setBoardActions() {
-    this.currentActions.set('board');
-    $('.js-set-card-actions').removeClass('active');
-    $('.js-set-board-actions').addClass('active');
-    $('.js-set-checklist-actions').removeClass('active');
-    $('.js-set-mail-actions').removeClass('active');
-  },
-  setCardActions() {
-    this.currentActions.set('card');
-    $('.js-set-card-actions').addClass('active');
-    $('.js-set-board-actions').removeClass('active');
-    $('.js-set-checklist-actions').removeClass('active');
-    $('.js-set-mail-actions').removeClass('active');
-  },
-  setChecklistActions() {
-    this.currentActions.set('checklist');
-    $('.js-set-card-actions').removeClass('active');
-    $('.js-set-board-actions').removeClass('active');
-    $('.js-set-checklist-actions').addClass('active');
-    $('.js-set-mail-actions').removeClass('active');
-  },
-  setMailActions() {
-    this.currentActions.set('mail');
-    $('.js-set-card-actions').removeClass('active');
-    $('.js-set-board-actions').removeClass('active');
-    $('.js-set-checklist-actions').removeClass('active');
-    $('.js-set-mail-actions').addClass('active');
-  },
-
   rules() {
     const ret = ReactiveCache.getRules({});
     return ret;
   },
 
   name() {
-    // console.log(this.data());
+    // console.log(Template.currentData());
   },
-  events() {
-    return [
-      {
-        'click .js-set-board-actions'() {
-          this.setBoardActions();
-        },
-        'click .js-set-card-actions'() {
-          this.setCardActions();
-        },
-        'click .js-set-mail-actions'() {
-          this.setMailActions();
-        },
-        'click .js-set-checklist-actions'() {
-          this.setChecklistActions();
-        },
-      },
-    ];
+});
+
+function setBoardActions(tpl) {
+  tpl.currentActions.set('board');
+  $('.js-set-card-actions').removeClass('active');
+  $('.js-set-board-actions').addClass('active');
+  $('.js-set-checklist-actions').removeClass('active');
+  $('.js-set-mail-actions').removeClass('active');
+}
+
+function setCardActions(tpl) {
+  tpl.currentActions.set('card');
+  $('.js-set-card-actions').addClass('active');
+  $('.js-set-board-actions').removeClass('active');
+  $('.js-set-checklist-actions').removeClass('active');
+  $('.js-set-mail-actions').removeClass('active');
+}
+
+function setChecklistActions(tpl) {
+  tpl.currentActions.set('checklist');
+  $('.js-set-card-actions').removeClass('active');
+  $('.js-set-board-actions').removeClass('active');
+  $('.js-set-checklist-actions').addClass('active');
+  $('.js-set-mail-actions').removeClass('active');
+}
+
+function setMailActions(tpl) {
+  tpl.currentActions.set('mail');
+  $('.js-set-card-actions').removeClass('active');
+  $('.js-set-board-actions').removeClass('active');
+  $('.js-set-checklist-actions').removeClass('active');
+  $('.js-set-mail-actions').addClass('active');
+}
+
+Template.rulesActions.events({
+  'click .js-set-board-actions'(event, tpl) {
+    setBoardActions(tpl);
   },
-}).register('rulesActions');
+  'click .js-set-card-actions'(event, tpl) {
+    setCardActions(tpl);
+  },
+  'click .js-set-mail-actions'(event, tpl) {
+    setMailActions(tpl);
+  },
+  'click .js-set-checklist-actions'(event, tpl) {
+    setChecklistActions(tpl);
+  },
+});

client/components/rules/rulesList.js

@@ -1,10 +1,10 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
-  },
+Template.rulesList.onCreated(function () {
+  this.subscribe('allRules');
+});
 
+Template.rulesList.helpers({
   rules() {
     const boardId = Session.get('currentBoard');
     const ret = ReactiveCache.getRules({
@@ -12,7 +12,4 @@ BlazeComponent.extendComponent({
     });
     return ret;
   },
-  events() {
-    return [{}];
-  },
-}).register('rulesList');
+});

client/components/rules/rulesMain.js

@@ -1,103 +1,98 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.rulesCurrentTab = new ReactiveVar('rulesList');
-    this.ruleName = new ReactiveVar('');
-    this.triggerVar = new ReactiveVar();
-    this.ruleId = new ReactiveVar();
-  },
+Template.rulesMain.onCreated(function () {
+  this.rulesCurrentTab = new ReactiveVar('rulesList');
+  this.ruleName = new ReactiveVar('');
+  this.triggerVar = new ReactiveVar();
+  this.ruleId = new ReactiveVar();
+});
 
-  setTrigger() {
-    this.rulesCurrentTab.set('trigger');
+Template.rulesMain.helpers({
+  rulesCurrentTab() {
+    return Template.instance().rulesCurrentTab;
   },
-  sanitizeObject(obj) {
-    Object.keys(obj).forEach(key => {
-      if (obj[key] === '' || obj[key] === undefined) {
-        obj[key] = '*';
+  ruleName() {
+    return Template.instance().ruleName;
+  },
+  triggerVar() {
+    return Template.instance().triggerVar;
+  },
+  ruleId() {
+    return Template.instance().ruleId;
+  },
+});
+
+function sanitizeObject(obj) {
+  Object.keys(obj).forEach(key => {
+    if (obj[key] === '' || obj[key] === undefined) {
+      obj[key] = '*';
+    }
+  });
+}
+
+Template.rulesMain.events({
+  'click .js-delete-rule'() {
+    const rule = Template.currentData();
+    Rules.remove(rule._id);
+    Actions.remove(rule.actionId);
+    Triggers.remove(rule.triggerId);
+  },
+  'click .js-goto-trigger'(event, tpl) {
+    event.preventDefault();
+    const ruleTitle = tpl.find('#ruleTitle').value;
+    if (ruleTitle !== undefined && ruleTitle !== '') {
+      tpl.find('#ruleTitle').value = '';
+      tpl.ruleName.set(ruleTitle);
+      tpl.rulesCurrentTab.set('trigger');
+    }
+  },
+  'click .js-goto-action'(event, tpl) {
+    event.preventDefault();
+    // Add user to the trigger
+    const username = $(event.currentTarget.offsetParent)
+      .find('.user-name')
+      .val();
+    let trigger = tpl.triggerVar.get();
+    trigger.userId = '*';
+    if (username !== undefined) {
+      const userFound = ReactiveCache.getUser({ username });
+      if (userFound !== undefined) {
+        trigger.userId = userFound._id;
+        tpl.triggerVar.set(trigger);
       }
-    });
+    }
+    // Sanitize trigger
+    trigger = tpl.triggerVar.get();
+    sanitizeObject(trigger);
+    tpl.triggerVar.set(trigger);
+    tpl.rulesCurrentTab.set('action');
   },
-  setRulesList() {
-    this.rulesCurrentTab.set('rulesList');
+  'click .js-show-user-field'(event) {
+    event.preventDefault();
+    $(event.currentTarget.offsetParent)
+      .find('.user-details')
+      .removeClass('hide-element');
   },
-
-  setAction() {
-    this.rulesCurrentTab.set('action');
+  'click .js-goto-rules'(event, tpl) {
+    event.preventDefault();
+    tpl.rulesCurrentTab.set('rulesList');
   },
-
-  setRuleDetails() {
-    this.rulesCurrentTab.set('ruleDetails');
+  'click .js-goback'(event, tpl) {
+    event.preventDefault();
+    if (
+      tpl.rulesCurrentTab.get() === 'trigger' ||
+      tpl.rulesCurrentTab.get() === 'ruleDetails'
+    ) {
+      tpl.rulesCurrentTab.set('rulesList');
+    }
+    if (tpl.rulesCurrentTab.get() === 'action') {
+      tpl.rulesCurrentTab.set('trigger');
+    }
   },
-
-  events() {
-    return [
-      {
-        'click .js-delete-rule'() {
-          const rule = this.currentData();
-          Rules.remove(rule._id);
-          Actions.remove(rule.actionId);
-          Triggers.remove(rule.triggerId);
-        },
-        'click .js-goto-trigger'(event) {
-          event.preventDefault();
-          const ruleTitle = this.find('#ruleTitle').value;
-          if (ruleTitle !== undefined && ruleTitle !== '') {
-            this.find('#ruleTitle').value = '';
-            this.ruleName.set(ruleTitle);
-            this.setTrigger();
-          }
-        },
-        'click .js-goto-action'(event) {
-          event.preventDefault();
-          // Add user to the trigger
-          const username = $(event.currentTarget.offsetParent)
-            .find('.user-name')
-            .val();
-          let trigger = this.triggerVar.get();
-          trigger.userId = '*';
-          if (username !== undefined) {
-            const userFound = ReactiveCache.getUser({ username });
-            if (userFound !== undefined) {
-              trigger.userId = userFound._id;
-              this.triggerVar.set(trigger);
-            }
-          }
-          // Sanitize trigger
-          trigger = this.triggerVar.get();
-          this.sanitizeObject(trigger);
-          this.triggerVar.set(trigger);
-          this.setAction();
-        },
-        'click .js-show-user-field'(event) {
-          event.preventDefault();
-          $(event.currentTarget.offsetParent)
-            .find('.user-details')
-            .removeClass('hide-element');
-        },
-        'click .js-goto-rules'(event) {
-          event.preventDefault();
-          this.setRulesList();
-        },
-        'click .js-goback'(event) {
-          event.preventDefault();
-          if (
-            this.rulesCurrentTab.get() === 'trigger' ||
-            this.rulesCurrentTab.get() === 'ruleDetails'
-          ) {
-            this.setRulesList();
-          }
-          if (this.rulesCurrentTab.get() === 'action') {
-            this.setTrigger();
-          }
-        },
-        'click .js-goto-details'(event) {
-          event.preventDefault();
-          const rule = this.currentData();
-          this.ruleId.set(rule._id);
-          this.setRuleDetails();
-        },
-      },
-    ];
+  'click .js-goto-details'(event, tpl) {
+    event.preventDefault();
+    const rule = Template.currentData();
+    tpl.ruleId.set(rule._id);
+    tpl.rulesCurrentTab.set('ruleDetails');
   },
-}).register('rulesMain');
+});

client/components/rules/rulesTriggers.js

@@ -1,14 +1,14 @@
 import { ReactiveCache } from '/imports/reactiveCache';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.showBoardTrigger = new ReactiveVar(true);
-    this.showCardTrigger = new ReactiveVar(false);
-    this.showChecklistTrigger = new ReactiveVar(false);
-  },
+Template.rulesTriggers.onCreated(function () {
+  this.showBoardTrigger = new ReactiveVar(true);
+  this.showCardTrigger = new ReactiveVar(false);
+  this.showChecklistTrigger = new ReactiveVar(false);
+});
 
+Template.rulesTriggers.helpers({
   ruleNameStr() {
-    const rn = this.data() && this.data().ruleName;
+    const rn = Template.currentData() && Template.currentData().ruleName;
     try {
       return rn && typeof rn.get === 'function' ? rn.get() : '';
     } catch (_) {
@@ -16,29 +16,16 @@ BlazeComponent.extendComponent({
     }
   },
 
-  setBoardTriggers() {
-    this.showBoardTrigger.set(true);
-    this.showCardTrigger.set(false);
-    this.showChecklistTrigger.set(false);
-    $('.js-set-card-triggers').removeClass('active');
-    $('.js-set-board-triggers').addClass('active');
-    $('.js-set-checklist-triggers').removeClass('active');
+  showBoardTrigger() {
+    return Template.instance().showBoardTrigger;
   },
-  setCardTriggers() {
-    this.showBoardTrigger.set(false);
-    this.showCardTrigger.set(true);
-    this.showChecklistTrigger.set(false);
-    $('.js-set-card-triggers').addClass('active');
-    $('.js-set-board-triggers').removeClass('active');
-    $('.js-set-checklist-triggers').removeClass('active');
+
+  showCardTrigger() {
+    return Template.instance().showCardTrigger;
   },
-  setChecklistTriggers() {
-    this.showBoardTrigger.set(false);
-    this.showCardTrigger.set(false);
-    this.showChecklistTrigger.set(true);
-    $('.js-set-card-triggers').removeClass('active');
-    $('.js-set-board-triggers').removeClass('active');
-    $('.js-set-checklist-triggers').addClass('active');
+
+  showChecklistTrigger() {
+    return Template.instance().showChecklistTrigger;
   },
 
   rules() {
@@ -47,21 +34,45 @@ BlazeComponent.extendComponent({
   },
 
   name() {
-    // console.log(this.data());
+    // console.log(Template.currentData());
   },
-  events() {
-    return [
-      {
-        'click .js-set-board-triggers'() {
-          this.setBoardTriggers();
-        },
-        'click .js-set-card-triggers'() {
-          this.setCardTriggers();
-        },
-        'click .js-set-checklist-triggers'() {
-          this.setChecklistTriggers();
-        },
-      },
-    ];
+});
+
+function setBoardTriggers(tpl) {
+  tpl.showBoardTrigger.set(true);
+  tpl.showCardTrigger.set(false);
+  tpl.showChecklistTrigger.set(false);
+  $('.js-set-card-triggers').removeClass('active');
+  $('.js-set-board-triggers').addClass('active');
+  $('.js-set-checklist-triggers').removeClass('active');
+}
+
+function setCardTriggers(tpl) {
+  tpl.showBoardTrigger.set(false);
+  tpl.showCardTrigger.set(true);
+  tpl.showChecklistTrigger.set(false);
+  $('.js-set-card-triggers').addClass('active');
+  $('.js-set-board-triggers').removeClass('active');
+  $('.js-set-checklist-triggers').removeClass('active');
+}
+
+function setChecklistTriggers(tpl) {
+  tpl.showBoardTrigger.set(false);
+  tpl.showCardTrigger.set(false);
+  tpl.showChecklistTrigger.set(true);
+  $('.js-set-card-triggers').removeClass('active');
+  $('.js-set-board-triggers').removeClass('active');
+  $('.js-set-checklist-triggers').addClass('active');
+}
+
+Template.rulesTriggers.events({
+  'click .js-set-board-triggers'(event, tpl) {
+    setBoardTriggers(tpl);
   },
-}).register('rulesTriggers');
+  'click .js-set-card-triggers'(event, tpl) {
+    setCardTriggers(tpl);
+  },
+  'click .js-set-checklist-triggers'(event, tpl) {
+    setChecklistTriggers(tpl);
+  },
+});

client/components/rules/triggers/boardTriggers.js

@@ -1,120 +1,115 @@
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.provaVar = new ReactiveVar('');
-    this.currentPopupTriggerId = 'def';
-    this.cardTitleFilters = {};
-  },
-  setNameFilter(name) {
+Template.boardTriggers.onCreated(function () {
+  this.provaVar = new ReactiveVar('');
+  this.currentPopupTriggerId = 'def';
+  this.cardTitleFilters = {};
+  this.setNameFilter = (name) => {
     this.cardTitleFilters[this.currentPopupTriggerId] = name;
-  },
+  };
+});
 
-  events() {
-    return [
-      {
-        'click .js-open-card-title-popup'(event) {
-          const funct = Popup.open('boardCardTitle');
-          const divId = $(event.currentTarget.parentNode.parentNode).attr('id');
-          //console.log('current popup');
-          //console.log(this.currentPopupTriggerId);
-          this.currentPopupTriggerId = divId;
-          funct.call(this, event);
-        },
-        'click .js-add-create-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const listName = this.find('#create-list-name').value;
-          const swimlaneName = this.find('#create-swimlane-name').value;
-          const boardId = Session.get('currentBoard');
-          const divId = $(event.currentTarget.parentNode).attr('id');
-          const cardTitle = this.cardTitleFilters[divId];
-          // move to generic funciont
-          datas.triggerVar.set({
-            activityType: 'createCard',
-            boardId,
-            cardTitle,
-            swimlaneName,
-            listName,
-            desc,
-          });
-        },
-        'click .js-add-moved-trigger'(event) {
-          const datas = this.data();
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const swimlaneName = this.find('#create-swimlane-name-2').value;
-          const actionSelected = this.find('#move-action').value;
-          const listName = this.find('#move-list-name').value;
-          const boardId = Session.get('currentBoard');
-          const divId = $(event.currentTarget.parentNode).attr('id');
-          const cardTitle = this.cardTitleFilters[divId];
-          if (actionSelected === 'moved-to') {
-            datas.triggerVar.set({
-              activityType: 'moveCard',
-              boardId,
-              listName,
-              cardTitle,
-              swimlaneName,
-              oldListName: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'moved-from') {
-            datas.triggerVar.set({
-              activityType: 'moveCard',
-              boardId,
-              cardTitle,
-              swimlaneName,
-              listName: '*',
-              oldListName: listName,
-              desc,
-            });
-          }
-        },
-        'click .js-add-gen-moved-trigger'(event) {
-          const datas = this.data();
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const boardId = Session.get('currentBoard');
-
-          datas.triggerVar.set({
-            activityType: 'moveCard',
-            boardId,
-            swimlaneName: '*',
-            listName: '*',
-            oldListName: '*',
-            desc,
-          });
-        },
-        'click .js-add-arc-trigger'(event) {
-          const datas = this.data();
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const actionSelected = this.find('#arch-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'archived') {
-            datas.triggerVar.set({
-              activityType: 'archivedCard',
-              boardId,
-              desc,
-            });
-          }
-          if (actionSelected === 'unarchived') {
-            datas.triggerVar.set({
-              activityType: 'restoredCard',
-              boardId,
-              desc,
-            });
-          }
-        },
-      },
-    ];
+Template.boardTriggers.events({
+  'click .js-open-card-title-popup'(event, tpl) {
+    const funct = Popup.open('boardCardTitle');
+    const divId = $(event.currentTarget.parentNode.parentNode).attr('id');
+    tpl.currentPopupTriggerId = divId;
+    funct.call(this, event);
   },
-}).register('boardTriggers');
+  'click .js-add-create-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const listName = tpl.find('#create-list-name').value;
+    const swimlaneName = tpl.find('#create-swimlane-name').value;
+    const boardId = Session.get('currentBoard');
+    const divId = $(event.currentTarget.parentNode).attr('id');
+    const cardTitle = tpl.cardTitleFilters[divId];
+    // move to generic funciont
+    datas.triggerVar.set({
+      activityType: 'createCard',
+      boardId,
+      cardTitle,
+      swimlaneName,
+      listName,
+      desc,
+    });
+  },
+  'click .js-add-moved-trigger'(event, tpl) {
+    const datas = Template.currentData();
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const swimlaneName = tpl.find('#create-swimlane-name-2').value;
+    const actionSelected = tpl.find('#move-action').value;
+    const listName = tpl.find('#move-list-name').value;
+    const boardId = Session.get('currentBoard');
+    const divId = $(event.currentTarget.parentNode).attr('id');
+    const cardTitle = tpl.cardTitleFilters[divId];
+    if (actionSelected === 'moved-to') {
+      datas.triggerVar.set({
+        activityType: 'moveCard',
+        boardId,
+        listName,
+        cardTitle,
+        swimlaneName,
+        oldListName: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'moved-from') {
+      datas.triggerVar.set({
+        activityType: 'moveCard',
+        boardId,
+        cardTitle,
+        swimlaneName,
+        listName: '*',
+        oldListName: listName,
+        desc,
+      });
+    }
+  },
+  'click .js-add-gen-moved-trigger'(event, tpl) {
+    const datas = Template.currentData();
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const boardId = Session.get('currentBoard');
+
+    datas.triggerVar.set({
+      activityType: 'moveCard',
+      boardId,
+      swimlaneName: '*',
+      listName: '*',
+      oldListName: '*',
+      desc,
+    });
+  },
+  'click .js-add-arc-trigger'(event, tpl) {
+    const datas = Template.currentData();
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const actionSelected = tpl.find('#arch-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'archived') {
+      datas.triggerVar.set({
+        activityType: 'archivedCard',
+        boardId,
+        desc,
+      });
+    }
+    if (actionSelected === 'unarchived') {
+      datas.triggerVar.set({
+        activityType: 'restoredCard',
+        boardId,
+        desc,
+      });
+    }
+  },
+});
 
 Template.boardCardTitlePopup.events({
-  submit(event, templateInstance) {
-    const title = templateInstance
-      .$('.js-card-filter-name')
+  submit(event) {
+    const title = $(event.target)
+      .find('.js-card-filter-name')
       .val()
       .trim();
-    Popup.getOpenerComponent().setNameFilter(title);
+    const opener = Popup.getOpenerComponent();
+    if (opener?.setNameFilter) {
+      opener.setNameFilter(title);
+    }
     event.preventDefault();
     Popup.back();
   },

client/components/rules/triggers/cardTriggers.js

@@ -1,9 +1,10 @@
 import { TAPi18n } from '/imports/i18n';
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
-  },
+Template.cardTriggers.onCreated(function () {
+  this.subscribe('allRules');
+});
+
+Template.cardTriggers.helpers({
   labels() {
     const labels = Utils.getCurrentBoard().labels;
     for (let i = 0; i < labels.length; i++) {
@@ -16,120 +17,117 @@ BlazeComponent.extendComponent({
     }
     return labels;
   },
-  events() {
-    return [
-      {
-        'click .js-add-gen-label-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#label-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'added') {
-            datas.triggerVar.set({
-              activityType: 'addedLabel',
-              boardId,
-              labelId: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'removedLabel',
-              boardId,
-              labelId: '*',
-              desc,
-            });
-          }
-        },
-        'click .js-add-spec-label-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#spec-label-action').value;
-          const labelId = this.find('#spec-label').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'added') {
-            datas.triggerVar.set({
-              activityType: 'addedLabel',
-              boardId,
-              labelId,
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'removedLabel',
-              boardId,
-              labelId,
-              desc,
-            });
-          }
-        },
-        'click .js-add-gen-member-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#gen-member-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'added') {
-            datas.triggerVar.set({
-              activityType: 'joinMember',
-              boardId,
-              username: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'unjoinMember',
-              boardId,
-              username: '*',
-              desc,
-            });
-          }
-        },
-        'click .js-add-spec-member-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#spec-member-action').value;
-          const username = this.find('#spec-member').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'added') {
-            datas.triggerVar.set({
-              activityType: 'joinMember',
-              boardId,
-              username,
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'unjoinMember',
-              boardId,
-              username,
-              desc,
-            });
-          }
-        },
-        'click .js-add-attachment-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#attach-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'added') {
-            datas.triggerVar.set({
-              activityType: 'addAttachment',
-              boardId,
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'deleteAttachment',
-              boardId,
-              desc,
-            });
-          }
-        },
-      },
-    ];
+});
+
+Template.cardTriggers.events({
+  'click .js-add-gen-label-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#label-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'added') {
+      datas.triggerVar.set({
+        activityType: 'addedLabel',
+        boardId,
+        labelId: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'removedLabel',
+        boardId,
+        labelId: '*',
+        desc,
+      });
+    }
   },
-}).register('cardTriggers');
+  'click .js-add-spec-label-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#spec-label-action').value;
+    const labelId = tpl.find('#spec-label').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'added') {
+      datas.triggerVar.set({
+        activityType: 'addedLabel',
+        boardId,
+        labelId,
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'removedLabel',
+        boardId,
+        labelId,
+        desc,
+      });
+    }
+  },
+  'click .js-add-gen-member-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#gen-member-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'added') {
+      datas.triggerVar.set({
+        activityType: 'joinMember',
+        boardId,
+        username: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'unjoinMember',
+        boardId,
+        username: '*',
+        desc,
+      });
+    }
+  },
+  'click .js-add-spec-member-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#spec-member-action').value;
+    const username = tpl.find('#spec-member').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'added') {
+      datas.triggerVar.set({
+        activityType: 'joinMember',
+        boardId,
+        username,
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'unjoinMember',
+        boardId,
+        username,
+        desc,
+      });
+    }
+  },
+  'click .js-add-attachment-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#attach-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'added') {
+      datas.triggerVar.set({
+        activityType: 'addAttachment',
+        boardId,
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'deleteAttachment',
+        boardId,
+        desc,
+      });
+    }
+  },
+});

client/components/rules/triggers/checklistTriggers.js

@@ -1,147 +1,142 @@
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.subscribe('allRules');
-  },
-  events() {
-    return [
-      {
-        'click .js-add-gen-check-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#gen-check-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'created') {
-            datas.triggerVar.set({
-              activityType: 'addChecklist',
-              boardId,
-              checklistName: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'removeChecklist',
-              boardId,
-              checklistName: '*',
-              desc,
-            });
-          }
-        },
-        'click .js-add-spec-check-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#spec-check-action').value;
-          const checklistId = this.find('#check-name').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'created') {
-            datas.triggerVar.set({
-              activityType: 'addChecklist',
-              boardId,
-              checklistName: checklistId,
-              desc,
-            });
-          }
-          if (actionSelected === 'removed') {
-            datas.triggerVar.set({
-              activityType: 'removeChecklist',
-              boardId,
-              checklistName: checklistId,
-              desc,
-            });
-          }
-        },
-        'click .js-add-gen-comp-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
+Template.checklistTriggers.onCreated(function () {
+  this.subscribe('allRules');
+});
 
-          const datas = this.data();
-          const actionSelected = this.find('#gen-comp-check-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'completed') {
-            datas.triggerVar.set({
-              activityType: 'completeChecklist',
-              boardId,
-              checklistName: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'uncompleted') {
-            datas.triggerVar.set({
-              activityType: 'uncompleteChecklist',
-              boardId,
-              checklistName: '*',
-              desc,
-            });
-          }
-        },
-        'click .js-add-spec-comp-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#spec-comp-check-action').value;
-          const checklistId = this.find('#spec-comp-check-name').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'completed') {
-            datas.triggerVar.set({
-              activityType: 'completeChecklist',
-              boardId,
-              checklistName: checklistId,
-              desc,
-            });
-          }
-          if (actionSelected === 'uncompleted') {
-            datas.triggerVar.set({
-              activityType: 'uncompleteChecklist',
-              boardId,
-              checklistName: checklistId,
-              desc,
-            });
-          }
-        },
-        'click .js-add-gen-check-item-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#check-item-gen-action').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'checked') {
-            datas.triggerVar.set({
-              activityType: 'checkedItem',
-              boardId,
-              checklistItemName: '*',
-              desc,
-            });
-          }
-          if (actionSelected === 'unchecked') {
-            datas.triggerVar.set({
-              activityType: 'uncheckedItem',
-              boardId,
-              checklistItemName: '*',
-              desc,
-            });
-          }
-        },
-        'click .js-add-spec-check-item-trigger'(event) {
-          const desc = Utils.getTriggerActionDesc(event, this);
-          const datas = this.data();
-          const actionSelected = this.find('#check-item-spec-action').value;
-          const checklistItemId = this.find('#check-item-name').value;
-          const boardId = Session.get('currentBoard');
-          if (actionSelected === 'checked') {
-            datas.triggerVar.set({
-              activityType: 'checkedItem',
-              boardId,
-              checklistItemName: checklistItemId,
-              desc,
-            });
-          }
-          if (actionSelected === 'unchecked') {
-            datas.triggerVar.set({
-              activityType: 'uncheckedItem',
-              boardId,
-              checklistItemName: checklistItemId,
-              desc,
-            });
-          }
-        },
-      },
-    ];
+Template.checklistTriggers.events({
+  'click .js-add-gen-check-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#gen-check-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'created') {
+      datas.triggerVar.set({
+        activityType: 'addChecklist',
+        boardId,
+        checklistName: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'removeChecklist',
+        boardId,
+        checklistName: '*',
+        desc,
+      });
+    }
   },
-}).register('checklistTriggers');
+  'click .js-add-spec-check-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#spec-check-action').value;
+    const checklistId = tpl.find('#check-name').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'created') {
+      datas.triggerVar.set({
+        activityType: 'addChecklist',
+        boardId,
+        checklistName: checklistId,
+        desc,
+      });
+    }
+    if (actionSelected === 'removed') {
+      datas.triggerVar.set({
+        activityType: 'removeChecklist',
+        boardId,
+        checklistName: checklistId,
+        desc,
+      });
+    }
+  },
+  'click .js-add-gen-comp-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#gen-comp-check-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'completed') {
+      datas.triggerVar.set({
+        activityType: 'completeChecklist',
+        boardId,
+        checklistName: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'uncompleted') {
+      datas.triggerVar.set({
+        activityType: 'uncompleteChecklist',
+        boardId,
+        checklistName: '*',
+        desc,
+      });
+    }
+  },
+  'click .js-add-spec-comp-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#spec-comp-check-action').value;
+    const checklistId = tpl.find('#spec-comp-check-name').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'completed') {
+      datas.triggerVar.set({
+        activityType: 'completeChecklist',
+        boardId,
+        checklistName: checklistId,
+        desc,
+      });
+    }
+    if (actionSelected === 'uncompleted') {
+      datas.triggerVar.set({
+        activityType: 'uncompleteChecklist',
+        boardId,
+        checklistName: checklistId,
+        desc,
+      });
+    }
+  },
+  'click .js-add-gen-check-item-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#check-item-gen-action').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'checked') {
+      datas.triggerVar.set({
+        activityType: 'checkedItem',
+        boardId,
+        checklistItemName: '*',
+        desc,
+      });
+    }
+    if (actionSelected === 'unchecked') {
+      datas.triggerVar.set({
+        activityType: 'uncheckedItem',
+        boardId,
+        checklistItemName: '*',
+        desc,
+      });
+    }
+  },
+  'click .js-add-spec-check-item-trigger'(event, tpl) {
+    const desc = Utils.getTriggerActionDesc(event, tpl);
+    const datas = Template.currentData();
+    const actionSelected = tpl.find('#check-item-spec-action').value;
+    const checklistItemId = tpl.find('#check-item-name').value;
+    const boardId = Session.get('currentBoard');
+    if (actionSelected === 'checked') {
+      datas.triggerVar.set({
+        activityType: 'checkedItem',
+        boardId,
+        checklistItemName: checklistItemId,
+        desc,
+      });
+    }
+    if (actionSelected === 'unchecked') {
+      datas.triggerVar.set({
+        activityType: 'uncheckedItem',
+        boardId,
+        checklistItemName: checklistItemId,
+        desc,
+      });
+    }
+  },
+});