frontend/src/views/Friends.vue

<template>
  <main>
    <div class="section">
      <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
      <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/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
          <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</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'"><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 class="section" v-if="!friends.length && !loading">
        <NoItems type="friends"></NoItems>
      </div>
      <div class="section columns" v-if="loading">
        <div class="column">
          <div class="box">
            <b-skeleton></b-skeleton>
          </div>
        </div>
        <div class="column">
          <div class="box">
            <b-skeleton></b-skeleton>
          </div>
        </div>
        <div class="column">
          <div class="box">
            <b-skeleton></b-skeleton>
          </div>
        </div>
      </div>
    </div>
  </main>
</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_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + '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_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + '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_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + '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() {
    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>