Add Feature: enable two-way webhooks - stage one

2 files changed, 78 insertions, 44 deletions

diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade
index 2dfe41b3..ccfadc0c 100644
--- a/client/components/sidebar/sidebar.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -135,22 +135,30 @@ template(name="archiveBoardPopup")
 template(name="outgoingWebhooksPopup")
   each integrations
     form.integration-form
-      if title
-        h4 {{title}}
-      else
-        h4 {{_ 'no-name'}}
-      label
-        | URL
-        input.js-outgoing-webhooks-url(type="text" name="url" value=url)
-        input(type="hidden" value=_id name="id")
+      a.flex
+        span {{_ 'disable-webhook'}}
+        b  
+        .materialCheckBox(class="{{#unless enabled}}is-checked{{/unless}}")
+      input.js-outgoing-webhooks-title(placeholder="{{_ 'webhook-title'}}" type="text" name="title" value=title)
+      input.js-outgoing-webhooks-url(type="text" name="url" value=url autofocus)
+      input.js-outgoing-webhooks-token(placeholder="{{_ 'webhook-token' }}" type="text" value=token name="token")
+      select.js-outgoing-webhooks-type(name="type")
+          each _type in types
+              if($eq _type this.type)
+                  option(value=_type selected="selected") {{_ _type}}
+              else
+                  option(value=_type) {{_ _type}}
+      input(type="hidden" value=this.type name="_type")
+      input(type="hidden" value=_id name="id")
       input.primary.wide(type="submit" value="{{_ 'save'}}")
   form.integration-form
-    h4
-      | {{_ 'new-outgoing-webhook'}}
-    label
-      | URL
-      input.js-outgoing-webhooks-url(type="text" name="url" autofocus)
-    input.primary.wide(type="submit" value="{{_ 'save'}}")
+    input.js-outgoing-webhooks-title(placeholder="{{_ 'webhook-title'}}" type="text" name="title" autofocus)
+    input.js-outgoing-webhooks-url(placeholder="{{_ 'URL' }}" type="text" name="url")
+    input.js-outgoing-webhooks-token(placeholder="{{_ 'webhook-token' }}" type="text" name="token")
+    select.js-outgoing-webhooks-type(name="type")
+        each _type in types
+            option(value=_type) {{_ _type}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
 
 template(name="boardMenuPopup")
   ul.pop-over-list
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index f7efb1e8..f1ccfb1e 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -1,6 +1,8 @@
 Sidebar = null;
 
 const defaultView = 'home';
+const MCB = '.materialCheckBox';
+const CKCLS = 'is-checked';
 
 const viewTitles = {
   filter: 'filter-cards',
@@ -280,44 +282,71 @@ Template.membersWidget.events({
 });
 
 BlazeComponent.extendComponent({
+  boardId() {
+    return Session.get('currentBoard') || Integrations.Const.GLOBAL_WEBHOOK_ID;
+  },
   integrations() {
-    const boardId = Session.get('currentBoard');
+    const boardId = this.boardId();
     return Integrations.find({ boardId: `${boardId}` }).fetch();
   },
-
-  integration(id) {
-    const boardId = Session.get('currentBoard');
-    return Integrations.findOne({ _id: id, boardId: `${boardId}` });
+  types() {
+    return Integrations.Const.WEBHOOK_TYPES;
+  },
+  integration(cond) {
+    const boardId = this.boardId();
+    const condition = { boardId, ...cond };
+    for (const k in condition) {
+      if (!condition[k]) delete condition[k];
+    }
+    return Integrations.findOne(condition);
+  },
+  onCreated() {
+    this.disabled = new ReactiveVar(false);
   },
-
   events() {
     return [
       {
+        'click a.flex'(evt) {
+          this.disabled.set(!this.disabled.get());
+          $(evt.target).toggleClass(CKCLS, this.disabled.get());
+        },
         submit(evt) {
           evt.preventDefault();
           const url = evt.target.url.value;
-          const boardId = Session.get('currentBoard');
+          const boardId = this.boardId();
           let id = null;
           let integration = null;
+          const title = evt.target.title.value;
+          const token = evt.target.token.value;
+          const type = evt.target.type.value;
+          const enabled = !this.disabled.get();
+          let remove = false;
+          const values = {
+            url,
+            type,
+            token,
+            title,
+            enabled,
+          };
           if (evt.target.id) {
             id = evt.target.id.value;
-            integration = this.integration(id);
-            if (url) {
-              Integrations.update(integration._id, {
-                $set: {
-                  url: `${url}`,
-                },
-              });
-            } else {
-              Integrations.remove(integration._id);
-            }
+            integration = this.integration({ _id: id });
+            remove = !url;
+          } else if (url) {
+            integration = this.integration({ url, token });
+          }
+          if (remove) {
+            Integrations.remove(integration._id);
+          } else if (integration && integration._id) {
+            Integrations.update(integration._id, {
+              $set: values,
+            });
           } else if (url) {
             Integrations.insert({
+              ...values,
               userId: Meteor.userId(),
               enabled: true,
-              type: 'outgoing-webhooks',
-              url: `${url}`,
-              boardId: `${boardId}`,
+              boardId,
               activities: ['all'],
             });
           }
@@ -474,12 +503,12 @@ BlazeComponent.extendComponent({
           evt.preventDefault();
           this.currentBoard.allowsSubtasks = !this.currentBoard.allowsSubtasks;
           this.currentBoard.setAllowsSubtasks(this.currentBoard.allowsSubtasks);
-          $('.js-field-has-subtasks .materialCheckBox').toggleClass(
-            'is-checked',
+          $(`.js-field-has-subtasks ${MCB}`).toggleClass(
+            CKCLS,
             this.currentBoard.allowsSubtasks,
           );
           $('.js-field-has-subtasks').toggleClass(
-            'is-checked',
+            CKCLS,
             this.currentBoard.allowsSubtasks,
           );
           $('.js-field-deposit-board').prop(
@@ -515,15 +544,12 @@ BlazeComponent.extendComponent({
           ];
           options.forEach(function(element) {
             if (element !== value) {
-              $(`#${element} .materialCheckBox`).toggleClass(
-                'is-checked',
-                false,
-              );
-              $(`#${element}`).toggleClass('is-checked', false);
+              $(`#${element} ${MCB}`).toggleClass(CKCLS, false);
+              $(`#${element}`).toggleClass(CKCLS, false);
             }
           });
-          $(`#${value} .materialCheckBox`).toggleClass('is-checked', true);
-          $(`#${value}`).toggleClass('is-checked', true);
+          $(`#${value} ${MCB}`).toggleClass(CKCLS, true);
+          $(`#${value}`).toggleClass(CKCLS, true);
           this.currentBoard.setPresentParentTask(value);
           evt.preventDefault();
         },