0
votes

I want to update SpaceBars @index native helper when I sort the items displayed within an #each iteration. I guess that the correct way to do it is to sort the cursor I use in the #each.

The cursor comes from an Items collection. The array that I use to sort them belongs to another collection document (Projects), and it stores an ordered list of each published item id.

After I drop an item at its new position, I update each item index in the project document array using the sortable stop function. To do so, I $pull it out first, and then $push it at a specific position.

stop: function(e, ui) {
  var project = Projects.findOne();
  // get the dragged html element and the one before and after it

  el = ui.item.get(0)
  before = ui.item.prev().get(0)
  after = ui.item.next().get(0)

  console.log(Blaze.getData(el)._id); //gets the id of the item dropped

  if(!before) {
    //if it was dragged into the first position
    console.log(after.dataset.index); //gets the index of the next element

    Projects.update({_id: project._id},
      {$pull:
        {
          items:Blaze.getData(el)._id
        }
      })
      Projects.update({_id: project._id},
        {$push:
          {
            items:
            {
              $each:[Blaze.getData(el)._id],
              $position:0
            }
          }
        })
      } else if(!after) {
        //if it was dragged into the last position 
        Projects.update({_id: project._id},
          {$pull:
            {
              items:Blaze.getData(el)._id
            }
          })
          Projects.update({_id: project._id},
            {$push:
              {
                items: Blaze.getData(el)._id
              }
            })
          }  else
          Projects.update({_id: project._id},
            {$pull:
              {
                items:Blaze.getData(el)._id
              }
            })
            Projects.update({_id: project._id},
              {$push:
                {
                  items:
                  {
                    $each:[Blaze.getData(el)._id],
                    $position:after.dataset.index -1
                  }
                }
              })
            }

As you might see, I use the index property of my item in the above function (e.g. $position:after.dataset.index -1). This is what I want to update by sorting my cursor.

To summarize it, on one hand, I have an ordered (using index) array of ids; Example:

items : {
   Id2131,
   Id4233,
   Id2243,
   Id2331,
   Id2455,
   Id2123
}

and on the other hand, I have a publication with all the ids matching the array, but not in the right order.

How can I sort my cursor Items.find() following the order of my other document array?

1

1 Answers

0
votes

I just realized how to do it. Here is how I proceeded.

The helper feeding my #each iteration does not return simple Items.find() anymore but a sorted array version of it made with an dedicated function. It now returns sortItems(Items.find())

And the sortItems function looks like this:

var sortItems= function(cursor) {
  if(!cursor) {
    return [];
  }
  var raw = cursor.fetch();

  var project = Projects.findOne()
  var sorted = [];
  _.each( project.items, function(id){
    _.each( raw, function(item){
    if (item._id === id) {
      sorted.push(item);
    }

    })
  })
  return sorted;
};