availability rule test

by Travis Smith

HTML

<div id="app">
  <h2>Products:</h2>
  <ul>
    <li v-for="(product, product_index) in products">
      <h3 v-show="available(product)">
        {{ product.name }}
      </h3>
    </li>
  </ul>
  <select v-model="shell_class">
    <option>I</option>
    <option>II</option>
    <option>III</option>
  </select>
  <select v-model="state">
    <option>TX</option>
    <option>CA</option>
    <option>AK</option>
  </select>
  </br>
  Shell Class: {{ shell_class }}
  </br>
  State: {{ state }}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    products: [
    	{ name: "Simple Flat",
      	availability_rules: [
          {
            conditions: [
              {
                question_name: 'shell_class',
                operator: '==',
                value: ['III'],
                test: false
              }
            ]
          }
        ]
      },
      { name: "Simple Rated",
      	availability_rules: [
          {
            conditions: [
              {
                question_name: 'shell_class',
                operator: '==',
                value: ['III'],
                test: true
              }
              
            ]
          }
        ]
      }
    ],
    shell_class: '',
    state: ''
  },
  methods: {
  	available: function(product) {
    	return this.anyAvailabilityRuleMet(product.availability_rules);
    },
  	anyAvailabilityRuleMet: function(rules) {
      return rules.some(this.allConditionsMet);
    },
    allConditionsMet: function(rule) {
    	return rule.conditions.every(this.conditionMet);
    },
    conditionMet: function(condition) {
    	console.log('evaluating...');
      return this.shell_class === 'III';
    }
  }
})