Import single card: proper error handling

2 files changed, 41 insertions, 23 deletions

diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index 922ac27b..e7b16912 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -32,6 +32,8 @@ template(name="listMoveCardsPopup")
   +boardLists
 
 template(name="listImportCardPopup")
+  if error.get
+    .warning {{_ error.get}}
   form
     label
       | {{_ 'card-json'}}
diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js
index 9aa26194..7db93618 100644
--- a/client/components/lists/listHeader.js
+++ b/client/components/lists/listHeader.js
@@ -49,30 +49,46 @@ Template.listActionPopup.events({
   },
 });
 
-Template.listImportCardPopup.events({
-  submit(evt) {
-    // 1. get the json data out of the form and parse it
-    evt.preventDefault();
-    const jsonData = $(evt.currentTarget).find('textarea').val();
-    const firstCardDom = $(`#js-list-${this._id} .js-minicard:first`).get(0);
-    const sortIndex = Utils.calculateIndex(null, firstCardDom).base;
-    try {
-      const trelloCard = JSON.parse(jsonData);
-      const cardId = Meteor.call('importTrelloCard', trelloCard, this._id, sortIndex);
-      // In case the filter is active we need to add the newly inserted card in
-      // the list of exceptions -- cards that are not filtered. Otherwise the
-      // card will disappear instantly.
-      // See https://github.com/wekan/wekan/issues/80
-      Filter.addException(cardId);
-      Popup.close();
-    } catch(e) {
-      // XXX handle error
-      // this.error.set('avatar-too-big');
-      console.log('Invalid JSON');
-      return;
-    }
+
+BlazeComponent.extendComponent({
+  events() {
+    return [{
+      'submit': (evt) => {
+        evt.preventDefault();
+        const jsonData = $(evt.currentTarget).find('textarea').val();
+        const firstCardDom = $(`#js-list-${this.currentData()._id} .js-minicard:first`).get(0);
+        const sortIndex = Utils.calculateIndex(null, firstCardDom).base;
+        let trelloCard;
+        try {
+          trelloCard = JSON.parse(jsonData);
+        } catch (e) {
+          console.log(e);
+          this.setError('error-json-malformed');
+          return;
+        }
+        Meteor.call('importTrelloCard', trelloCard, this.currentData()._id, sortIndex,
+          (error, response) => {
+            if (error) {
+              console.log(error);
+              this.setError(error.error);
+            } else {
+              Filter.addException(response);
+              Popup.close();
+            }
+          }
+        );
+      }
+    },];
   },
-});
+
+  onCreated() {
+    this.error = new ReactiveVar('');
+  },
+
+  setError(error) {
+    this.error.set(error);
+  },
+}).register('listImportCardPopup');
 
 Template.listMoveCardsPopup.events({
   'click .js-select-list'() {