client/src/views/Variants.vue

   1 <template lang="pug">
   2 div
   3     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   4         label(for="prefixFilter") Type first letters...
   5         input#prefixFilter(v-model="curPrefix")
   6     .variant.col-sm-12.col-md-5.col-lg-4(
   7         v-for="(v,idx) in filteredVariants"
   8         :class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}"
   9     )
  10         router-link(:to="getLink(v.name)")
  11             h4.boxtitle.text-center {{ v.name }}
  12             p.description.text-center {{ st.tr(v.desc) }}
  13 </template>
  14
  15 <script>
  16 import { store } from "@/store";
  17 export default {
  18   name: "variants",
  19   data: function() {
  20     return {
  21           curPrefix: "",
  22       st: store.state,
  23     };
  24     },
  25     computed: {
  26         filteredVariants: function () {
  27             const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
  28             const variants = this.st.variants
  29             .filter( v => {
  30                 return v.name.startsWith(capitalizedPrefix);
  31             })
  32             .map( v => {
  33                 return {
  34                     name: v.name,
  35                     desc: v.description,
  36                 };
  37             })
  38       .sort((a,b) => {
  39                 return a.name.localeCompare(b.name);
  40             });
  41       return variants;
  42         },
  43     },
  44   methods: {
  45     getLink: function(vname) {
  46       return "/variants/" + vname;
  47     },
  48   },
  49 };
  50 </script>
  51
  52 <!-- Add "scoped" attribute to limit CSS to this component only -->
  53 <style scoped lang="scss">
  54 h3 {
  55   margin: 40px 0 0;
  56 }
  57 ul {
  58   list-style-type: none;
  59   padding: 0;
  60 }
  61 li {
  62   display: inline-block;
  63   margin: 0 10px;
  64 }
  65 a {
  66   color: #42b983;
  67 }
  68 </style>