Add UI for importing card-as-card and board-as-card

3 files changed, 169 insertions, 1 deletions

diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index fa32ff6d..0e170ebf 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -187,3 +187,14 @@
       padding: 7px
       top: -@padding
       right: 17px
+
+.import-board-wrapper
+  display: flex
+  align-items: baseline
+
+  .js-import-board
+    margin-left: 15px
+
+.search-card-results
+  max-height: 250px
+  overflow: hidden
diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade
index 32c6b278..e0655fc2 100644
--- a/client/components/lists/listBody.jade
+++ b/client/components/lists/listBody.jade
@@ -34,8 +34,59 @@ template(name="addCardForm")
 
   .add-controls.clearfix
     button.primary.confirm(type="submit") {{_ 'add'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import {{_ 'import'}}
 
 template(name="autocompleteLabelLine")
   .minicard-label(class="card-label-{{colorName}}" title=labelName)
   span(class="{{#if hasNoName}}quiet{{/if}}")= labelName
+
+template(name="importCardPopup")
+  label {{_ 'boards'}}:
+  .import-board-wrapper
+    select.js-select-boards
+      each boards
+        if $eq _id currentBoard._id
+          option(value="{{_id}}" selected) {{_ 'current'}}
+        else
+          option(value="{{_id}}") {{title}}
+    input.primary.confirm.js-import-board(type="submit" value="{{_ 'add'}}")
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}") {{title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}") {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-lists
+    each cards
+      option(value="{{_id}}") {{title}}
+
+  .edit-controls.clearfix
+    input.primary.confirm.js-done(type="submit" value="{{_ 'done'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-search {{_ 'search'}}
+
+template(name="searchCardPopup")
+  label {{_ 'boards'}}:
+  .import-board-wrapper
+    select.js-select-boards
+      each boards
+        if $eq _id currentBoard._id
+          option(value="{{_id}}" selected) {{_ 'current'}}
+        else
+          option(value="{{_id}}") {{title}}
+  form.js-search-term-form
+    input(type="text" name="searchTerm" placeholder="{{_ 'search-example'}}" autofocus)
+  .list-body.js-perfect-scrollbar.search-card-results
+    .minicards.clearfix.js-minicards
+      each results
+        a.minicard-wrapper.js-minicard
+          +minicard(this)
diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index 0a10f7d5..4cae9f0b 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -1,3 +1,5 @@
+const subManager = new SubsManager();
+
 BlazeComponent.extendComponent({
   mixins() {
     return [Mixins.PerfectScrollbar];
@@ -55,6 +57,7 @@ BlazeComponent.extendComponent({
         boardId: boardId._id,
         sort: sortIndex,
         swimlaneId,
+        type: 'cardType-card',
       });
       // 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
@@ -197,6 +200,7 @@ BlazeComponent.extendComponent({
   events() {
     return [{
       keydown: this.pressKey,
+      'click .js-import': Popup.open('importCard'),
     }];
   },
 
@@ -268,3 +272,105 @@ BlazeComponent.extendComponent({
     });
   },
 }).register('addCardForm');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    subManager.subscribe('board', Session.get('currentBoard'));
+    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
+  },
+
+  boards() {
+    const boards = Boards.find({
+      archived: false,
+      'members.userId': Meteor.userId(),
+    }, {
+      sort: ['title'],
+    });
+    return boards;
+  },
+
+  swimlanes() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.swimlanes();
+  },
+
+  lists() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.lists();
+  },
+
+  cards() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.cards();
+  },
+
+  events() {
+    return [{
+      'change .js-select-boards'(evt) {
+        this.selectedBoardId.set($(evt.currentTarget).val());
+        subManager.subscribe('board', this.selectedBoardId.get());
+      },
+      'submit .js-done' (evt) {
+        // IMPORT CARD
+        evt.preventDefault();
+        // XXX We should *not* get the currentCard from the global state, but
+        // instead from a “component” state.
+        const card = Cards.findOne(Session.get('currentCard'));
+        const lSelect = $('.js-select-lists')[0];
+        const newListId = lSelect.options[lSelect.selectedIndex].value;
+        const slSelect = $('.js-select-swimlanes')[0];
+        card.swimlaneId = slSelect.options[slSelect.selectedIndex].value;
+        Popup.close();
+      },
+      'submit .js-import-board' (evt) {
+        //IMPORT BOARD
+        evt.preventDefault();
+        Popup.close();
+      },
+      'click .js-search': Popup.open('searchCard'),
+    }];
+  },
+}).register('importCardPopup');
+
+BlazeComponent.extendComponent({
+  mixins() {
+    return [Mixins.PerfectScrollbar];
+  },
+
+  onCreated() {
+    subManager.subscribe('board', Session.get('currentBoard'));
+    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
+    this.term = new ReactiveVar('');
+  },
+
+  boards() {
+    const boards = Boards.find({
+      archived: false,
+      'members.userId': Meteor.userId(),
+    }, {
+      sort: ['title'],
+    });
+    return boards;
+  },
+
+  results() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.searchCards(this.term.get());
+  },
+
+  events() {
+    return [{
+      'change .js-select-boards'(evt) {
+        this.selectedBoardId.set($(evt.currentTarget).val());
+        subManager.subscribe('board', this.selectedBoardId.get());
+      },
+      'submit .js-search-term-form'(evt) {
+        evt.preventDefault();
+        this.term.set(evt.target.searchTerm.value);
+      },
+      'click .js-minicard'() {
+        // IMPORT CARD
+      },
+    }];
+  },
+}).register('searchCardPopup');