From dcc7b2970f3635b95bc71e3fc163a51cacad0931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Tue, 20 Mar 2018 00:13:42 -0300 Subject: Add UI for importing card-as-card and board-as-card --- client/components/lists/list.styl | 11 ++++ client/components/lists/listBody.jade | 53 ++++++++++++++++- client/components/lists/listBody.js | 106 ++++++++++++++++++++++++++++++++++ 3 files changed, 169 insertions(+), 1 deletion(-) (limited to 'client/components/lists') 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'); -- cgit v1.2.3-1-g7c22