Fix the board component data loading

This commit is contained in:
Maxime Quandalle 2015-08-23 01:05:59 +02:00
parent d5eec54c72
commit 2248671b7c
3 changed files with 98 additions and 88 deletions

View file

@ -1,4 +1,4 @@
var boardSubsManager = new SubsManager();
var subManager = new SubsManager();
BlazeComponent.extendComponent({
template: function() {
@ -6,12 +6,19 @@ BlazeComponent.extendComponent({
},
onCreated: function() {
this.draggingActive = new ReactiveVar(false);
this.showOverlay = new ReactiveVar(false);
var self = this;
self.draggingActive = new ReactiveVar(false);
self.showOverlay = new ReactiveVar(false);
self.isBoardReady = new ReactiveVar(false);
// The pattern we use to manually handle data loading is described here:
// https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
// XXX The boardId should be readed from some sort the component "props",
// unfortunatly, Blaze doesn't have this notion.
boardSubsManager.subscribe('board', Session.get('currentBoard'));
self.autorun(function() {
var handle = subManager.subscribe('board', Session.get('currentBoard'));
self.isBoardReady.set(handle.ready());
});
},
openNewListForm: function() {
@ -47,72 +54,6 @@ BlazeComponent.extendComponent({
return currentCard && currentCard.listId === listId;
},
onRendered: function() {
var self = this;
self.scrollLeft();
var lists = this.find('.js-lists');
// We want to animate the card details window closing. We rely on CSS
// transition for the actual animation.
lists._uihooks = {
removeElement: function(node) {
var removeNode = _.once(function() {
node.parentNode.removeChild(node);
});
if ($(node).hasClass('js-card-details')) {
$(node).css({
flexBasis: 0,
padding: 0
});
$(lists).one(CSSEvents.transitionend, removeNode);
} else {
removeNode();
}
}
};
if (! Meteor.user() || ! Meteor.user().isBoardMember())
return;
self.$(lists).sortable({
tolerance: 'pointer',
helper: 'clone',
items: '.js-list:not(.js-list-composer)',
placeholder: 'list placeholder',
distance: 7,
start: function(evt, ui) {
ui.placeholder.height(ui.helper.height());
Popup.close();
},
stop: function() {
self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
function(i, list) {
var data = Blaze.getData(list);
Lists.update(data._id, {
$set: {
sort: i
}
});
}
);
}
});
// Disable drag-dropping while in multi-selection mode
self.autorun(function() {
self.$(lists).sortable('option', 'disabled', MultiSelection.isActive());
});
// If there is no data in the board (ie, no lists) we autofocus the list
// creation form by clicking on the corresponding element.
var currentBoard = Boards.findOne(Session.get('currentBoard'));
if (currentBoard.lists().count() === 0) {
this.openNewListForm();
}
},
sidebarSize: function() {
var sidebar = this.componentChildren('sidebar')[0];
if (sidebar && sidebar.isOpen())
@ -130,6 +71,72 @@ BlazeComponent.extendComponent({
}
}).register('board');
Template.boardBody.onRendered(function() {
var self = BlazeComponent.getComponentForElement(this.firstNode);
self.scrollLeft();
var lists = this.find('.js-lists');
// We want to animate the card details window closing. We rely on CSS
// transition for the actual animation.
lists._uihooks = {
removeElement: function(node) {
var removeNode = _.once(function() {
node.parentNode.removeChild(node);
});
if ($(node).hasClass('js-card-details')) {
$(node).css({
flexBasis: 0,
padding: 0
});
$(lists).one(CSSEvents.transitionend, removeNode);
} else {
removeNode();
}
}
};
if (! Meteor.user() || ! Meteor.user().isBoardMember())
return;
self.$(lists).sortable({
tolerance: 'pointer',
helper: 'clone',
items: '.js-list:not(.js-list-composer)',
placeholder: 'list placeholder',
distance: 7,
start: function(evt, ui) {
ui.placeholder.height(ui.helper.height());
Popup.close();
},
stop: function() {
self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
function(i, list) {
var data = Blaze.getData(list);
Lists.update(data._id, {
$set: {
sort: i
}
});
}
);
}
});
// Disable drag-dropping while in multi-selection mode
self.autorun(function() {
self.$(lists).sortable('option', 'disabled', MultiSelection.isActive());
});
// If there is no data in the board (ie, no lists) we autofocus the list
// creation form by clicking on the corresponding element.
var currentBoard = Boards.findOne(Session.get('currentBoard'));
if (currentBoard.lists().count() === 0) {
self.openNewListForm();
}
});
BlazeComponent.extendComponent({
template: function() {
return 'addListForm';