How to filter meteor collections using multiple-selectbox and filtercollections package

help
1

I’m trying to filter using multiple select one collection with FilterCollections package

PosicoesFilter = new FilterCollections(Posicoes, {
name: 'posicoes',
template: 'posicoes140',
filters: {
  veiculoId: {
    title: 'Veiculo',
    /*  operator: ['$elemMatch'],
      condition: '$and',*/
    searchable: true
  },
  id: {
    title: 'ID',
    condition: '$and',
    sort: 'desc'
  },
  type: {
    title: 'People Types'
  },
  "ignicao": {
    title: 'Ignição'
  },
  "flags.status_movimento": {
    title: 'Status Movimento'
  }
},
sort: {
  order: ['desc', 'asc'],
  defaults: [
    ['data', 'desc']

  ]
},
pager: {
  options: [50, 100, 150, 200, 250],
  itemsPerPage: 100,
  currentPage: 1,
  showPages: 5,
},
callbacks: {
  afterResults: function(cursor) {
    var alteredResults = cursor.fetch();
    _.each(alteredResults, function(result, idx) {
      let veiculo = Veiculos.findOne(result.veiculoId, {
        placa: 1
      });
      if (veiculo) {
        alteredResults[idx].veiculo = veiculo.placa;
      } else {
        alteredResults[idx].veiculo =
          "Veículo não cadastrado";
      }
    });
    return alteredResults;
  },
}
});

With this multiple select code

  <select name="veiculos" class="fc-filter ui selection dropdown" data-fc-filter-field="veiculoId">
  {{#each filtroVeiculos}}
    <option class="fc-filter" data-fc-filter-field="veiculoId" data-fc-filter-value="{{value}}">{{label}}</option>
  {{/each}}
</select>

It doesn’t work. Have some example to do that?

2

Can you provide more details regarding what isn’t working? Are you seeing any error messages on the client/server, getting wrong or invalid data, not seeing anything happen at all, etc.? Any additional troubleshooting details you can provide will help us troubleshoot.

Also - you should look into how to format your code when posting into these forums (prefix your multi-line code with 4 spaces). Proper code formatting will greatly improve your chances of getting help.

3

When I click in some option of multiple select is giving this error:

Uncaught Error: Filter Collection Error: false is not a valid filter.

4

Are you able to share you template helper code? Something that shows where filtroVeiculos is being set.

5

Its here friend:
Template.posicoes140.helpers({ filtroVeiculos: function() { var veiculos = Veiculos.find().fetch(); var filtro = []; veiculos.forEach(function(veiculo, indice) { filtro.push({ label: veiculo.placa, value: veiculo._id,
})
});
return filtro;
},
});`

6

false is being set for your field name. The filter-collections package gets your field name from:

...
'click .fc-filter': function (event) {
  event.preventDefault();
  var field = event.currentTarget.getAttribute('data-fc-filter-field') || false;
...

So field is being set to false since it can’t find the data-fc-filter-field attribute. Looking at your template code, it looks like you’ve defined the .fc-filter class on both the select and option elements. Maybe try removing it from the select element.

7

Cool, but if I remove the fc-filter class from select, nothing happens.

8

Okay - there is some combination in your code that’s causing the click .fc-filter event to fire against the wrong element. Honestly one of the easiest ways to troubleshoot package issues like this is to checkout a copy of the package yourself, and wire up some simple debugging. So:

  1. Create a packages directory in your apps root.

  2. In the packages directory: git clone https://github.com/Workpop/filter-collections.git

  3. Edit line 742 of the filter-collections-client.js to add a console.log(event).

  4. See what event is being captured, which will help you figure out why there isn’t a data-fc-filter-field attribute.

  5. When you’re done troubleshooting, just remove the filter-collections directory from packages (or the entire packages directory).

9

Good, I tried what you said and when I click in option from select, don’t trigger the click event.

10

Maybe add the fc-filter class back on the select element and try again - the exception you’re seeing is coming from that part of the code, so you should be able to dump the associated event to see which element it’s being triggered from.