• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60

<template>
  <main>
    <div class="ui basic segment">
      <div class="ui transparent massive fluid left icon input">
        <input type="text" placeholder="Search promosets by name..." @keyup='handleKeyUp'>
        <i class="search icon"></i>
      </div>
      <PageLoader :isFetching='isFetching' fetchText='Fetching Promosets...' />               
      <div class="ui grid basic segment">
        <div class="four wide column" v-for='promoset in promosets'>
          <a :href="`#/create/promoset/edit/${promoset}`" class="promoset-thumb">
            {{ promoset }}
          </a>    
        </div>        
      </div>     
    </div>  
  </main>
</template>


<script>

  'use strict';

  import PageLoader from '../components/page-loader.vue'

  export default {
    name: 'ListPromosets',
    components: { PageLoader },
    data() {
      return {
        isFetching: false,
        promosets: [],
        promosetscopy: []
      }  
    },

    created() {
      this.isFetching = true
      $.getJSON(`${window.server}/promosets`, r => {
        this.promosets = Object.keys(r)
        this.promosetscopy = this.promosets        
        this.isFetching = false
      })
    },

    methods: {
      handleKeyUp(e) {
        const regexp = new RegExp(e.target.value, 'i')
        this.promosets = this.promosetscopy.filter(p => p.match(regexp))        
      }
    }
  }






</script>