From 10fcc19b7f9307e71f01b6abca055806d69f7d4e Mon Sep 17 00:00:00 2001 From: boeserwolf Date: Sun, 19 Apr 2020 12:30:21 +0300 Subject: Add sortDefault helper for sorting boards --- client/components/boards/boardArchive.js | 2 +- client/components/boards/boardsList.js | 16 ++++++---------- client/components/cards/cardDetails.js | 6 +++--- client/components/lists/listBody.js | 4 ++-- client/components/rules/actions/boardActions.js | 2 +- client/components/settings/settingBody.js | 2 +- client/components/sidebar/sidebar.js | 6 +++--- 7 files changed, 17 insertions(+), 21 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardArchive.js b/client/components/boards/boardArchive.js index d3e65bd8..9f4d60a1 100644 --- a/client/components/boards/boardArchive.js +++ b/client/components/boards/boardArchive.js @@ -7,7 +7,7 @@ BlazeComponent.extendComponent({ return Boards.find( { archived: true }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ } }, ); }, diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js index 65bed16a..aabc98e8 100644 --- a/client/components/boards/boardsList.js +++ b/client/components/boards/boardsList.js @@ -7,8 +7,8 @@ Template.boardListHeaderBar.events({ }); Template.boardListHeaderBar.helpers({ - title(){ - return FlowRouter.getRouteName() == 'home' ? 'my-boards' :'public'; + title() { + return FlowRouter.getRouteName() == 'home' ? 'my-boards' : 'public'; }, templatesBoardId() { return Meteor.user() && Meteor.user().getTemplatesBoardId(); @@ -27,16 +27,12 @@ BlazeComponent.extendComponent({ let query = { archived: false, type: 'board', - } + }; if (FlowRouter.getRouteName() == 'home') - query['members.userId'] = Meteor.userId() - else - query.permission = 'public' + query['members.userId'] = Meteor.userId(); + else query.permission = 'public'; - return Boards.find( - query, - { sort: ['title'] }, - ); + return Boards.find(query, { sort: { sort: 1 /* boards default sorting */ } }); }, isStarred() { const user = Meteor.user(); diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 9d31fc60..ce504146 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -727,7 +727,7 @@ BlazeComponent.extendComponent({ _id: { $ne: Meteor.user().getTemplatesBoardId() }, }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); return boards; @@ -903,7 +903,7 @@ BlazeComponent.extendComponent({ }, }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); return boards; @@ -974,7 +974,7 @@ BlazeComponent.extendComponent({ } } }, - 'click .js-delete': Popup.afterConfirm('cardDelete', function () { + 'click .js-delete': Popup.afterConfirm('cardDelete', function() { Popup.close(); Cards.remove(this._id); Utils.goBoardId(this.boardId); diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 03f88f63..88f88db0 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -411,7 +411,7 @@ BlazeComponent.extendComponent({ type: 'board', }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); return boards; @@ -597,7 +597,7 @@ BlazeComponent.extendComponent({ type: 'board', }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); return boards; diff --git a/client/components/rules/actions/boardActions.js b/client/components/rules/actions/boardActions.js index c2f2375a..02910cc1 100644 --- a/client/components/rules/actions/boardActions.js +++ b/client/components/rules/actions/boardActions.js @@ -11,7 +11,7 @@ BlazeComponent.extendComponent({ }, }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); return boards; diff --git a/client/components/settings/settingBody.js b/client/components/settings/settingBody.js index 319c066b..62752084 100644 --- a/client/components/settings/settingBody.js +++ b/client/components/settings/settingBody.js @@ -48,7 +48,7 @@ BlazeComponent.extendComponent({ 'members.isAdmin': true, }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); }, diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index 78b47a48..11471c2f 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -510,7 +510,7 @@ BlazeComponent.extendComponent({ 'members.userId': Meteor.userId(), }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); }, @@ -589,7 +589,7 @@ BlazeComponent.extendComponent({ 'subtext-with-parent', 'no-parent', ]; - options.forEach(function (element) { + options.forEach(function(element) { if (element !== value) { $(`#${element} ${MCB}`).toggleClass(CKCLS, false); $(`#${element}`).toggleClass(CKCLS, false); @@ -688,7 +688,7 @@ BlazeComponent.extendComponent({ 'members.userId': Meteor.userId(), }, { - sort: ['title'], + sort: { sort: 1 /* boards default sorting */ }, }, ); }, -- cgit v1.2.3-1-g7c22 From ef5f38f431dbedbecc81135702764cdc08797177 Mon Sep 17 00:00:00 2001 From: boeserwolf Date: Sun, 19 Apr 2020 12:45:04 +0300 Subject: Make boards sortable --- client/components/boards/boardsList.jade | 4 +-- client/components/boards/boardsList.js | 54 ++++++++++++++++++++++++++++++++ client/components/boards/boardsList.styl | 15 ++++++++- 3 files changed, 70 insertions(+), 3 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardsList.jade b/client/components/boards/boardsList.jade index 46086693..bbce1d6f 100644 --- a/client/components/boards/boardsList.jade +++ b/client/components/boards/boardsList.jade @@ -1,10 +1,10 @@ template(name="boardList") .wrapper - ul.board-list.clearfix + ul.board-list.clearfix.js-boards li.js-add-board a.board-list-item.label {{_ 'add-board'}} each boards - li(class="{{#if isStarred}}starred{{/if}}" class=colorClass) + li(class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board if isInvited .board-list-item span.details diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js index aabc98e8..d2d44407 100644 --- a/client/components/boards/boardsList.js +++ b/client/components/boards/boardsList.js @@ -1,4 +1,5 @@ const subManager = new SubsManager(); +const { calculateIndex, enableClickOnTouch } = Utils; Template.boardListHeaderBar.events({ 'click .js-open-archived-board'() { @@ -23,6 +24,59 @@ BlazeComponent.extendComponent({ Meteor.subscribe('setting'); }, + onRendered() { + const self = this; + function userIsAllowedToMove() { + return Meteor.user(); + } + + const itemsSelector = '.js-board:not(.placeholder)'; + + const $boards = this.$('.js-boards'); + $boards.sortable({ + connectWith: '.js-boards', + tolerance: 'pointer', + appendTo: '.board-list', + helper: 'clone', + distance: 7, + items: itemsSelector, + placeholder: 'board-wrapper placeholder', + start(evt, ui) { + ui.helper.css('z-index', 1000); + ui.placeholder.height(ui.helper.height()); + EscapeActions.executeUpTo('popup-close'); + }, + stop(evt, ui) { + // To attribute the new index number, we need to get the DOM element + // of the previous and the following card -- if any. + const prevCardDom = ui.item.prev('.js-board').get(0); + const nextCardDom = ui.item.next('.js-board').get(0); + const sortIndex = calculateIndex(prevCardDom, nextCardDom, 1); + + const boardDomElement = ui.item.get(0); + const board = Blaze.getData(boardDomElement); + // Normally the jquery-ui sortable library moves the dragged DOM element + // to its new position, which disrupts Blaze reactive updates mechanism + // (especially when we move the last card of a list, or when multiple + // users move some cards at the same time). To prevent these UX glitches + // we ask sortable to gracefully cancel the move, and to put back the + // DOM in its initial state. The card move is then handled reactively by + // Blaze with the below query. + $boards.sortable('cancel'); + + board.move(sortIndex.base); + }, + }); + + // ugly touch event hotfix + enableClickOnTouch(itemsSelector); + + // Disable drag-dropping if the current user is not a board member or is comment only + this.autorun(() => { + $boards.sortable('option', 'disabled', !userIsAllowedToMove()); + }); + }, + boards() { let query = { archived: false, diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl index ae366e83..d12a0337 100644 --- a/client/components/boards/boardsList.styl +++ b/client/components/boards/boardsList.styl @@ -11,6 +11,19 @@ $spaceBetweenTiles = 16px box-sizing: border-box position: relative + &.placeholder:after + content: ''; + display: block; + background: darken(white, 20%) + border-radius: 3px; + height: 106px; + margin: 8px; + + &.ui-sortable-helper + cursor: grabbing + transform: rotate(4deg) + display: block !important + &.starred .fa-star, .fa-star-o @@ -183,7 +196,7 @@ $spaceBetweenTiles = 16px overflow: scroll li - width: 50% + width: 50% .board-list-item overflow: hidden -- cgit v1.2.3-1-g7c22 From 1a065ff351b5c37536d73cc3d46b736fe310e32c Mon Sep 17 00:00:00 2001 From: boeserwolf Date: Sun, 19 Apr 2020 15:52:43 +0300 Subject: Refactor variable names --- client/components/boards/boardsList.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js index d2d44407..c700084f 100644 --- a/client/components/boards/boardsList.js +++ b/client/components/boards/boardsList.js @@ -49,9 +49,9 @@ BlazeComponent.extendComponent({ stop(evt, ui) { // To attribute the new index number, we need to get the DOM element // of the previous and the following card -- if any. - const prevCardDom = ui.item.prev('.js-board').get(0); - const nextCardDom = ui.item.next('.js-board').get(0); - const sortIndex = calculateIndex(prevCardDom, nextCardDom, 1); + const prevBoardDom = ui.item.prev('.js-board').get(0); + const nextBoardBom = ui.item.next('.js-board').get(0); + const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1); const boardDomElement = ui.item.get(0); const board = Blaze.getData(boardDomElement); -- cgit v1.2.3-1-g7c22