Changing select label color

help
1

Hello,

682×512 22.2 KB

I have the following select

    {{#each orders_db}}
      <tr>
        <td>{{item}}</td>
        <td>
         <select class="bootstrapselect orderstatus">
          <option data-content="<span class='label label-info'>{{status}}</span>">{{status}}</option>
                      <option disabled>--------</option>
  <option data-content="<span class='label label-primary'>Awaiting</span>">Awaiting</option>
  <option data-content="<span class='label label-info'>Taken</span>">Taken</option>
  <option data-content="<span class='label label-success'>Delivered</span>">Delivered</option>
  <option data-content="<span class='label label-warning'>Shipped</span>">Shipped</option>
  <option data-content="<span class='label label-danger'>Cancelled</span>">Cancelled</option>
          </select>
        </td>
        <td>{{client}}</td>
        <td>{{location}}</td>
        <td>{{responsible}}</td>
      </tr>
    {{/each}}

in JS

"change .orderstatus": function(event, template){
console.log($( event.target ).val());

Meteor.call('updateOrder', this._id, $( event.target ).val());

},

orders_db: function(){
return Orders.find({}, {sort: {createdAt: -1}});
}

How do I change the depending on the status’ value?
eg. Shipped should have label-warning, cancelled should have label-danger and so on.

2

Use a helper to return the correct label string:

<option data-content="<span class='label {{labelType}}'>Shipped</span>">Shipped</option>

Template.orders.helpers({
  labelType() {
    // some code here to return a string with the right value
  }
});
3

As a test example works flawlessly, but I wonder what the logic behind this could should be.
I have a collection, each and every element is bound to have a “status”.

to get the collection displayed I use

Template.orders.helpers({

orders_db: function(){
return Orders.find({}, {sort: {createdAt: -1}, limit: 20});
},

}

However how using

 labelType() {
}

I can now, compare status value and assign a string variable?

4

Yes - be aware that helpers will only run when they are first called, or if they have a reactive dependency. So you will most likely need to make this reactive. I assume the label type is based on a field or fields in the current document (as returned using your orders_db helper)? You may find that a cleaner approach is to use a transform in your new Mongo.Collection options to set up a “computed field” having the correct label type as part of the order document. Then you can refer to that in your template without an additional helper, which makes it really easy.