frontend/src/views/Teams.vue

<template>
  <div id="teams">
    <section class="section">
      <div class="container">
        <div class="columns is-centered is-multiline" v-if="!loading">
          <div v-if="!teams.length" class="column">
            <br />
            <NoItems :connection="true" type="users"> </NoItems>
          </div>
          <Pagination
              class="columns is-multiline"
              v-if="teams.length"
              :loading="loading"
              :paginate="paginate"
              :wait="wait"
              @loadNext="getTeams(false)"
          >
            <div
                class="column is-3"
                v-for="user in teams"
                :key="'user-' + user.id"
            >
              <div class="box">
                <h1 class="title">
                  {{ user.username }}&nbsp;<Badges
                    :verified="user.verified"
                ></Badges>
                </h1>
                <img
                    :src="
                    'https://cdn.kaverti.com/user/avatars/full/' +
                    user.picture +
                    '.png'
                  "
                /><br />
                <b-button
                    tag="router-link"
                    :to="'/u/' + user.username"
                    class="is-centered is-info"
                >View Team</b-button
                >
              </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>
      </div>
    </section>
  </div>
</template>

<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import Badges from "../components/Badges"
import NoItems from "../components/NoItems"
import Pagination from "../components/Pagination"
export default {
  name: 'Users',
  components: {
    Badges,
    NoItems,
    Pagination
  },
  data() {
    return {
      teams: [],
      offset: 0,
      paginate: true,
      limit: 30,
      loading: true,
      wait: true
    }
  },
  methods: {
    getTeams(initial) {
      if(initial) {
        this.teams = []
        this.loading = true
        this.offset = 0
        this.paginate = true
      }
      if(!initial) {
        this.wait = true
      }
      this.axios
          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/' + '?offset=' + this.offset)
          .then(res => {
            if(res.data < this.limit) {
              this.offset = null;
            } else {
              this.offset+= this.limit;
            }
            if(!initial && !res.data.length) {
              this.paginate = false
            }
            if(initial) {
              this.teams = res.data
            } else {
              this.teams.push(...res.data)
            }
            this.loading = false
            this.wait = false
          })
          .catch((e) => {
            this.loading = false
            this.wait = false
            AjaxErrorHandler(this.$store)(e)
          })
    }
  },
  mounted() {
    this.loading = true
    this.getTeams()
  }
}
</script>