From 153960742cac53c52f176f1bc645d850f25ac966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 15:03:44 -0300 Subject: Fix migration. Replace old checklist-item sort algorithm. --- client/components/cards/checklists.jade | 4 +- client/components/cards/checklists.js | 66 ++++++++++++++++---------------- client/components/cards/checklists.styl | 67 +++++++++++++++++++-------------- 3 files changed, 73 insertions(+), 64 deletions(-) (limited to 'client/components') diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 42fe3bd4..c73602b5 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -70,7 +70,7 @@ template(name="editChecklistItemForm") template(name="checklistItems") .checklist-items.js-checklist-items - each item in checklist.getItemsSorted + each item in checklist.items +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist) +editChecklistItemForm(type = 'item' item = item checklist = checklist) else @@ -84,7 +84,7 @@ template(name="checklistItems") | {{_ 'add-checklist-item'}}... template(name='itemDetail') - .item.js-checklist-item + .js-checklist-item.checklist-item if canModifyCard .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 5c0e3d2e..232cc6e4 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -1,11 +1,14 @@ +const { calculateIndexData } = Utils; + function initSorting(items) { items.sortable({ tolerance: 'pointer', helper: 'clone', items: '.js-checklist-item:not(.placeholder)', - axis: 'y', + connectWith: '.js-checklist-items', + appendTo: '.board-canvas', distance: 7, - placeholder: 'placeholder', + placeholder: 'checklist-item placeholder', scroll: false, start(evt, ui) { ui.placeholder.height(ui.helper.height()); @@ -13,33 +16,24 @@ function initSorting(items) { }, stop(evt, ui) { const parent = ui.item.parents('.js-checklist-items'); - const orderedItems = []; - parent.find('.js-checklist-item').each(function(i, item) { - const checklistItem = Blaze.getData(item).item; - orderedItems.push(checklistItem._id); - }); - items.sortable('cancel'); - const formerParent = ui.item.parents('.js-checklist-items'); - const checklist = Blaze.getData(parent.get(0)).checklist; - const oldChecklist = Blaze.getData(formerParent.get(0)).checklist; - if (oldChecklist._id !== checklist._id) { - const currentItem = Blaze.getData(ui.item.get(0)).item; - for (let i = 0; i < orderedItems.length; i++) { - const itemId = orderedItems[i]; - if (itemId !== currentItem._id) continue; - const newItem = { - _id: checklist.getNewItemId(), - title: currentItem.title, - sort: i, - isFinished: currentItem.isFinished, - }; - checklist.addFullItem(newItem); - orderedItems[i] = currentItem._id; - oldChecklist.removeItem(itemId); - } - } else { - checklist.sortItems(orderedItems); + const checklistId = Blaze.getData(parent.get(0)).checklist._id; + let prevItem = ui.item.prev('.js-checklist-item').get(0); + if (prevItem) { + prevItem = Blaze.getData(prevItem).item; + } + let nextItem = ui.item.next('.js-checklist-item').get(0); + if (nextItem) { + nextItem = Blaze.getData(nextItem).item; } + const nItems = 1; + const sortIndex = calculateIndexData(prevItem, nextItem, nItems); + const checklistDomElement = ui.item.get(0); + const checklistData = Blaze.getData(checklistDomElement); + const checklistItem = checklistData.item; + + items.sortable('cancel'); + + checklistItem.move(checklistId, sortIndex.base); }, }); } @@ -95,7 +89,12 @@ BlazeComponent.extendComponent({ const checklist = this.currentData().checklist; if (title) { - checklist.addItem(title); + ChecklistItems.insert({ + title, + checklistId: checklist._id, + cardId: checklist.cardId, + sort: checklist.itemCount(), + }); } // We keep the form opened, empty it. textarea.value = ''; @@ -118,7 +117,7 @@ BlazeComponent.extendComponent({ const checklist = this.currentData().checklist; const item = this.currentData().item; if (checklist && item && item._id) { - checklist.removeItem(item._id); + ChecklistItems.remove(item._id); } }, @@ -135,9 +134,8 @@ BlazeComponent.extendComponent({ const textarea = this.find('textarea.js-edit-checklist-item'); const title = textarea.value.trim(); - const itemId = this.currentData().item._id; - const checklist = this.currentData().checklist; - checklist.editItem(itemId, title); + const item = this.currentData().item; + item.setTitle(title); }, onCreated() { @@ -211,7 +209,7 @@ BlazeComponent.extendComponent({ const checklist = this.currentData().checklist; const item = this.currentData().item; if (checklist && item && item._id) { - checklist.toggleItem(item._id); + item.toggleItem(); } }, events() { diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index d4776397..3f4445ab 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -78,34 +78,45 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item bottom: -600px right: 0 -.checklist-items +.checklist-item margin: 0 0 0.5em 1.33em + line-height: 25px + font-size: 1.1em + margin-top: 3px + display: flex - .item - line-height: 25px - font-size: 1.1em - margin-top: 3px - display: flex - &:hover - background-color: darken(white, 8%) - - .check-box - margin-top: 5px - &.is-checked - border-bottom: 2px solid #3cb500 - border-right: 2px solid #3cb500 - - .item-title - flex: 1 - padding-left: 10px; - &.is-checked - color: #8c8c8c - font-style: italic - - .js-delete-checklist-item - @extends .delete-text - padding: 12px 0 0 0 + &.placeholder + background: darken(white, 20%) + border-radius: 2px + + &.ui-sortable-helper + box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), + 0 0 1px rgba(0, 0, 0, .5) + transform: rotate(4deg) + cursor: grabbing + + &:hover + background-color: darken(white, 8%) + + .check-box + margin-top: 5px + &.is-checked + border-bottom: 2px solid #3cb500 + border-right: 2px solid #3cb500 + + .item-title + flex: 1 + padding-left: 10px; + &.is-checked + color: #8c8c8c + font-style: italic + +.js-delete-checklist-item + margin: 0 0 0.5em 1.33em + @extends .delete-text + padding: 12px 0 0 0 - .add-checklist-item - padding-top: 0.5em - display: inline-block +.add-checklist-item + margin: 0 0 0.5em 1.33em + padding-top: 0.5em + display: inline-block -- cgit v1.2.3-1-g7c22