frontend/src/views/Users.vue

<template>
  <div id="users">
    <section class="section">
      <div class="container">
        <div class="columns is-centered is-multiline" v-if="!loading">
          <div class="column is-6" v-if="!users.length">
            <div class="box">
              <NoItems :connection="true" type="users"> </NoItems>
            </div>
          </div>
          <Pagination
            class="columns is-multiline"
            v-if="users.length"
            :loading="loading"
            :paginate="paginate"
            :wait="wait"
            @loadNext="getUsers(false)"
          >
            <div
              class="column is-3"
              v-for="user in users"
              :key="'user-' + user.id"
            >
              <div class="box">
                <h1 class="title">
                  {{ user.username }}&nbsp;<Badges
                    :username="user.username"
                    :system="user.system"
                    :hidden="user.hidden"
                    :admin="user.admin"
                    :booster="user.booster"
                    :bot="user.bot"
                    :user="true"
                  ></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 Profile</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 {
      users: [],
      offset: 0,
      paginate: true,
      limit: 30,
      loading: true,
      wait: true,
    };
  },
  methods: {
    getUsers(initial) {
      if (initial) {
        this.users = [];
        this.loading = true;
        this.offset = 0;
        this.paginate = true;
      }
      if (!initial) {
        this.wait = true;
      }
      this.axios
        .get(
          process.env.VUE_APP_API_ENDPOINT +
            process.env.VUE_APP_API_VERSION +
            "/" +
            "user/" +
            "?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.users = res.data;
          } else {
            this.users.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.getUsers();
  },
};
</script>