From bf7de463f1f71f1758b62187667bf3a7e55585ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 00:25:19 -0300 Subject: Add checklist items model, migration and publication --- models/checklistItems.js | 85 +++++++++++++++++++++++++++++++++++++++++++ models/checklists.js | 35 +++++------------- server/migrations.js | 21 +++++++++++ server/publications/boards.js | 1 + 4 files changed, 116 insertions(+), 26 deletions(-) create mode 100644 models/checklistItems.js diff --git a/models/checklistItems.js b/models/checklistItems.js new file mode 100644 index 00000000..47e37c87 --- /dev/null +++ b/models/checklistItems.js @@ -0,0 +1,85 @@ +ChecklistItems = new Mongo.Collection('checklistItems'); + +ChecklistItems.attachSchema(new SimpleSchema({ + title: { + type: String, + }, + sort: { + type: Number, + decimal: true, + }, + isFinished: { + type: Boolean, + defaultValue: false, + }, + checklistId: { + type: String, + }, + cardId: { + type: String, + }, +})); + +ChecklistItems.allow({ + insert(userId, doc) { + return allowIsBoardMemberByCard(userId, Cards.findOne(doc.cardId)); + }, + update(userId, doc) { + return allowIsBoardMemberByCard(userId, Cards.findOne(doc.cardId)); + }, + remove(userId, doc) { + return allowIsBoardMemberByCard(userId, Cards.findOne(doc.cardId)); + }, + fetch: ['userId', 'cardId'], +}); + +ChecklistItems.before.insert((userId, doc) => { + if (!doc.userId) { + doc.userId = userId; + } +}); + +// Mutations +ChecklistItems.mutations({ + setTitle(title) { + return { $set: { title } }; + }, + toggleItem() { + return { $set: { isFinished: !this.isFinished } }; + }, +}); + +// Activities helper +function itemCreation(userId, doc) { + const card = Cards.findOne(doc.cardId); + const boardId = card.boardId; + Activities.insert({ + userId, + activityType: 'addChecklistItem', + cardId: doc.cardId, + boardId, + checklistId: doc.checklistId, + checklistItemId: doc._id, + }); +} + +function itemRemover(userId, doc) { + Activities.remove({ + checklistItemId: doc._id, + }); +} + +// Activities +if (Meteor.isServer) { + Meteor.startup(() => { + ChecklistItems._collection._ensureIndex({ checklistId: 1 }); + }); + + ChecklistItems.after.insert((userId, doc) => { + itemCreation(userId, doc); + }); + + ChecklistItems.after.remove((userId, doc) => { + itemRemover(userId, doc); + }); +} diff --git a/models/checklists.js b/models/checklists.js index 7eb0a24f..d9b15140 100644 --- a/models/checklists.js +++ b/models/checklists.js @@ -7,24 +7,6 @@ Checklists.attachSchema(new SimpleSchema({ title: { type: String, }, - items: { - type: [Object], - defaultValue: [], - }, - 'items.$._id': { - type: String, - }, - 'items.$.title': { - type: String, - }, - 'items.$.sort': { - type: Number, - decimal: true, - }, - 'items.$.isFinished': { - type: Boolean, - defaultValue: false, - }, finishedAt: { type: Date, optional: true, @@ -46,19 +28,20 @@ Checklists.attachSchema(new SimpleSchema({ }, })); -const self = Checklists; - Checklists.helpers({ itemCount() { - return this.items.length; + return ChecklistItems.find({ checklistId: this._id }).count(); }, - getItemsSorted() { - return _.sortBy(this.items, 'sort'); + items() { + return ChecklistItems.find(Filter.mongoSelector({ + checklistId: this._id, + }), { sort: ['sort'] }); }, finishedCount() { - return this.items.filter((item) => { - return item.isFinished; - }).length; + return ChecklistItems.find({ + checklistId: this._id, + isFinished: true, + }).count(); }, isFinished() { return 0 !== this.itemCount() && this.itemCount() === this.finishedCount(); diff --git a/server/migrations.js b/server/migrations.js index f2cb124b..467dd4c2 100644 --- a/server/migrations.js +++ b/server/migrations.js @@ -187,3 +187,24 @@ Migrations.add('add-views', () => { } }); }); + +Migrations.add('add-checklist-items', () => { + Checklists.find().forEach((checklist) => { + // Create new items + _.sortBy(checklist.items, 'sort').forEach((item) => { + ChecklistItems.direct.insert({ + title: item.title, + sort: item.sort, + isFinished: item.isFinished, + checklistId: checklist._id, + cardId: checklist.cardId, + }); + }); + + // Delete old ones + Checklists.direct.update({ _id: checklist._id }, + { $unset: { items : 1 } }, + noValidate + ); + }); +}); diff --git a/server/publications/boards.js b/server/publications/boards.js index 889bd177..17d87f3a 100644 --- a/server/publications/boards.js +++ b/server/publications/boards.js @@ -101,6 +101,7 @@ Meteor.publishRelations('board', function(boardId) { this.cursor(CardComments.find({ cardId })); this.cursor(Attachments.find({ cardId })); this.cursor(Checklists.find({ cardId })); + this.cursor(ChecklistItems.find({ cardId })); }); if (board.members) { -- cgit v1.2.3-1-g7c22 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 +++++++++++++++++++-------------- client/lib/utils.js | 31 +++++++++++++++ models/activities.js | 2 +- models/checklistItems.js | 10 +++++ server/migrations.js | 4 +- 7 files changed, 117 insertions(+), 67 deletions(-) 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 diff --git a/client/lib/utils.js b/client/lib/utils.js index 9a9ff654..1f44c60d 100644 --- a/client/lib/utils.js +++ b/client/lib/utils.js @@ -33,6 +33,37 @@ Utils = { return $(window).width() <= 800; }, + calculateIndexData(prevData, nextData, nItems = 1) { + let base, increment; + // If we drop the card to an empty column + if (!prevData && !nextData) { + base = 0; + increment = 1; + // If we drop the card in the first position + } else if (!prevData) { + base = nextData.sort - 1; + increment = -1; + // If we drop the card in the last position + } else if (!nextData) { + base = prevData.sort + 1; + increment = 1; + } + // In the general case take the average of the previous and next element + // sort indexes. + else { + const prevSortIndex = prevData.sort; + const nextSortIndex = nextData.sort; + increment = (nextSortIndex - prevSortIndex) / (nItems + 1); + base = prevSortIndex + increment; + } + // XXX Return a generator that yield values instead of a base with a + // increment number. + return { + base, + increment, + }; + }, + // Determine the new sort index calculateIndex(prevCardDomElement, nextCardDomElement, nCards = 1) { let base, increment; diff --git a/models/activities.js b/models/activities.js index bd33303a..3f1d28ae 100644 --- a/models/activities.js +++ b/models/activities.js @@ -42,7 +42,7 @@ Activities.helpers({ return Checklists.findOne(this.checklistId); }, checklistItem() { - return Checklists.findOne(this.checklistId).getItem(this.checklistItemId); + return ChecklistItems.findOne(this.checklistItemId); }, }); diff --git a/models/checklistItems.js b/models/checklistItems.js index 47e37c87..19b3799d 100644 --- a/models/checklistItems.js +++ b/models/checklistItems.js @@ -47,6 +47,16 @@ ChecklistItems.mutations({ toggleItem() { return { $set: { isFinished: !this.isFinished } }; }, + move(checklistId, sortIndex) { + const cardId = Checklists.findOne(checklistId).cardId; + const mutatedFields = { + cardId, + checklistId, + sort: sortIndex, + }; + + return {$set: mutatedFields}; + } }); // Activities helper diff --git a/server/migrations.js b/server/migrations.js index 467dd4c2..a1bdd487 100644 --- a/server/migrations.js +++ b/server/migrations.js @@ -191,10 +191,10 @@ Migrations.add('add-views', () => { Migrations.add('add-checklist-items', () => { Checklists.find().forEach((checklist) => { // Create new items - _.sortBy(checklist.items, 'sort').forEach((item) => { + _.sortBy(checklist.items, 'sort').forEach((item, index) => { ChecklistItems.direct.insert({ title: item.title, - sort: item.sort, + sort: index, isFinished: item.isFinished, checklistId: checklist._id, cardId: checklist.cardId, -- cgit v1.2.3-1-g7c22 From ca89442f3a62a7a97044a6e572eea70158edadbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 15:31:38 -0300 Subject: Clean checklists model --- models/checklists.js | 137 --------------------------------------------------- 1 file changed, 137 deletions(-) diff --git a/models/checklists.js b/models/checklists.js index d9b15140..637e280c 100644 --- a/models/checklists.js +++ b/models/checklists.js @@ -46,23 +46,10 @@ Checklists.helpers({ isFinished() { return 0 !== this.itemCount() && this.itemCount() === this.finishedCount(); }, - getItem(_id) { - return _.findWhere(this.items, { _id }); - }, itemIndex(itemId) { const items = self.findOne({_id : this._id}).items; return _.pluck(items, '_id').indexOf(itemId); }, - getNewItemId() { - const itemCount = this.itemCount(); - let idx = 0; - if (itemCount > 0) { - const lastId = this.items[itemCount - 1]._id; - const lastIdSuffix = lastId.substr(this._id.length); - idx = parseInt(lastIdSuffix, 10) + 1; - } - return `${this._id}${idx}`; - }, }); Checklists.allow({ @@ -86,108 +73,9 @@ Checklists.before.insert((userId, doc) => { }); Checklists.mutations({ - //for checklist itself setTitle(title) { return { $set: { title } }; }, - //for items in checklist - addItem(title) { - const _id = this.getNewItemId(); - return { - $addToSet: { - items: { - _id, title, - isFinished: false, - sort: this.itemCount(), - }, - }, - }; - }, - addFullItem(item) { - const itemsUpdate = {}; - this.items.forEach(function(iterItem, index) { - if (iterItem.sort >= item.sort) { - itemsUpdate[`items.${index}.sort`] = iterItem.sort + 1; - } - }); - if (!_.isEmpty(itemsUpdate)) { - self.direct.update({ _id: this._id }, { $set: itemsUpdate }); - } - return { $addToSet: { items: item } }; - }, - removeItem(itemId) { - const item = this.getItem(itemId); - const itemsUpdate = {}; - this.items.forEach(function(iterItem, index) { - if (iterItem.sort > item.sort) { - itemsUpdate[`items.${index}.sort`] = iterItem.sort - 1; - } - }); - if (!_.isEmpty(itemsUpdate)) { - self.direct.update({ _id: this._id }, { $set: itemsUpdate }); - } - return { $pull: { items: { _id: itemId } } }; - }, - editItem(itemId, title) { - if (this.getItem(itemId)) { - const itemIndex = this.itemIndex(itemId); - return { - $set: { - [`items.${itemIndex}.title`]: title, - }, - }; - } - return {}; - }, - finishItem(itemId) { - if (this.getItem(itemId)) { - const itemIndex = this.itemIndex(itemId); - return { - $set: { - [`items.${itemIndex}.isFinished`]: true, - }, - }; - } - return {}; - }, - resumeItem(itemId) { - if (this.getItem(itemId)) { - const itemIndex = this.itemIndex(itemId); - return { - $set: { - [`items.${itemIndex}.isFinished`]: false, - }, - }; - } - return {}; - }, - toggleItem(itemId) { - const item = this.getItem(itemId); - if (item) { - const itemIndex = this.itemIndex(itemId); - return { - $set: { - [`items.${itemIndex}.isFinished`]: !item.isFinished, - }, - }; - } - return {}; - }, - sortItems(itemIDs) { - const validItems = []; - itemIDs.forEach((itemID) => { - if (this.getItem(itemID)) { - validItems.push(this.itemIndex(itemID)); - } - }); - const modifiedValues = {}; - for (let i = 0; i < validItems.length; i++) { - modifiedValues[`items.${validItems[i]}.sort`] = i; - } - return { - $set: modifiedValues, - }; - }, }); if (Meteor.isServer) { @@ -205,30 +93,6 @@ if (Meteor.isServer) { }); }); - //TODO: so there will be no activity for adding item into checklist, maybe will be implemented in the future. - // The future is now - Checklists.after.update((userId, doc, fieldNames, modifier) => { - if (fieldNames.includes('items')) { - if (modifier.$addToSet) { - Activities.insert({ - userId, - activityType: 'addChecklistItem', - cardId: doc.cardId, - boardId: Cards.findOne(doc.cardId).boardId, - checklistId: doc._id, - checklistItemId: modifier.$addToSet.items._id, - }); - } else if (modifier.$pull) { - const activity = Activities.findOne({ - checklistItemId: modifier.$pull.items._id, - }); - if (activity) { - Activities.remove(activity._id); - } - } - } - }); - Checklists.before.remove((userId, doc) => { const activities = Activities.find({ checklistId: doc._id }); if (activities) { @@ -239,7 +103,6 @@ if (Meteor.isServer) { }); } -//CARD COMMENT REST API if (Meteor.isServer) { JsonRoutes.add('GET', '/api/boards/:boardId/cards/:cardId/checklists', function (req, res) { try { -- cgit v1.2.3-1-g7c22 From 243af32fc798f161e72eddf9e43053b1ba89d98a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 16:47:07 -0300 Subject: Add checklist ordering capability --- client/components/cards/cardDetails.js | 46 +++++++++++++++++++++++++++++++++ client/components/cards/checklists.jade | 35 +++++++++++++------------ client/components/cards/checklists.js | 42 +++++++++++++++++------------- models/cards.js | 2 +- 4 files changed, 89 insertions(+), 36 deletions(-) diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index ab8a6288..066e52ec 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -1,4 +1,5 @@ const subManager = new SubsManager(); +const { calculateIndexData } = Utils; BlazeComponent.extendComponent({ mixins() { @@ -66,6 +67,51 @@ BlazeComponent.extendComponent({ onRendered() { if (!Utils.isMiniScreen()) this.scrollParentContainer(); + const $checklistsDom = this.$('.card-checklist-items'); + + $checklistsDom.sortable({ + tolerance: 'pointer', + helper: 'clone', + handle: '.checklist-title', + items: '.js-checklist', + placeholder: 'js-checklist placeholder', + distance: 7, + start(evt, ui) { + ui.placeholder.height(ui.helper.height()); + EscapeActions.executeUpTo('popup-close'); + }, + stop(evt, ui) { + let prevChecklist = ui.item.prev('.js-checklist').get(0); + if (prevChecklist) { + prevChecklist = Blaze.getData(prevChecklist).checklist; + } + let nextChecklist = ui.item.next('.js-checklist').get(0); + if (nextChecklist) { + nextChecklist = Blaze.getData(nextChecklist).checklist; + } + const sortIndex = calculateIndexData(prevChecklist, nextChecklist, 1); + + $checklistsDom.sortable('cancel'); + const checklist = Blaze.getData(ui.item.get(0)).checklist; + + Checklists.update(checklist._id, { + $set: { + sort: sortIndex.base, + }, + }); + }, + }); + + function userIsMember() { + return Meteor.user() && Meteor.user().isBoardMember(); + } + + // Disable sorting if the current user is not a board member + this.autorun(() => { + if ($checklistsDom.data('sortable')) { + $checklistsDom.sortable('option', 'disabled', !userIsMember()); + } + }); }, onDestroyed() { diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index c73602b5..4753c2c6 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -18,24 +18,25 @@ template(name="checklists") | {{_ 'add-checklist'}}... template(name="checklistDetail") - +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist) - +editChecklistItemForm(checklist = checklist) - else - .checklist-title - .checkbox.fa.fa-check-square-o - if canModifyCard - a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}... - - span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}} - if canModifyCard - h2.title.js-open-inlined-form.is-editable - +viewer - = checklist.title - else - h2.title - +viewer + .js-checklist + +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist) + +editChecklistItemForm(checklist = checklist) + else + .checklist-title + .checkbox.fa.fa-check-square-o + if canModifyCard + a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}... + + span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}} + if canModifyCard + h2.title.js-open-inlined-form.is-editable + +viewer = checklist.title - +checklistItems(checklist = checklist) + else + h2.title + +viewer + = checklist.title + +checklistItems(checklist = checklist) template(name="checklistDeleteDialog") .js-confirm-checklist-delete diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 232cc6e4..d68a1e47 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -38,26 +38,32 @@ function initSorting(items) { }); } -Template.checklists.onRendered(function () { - const self = BlazeComponent.getComponentForElement(this.firstNode); - self.itemsDom = this.$('.card-checklist-items'); - initSorting(self.itemsDom); - self.itemsDom.mousedown(function(evt) { - evt.stopPropagation(); - }); +BlazeComponent.extendComponent({ + onRendered() { + const self = this; + self.itemsDom = this.$('.js-checklist-items'); + initSorting(self.itemsDom); + self.itemsDom.mousedown(function(evt) { + evt.stopPropagation(); + }); + + function userIsMember() { + return Meteor.user() && Meteor.user().isBoardMember(); + } - function userIsMember() { - return Meteor.user() && Meteor.user().isBoardMember(); - } + // Disable sorting if the current user is not a board member + self.autorun(() => { + const $itemsDom = $(self.itemsDom); + if ($itemsDom.data('sortable')) { + $(self.itemsDom).sortable('option', 'disabled', !userIsMember()); + } + }); + }, - // Disable sorting if the current user is not a board member - self.autorun(() => { - const $itemsDom = $(self.itemsDom); - if ($itemsDom.data('sortable')) { - $(self.itemsDom).sortable('option', 'disabled', !userIsMember()); - } - }); -}); + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}).register('checklistDetail'); BlazeComponent.extendComponent({ diff --git a/models/cards.js b/models/cards.js index 544afca5..8fd15488 100644 --- a/models/cards.js +++ b/models/cards.js @@ -155,7 +155,7 @@ Cards.helpers({ }, checklists() { - return Checklists.find({cardId: this._id}, {sort: {createdAt: 1}}); + return Checklists.find({cardId: this._id}, {sort: { sort: 1 } }); }, checklistItemCount() { -- cgit v1.2.3-1-g7c22 From 06e64d24a80be9df55bf1b0c91f674b6f947882d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 17:19:46 -0300 Subject: Add styling --- client/components/cards/cardDetails.js | 2 +- client/components/cards/checklists.jade | 2 +- client/components/cards/checklists.styl | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 066e52ec..77593a74 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -74,7 +74,7 @@ BlazeComponent.extendComponent({ helper: 'clone', handle: '.checklist-title', items: '.js-checklist', - placeholder: 'js-checklist placeholder', + placeholder: 'checklist placeholder', distance: 7, start(evt, ui) { ui.placeholder.height(ui.helper.height()); diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 4753c2c6..c79eb5aa 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -18,7 +18,7 @@ template(name="checklists") | {{_ 'add-checklist'}}... template(name="checklistDetail") - .js-checklist + .js-checklist.checklist +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist) +editChecklistItemForm(checklist = checklist) else diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index 3f4445ab..7b35488f 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -78,12 +78,27 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item bottom: -600px right: 0 +.checklist + background: darken(white, 3%) + + &.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 + + .checklist-item margin: 0 0 0.5em 1.33em line-height: 25px font-size: 1.1em margin-top: 3px display: flex + background: darken(white, 3%) &.placeholder background: darken(white, 20%) -- cgit v1.2.3-1-g7c22 From 3eb6f97291e9160403a3f2a6b1de34c20f434ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 17:31:53 -0300 Subject: Fix lint errors --- .eslintrc.json | 1 + models/checklistItems.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 8bd678b3..0a9f3c90 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -131,6 +131,7 @@ "AccountSettings": true, "Announcements": true, "Swimlanes": true, + "ChecklistItems": true, "Npm": true } } diff --git a/models/checklistItems.js b/models/checklistItems.js index 19b3799d..3c01d476 100644 --- a/models/checklistItems.js +++ b/models/checklistItems.js @@ -56,7 +56,7 @@ ChecklistItems.mutations({ }; return {$set: mutatedFields}; - } + }, }); // Activities helper -- cgit v1.2.3-1-g7c22 From 5e5a5ed9be33fe020b76dfb1ab4b32aec0753a20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Mon, 19 Mar 2018 18:49:00 -0300 Subject: Fix class name change when clicking check box --- client/components/cards/checklists.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index d68a1e47..1f05aded 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -220,7 +220,7 @@ BlazeComponent.extendComponent({ }, events() { return [{ - 'click .item .check-box': this.toggleItem, + 'click .js-checklist-item .check-box': this.toggleItem, }]; }, }).register('itemDetail'); -- cgit v1.2.3-1-g7c22