UserFriendList

frontend/src/components/routes/User.vue

@@ -94,6 +94,9 @@
       <b-button class="menu_button" :key='"user-menu-item-threads"' @click='$router.push(`/u/${username}/inventory`)'>
         Inventory
       </b-button>
+      <b-button class="menu_button" :key='"user-menu-item-threads"' @click='$router.push(`/u/${username}/friends`)'>
+        Friends
+      </b-button>
       <br/> <br/>
       <div class="column box">
       <router-view :username='username'></router-view>

frontend/src/components/routes/UserFriends.vue

@@ -0,0 +1,156 @@
+<style>
+.vertical-alt {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.limit{
+  margin-top: 0.5rem;
+  word-break: break-all;
+}
+</style>
+<template>
+  <main>
+    <div class="section">
+      <div class="">
+        <h1>Friends:</h1>
+        <scroll-load
+          key='user-row'
+          class='columns is-multiline'
+          v-if='users.length'
+          :loading='loading'
+          @loadNext='fetchData'
+        >
+          <div class="column is-4" v-for='user in users' :key='"user-row" + user.id' v-show="user && !user.hidden"><div class="card">
+            <div class="card-content">
+              <br>
+              <div class="media">
+                <div class="media-content">
+                  <p class="title is-4"><router-link :to="'/u/' + user.friend2.username">{{user.friend2.username}}</router-link></p>
+                </div>
+              </div>
+
+              <div class="content limit">
+                {{user.friend2.description | truncate(70)}}
+              </div>
+            </div>
+          </div>
+          </div>
+        </scroll-load>
+      </div>
+      <p name='fade' mode='out-in'>
+      <center><loading-message key='loading' v-if='loading'></loading-message></center>
+      <center><div class='overlay_message' v-if='!loading && !users.length'>
+        This user doesn't have any purchased Marketplace Items yet.
+      </div></center></p>
+    </div>
+  </main>
+</template>
+<script>
+import LoadingMessage from '../LoadingMessage';
+import ScrollLoad from '../ScrollLoad';
+import throttle from 'lodash.throttle';
+import AjaxErrorHandler from '../../assets/js/errorHandler';
+
+export default {
+  name: 'Inventory',
+  components: {
+    LoadingMessage,
+    ScrollLoad
+  },
+  data () {
+    return {
+      search: '',
+      users: [],
+
+      loading: true,
+      offset: 0,
+      limit: 15,
+
+      roleOptions: [
+        { name: 'Admins', value: 'admin' },
+        { name: 'Users', value: 'user' }
+      ],
+      roleSelected: ['admin', 'user'],
+
+      tableSort: {
+        column: 'username',
+        sort: 'desc'
+      }
+    }
+  },
+  methods: {
+    fetchData () {
+      if(this.offset === null) return;
+
+      let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/get/' + this.$route.params.username + `?
+					sort=${this.tableSort.column}
+					&order=${this.tableSort.sort}
+					&offset=${this.offset}
+					&inventory=true
+				`;
+      if(this.roleSelected.length === 1) {
+        url += '&role=' + this.roleSelected[0];
+      }
+      if(this.search.length) {
+        url += '&search=' + encodeURIComponent(this.search.trim());
+      }
+
+      this.loading = true;
+      this.axios
+        .get(url)
+        .then(res => {
+          this.users.push(...res.data.Inventories);
+          this.loading = /*loading =*/ false;
+
+          //If returned data is less than the limit
+          //then there must be no more pages to paginate
+          if(res.data.length < this.limit) {
+            this.offset = null;
+          } else {
+            this.offset+= this.limit;
+          }
+        })
+        .catch(e => {
+          AjaxErrorHandler(this.$store)(e);
+          this.loading = /*loading =*/ false;
+        });
+    },
+    resetFetchData () {
+      this.offset = 0;
+      this.users = [];
+
+      this.fetchData();
+    }
+  },
+  getNewerUsers () {
+    this.loadingNewer = true
+
+    this.axios
+      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + this.$route.params.username + '?limit=' + this.newUsers + '&inventory=true')
+      .then(res => {
+        this.loadingNewer = false
+        this.newUsers = 0
+
+        this.threads.unshift(res.data)
+      })
+      .catch((e) => {
+        this.loadingNewer = false
+        AjaxErrorHandler(this.$store)(e)
+      })
+  },
+  mounted () {
+    this.fetchData();
+  },
+  watch: {
+    tableSort: 'resetFetchData',
+    roleSelected: 'resetFetchData',
+    search: throttle(function () {
+      this.resetFetchData();
+    }, 200)
+  }
+}
+</script>

frontend/src/main.js

@@ -88,6 +88,7 @@ const UserThreads = () => import('./components/routes/UserThreads')
 const UserMarketplace = () => import('./components/routes/UserMarketplace')
 const UserWall = () => import('./components/routes/UserWall')
 const UserInventory = () => import('./components/routes/UserInventory')
+const UserFriends = () => import('./components/routes/UserFriends')
 const UsersList = () => import('./components/routes/UsersList')
 const Notifications = () => import('./components/routes/Notifications')
 const Banned = () => import('./components/routes/Banned')
@@ -270,7 +271,8 @@ const router = new VueRouter({
         { path: 'threads', component: UserThreads },
         { path: 'items', component: UserMarketplace },
         { path: 'wall', component: UserWall },
-        { path: 'inventory', component: UserInventory }
+        { path: 'inventory', component: UserInventory },
+        { path: 'friends', component: UserFriends }
       ] },
     { path: '/settings', redirect: '/settings/general', component: Settings, children: [
         { path: 'general', component: SettingsGeneral },

routes/relationship.js

@@ -145,4 +145,62 @@ router.get('/:username', auth, async(req, res, next) => {
         }
     } catch (err) { next(err) }
 })
+
+router.get('/get/:username', auth, async(req, res, next) => {
+    try {
+        let queryObj = {
+            where: {username: req.params.username}
+        }
+        let user = await User.findOne(queryObj)
+        if (!user) {
+            res.status(200)
+            res.json({success: false})
+        }
+        if(!user) {
+            throw Errors.accountDoesNotExist
+        }
+        let checkIfSent = await Relationship.findAll({
+            where: {friend1Id: user.id},
+            include: [{ model: User, as: 'friend2', attributes: ['username', 'createdAt', 'id', 'color', 'picture', 'locked', 'admin', 'booster', 'executive', 'bot'] } ]
+        })
+        if (checkIfSent) {
+            res.status(200)
+            res.json(checkIfSent)
+        } else {
+            res.status(200)
+            res.json({type: 'notFriends'})
+        }
+    } catch (err) { next(err) }
+})
+
+router.get('/:username', auth, async(req, res, next) => {
+    try {
+        let queryObj = {
+            where: {username: req.userData.username}
+        }
+        let user = await User.findOne(queryObj)
+        if (!user) {
+            res.status(200)
+            res.json({success: false})
+        }
+        let queryObj2 = {
+            where: {username: req.params.username}
+        }
+        let user2 = await User.findOne(queryObj2)
+        if(!user2) {
+            throw Errors.accountDoesNotExist
+        }
+        let checkIfSent = await Relationship.findOne({
+            where: {friend1Id: user.id, friend2Id: user2.id},
+            include: [{ model: User, as: 'friend1', attributes: ['username', 'createdAt', 'id', 'color', 'picture', 'locked', 'admin', 'booster', 'executive', 'bot'] }, { model: User, as: 'friend2', attributes: ['username', 'createdAt', 'id', 'color', 'picture', 'locked', 'admin', 'booster', 'executive', 'bot'] } ]
+        })
+        if (checkIfSent) {
+            res.status(200)
+            res.json(checkIfSent.toJSON())
+        } else {
+            res.status(200)
+            res.json({type: 'notFriends'})
+        }
+    } catch (err) { next(err) }
+})
 module.exports = router