members list

src/components/ProfilePictureTemplate.vue

@@ -54,7 +54,7 @@ export default {
 
 <style scoped>
 .outer-profile-picture{
-  z-index: 9999;
+  z-index: 999;
   user-select: none;
 }
 .profile-picture {

src/components/app/MemberTemplate.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="member" @click="openUserInformation()">
+    <Profile-picture 
+      class="avatar"
+      :url="userAvatar"
+      size="35px"
+    />
+    <div class="information">
+      <div class="username">{{user.username}}</div>
+    </div>
+    <div v-if="type === 'OWNER'" class="type-box">Owner</div>
+  </div>
+</template>
+
+
+<script>
+import ProfilePicture from '@/components/ProfilePictureTemplate';
+import config from '@/config';
+export default {
+  components: { ProfilePicture },
+  props: ['user', 'avatar', 'type'],
+  methods: {
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
+    },
+  },
+  computed: {
+    userAvatar() {
+      return config.domain + "/avatars/" + this.avatar  
+    } 
+  }
+  
+}
+</script>
+
+
+<style scoped>
+.member {
+  display: flex;
+  padding: 3px;
+  margin: 10px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  align-items: center;
+  align-content: center;
+  border-radius: 10px;
+  transition: 0.3s;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+}
+.member:hover {
+  background: rgba(0, 0, 0, 0.301);
+}
+.information {
+  margin-left: 5px;
+  overflow: hidden;
+  flex: 1;
+}
+.username { 
+  white-space: nowrap; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.type-box{
+  padding: 3px;
+  border-radius: 5px;
+  height: 100%;
+  background: rgb(255, 71, 71);
+}
+
+.avatar {
+ 
+}
+
+</style>

src/components/app/MembersList.vue

@@ -1,12 +1,41 @@
 <template>
   <div class="members-list">
     <div class="header">
-      <div class="title">Members</div>
+      <div class="title">Members ({{members.length}})</div>
+
     </div>
-      <div style="text-align: center">Soon!</div>
+      <div class="members">
+        <member-template v-for="(member, index) in members" :key="index" :type="member.type" :avatar="member.member.avatar" :user="member.member" />
+      </div>
   </div>
 </template>
 
+<script>
+import MemberTemplate from '@/components/app/MemberTemplate';
+export default {
+  components: { MemberTemplate },
+  computed: {
+    members() {
+      const serverMembers = this.$store.getters['servers/serverMembers']
+      const selectedServerID = this.$store.getters['servers/selectedServerID'];
+
+      return serverMembers.filter(sm => sm.server_id === selectedServerID).sort((a, b) => {
+        var nameA = a.member.username.toUpperCase();
+        var nameB = b.member.username.toUpperCase();
+        if (nameA < nameB) {
+          return -1;
+        }
+        if (nameA > nameB) {
+          return 1;
+        }
+        return 0;
+      })
+
+    }
+  }
+}
+</script>
+
 
 <style scoped>
 
@@ -23,11 +52,16 @@
 	width: 100%;
 	background: rgba(0, 0, 0, 0.438);
 	display: flex;
+  flex-shrink: 0;
 }
 .header .title {
   user-select: none;
 	font-size: 19px;
 	margin: auto;
 }
+.members{
+  padding-top: 10px;
+  overflow: auto;
+}
 </style>
 

src/components/app/MessagePanel/Heading.vue

@@ -10,7 +10,7 @@
     <div class="information">
       <div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
     </div>
-    <div v-if="type === 2" class="show-members-button" @click="toggleMembersPanel">
+    <div v-if="type === 2 && selectedServerID" class="show-members-button" @click="toggleMembersPanel">
       <i class="material-icons">view_list</i>
     </div>
   </div>
@@ -36,6 +36,11 @@ export default {
     toggleMembersPanel() {
       bus.$emit("toggleMembersPanel");
     }
+  },
+  computed: {
+    selectedServerID() {
+      return this.$store.getters['servers/selectedServerID'];
+    }
   }
 };
 </script>

src/components/app/ServerList.vue

