diff options
Diffstat (limited to 'client/components/lists')
| -rw-r--r-- | client/components/lists/list.js | 12 | ||||
| -rw-r--r-- | client/components/lists/list.styl | 4 | ||||
| -rw-r--r-- | client/components/lists/listBody.jade | 91 | ||||
| -rw-r--r-- | client/components/lists/listBody.js | 299 | ||||
| -rw-r--r-- | client/components/lists/minilist.jade | 8 |
5 files changed, 266 insertions, 148 deletions
diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 043cb77c..12932a82 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -67,7 +67,13 @@ BlazeComponent.extendComponent({ const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1; const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards); const listId = Blaze.getData(ui.item.parents('.list').get(0))._id; - const swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id; + const currentBoard = Boards.findOne(Session.get('currentBoard')); + let swimlaneId = ''; + const boardView = Meteor.user().profile.boardView; + if (boardView === 'board-view-swimlanes' || currentBoard.isTemplatesBoard()) + swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id; + else if ((boardView === 'board-view-lists') || (boardView === 'board-view-cal')) + swimlaneId = currentBoard.getDefaultSwimline()._id; // Normally the jquery-ui sortable library moves the dragged DOM element // to its new position, which disrupts Blaze reactive updates mechanism @@ -80,12 +86,12 @@ BlazeComponent.extendComponent({ if (MultiSelection.isActive()) { Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => { - card.move(swimlaneId, listId, sortIndex.base + i * sortIndex.increment); + card.move(currentBoard._id, swimlaneId, listId, sortIndex.base + i * sortIndex.increment); }); } else { const cardDomElement = ui.item.get(0); const card = Blaze.getData(cardDomElement); - card.move(swimlaneId, listId, sortIndex.base); + card.move(currentBoard._id, swimlaneId, listId, sortIndex.base); } boardComponent.setIsDragging(false); }, diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 70502083..7e4550a4 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -84,6 +84,7 @@ padding-left: 10px color: #a6a6a6 + .list-header-menu position: absolute padding: 27px 19px @@ -155,6 +156,9 @@ float: left @media screen and (max-width: 800px) + .list-header-menu + margin-right: 30px + .mini-list flex: 0 0 60px height: 60px diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index f030833b..61fec93a 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -13,14 +13,7 @@ template(name="listBody") class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") +minicard(this) if (showSpinner (idOrNull ../../_id)) - .sk-spinner.sk-spinner-wave.sk-spinner-list( - class=currentBoard.colorClass - id="showMoreResults") - .sk-rect1 - .sk-rect2 - .sk-rect3 - .sk-rect4 - .sk-rect5 + +spinnerList if canSeeAddCard +inlinedForm(autoclose=false position="bottom") @@ -30,6 +23,16 @@ template(name="listBody") i.fa.fa-plus | {{_ 'add-card'}} +template(name="spinnerList") + .sk-spinner.sk-spinner-wave.sk-spinner-list( + class=currentBoard.colorClass + id="showMoreResults") + .sk-rect1 + .sk-rect2 + .sk-rect3 + .sk-rect4 + .sk-rect5 + template(name="addCardForm") .minicard.minicard-composer.js-composer if getLabels @@ -44,14 +47,19 @@ template(name="addCardForm") .add-controls.clearfix button.primary.confirm(type="submit") {{_ 'add'}} - unless isSandstorm - span.quiet - | {{_ 'or'}} - a.js-link {{_ 'link'}} - span.quiet - | - | / - a.js-search {{_ 'search'}} + unless currentBoard.isTemplatesBoard + unless currentBoard.isTemplateBoard + span.quiet + | {{_ 'or'}} + a.js-link {{_ 'link'}} + span.quiet + | + | / + a.js-search {{_ 'search'}} + span.quiet + | + | / + a.js-card-template {{_ 'template'}} template(name="autocompleteLabelLine") .minicard-label(class="card-label-{{colorName}}" title=labelName) @@ -61,11 +69,9 @@ template(name="linkCardPopup") label {{_ 'boards'}}: .link-board-wrapper select.js-select-boards + option(value="") each boards - if $eq _id currentBoard._id - option(value="{{_id}}" selected) {{_ 'current'}} - else - option(value="{{_id}}") {{title}} + option(value="{{_id}}") {{title}} input.primary.confirm.js-link-board(type="button" value="{{_ 'link'}}") label {{_ 'swimlanes'}}: @@ -84,22 +90,41 @@ template(name="linkCardPopup") option(value="{{getId}}") {{getTitle}} .edit-controls.clearfix - unless isSandstorm - input.primary.confirm.js-done(type="button" value="{{_ 'link'}}") + input.primary.confirm.js-done(type="button" value="{{_ 'link'}}") -template(name="searchCardPopup") - label {{_ 'boards'}}: - .link-board-wrapper - select.js-select-boards - each boards - if $eq _id currentBoard._id - option(value="{{_id}}" selected) {{_ 'current'}} - else +template(name="searchElementPopup") + form + label + | {{_ 'title'}} + input.js-element-title(type="text" placeholder="{{_ 'title'}}" autofocus required) + unless isTemplateSearch + label {{_ 'boards'}}: + .link-board-wrapper + select.js-select-boards + option(value="") + each boards 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) + if isBoardTemplateSearch + each results + a.minicard-wrapper.js-minicard + +miniboard(this) + if isListTemplateSearch + each results + a.minicard-wrapper.js-minicard + +minilist(this) + if isSwimlaneTemplateSearch + each results + a.minicard-wrapper.js-minicard + +miniswimlane(this) + if isCardTemplateSearch + each results + a.minicard-wrapper.js-minicard + +minicard(this) + unless isTemplateSearch + each results + a.minicard-wrapper.js-minicard + +minicard(this) diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 0f5caac5..43619890 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -7,28 +7,6 @@ BlazeComponent.extendComponent({ this.cardlimit = new ReactiveVar(InfiniteScrollIter); }, - onRendered() { - const domElement = this.find('.js-perfect-scrollbar'); - - this.$(domElement).on('scroll', () => this.updateList(domElement)); - $(window).on(`resize.${this.data().listId}`, () => this.updateList(domElement)); - - // we add a Mutation Observer to allow propagations of cardlimit - // when the spinner stays in the current view (infinite scrolling) - this.mutationObserver = new MutationObserver(() => this.updateList(domElement)); - - this.mutationObserver.observe(domElement, { - childList: true, - }); - - this.updateList(domElement); - }, - - onDestroyed() { - $(window).off(`resize.${this.data().listId}`); - this.mutationObserver.disconnect(); - }, - mixins() { return [Mixins.PerfectScrollbar]; }, @@ -67,25 +45,47 @@ BlazeComponent.extendComponent({ const labelIds = formComponent.labels.get(); const customFields = formComponent.customFields.get(); - const boardId = this.data().board(); + const board = this.data().board(); + let linkedId = ''; let swimlaneId = ''; const boardView = Meteor.user().profile.boardView; - if (boardView === 'board-view-swimlanes') - swimlaneId = this.parentComponent().parentComponent().data()._id; - else if ((boardView === 'board-view-lists') || (boardView === 'board-view-cal')) - swimlaneId = boardId.getDefaultSwimline()._id; - + let cardType = 'cardType-card'; if (title) { + if (board.isTemplatesBoard()) { + swimlaneId = this.parentComponent().parentComponent().data()._id; // Always swimlanes view + const swimlane = Swimlanes.findOne(swimlaneId); + // If this is the card templates swimlane, insert a card template + if (swimlane.isCardTemplatesSwimlane()) + cardType = 'template-card'; + // If this is the board templates swimlane, insert a board template and a linked card + else if (swimlane.isBoardTemplatesSwimlane()) { + linkedId = Boards.insert({ + title, + permission: 'private', + type: 'template-board', + }); + Swimlanes.insert({ + title: TAPi18n.__('default'), + boardId: linkedId, + }); + cardType = 'cardType-linkedBoard'; + } + } else if (boardView === 'board-view-swimlanes') + swimlaneId = this.parentComponent().parentComponent().data()._id; + else if ((boardView === 'board-view-lists') || (boardView === 'board-view-cal')) + swimlaneId = board.getDefaultSwimline()._id; + const _id = Cards.insert({ title, members, labelIds, customFields, listId: this.data()._id, - boardId: boardId._id, + boardId: board._id, sort: sortIndex, swimlaneId, - type: 'cardType-card', + type: cardType, + linkedId, }); // if the displayed card count is less than the total cards in the list, @@ -127,9 +127,9 @@ BlazeComponent.extendComponent({ const methodName = evt.shiftKey ? 'toggleRange' : 'toggle'; MultiSelection[methodName](this.currentData()._id); - // If the card is already selected, we want to de-select it. - // XXX We should probably modify the minicard href attribute instead of - // overwriting the event in case the card is already selected. + // If the card is already selected, we want to de-select it. + // XXX We should probably modify the minicard href attribute instead of + // overwriting the event in case the card is already selected. } else if (Session.equals('currentCard', this.currentData()._id)) { evt.stopImmediatePropagation(); evt.preventDefault(); @@ -149,7 +149,8 @@ BlazeComponent.extendComponent({ idOrNull(swimlaneId) { const currentUser = Meteor.user(); - if (currentUser.profile.boardView === 'board-view-swimlanes') + if (currentUser.profile.boardView === 'board-view-swimlanes' || + this.data().board().isTemplatesBoard()) return swimlaneId; return undefined; }, @@ -168,38 +169,11 @@ BlazeComponent.extendComponent({ }); }, - spinnerInView(container) { - const parentViewHeight = container.clientHeight; - const bottomViewPosition = container.scrollTop + parentViewHeight; - - const spinner = this.find('.sk-spinner-list'); - - const threshold = spinner.offsetTop; - - return bottomViewPosition > threshold; - }, - showSpinner(swimlaneId) { const list = Template.currentData(); return list.cards(swimlaneId).count() > this.cardlimit.get(); }, - updateList(container) { - // first, if the spinner is not rendered, we have reached the end of - // the list of cards, so skip and disable firing the events - const target = this.find('.sk-spinner-list'); - if (!target) { - this.$(container).off('scroll'); - $(window).off(`resize.${this.data().listId}`); - return; - } - - if (this.spinnerInView(container)) { - this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); - Ps.update(container); - } - }, - canSeeAddCard() { return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); }, @@ -269,8 +243,8 @@ BlazeComponent.extendComponent({ // work. $form.find('button[type=submit]').click(); - // Pressing Tab should open the form of the next column, and Maj+Tab go - // in the reverse order + // Pressing Tab should open the form of the next column, and Maj+Tab go + // in the reverse order } else if (evt.keyCode === 9) { evt.preventDefault(); const isReverse = evt.shiftKey; @@ -292,7 +266,8 @@ BlazeComponent.extendComponent({ return [{ keydown: this.pressKey, 'click .js-link': Popup.open('linkCard'), - 'click .js-search': Popup.open('searchCard'), + 'click .js-search': Popup.open('searchElement'), + 'click .js-card-template': Popup.open('searchElement'), }]; }, @@ -330,7 +305,7 @@ BlazeComponent.extendComponent({ const currentBoard = Boards.findOne(Session.get('currentBoard')); callback($.map(currentBoard.labels, (label) => { if (label.name.indexOf(term) > -1 || - label.color.indexOf(term) > -1) { + label.color.indexOf(term) > -1) { return label; } return null; @@ -367,17 +342,7 @@ BlazeComponent.extendComponent({ BlazeComponent.extendComponent({ onCreated() { - // Prefetch first non-current board id - const boardId = Boards.findOne({ - archived: false, - 'members.userId': Meteor.userId(), - _id: {$ne: Session.get('currentBoard')}, - }, { - sort: ['title'], - })._id; - // Subscribe to this board - subManager.subscribe('board', boardId); - this.selectedBoardId = new ReactiveVar(boardId); + this.selectedBoardId = new ReactiveVar(''); this.selectedSwimlaneId = new ReactiveVar(''); this.selectedListId = new ReactiveVar(''); @@ -403,6 +368,7 @@ BlazeComponent.extendComponent({ archived: false, 'members.userId': Meteor.userId(), _id: {$ne: Session.get('currentBoard')}, + type: 'board', }, { sort: ['title'], }); @@ -410,7 +376,7 @@ BlazeComponent.extendComponent({ }, swimlanes() { - if (!this.selectedBoardId) { + if (!this.selectedBoardId.get()) { return []; } const swimlanes = Swimlanes.find({boardId: this.selectedBoardId.get()}); @@ -420,7 +386,7 @@ BlazeComponent.extendComponent({ }, lists() { - if (!this.selectedBoardId) { + if (!this.selectedBoardId.get()) { return []; } const lists = Lists.find({boardId: this.selectedBoardId.get()}); @@ -441,6 +407,7 @@ BlazeComponent.extendComponent({ archived: false, linkedId: {$nin: ownCardsIds}, _id: {$nin: ownCardsIds}, + type: {$nin: ['template-card']}, }); }, @@ -508,12 +475,25 @@ BlazeComponent.extendComponent({ }, onCreated() { - // Prefetch first non-current board id - let board = Boards.findOne({ - archived: false, - 'members.userId': Meteor.userId(), - _id: {$ne: Session.get('currentBoard')}, - }); + this.isCardTemplateSearch = $(Popup._getTopStack().openerElement).hasClass('js-card-template'); + this.isListTemplateSearch = $(Popup._getTopStack().openerElement).hasClass('js-list-template'); + this.isSwimlaneTemplateSearch = $(Popup._getTopStack().openerElement).hasClass('js-open-add-swimlane-menu'); + this.isBoardTemplateSearch = $(Popup._getTopStack().openerElement).hasClass('js-add-board'); + this.isTemplateSearch = this.isCardTemplateSearch || + this.isListTemplateSearch || + this.isSwimlaneTemplateSearch || + this.isBoardTemplateSearch; + let board = {}; + if (this.isTemplateSearch) { + board = Boards.findOne(Meteor.user().profile.templatesBoardId); + } else { + // Prefetch first non-current board id + board = Boards.findOne({ + archived: false, + 'members.userId': Meteor.userId(), + _id: {$nin: [Session.get('currentBoard'), Meteor.user().profile.templatesBoardId]}, + }); + } if (!board) { Popup.close(); return; @@ -523,20 +503,21 @@ BlazeComponent.extendComponent({ subManager.subscribe('board', boardId); this.selectedBoardId = new ReactiveVar(boardId); - this.boardId = Session.get('currentBoard'); - // In order to get current board info - subManager.subscribe('board', this.boardId); - board = Boards.findOne(this.boardId); - // List where to insert card - const list = $(Popup._getTopStack().openerElement).closest('.js-list'); - this.listId = Blaze.getData(list[0])._id; - // Swimlane where to insert card - const swimlane = $(Popup._getTopStack().openerElement).closest('.js-swimlane'); - this.swimlaneId = ''; - if (board.view === 'board-view-swimlanes') - this.swimlaneId = Blaze.getData(swimlane[0])._id; - else - this.swimlaneId = Swimlanes.findOne({boardId: this.boardId})._id; + if (!this.isBoardTemplateSearch) { + this.boardId = Session.get('currentBoard'); + // In order to get current board info + subManager.subscribe('board', this.boardId); + this.swimlaneId = ''; + // Swimlane where to insert card + const swimlane = $(Popup._getTopStack().openerElement).parents('.js-swimlane'); + if (Meteor.user().profile.boardView === 'board-view-swimlanes') + this.swimlaneId = Blaze.getData(swimlane[0])._id; + else + this.swimlaneId = Swimlanes.findOne({boardId: this.boardId})._id; + // List where to insert card + const list = $(Popup._getTopStack().openerElement).closest('.js-list'); + this.listId = Blaze.getData(list[0])._id; + } this.term = new ReactiveVar(''); }, @@ -545,6 +526,7 @@ BlazeComponent.extendComponent({ archived: false, 'members.userId': Meteor.userId(), _id: {$ne: Session.get('currentBoard')}, + type: 'board', }, { sort: ['title'], }); @@ -556,7 +538,21 @@ BlazeComponent.extendComponent({ return []; } const board = Boards.findOne(this.selectedBoardId.get()); - return board.searchCards(this.term.get(), false); + if (!this.isTemplateSearch || this.isCardTemplateSearch) { + return board.searchCards(this.term.get(), false); + } else if (this.isListTemplateSearch) { + return board.searchLists(this.term.get()); + } else if (this.isSwimlaneTemplateSearch) { + return board.searchSwimlanes(this.term.get()); + } else if (this.isBoardTemplateSearch) { + const boards = board.searchBoards(this.term.get()); + boards.forEach((board) => { + subManager.subscribe('board', board.linkedId); + }); + return boards; + } else { + return []; + } }, events() { @@ -570,20 +566,99 @@ BlazeComponent.extendComponent({ this.term.set(evt.target.searchTerm.value); }, 'click .js-minicard'(evt) { - // LINK CARD - const card = Blaze.getData(evt.currentTarget); - const _id = Cards.insert({ - title: card.title, //dummy - listId: this.listId, - swimlaneId: this.swimlaneId, - boardId: this.boardId, - sort: Lists.findOne(this.listId).cards().count(), - type: 'cardType-linkedCard', - linkedId: card.linkedId || card._id, - }); - Filter.addException(_id); + // 0. Common + const title = $('.js-element-title').val().trim(); + if (!title) + return; + const element = Blaze.getData(evt.currentTarget); + element.title = title; + let _id = ''; + if (!this.isTemplateSearch || this.isCardTemplateSearch) { + // Card insertion + // 1. Common + element.sort = Lists.findOne(this.listId).cards().count(); + // 1.A From template + if (this.isTemplateSearch) { + element.type = 'cardType-card'; + element.linkedId = ''; + _id = element.copy(this.boardId, this.swimlaneId, this.listId); + // 1.B Linked card + } else { + delete element._id; + element.type = 'cardType-linkedCard'; + element.linkedId = element.linkedId || element._id; + _id = Cards.insert(element); + } + Filter.addException(_id); + // List insertion + } else if (this.isListTemplateSearch) { + element.sort = Swimlanes.findOne(this.swimlaneId).lists().count(); + element.type = 'list'; + _id = element.copy(this.boardId, this.swimlaneId); + } else if (this.isSwimlaneTemplateSearch) { + element.sort = Boards.findOne(this.boardId).swimlanes().count(); + element.type = 'swimlalne'; + _id = element.copy(this.boardId); + } else if (this.isBoardTemplateSearch) { + board = Boards.findOne(element.linkedId); + board.sort = Boards.find({archived: false}).count(); + board.type = 'board'; + board.title = element.title; + delete board.slug; + _id = board.copy(); + } Popup.close(); }, }]; }, -}).register('searchCardPopup'); +}).register('searchElementPopup'); + +BlazeComponent.extendComponent({ + onCreated() { + this.cardlimit = this.parentComponent().cardlimit; + + this.listId = this.parentComponent().data()._id; + this.swimlaneId = ''; + + const boardView = Meteor.user().profile.boardView; + if (boardView === 'board-view-swimlanes') + this.swimlaneId = this.parentComponent().parentComponent().parentComponent().data()._id; + }, + + onRendered() { + this.spinner = this.find('.sk-spinner-list'); + this.container = this.$(this.spinner).parents('.js-perfect-scrollbar')[0]; + + $(this.container).on(`scroll.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList()); + $(window).on(`resize.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList()); + + this.updateList(); + }, + + onDestroyed() { + $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`); + $(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`); + }, + + updateList() { + if (this.spinnerInView()) { + this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); + window.requestIdleCallback(() => this.updateList()); + } + }, + + spinnerInView() { + const parentViewHeight = this.container.clientHeight; + const bottomViewPosition = this.container.scrollTop + parentViewHeight; + + const threshold = this.spinner.offsetTop; + + // spinner deleted + if (!this.spinner.offsetTop) { + return false; + } + + return bottomViewPosition > threshold; + }, + +}).register('spinnerList'); diff --git a/client/components/lists/minilist.jade b/client/components/lists/minilist.jade new file mode 100644 index 00000000..e34214c4 --- /dev/null +++ b/client/components/lists/minilist.jade @@ -0,0 +1,8 @@ +template(name="minilist") + .minicard( + class="minicard-{{colorClass}}") + .minicard-title + .handle + .fa.fa-arrows + +viewer + = title |