#Adding Sortable to Meteor File Collection Work-in-Progress to re-order rows in Meteor File Collection (MFC) Sample App using drag-and-drop sorting provided by Rubaxa Sortable for Meteor.
Please see the situation assessment by the Meteor File Collection Author.
I forked Meteor File Collection Sample App and added Sortable hooks by
following instructions at Rubaxa Sortable for Meteor
including suggested approach of using {{#sortable items=<cursor> options=myOptions}}
. Rubaxa has created #sortable
to replace #each
and I moved the row HTML (from the MFC Sample App) into a new template called sortableRow
as follows:
<tbody class="sortable">
{{#sortable items=dataEntries options=sortableOptions}}
{{> sortableRow }}
{{/sortable}}
</tbody>
I also had to move some helpers to support the new sortableRow
template.
The Rubaxa Sortable Example Demo and Source provided
some help with the integration, but the Rubaxa Sortable example used the same word "attributes" for collection names and helpers, which confused me at first.
For clarity I've named collection names and helpers separately in this repo, but since
Meteor File Collection has a multi-faceted approach to collections, I'm not sure I'm passing collections and cursors correctly between the two packages.
Finally, I also added two columns to the MFC Sample App.
- One column displays the order index of each row (which should always be ascending), and
- The final column provides a click/touch target for dragging each row up or down.
I am able to drag one row to a new position. Unfortunately, I then encountered the following problems.
Error: Uncaught TypeError: Cannot read property 'findOne' of undefined
Source: Reactivize.js:95
templateInstance.adjustOrders = function adjustOrders(itemId, orderPrevItem, orderNextItem) {
var orderField = templateInstance.options.sortField;
var selector = {}, modifier = {$set: {}};
var ids = [];
var startOrder = templateInstance.collection.findOne(itemId)[orderField]; // Line 95
Although templateInstance.options
exists and yields the correct sortField, templateInstance.collection
is undefined.
Also, the order index is not populated with values in my integration however the Rubaxa demo orders the values when items
are added to the collection. That seems a clue that I've not enabled inserts
or updates
properly, but I'm a bit lost
in the Rubaxa code. I've tried putting the order index at different nesting depths of the collection (as commented in my code),
but neither level seemed to help. Possibly it's a pub/sub problem. As a last attempt, I set the order indices manually
using the Mongo console and they moved appropriately in the table, but re-ordering by dragging still gave the error above.
##Please Help! Before I cry "Uncle" and set up a relic up/down button!