@@ -31,10 +31,14 @@ export default {
     },
     toggleChannel(serverID, event) {
       if (!event.target.closest('.small-view') || event.target.closest('.options-context-button') || event.target.closest('.options-context-menu')) return;
-      if (this.openedServer === serverID) 
+      if (this.openedServer === serverID) {
         this.openedServer = null;
-      else
+        this.$store.dispatch('servers/setSelectedServerID', null)
+      }
+      else{
         this.openedServer = serverID;
+        this.$store.dispatch('servers/setSelectedServerID', serverID)
+      }
     }
   },
   computed: {

src/store/modules/serversModule.js

@@ -3,8 +3,10 @@ import { router } from "./../../router";
 import Vue from "vue";
 
 const state = {
+  selectedServerID: null,
 	servers: {},
-  channelsIDs: {}
+  channelsIDs: {},
+  serverMembers: [],
 };
 
 const getters = {
@@ -13,6 +15,12 @@ const getters = {
   },
   channelsIDs(state) {
     return state.channelsIDs;
+  },
+  serverMembers(state) {
+    return state.serverMembers;
+  },
+  selectedServerID(state) {
+    return state.selectedServerID
   }
 };
 
@@ -29,13 +37,24 @@ const actions = {
   removeServer(context, serverID) {
     context.commit('REMOVE_SERVER', serverID);
   },
+  addServerMembers(context, serverMembersArr) {
+    context.commit('ADD_SERVER_MEMBERS', serverMembersArr)
+  },
+  removeServerMember (context, {uniqueID, server_id}) {
+    context.commit('REMOVE_SERVER_MEMBER', {uniqueID, server_id})
+  },
+  setSelectedServerID(context, serverID) {
+    context.commit('SET_SELECTED_SERVER_ID', serverID)
+  },
+  addServerMember(context, serverMember) {
+    context.commit('ADD_SERVER_MEMBER', serverMember)
+  }
 };
 
 const mutations = {
   SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
     const previousChannels = state.channelsIDs[serverID] || []
     Vue.set(state.channelsIDs, serverID, [...new Set([...previousChannels, ...channelsIDs])]);
-
   },
   SET_SERVERS(state, servers) {
     state.servers = servers;
@@ -46,6 +65,25 @@ const mutations = {
   REMOVE_SERVER(state, serverID) {
     Vue.delete(state.servers, serverID);
   },
+  ADD_SERVER_MEMBERS(state, serverMembersArr) {
+
+    for (let members of serverMembersArr) {
+      if (!state.serverMembers.find(sm => sm.member.uniqueID === members.member.uniqueID && sm.server_id === members.server_id)){
+        state.serverMembers.push(members)
+      }
+    }
+  },
+  ADD_SERVER_MEMBER(state, serverMember) {
+    const exists = state.serverMembers.find(sm => sm.member.uniqueID === serverMember.member.uniqueID && sm.server_id === serverMember.server_id)
+    if (exists) return;
+    state.serverMembers.push(serverMember);
+  },
+  REMOVE_SERVER_MEMBER(state, {uniqueID, server_id}) {
+    state.serverMembers = state.serverMembers.filter(m => m.member.uniqueID !== uniqueID && m.server_id === server_id);
+  },
+  SET_SELECTED_SERVER_ID(state, serverID){
+    state.selectedServerID = serverID;
+  }
 };
 
 export default {

src/store/modules/socketIOModule.js

@@ -17,7 +17,7 @@ const actions = {
   },
   socket_success(context, data) {
 
-    const {message, user, dms, notifications, currentFriendStatus, settings} = data;
+    const {message, user, serverMembers, dms, notifications, currentFriendStatus, settings} = data;
     const friendsArray = user.friends;
     const friendObject = {};
 
@@ -64,6 +64,12 @@ const actions = {
 
     context.commit('user', data.user)
 
+    
+    
+    //server members
+    context.dispatch( 'servers/addServerMembers', serverMembers )
+
+
     // convert dms array to object
     const channelsObject = {}
     if (dms && dms.length >=1) {
@@ -169,6 +175,18 @@ const actions = {
   ['socket_server:leave'](context, {server_id}) {
     context.dispatch('servers/removeServer', server_id)
   },
+  ['socket_server:memberAdd'](context, {serverMember}) { // member_add
+    context.dispatch('servers/addServerMember', serverMember)
+    console.log("someone joined")
+  },
+  ['socket_server:memberRemove'](context, {uniqueID, server_id}) { // member_remove
+    context.dispatch('servers/removeServerMember', {uniqueID, server_id})
+    console.log("Someone left")
+  },
+  ['socket_server:members'](context, {serverMembers}) { // members
+    context.dispatch('servers/addServerMembers', serverMembers)
+    console.log("server members ")
+  },
 }
 
 export default {

src/utils/changelog.js

@@ -13,6 +13,21 @@
   }
 
 const config = [
+  {
+    version: 4.6,
+    title: "Server Members list and bug fixes",
+    shortTitle: "Server Members list and bug fixes",
+    date: "20/06/2019",
+    headColor: "rgba(0, 102, 170, 0.77)",
+    new: [
+      "Server members are now shown!",
+      "Adjusted some padding with the tabs."
+    ],
+    fix: [
+      "Fixed a vulnerability where after leaving a server, you could still send messages.",
+    ],
+    next: ["Online status for server members list."]
+  },
   {
     version: 4.5,
     title: "Server bug fixes",

src/views/App.vue

@@ -227,8 +227,7 @@ export default {
   display: flex;
   overflow-y: hidden;
   overflow-x: auto;
-  height: 35px;
-  max-width: 479px;
+  max-width: 495px;
   flex-basis: auto; /* default value */
   flex-grow: 1;
   -webkit-app-region: no-drag;
@@ -246,13 +245,14 @@ export default {
   margin-bottom: 0;
   background: rgba(0, 0, 0, 0.63);
   color: white;
-  padding: 5px;
+  padding: 7px;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
   cursor: default;
   user-select: none;
   transition: 0.3s;
   -webkit-app-region: no-drag;
+  margin-top: 5px;
 }
 .tab.selected {
   background: rgba(71, 71, 71, 0.637);
@@ -291,11 +291,6 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-@media (max-width: 470px) {
-  .tabs {
-    height: 40px;
-  }
-}
 </style>