Catalog.vue

<template>
  <div class="catalog-root">
    <div class="row">
      <div class="col-lg-3 col-md-4 categories" v-if="$store.state.catalog.Game">


        <div class="text-center col-lg-8 col-lg-offset-2 server-select-root-wrapper" v-if="($store.state.catalog.Game && $store.state.catalog.Game.regions)">
          <server-select :regions="$store.state.catalog.Game.regions"></server-select>
        </div>

        <div class="col-lg-12 category-select-root-wrapper" v-if="($store.state.catalog.Game && $store.state.catalog.Game.categories)">
          <category-picker v-model="category" :game="localGame"></category-picker>
        </div>

      </div>
      <div class="products-outer-wrapper col-lg-9 col-md-8">
        <catalog-filter></catalog-filter>

        <div class="products">

        <div class="row" v-if="!$store.state.user.id">
          <div class="col-md-6 col-md-offset-3">
            <div class="alert  alert-danger" role="alert">
              <strong>Attention!</strong> You have to be logged in to order a product. <a :href="$store.getters.Router.route('login')">Log in!</a> Or <a :href="$store.getters.Router.route('register')">Register!</a>
            </div>
          </div>
        </div>

        <div class="new-product-wrapper" v-if="!state.filter.owner">
          <div class="new-product">
            <div class="center text-center">

              <div v-if="!$store.state.user.id">
                <p>Members have a bunch of cool features</p>
                <button class="btn btn-brand active">Create Account</button>
              </div>

              <div v-else>
                <p>Your product could be here</p>
                <product-wizard></product-wizard>
              </div>

            </div>              
          </div>
        </div>

            <div v-if="$store.state.catalog.Products.length" v-for="listing in $store.state.catalog.Products" class="product-main-wrapper">
              <transition name="fadeHeight">
                <listing
                  :listing="listing"
                  :currency="$store.state.catalog.Filter.currency"
                ></listing>
              </transition>
            </div>

            <div v-else class="alert" role="alert">
                <strong>Nothing</strong> to see here.
            </div>

          <div class="row">
            <div class="col-xs-6 text-center">
              <a class="btn btn-brand" v-on:click="$store.commit('prevPage')" :disabled="!$store.state.catalog.hasPrevPage">← <span class="hidden-xs">Prev Page</span></a>
            </div>
            <div class="col-xs-6 text-center">
              <a class="btn btn-brand" v-on:click="$store.commit('nextPage')" :disabled="!$store.state.catalog.hasNextPage"><span class="hidden-xs">Next Page</span> →</a>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { catalog } from '../../store/modules/catalog'

loadModule('catalog', catalog)

$('body').tooltip({
  selector: '.honor-label'
});

Vue.component('category-breadcrumbs', require('./CategoryBreadcrumbs.vue').default);
Vue.component('game-select', require('./GameSelect.vue').default);
Vue.component('category-picker', require('./Filter/CategoryPicker.vue').default);
Vue.component('server-select', require('./Filter/ServerSelect.vue').default);
Vue.component('catalog-filter', require('./Filter.vue').default);
Vue.component('listing', require('./Listing.vue').default);
Vue.component('demand', require('./Demand.vue').default);
Vue.component('product-wizard', require('./ProductWizard.vue').default);



export default {
      name: 'Catalog',
      props: {
        state: Object,
        type: String
      },
      mounted(){
        this.localGame = this.$store.state.catalog.Game
        this.$store.commit('SET_TYPE', this.type)
        if(this.state){
          this.$store.commit('INIT_CATALOG', this.state)
        }
      },
      watch: {
        Filter:{
          handler(){
            this.$store.dispatch('run')
          },
          deep:true
        },
        Page(){
          this.$store.dispatch('run')
        },
        localCategory(){
          this.$store.commit('SET_CATEGORY', this.localCategory)
        }
      },
      computed:{
        Filter(){
          return this.$store.state.catalog.Filter
        },
        Page(){
          return this.$store.state.catalog.page
        },
        query(){
          return this.$store.getters.query
        },
        Game(){
          return this.$store.state.catalog.Game
        },
        Products(){
          return this.$store.state.catalog.Products
        },
        category: {
          get(){
            return this.$store.state.catalog.Filter.category
          },
          set(category){
            this.$store.commit('SET_CATEGORY', category)
          }
        }
      },
      data(){
        return {
          localGame: this.$store.state.catalog.Game
        }
      }
    }

</script>