frontend/src/views/Friends.vue

<template>
  <div id="friends">
    <section class="section">
      <div class="columns is-centered">
        <div class="column is-7 has-text-centered">
          <div class="title">{{ name }} ({{ count }})</div>
          <div class="tabs is-centered">
            <ul>
              <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a>
              </router-link>
              <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
              <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
            </ul>
          </div>
          <div class="columns is-multiline" v-if="friends.length && !loading">
            <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
              <h1 class="title has-text-centered">{{ friend.friend2.username }}</h1>
              <div class="box">
                <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'" alt="Avatar"><br>
                <div class="buttons">
                  <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
                            v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request
                  </b-button>
                  <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
                            v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend
                    Request
                  </b-button>
                  <b-button @click="doRelationshipAccept(friend)"
                            class="is-success has-text-centered is-centered is-center"
                            v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend
                    Request
                  </b-button>
                  <b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center"
                            v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend
                  </b-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import NoItems from "../components/NoItems"

export default {
  name: 'Friends',
  components: {
    NoItems
  },
  data() {
    return {
      friends: [],
      name: 'Requests to you',
      loading: true,
      count: 0,
      category: this.$route.params.category
    }
  },
  watch: {
    $route() {
      this.loading = true;
      this.friends = [];
      this.offset = 0;
      this.category = this.$route.params.category;
      if (this.category === 'pendingCanAccept') {
        this.name = "Requests to you";
      } else if (this.category === 'pending') {
        this.name = "Requests from you";
      } else if (this.category === 'accepted') {
        this.name = "Accepted Requests";
      } else {
        this.name = "Unknown";
      }
      this.getItems();
    }
  },
  methods: {
    removeFriend(user) {
      this.axios
          .put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'relationships/remove', {
            friend: user.friend2.username
          })
          .then(() => {
            this.getItems();
          })
          .catch(e => {
            this.getItems();

            AjaxErrorHandler(this.$store)(e);
          });
    },
    doRelationshipAccept(user) {
      this.axios
          .put(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'relationships/accept', {
            friend: user.friend2.username
          })
          .then(() => {
            this.getItems();
          })
          .catch(e => {
            this.getItems();

            AjaxErrorHandler(this.$store)(e);
          });
    },
    getItems() {
      this.loading = true;
      this.axios
          .get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'relationships/getAll/' + this.category)
          .then(res => {
            this.friends = res.data.rows;
            this.count = res.data.count;
            this.loading = false;
          })
          .catch((e) => {
            this.loading = false;

            AjaxErrorHandler(this.$store)(e);
          })
    },
  },
  mounted() {
    if (this.$store.state.user.username) {
      this.loading = true;
      this.friends = [];
      this.offset = 0;
      this.category = this.$route.params.category;
      if (this.category === 'pendingCanAccept') {
        this.name = "Requests to you";
      } else if (this.category === 'pending') {
        this.name = "Requests from you";
      } else if (this.category === 'accepted') {
        this.name = "Accepted Requests";
      } else {
        this.name = "Unknown";
      }

      this.getItems();
    }
  }
}
</script>