|
|
|
|
@ -11,8 +11,8 @@ BlazeComponent.extendComponent({ |
|
|
|
|
options = options || {}; |
|
|
|
|
options.position = options.position || 'top'; |
|
|
|
|
|
|
|
|
|
const forms = this.childrenComponents('inlinedForm'); |
|
|
|
|
let form = _.find(forms, (component) => { |
|
|
|
|
const forms = this.childComponents('inlinedForm'); |
|
|
|
|
let form = forms.find((component) => { |
|
|
|
|
return component.data().position === options.position; |
|
|
|
|
}); |
|
|
|
|
if (!form && forms.length > 0) { |
|
|
|
|
@ -26,8 +26,10 @@ BlazeComponent.extendComponent({ |
|
|
|
|
const firstCardDom = this.find('.js-minicard:first'); |
|
|
|
|
const lastCardDom = this.find('.js-minicard:last'); |
|
|
|
|
const textarea = $(evt.currentTarget).find('textarea'); |
|
|
|
|
const title = textarea.val(); |
|
|
|
|
const position = this.currentData().position; |
|
|
|
|
const title = textarea.val().trim(); |
|
|
|
|
|
|
|
|
|
const formComponent = this.childComponents('addCardForm')[0]; |
|
|
|
|
let sortIndex; |
|
|
|
|
if (position === 'top') { |
|
|
|
|
sortIndex = Utils.calculateIndex(null, firstCardDom).base; |
|
|
|
|
@ -35,9 +37,14 @@ BlazeComponent.extendComponent({ |
|
|
|
|
sortIndex = Utils.calculateIndex(lastCardDom, null).base; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if ($.trim(title)) { |
|
|
|
|
const members = formComponent.members.get(); |
|
|
|
|
const labelIds = formComponent.labels.get(); |
|
|
|
|
|
|
|
|
|
if (title) { |
|
|
|
|
const _id = Cards.insert({ |
|
|
|
|
title, |
|
|
|
|
members, |
|
|
|
|
labelIds, |
|
|
|
|
listId: this.data()._id, |
|
|
|
|
boardId: this.data().board()._id, |
|
|
|
|
sort: sortIndex, |
|
|
|
|
@ -53,6 +60,8 @@ BlazeComponent.extendComponent({ |
|
|
|
|
if (position === 'bottom') { |
|
|
|
|
this.scrollToBottom(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
formComponent.reset(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -100,11 +109,39 @@ BlazeComponent.extendComponent({ |
|
|
|
|
}, |
|
|
|
|
}).register('listBody'); |
|
|
|
|
|
|
|
|
|
function toggleValueInReactiveArray(reactiveValue, value) { |
|
|
|
|
const array = reactiveValue.get(); |
|
|
|
|
const valueIndex = array.indexOf(value); |
|
|
|
|
if (valueIndex === -1) { |
|
|
|
|
array.push(value); |
|
|
|
|
} else { |
|
|
|
|
array.splice(valueIndex, 1); |
|
|
|
|
} |
|
|
|
|
reactiveValue.set(array); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
BlazeComponent.extendComponent({ |
|
|
|
|
template() { |
|
|
|
|
return 'addCardForm'; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
onCreated() { |
|
|
|
|
this.labels = new ReactiveVar([]); |
|
|
|
|
this.members = new ReactiveVar([]); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
reset() { |
|
|
|
|
this.labels.set([]); |
|
|
|
|
this.members.set([]); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getLabels() { |
|
|
|
|
const currentBoardId = Session.get('currentBoard'); |
|
|
|
|
return Boards.findOne(currentBoardId).labels.filter((label) => { |
|
|
|
|
return this.labels.get().indexOf(label._id) > -1; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
pressKey(evt) { |
|
|
|
|
// Pressing Enter should submit the card
|
|
|
|
|
if (evt.keyCode === 13) { |
|
|
|
|
@ -140,4 +177,66 @@ BlazeComponent.extendComponent({ |
|
|
|
|
keydown: this.pressKey, |
|
|
|
|
}]; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
onRendered() { |
|
|
|
|
const editor = this; |
|
|
|
|
this.$('textarea').escapeableTextComplete([ |
|
|
|
|
// User mentions
|
|
|
|
|
{ |
|
|
|
|
match: /\B@(\w*)$/, |
|
|
|
|
search(term, callback) { |
|
|
|
|
const currentBoard = Boards.findOne(Session.get('currentBoard')); |
|
|
|
|
callback($.map(currentBoard.members, (member) => { |
|
|
|
|
const user = Users.findOne(member.userId); |
|
|
|
|
return user.username.indexOf(term) === 0 ? user : null; |
|
|
|
|
})); |
|
|
|
|
}, |
|
|
|
|
template(user) { |
|
|
|
|
return user.username; |
|
|
|
|
}, |
|
|
|
|
replace(user) { |
|
|
|
|
toggleValueInReactiveArray(editor.members, user._id); |
|
|
|
|
return ''; |
|
|
|
|
}, |
|
|
|
|
index: 1, |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// Labels
|
|
|
|
|
{ |
|
|
|
|
match: /\B#(\w*)$/, |
|
|
|
|
search(term, callback) { |
|
|
|
|
const currentBoard = Boards.findOne(Session.get('currentBoard')); |
|
|
|
|
callback($.map(currentBoard.labels, (label) => { |
|
|
|
|
if (label.name.indexOf(term) > -1 || |
|
|
|
|
label.color.indexOf(term) > -1) { |
|
|
|
|
return label; |
|
|
|
|
} |
|
|
|
|
})); |
|
|
|
|
}, |
|
|
|
|
template(label) { |
|
|
|
|
return Blaze.toHTMLWithData(Template.autocompleteLabelLine, { |
|
|
|
|
hasNoName: !Boolean(label.name), |
|
|
|
|
colorName: label.color, |
|
|
|
|
labelName: label.name || label.color, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
replace(label) { |
|
|
|
|
toggleValueInReactiveArray(editor.labels, label._id); |
|
|
|
|
return ''; |
|
|
|
|
}, |
|
|
|
|
index: 1, |
|
|
|
|
}, |
|
|
|
|
], { |
|
|
|
|
// When the autocomplete menu is shown we want both a press of both `Tab`
|
|
|
|
|
// or `Enter` to validation the auto-completion. We also need to stop the
|
|
|
|
|
// event propagation to prevent the card from submitting (on `Enter`) or
|
|
|
|
|
// going on the next column (on `Tab`).
|
|
|
|
|
onKeydown(evt, commands) { |
|
|
|
|
if (evt.keyCode === 9 || evt.keyCode === 13) { |
|
|
|
|
evt.stopPropagation(); |
|
|
|
|
return commands.KEY_ENTER; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
}).register('addCardForm'); |
|
|
|
|
|
Xavier Priour
10 years ago