frontend/src/views/Marketplace.vue

<template>
  <main class="section">
    <div class="column">
      <nav class="panel">
        <p class="panel-heading">
          {{ $t('marketplace.filter') }} ({{category}})
        </p>
        <div class="panel-block">
          <p class="control has-icons-left">
            <b-input v-model="search" type="text" :placeholder="$t('marketplace.search')"></b-input>
            <span class="icon is-left">
              <i class="fas fa-search" aria-hidden="true"></i>
            </span>
          </p>
        </div>
        <div class="tabs">
          <ul>
            <router-link tag="li" :to="'/marketplace/hats'" exact><a>{{ $t('marketplace.hats') }}</a></router-link>
            <router-link tag="li" :to="'/marketplace/faces'" exact><a>{{ $t('marketplace.faces') }}</a></router-link>
            <router-link tag="li" :to="'/marketplace/shirts'" exact><a>{{ $t('marketplace.shirts') }}</a></router-link>
            <router-link tag="li" :to="'/marketplace/pants'" exact><a>{{ $t('marketplace.pants') }}</a></router-link>
            <router-link tag="li" :to="'/marketplace/collections'" exact><a>{{ $t('marketplace.collections') }}</a></router-link>
          </ul>
        </div>
        <a class="panel-block">
          Recent
        </a>
        <a class="panel-block">
          Most popular
        </a>
      </nav>
      <br>
    </div>
    <div class="columns is-multiline" v-if="!loading">
      <div v-if="!items.length" class="column">
        <NoItems type="marketplace items">
        </NoItems>
      </div>
      <Pagination
          class='columns is-multiline'
          v-if='items.length'
          :loading='loading'
          :paginate="paginate"
          :wait="wait"
          @loadNext='getItems(false)'
      >
      <div class="column is-3 has-text-centered" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
        <div class="box">
          <router-link :to="'/m/' + item.id" class="subtitle has-text-centered">{{item.name}}</router-link>
          <img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'" width="40%">
        </div>
      </div>
      </Pagination>
    </div>
    <div class="columns is-multiline" v-if="loading">
      <div class="column is-4">
        <div class="box">
          <h1 class="title">
            <b-skeleton></b-skeleton>
          </h1>
          <b-skeleton height="100px"></b-skeleton>
        </div>
      </div>
      <div class="column is-4">
        <div class="box">
          <h1 class="title">
            <b-skeleton></b-skeleton>
          </h1>
          <b-skeleton height="100px"></b-skeleton>
        </div>
      </div>      <div class="column is-4">
      <div class="box">
        <h1 class="title">
          <b-skeleton></b-skeleton>
        </h1>
        <b-skeleton height="100px"></b-skeleton>
      </div>
    </div>
      <div class="column is-4">
        <div class="box">
          <h1 class="title">
            <b-skeleton></b-skeleton>
          </h1>
          <b-skeleton height="100px"></b-skeleton>
        </div>
      </div>
      <div class="column is-4">
        <div class="box">
          <h1 class="title">
            <b-skeleton></b-skeleton>
          </h1>
          <b-skeleton height="100px"></b-skeleton>
        </div>
      </div>      <div class="column is-4">
      <div class="box">
        <h1 class="title">
          <b-skeleton></b-skeleton>
        </h1>
        <b-skeleton height="100px"></b-skeleton>
      </div>
    </div>      <div class="column is-4">
      <div class="box">
        <h1 class="title">
          <b-skeleton></b-skeleton>
        </h1>
        <b-skeleton height="100px"></b-skeleton>
      </div>
    </div>      <div class="column is-4">
      <div class="box">
        <h1 class="title">
          <b-skeleton></b-skeleton>
        </h1>
        <b-skeleton height="100px"></b-skeleton>
      </div>
    </div>
      <div class="column is-4">
        <div class="box">
          <h1 class="title">
            <b-skeleton></b-skeleton>
          </h1>
          <b-skeleton height="100px"></b-skeleton>
        </div>
      </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </main>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import NoItems from "../components/NoItems"
import Pagination from "../components/Pagination"
export default {
  name: 'Marketplace',
  components: {
    NoItems,
    Pagination
  },
  data() {
    return {
      items: [],
      last: [],
      search: '',
      limit: 30,
      loading: true,
      paginate: true,
      offset: 0,
      nextURL: null,
      category: this.$route.params.category,
      wait: true
    }
  },
  methods: {
    doSearch() {
      this.items = []
      this.loading = true
      this.offset = 0
      this.paginate = true
      this.axios
          .get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'marketplace/' + this.category + '?search=' + this.search + '&offset=' + this.offset)
          .then(res => {
            this.items = res.data.Items
            this.loading = false
          })
          .catch((e) => {
            this.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
    },
    getItems (initial) {
      this.loading = true
      if(!initial) {
        this.wait = true
      }
      this.axios
          .get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'marketplace/' + this.category + '?offset=' + this.offset)
          .then(res => {
            if(res.data.length < this.limit) {
              this.offset = null;
            } else {
              this.offset+= this.limit;
            }
            if(!initial && !res.data.Items.length) {
              this.paginate = false
            }
            if(initial) {
              this.items = res.data.Items
            } else {
              this.items.push(...res.data.Items)
              this.last = []
              this.last = res.data.Items
            }
            this.loading = false
            this.wait = false
          })
          .catch((e) => {
            this.loading = false
            this.wait = false
            AjaxErrorHandler(this.$store)(e)
          })
    },
  },
  watch: {
    search () {
      this.doSearch()
    },
    $route () {
      this.items = []
      this.offset = 0
      this.paginate = true
      this.category = this.$route.params.category
      this.getItems(true)
    }
  },
  mounted() {
    this.getItems(true)
  }
}
</script>