From d59583915cca24d53a11251c54ca7caf6b5edb4e Mon Sep 17 00:00:00 2001 From: Nicu Tofan Date: Mon, 18 Jun 2018 23:25:56 +0300 Subject: Initial implementation for subtasks --- client/components/cards/cardDetails.jade | 3 + client/components/cards/cardDetails.js | 56 +++++++---- client/components/cards/checklists.jade | 5 +- client/components/cards/checklists.js | 4 +- client/components/cards/subtasks.jade | 96 ++++++++++++++++++ client/components/cards/subtasks.js | 166 +++++++++++++++++++++++++++++++ client/components/cards/subtasks.styl | 139 ++++++++++++++++++++++++++ 7 files changed, 442 insertions(+), 27 deletions(-) create mode 100644 client/components/cards/subtasks.jade create mode 100644 client/components/cards/subtasks.js create mode 100644 client/components/cards/subtasks.styl (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index aa4829a9..bc0ce45c 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -144,6 +144,9 @@ template(name="cardDetails") hr +checklists(cardId = _id) + hr + +subtasks(cardId = _id) + hr h3 i.fa.fa-paperclip diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 72ed678b..22dacb70 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -364,6 +364,20 @@ BlazeComponent.extendComponent({ }, }).register('boardsAndLists'); +function cloneCheckList(_id, checklist) { + 'use strict'; + const checklistId = checklist._id; + checklist.cardId = _id; + checklist._id = null; + const newChecklistId = Checklists.insert(checklist); + ChecklistItems.find({checklistId}).forEach(function(item) { + item._id = null; + item.checklistId = newChecklistId; + item.cardId = _id; + ChecklistItems.insert(item); + }); +} + Template.copyCardPopup.events({ 'click .js-done'() { const card = Cards.findOne(Session.get('currentCard')); @@ -392,19 +406,18 @@ Template.copyCardPopup.events({ // copy checklists let cursor = Checklists.find({cardId: oldId}); + cursor.forEach(function() { + cloneCheckList(_id, arguments[0]); + }); + + // copy subtasks + cursor = Subtasks.find({cardId: oldId}); cursor.forEach(function() { 'use strict'; - const checklist = arguments[0]; - const checklistId = checklist._id; - checklist.cardId = _id; - checklist._id = null; - const newChecklistId = Checklists.insert(checklist); - ChecklistItems.find({checklistId}).forEach(function(item) { - item._id = null; - item.checklistId = newChecklistId; - item.cardId = _id; - ChecklistItems.insert(item); - }); + const subtask = arguments[0]; + subtask.cardId = _id; + subtask._id = null; + /* const newSubtaskId = */ Subtasks.insert(subtask); }); // copy card comments @@ -453,19 +466,18 @@ Template.copyChecklistToManyCardsPopup.events({ // copy checklists let cursor = Checklists.find({cardId: oldId}); + cursor.forEach(function() { + cloneCheckList(_id, arguments[0]); + }); + + // copy subtasks + cursor = Subtasks.find({cardId: oldId}); cursor.forEach(function() { 'use strict'; - const checklist = arguments[0]; - const checklistId = checklist._id; - checklist.cardId = _id; - checklist._id = null; - const newChecklistId = Checklists.insert(checklist); - ChecklistItems.find({checklistId}).forEach(function(item) { - item._id = null; - item.checklistId = newChecklistId; - item.cardId = _id; - ChecklistItems.insert(item); - }); + const subtask = arguments[0]; + subtask.cardId = _id; + subtask._id = null; + /* const newSubtaskId = */ Subtasks.insert(subtask); }); // copy card comments diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index ae680bd5..7678f524 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -27,7 +27,6 @@ template(name="checklistDetail") 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 @@ -75,7 +74,7 @@ template(name="checklistItems") +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist) +editChecklistItemForm(type = 'item' item = item checklist = checklist) else - +itemDetail(item = item checklist = checklist) + +cjecklistItemDetail(item = item checklist = checklist) if canModifyCard +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist) +addChecklistItemForm @@ -84,7 +83,7 @@ template(name="checklistItems") i.fa.fa-plus | {{_ 'add-checklist-item'}}... -template(name='itemDetail') +template(name='cjecklistItemDetail') .js-checklist-item.checklist-item if canModifyCard .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 1f05aded..a62e493e 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -204,7 +204,7 @@ Template.checklistDeleteDialog.onDestroyed(() => { $cardDetails.animate( { scrollTop: this.scrollState.position }); }); -Template.itemDetail.helpers({ +Template.cjecklistItemDetail.helpers({ canModifyCard() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); }, @@ -223,4 +223,4 @@ BlazeComponent.extendComponent({ 'click .js-checklist-item .check-box': this.toggleItem, }]; }, -}).register('itemDetail'); +}).register('cjecklistItemDetail'); diff --git a/client/components/cards/subtasks.jade b/client/components/cards/subtasks.jade new file mode 100644 index 00000000..378d7a46 --- /dev/null +++ b/client/components/cards/subtasks.jade @@ -0,0 +1,96 @@ +template(name="subtasks") + h3 {{_ 'subtasks'}} + if toggleDeleteDialog.get + .board-overlay#card-details-overlay + +subtaskDeleteDialog(subtasks = subtasksToDelete) + + + .card-subtasks-items + each subtasks in currentCard.subtasks + +subtasksDetail(subtasks = subtasks) + + if canModifyCard + +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId) + +addSubtaskItemForm + else + a.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-subtask'}}... + +template(name="subtasksDetail") + .js-subtasks.subtasks + +inlinedForm(classNames="js-edit-subtasks-title" subtasks = subtasks) + +editsubtasksItemForm(subtasks = subtasks) + else + .subtasks-title + span + if canModifyCard + a.js-delete-subtasks.toggle-delete-subtasks-dialog {{_ "delete"}}... + + if canModifyCard + h2.title.js-open-inlined-form.is-editable + +viewer + = subtasks.title + else + h2.title + +viewer + = subtasks.title + +template(name="subtaskDeleteDialog") + .js-confirm-subtasks-delete + p + i(class="fa fa-exclamation-triangle" aria-hidden="true") + p + | {{_ 'confirm-subtask-delete-dialog'}} + span {{subtasks.title}} + | ? + .js-subtasks-delete-buttons + button.confirm-subtasks-delete(type="button") {{_ 'delete'}} + button.toggle-delete-subtasks-dialog(type="button") {{_ 'cancel'}} + +template(name="addSubtaskItemForm") + textarea.js-add-subtask-item(rows='1' autofocus) + .edit-controls.clearfix + button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + +template(name="editsubtasksItemForm") + textarea.js-edit-subtasks-item(rows='1' autofocus) + if $eq type 'item' + = item.title + else + = subtasks.title + .edit-controls.clearfix + button.primary.confirm.js-submit-edit-subtasks-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + span(title=createdAt) {{ moment createdAt }} + if canModifyCard + a.js-delete-subtasks-item {{_ "delete"}}... + +template(name="subtasksItems") + .subtasks-items.js-subtasks-items + each item in subtasks.items + +inlinedForm(classNames="js-edit-subtasks-item" item = item subtasks = subtasks) + +editsubtasksItemForm(type = 'item' item = item subtasks = subtasks) + else + +subtaskItemDetail(item = item subtasks = subtasks) + if canModifyCard + +inlinedForm(autoclose=false classNames="js-add-subtask-item" subtasks = subtasks) + +addSubtaskItemForm + else + a.add-subtask-item.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-subtask-item'}}... + +template(name='subtaskItemDetail') + .js-subtasks-item.subtasks-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}}") + +viewer + = item.title + else + .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") + .item-title(class="{{#if item.isFinished }}is-checked{{/if}}") + +viewer + = item.title diff --git a/client/components/cards/subtasks.js b/client/components/cards/subtasks.js new file mode 100644 index 00000000..a611ae26 --- /dev/null +++ b/client/components/cards/subtasks.js @@ -0,0 +1,166 @@ +const { calculateIndexData } = Utils; + +function initSorting(items) { + items.sortable({ + tolerance: 'pointer', + helper: 'clone', + items: '.js-subtasks-item:not(.placeholder)', + connectWith: '.js-subtasks-items', + appendTo: '.board-canvas', + distance: 7, + placeholder: 'subtasks-item placeholder', + scroll: false, + start(evt, ui) { + ui.placeholder.height(ui.helper.height()); + EscapeActions.executeUpTo('popup-close'); + }, + stop(evt, ui) { + const parent = ui.item.parents('.js-subtasks-items'); + const subtasksId = Blaze.getData(parent.get(0)).subtasks._id; + let prevItem = ui.item.prev('.js-subtasks-item').get(0); + if (prevItem) { + prevItem = Blaze.getData(prevItem).item; + } + let nextItem = ui.item.next('.js-subtasks-item').get(0); + if (nextItem) { + nextItem = Blaze.getData(nextItem).item; + } + const nItems = 1; + const sortIndex = calculateIndexData(prevItem, nextItem, nItems); + const subtasksDomElement = ui.item.get(0); + const subtasksData = Blaze.getData(subtasksDomElement); + const subtasksItem = subtasksData.item; + + items.sortable('cancel'); + + subtasksItem.move(subtasksId, sortIndex.base); + }, + }); +} + +BlazeComponent.extendComponent({ + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}).register('subtasksDetail'); + +BlazeComponent.extendComponent({ + + addSubtask(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-add-subtask-item'); + const title = textarea.value.trim(); + const cardId = this.currentData().cardId; + const card = Cards.findOne(cardId); + + if (title) { + Subtasks.insert({ + cardId, + title, + sort: card.subtasks().count(), + }); + setTimeout(() => { + this.$('.add-subtask-item').last().click(); + }, 100); + } + textarea.value = ''; + textarea.focus(); + }, + + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, + + deleteSubtask() { + const subtasks = this.currentData().subtasks; + if (subtasks && subtasks._id) { + Subtasks.remove(subtasks._id); + this.toggleDeleteDialog.set(false); + } + }, + + editSubtask(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-edit-subtasks-item'); + const title = textarea.value.trim(); + const subtasks = this.currentData().subtasks; + subtasks.setTitle(title); + }, + + onCreated() { + this.toggleDeleteDialog = new ReactiveVar(false); + this.subtasksToDelete = null; //Store data context to pass to subtaskDeleteDialog template + }, + + pressKey(event) { + //If user press enter key inside a form, submit it + //Unless the user is also holding down the 'shift' key + if (event.keyCode === 13 && !event.shiftKey) { + event.preventDefault(); + const $form = $(event.currentTarget).closest('form'); + $form.find('button[type=submit]').click(); + } + }, + + events() { + const events = { + 'click .toggle-delete-subtasks-dialog'(event) { + if($(event.target).hasClass('js-delete-subtasks')){ + this.subtasksToDelete = this.currentData().subtasks; //Store data context + } + this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get()); + }, + }; + + return [{ + ...events, + 'submit .js-add-subtask': this.addSubtask, + 'submit .js-edit-subtasks-title': this.editSubtask, + 'click .confirm-subtasks-delete': this.deleteSubtask, + keydown: this.pressKey, + }]; + }, +}).register('subtasks'); + +Template.subtaskDeleteDialog.onCreated(() => { + const $cardDetails = this.$('.card-details'); + this.scrollState = { position: $cardDetails.scrollTop(), //save current scroll position + top: false, //required for smooth scroll animation + }; + //Callback's purpose is to only prevent scrolling after animation is complete + $cardDetails.animate({ scrollTop: 0 }, 500, () => { this.scrollState.top = true; }); + + //Prevent scrolling while dialog is open + $cardDetails.on('scroll', () => { + if(this.scrollState.top) { //If it's already in position, keep it there. Otherwise let animation scroll + $cardDetails.scrollTop(0); + } + }); +}); + +Template.subtaskDeleteDialog.onDestroyed(() => { + const $cardDetails = this.$('.card-details'); + $cardDetails.off('scroll'); //Reactivate scrolling + $cardDetails.animate( { scrollTop: this.scrollState.position }); +}); + +Template.subtaskItemDetail.helpers({ + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}); + +BlazeComponent.extendComponent({ + toggleItem() { + const subtasks = this.currentData().subtasks; + const item = this.currentData().item; + if (subtasks && item && item._id) { + item.toggleItem(); + } + }, + events() { + return [{ + 'click .js-subtasks-item .check-box': this.toggleItem, + }]; + }, +}).register('subtaskItemDetail'); diff --git a/client/components/cards/subtasks.styl b/client/components/cards/subtasks.styl new file mode 100644 index 00000000..2d18407c --- /dev/null +++ b/client/components/cards/subtasks.styl @@ -0,0 +1,139 @@ +.js-add-subtask + color: #8c8c8c + +textarea.js-add-subtask-item, textarea.js-edit-subtasks-item + overflow: hidden + word-wrap: break-word + resize: none + height: 34px + +.delete-text + color: #8c8c8c + text-decoration: underline + word-wrap: break-word + float: right + padding-top: 6px + &:hover + color: inherit + +.subtasks-title + .checkbox + float: left + width: 30px + height 30px + font-size: 18px + line-height: 30px + + .title + font-size: 18px + line-height: 25px + + .subtasks-stat + margin: 0 0.5em + float: right + padding-top: 6px + &.is-finished + color: #3cb500 + + .js-delete-subtasks + @extends .delete-text + + +.js-confirm-subtasks-delete + background-color: darken(white, 3%) + position: absolute + float: left; + width: 60% + margin-top: 0 + margin-left: 13% + padding-bottom: 2% + padding-left: 3% + padding-right: 3% + z-index: 17 + border-radius: 3px + + p + position: relative + margin-top: 3% + width: 100% + text-align: center + span + font-weight: bold + + i + font-size: 2em + + .js-subtasks-delete-buttons + position: relative + padding: left 2% right 2% + .confirm-subtasks-delete + margin-left: 12% + float: left + .toggle-delete-subtasks-dialog + margin-right: 12% + float: right + +#card-details-overlay + top: 0 + bottom: -600px + right: 0 + +.subtasks + 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 + + +.subtasks-item + margin: 0 0 0 0.1em + line-height: 18px + font-size: 1.1em + margin-top: 3px + display: flex + 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 + + &:hover + background-color: darken(white, 8%) + + .check-box + margin: 0.1em 0 0 0; + &.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 + & .viewer + p + margin-bottom: 2px + +.js-delete-subtasks-item + margin: 0 0 0.5em 1.33em + @extends .delete-text + padding: 12px 0 0 0 + +.add-subtask-item + margin: 0.2em 0 0.5em 1.33em + display: inline-block -- cgit v1.2.3-1-g7c22