progress on the roles and some bug fixes.

jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"] 
+        }
+    }
+}

package.json

@@ -52,7 +52,8 @@
       "@vue/prettier"
     ],
     "rules": {
-      "no-console": 0
+      "no-console": 0,
+      "no-unreachable": 0
     },
     "parserOptions": {
       "parser": "babel-eslint"

src/components/app/MemberTemplate.vue

@@ -14,7 +14,9 @@
       :status="presense"
     />
     <div class="information">
-      <div class="username">{{ user.username }}</div>
+      <div class="username" :style="{ color: roleColor }">
+        {{ user.username }}
+      </div>
     </div>
     <div v-if="type === 'OWNER'" class="type-box">Owner</div>
   </div>
@@ -25,13 +27,16 @@ import ProfilePicture from "@/components/ProfilePictureTemplate";
 import config from "@/config";
 export default {
   components: { ProfilePicture },
-  props: ["user", "avatar", "type"],
+  props: ["user", "avatar", "type", "member"],
   data() {
     return {
       hover: false
     };
   },
   computed: {
+    serverID() {
+      return this.$store.getters["servers/selectedServerID"];
+    },
     userAvatar() {
       return config.domain + "/avatars/" + this.avatar;
     },
@@ -43,6 +48,17 @@ export default {
       const presences = this.$store.getters["members/presences"];
       const userPresense = presences[this.user.uniqueID];
       return userPresense || 0;
+    },
+    roleColor() {
+      if (!this.member || !this.member.roles) return undefined;
+      const roles = this.$store.getters["servers/roles"][this.serverID];
+      if (!roles) return undefined;
+
+      const filter = roles.filter(r => this.member.roles.includes(r.id));
+      if (!filter.length) {
+        return null;
+      }
+      return filter[0].color;
     }
   },
   methods: {
@@ -53,7 +69,7 @@ export default {
       const x = event.clientX;
       const y = event.clientY;
       this.$store.dispatch("setServerMemberContext", {
-        serverID: this.$store.getters["servers/selectedServerID"],
+        serverID: this.serverID,
         uniqueID: this.user.uniqueID,
         x,
         y

src/components/app/MembersList.vue

@@ -13,6 +13,7 @@
         :type="member.type"
         :avatar="member.member.avatar"
         :user="member.member"
+        :member="member"
       />
       <div class="tab" v-if="offlineMembers.length">
         Offline ({{ offlineMembers.length }})
@@ -24,6 +25,7 @@
         :type="member.type"
         :avatar="member.member.avatar"
         :user="member.member"
+        :member="member"
       />
     </div>
   </div>

src/components/app/MessageLogs.vue

@@ -35,6 +35,7 @@
       :type="msg.type"
       :timeEdited="msg.timeEdited"
       :color="msg.color"
+      :isServer="isServer"
     />
 
     <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
@@ -287,6 +288,9 @@ export default {
     }
   },
   computed: {
+    isServer() {
+      return this.$store.getters.currentTab === 2;
+    },
     uploadQueue() {
       const allUploads = this.$store.getters.getAllUploads;
       const selectedChannelID = this.$store.getters.selectedChannelID;

src/components/app/MessageTemplate.vue

@@ -25,7 +25,11 @@
       </div>
       <div class="content" @dblclick="contentDoubleClickEvent">
         <div class="user-info">
-          <div class="username" @click="openUserInformation">
+          <div
+            class="username"
+            :style="{ color: roleColor }"
+            @click="openUserInformation"
+          >
             {{ this.$props.username }}
           </div>
           <div class="date">{{ getDate }}</div>
@@ -152,7 +156,8 @@ export default {
     "messageID",
     "channelID",
     "timeEdited",
-    "color"
+    "color",
+    "isServer"
   ],
   components: {
     ProfilePicture,
@@ -306,6 +311,28 @@ export default {
         width: windowProperties.resizeWidth,
         height: windowProperties.resizeHeight
       };
+    },
+    roles() {
+      return this.$store.getters["servers/roles"][
+        this.$store.getters["servers/selectedServerID"]
+      ];
+    },
+    serverMember() {
+      const serverMembers = this.$store.getters["servers/serverMembers"];
+      return serverMembers.find(
+        m =>
+          m.uniqueID === this.uniqueID &&
+          m.server_id === this.$store.getters["servers/selectedServerID"]
+      );
+    },
+    roleColor() {
+      if (!this.isServer) return undefined;
+      if (!this.serverMember || !this.serverMember.roles) return undefined;
+      const filtered = this.roles.filter(r =>
+        this.serverMember.roles.includes(r.id)
+      );
+      if (!filtered.length) return undefined;
+      return filtered[0].color;
     }
   }
 };

src/components/app/Popouts/Popouts/ServerContextMenu.vue

@@ -7,6 +7,9 @@
     <div class="item warn" v-if="!checkServerCreator" @click="leaveServer">
       Leave Server
     </div>
+    <div class="item" @click="copyServerID">
+      Copy Server ID
+    </div>
   </div>
 </template>
 
@@ -50,6 +53,10 @@ export default {
     async leaveServer() {
       this.closeMenu();
       await ServerService.leaveServer(this.contextDetails.serverID);
+    },
+    copyServerID() {
+      this.closeMenu();
+      this.$clipboard(this.contextDetails.serverID);
     }
   },
   mounted() {

src/components/app/Popouts/Popouts/ServerMemberContext.vue

@@ -1,12 +1,36 @@
 <template>
-  <div class="drop-down-menu" v-click-outside="outsideClick">
+  <div
-    <div class="item" @click="viewProfile">View Profile</div>
+    class="drop-down-menu"
-    <div class="item" @click="copyUserTag">Copy User@Tag</div>
+    v-click-outside="outsideClick"
-    <div class="item" @click="copyID">Copy ID</div>
+    @mouseleave="editRoleHovered = false"
-    <div class="item warn" v-if="showKickBanOption" @click="kickMember">
+  >
-      Kick
+    <div class="roles-menu" ref="roles-menu" v-if="editRoleHovered">
+      <div
+        class="item roles"
+        v-for="role in serverRoles()"
+        :key="role.id"
+        :style="{ color: role.color }"
+        @click="role.hasRole ? removeRole(role.id) : addRole(role.id)"
+      >
+        <div class="has-role material-icons" v-if="role.hasRole">check</div>
+        {{ role.name }}
+      </div>
+    </div>
+    <div class="main-menu" ref="main-menu">
+      <div class="item" @click="viewProfile">View Profile</div>
+      <div class="item" @click="copyUserTag">Copy User@Tag</div>
+      <div class="item" @click="copyID">Copy ID</div>
+      <div class="item" @mouseenter="editRoleHoverEvent" v-if="isServerMember">
+        <div class="material-icons">keyboard_arrow_left</div>
+        Edit Roles
+      </div>
+      <div class="item warn" v-if="showKickBanOption" @click="kickMember">
+        Kick
+      </div>
+      <div class="item warn" v-if="showKickBanOption" @click="banMember">
+        Ban
+      </div>
     </div>
-    <div class="item warn" v-if="showKickBanOption" @click="banMember">Ban</div>
   </div>
 </template>
 
@@ -14,7 +38,9 @@
 import ServerService from "../../../../services/ServerService";
 export default {
   data() {
-    return {};
+    return {
+      editRoleHovered: false
+    };
   },
   methods: {
     closeMenu() {
@@ -58,12 +84,70 @@ export default {
       this.closeMenu();
       await ServerService.banMember(serverID, uniqueID);
     },
+    editRoleHoverEvent() {
+      this.editRoleHovered = true;
+      const mainMenu = this.$refs["main-menu"];
+      this.$nextTick(() => {
+        const rolesMenu = this.$refs["roles-menu"];
+
+        const mainMenuY = parseInt(mainMenu.style.top, 10);
+        const mainMenuX = parseInt(mainMenu.style.left, 10);
+
+        rolesMenu.style.top =
+          mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
+        rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 38 + "px";
+      });
+    },
     setPosition() {
       const y = this.contextDetails.y;
-      const x = this.contextDetails.x;
+      let x = this.contextDetails.x;
+      const mainMenu = this.$refs["main-menu"];
 
-      this.$el.style.top = y + "px";
+      // if context is out of screen
-      this.$el.style.left = x + "px";
+      if (x + mainMenu.clientWidth > window.innerWidth) {
+        x = window.innerWidth - mainMenu.clientWidth;
+      }
+
+      mainMenu.style.top = y + "px";
+      mainMenu.style.left = x + "px";
+    },
+    async addRole(roleID) {
+      this.$store.dispatch("servers/addMemberRole", {
+        role_id: roleID,
+        uniqueID: this.contextDetails.uniqueID,
+        server_id: this.contextDetails.serverID
+      });
+      await ServerService.applyRoleToMember(
+        this.contextDetails.serverID,
+        roleID,
+        this.contextDetails.uniqueID
+      );
+    },
+    async removeRole(roleID) {
+      this.$store.dispatch("servers/removeMemberRole", {
+        role_id: roleID,
+        uniqueID: this.contextDetails.uniqueID,
+        server_id: this.contextDetails.serverID
+      });
+      await ServerService.removeRoleFromMember(
+        this.contextDetails.serverID,
+        roleID,
+        this.contextDetails.uniqueID
+      );
+    },
+    serverRoles() {
+      const roles = this.$store.getters["servers/roles"][
+        this.contextDetails.serverID
+      ];
+
+      const map = roles.map(r => {
+        if (this.serverMember.roles && this.serverMember.roles.includes(r.id)) {
+          return Object.assign({}, r, { hasRole: true });
+        }
+        return r;
+      });
+
+      return map;
     }
   },
   mounted() {
@@ -89,7 +173,8 @@ export default {
         uniqueID
       };
     },
-    serverMember() {
+    // check if i am the server Owner.
+    isServerMember() {
       const serverMembers = this.$store.getters["servers/serverMembers"];
       return serverMembers.find(
         m =>
@@ -98,6 +183,14 @@ export default {
           m.type === "OWNER"
       );
     },
+    serverMember() {
+      const serverMembers = this.$store.getters["servers/serverMembers"];
+      return serverMembers.find(
+        m =>
+          m.uniqueID === this.contextDetails.uniqueID &&
+          m.server_id === this.contextDetails.serverID
+      );
+    },
     user() {
       return this.$store.getters.user;
     },
@@ -110,7 +203,7 @@ export default {
         return;
       // Only show kick and ban option if the user is server owner and not us
       if (this.user.uniqueID === this.contextDetails.uniqueID) return false;
-      return !!this.serverMember;
+      return !!this.isServerMember;
     }
   }
 };
@@ -118,24 +211,54 @@ export default {
 
 <style lang="scss" scoped>
 .drop-down-menu {
+}
+.main-menu {
   position: absolute;
-  top: 0;
-  left: 0;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
-  z-index: 99999;
   user-select: none;
   color: white;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+}
+
+.roles-menu {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  user-select: none;
+  color: white;
+  position: absolute;
+  z-index: 99999;
+  top: 300px;
+  left: 450px;
+  max-height: 150px;
+  width: 150px;
+  overflow: auto;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
 }
 
 .item {
-  padding: 10px;
+  display: flex;
-  border-radius: 5px;
+  align-items: center;
-  transition: 0.3s;
+  height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+  transition: 0.2s;
   font-size: 13px;
   cursor: pointer;
+  .material-icons {
+    margin-left: -10px;
+  }
+  .has-role {
+    margin-left: -5px;
+    margin-right: 5px;
+  }
   &:hover {
-    background: rgba(46, 46, 46, 0.651);
+    background: rgba(102, 102, 102, 0.4);
   }
   &.warn {
     color: rgb(255, 59, 59);

src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue

@@ -187,7 +187,7 @@ export default {
   position: relative;
 }
 .channels-list {
-  background: #00000050;
+  background: rgba(0, 0, 0, 0.12);
   height: 100%;
   width: 165px;
   flex-shrink: 0;

src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="content">
+    <errors-list-template :errors="errors" v-if="errors" />
+    <div class="content-inner">
+      <div class="roles-list">
+        <div
+          class="role add-role-button"
+          :class="{ warn: Object.keys(channels).length === 50 }"
+          @click="addRole()"
+        >
+          <div class="material-icons">add</div>
+          <div>Add Role</div>
+        </div>
+        <div
+          class="role"
+          v-for="(role, index) in roles"
+          :key="role.id"
+          :class="{ selected: index === selectedRoleIndex }"
+          @click="roleClick($event, index)"
+        >
+          <div class="name" :style="{ color: role.color }">{{ role.name }}</div>
+        </div>
+      </div>
+      <div class="details" v-if="roles && roles[selectedRoleIndex]">
+        <div class="input role-input">
+          <div class="input-title">Role Name</div>
+          <div
+            class="role-color"
+            :style="{
+              backgroundColor: update.color || roles[selectedRoleIndex].color
+            }"
+          >
+            <div class="color-picker" @click="$refs.colorPic.click()">
+              <input
+                type="color"
+                ref="colorPic"
+                style="display: none"
+                @change="colorChangeEvent"
+                value="#e7e7e7"
+              />
+              <div class="material-icons">color_lens</div>
+            </div>
+            <input
+              type="text"
+              ref="name"
+              placeholder="Role Name"
+              :default-value.prop="roles[selectedRoleIndex].name"
+              @input="inputEvent('name', $event)"
+            />
+          </div>
+        </div>
+        <!-- <div class="input">
+          <div class="input-title">Permissions</div>
+          <div class="check-box" @click="updatePermissions('send_message')">
+            <div class="box" :class="{ checked: sendMessagePermission }" />
+            <div class="name">Send Messages</div>
+          </div>
+        </div> -->
+
+        <div
+          class="button"
+          v-if="update.name || update.permissions || update.color"
+          @click="updateRole"
+        >
+          Save Changes
+        </div>
+        <div
+          class="button warn delete-server disabled"
+          v-if="!roles[selectedRoleIndex].deletable"
+        >
+          Cannot delete this role.
+        </div>
+        <div
+          class="button warn delete-server"
+          :class="{ disabled: deleteClicked }"
+          v-if="roles[selectedRoleIndex].deletable"
+          @click="deleteChannel"
+        >
+          {{ deleteButtonConfirmed ? "ARE YOU SURE?" : "Delete Role" }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ServerService from "@/services/ServerService";
+import ErrorsListTemplate from "@/components/app/errorsListTemplate";
+export default {
+  components: { ErrorsListTemplate },
+  data() {
+    return {
+      deleteButtonConfirmed: false,
+      deleteClicked: false,
+      selectedRoleIndex: 0,
+      errors: null,
+      update: {
+        name: null
+      }
+    };
+  },
+  methods: {
+    async addRole() {
+      await ServerService.createRole(this.server.server_id, {});
+    },
+    async updateRole() {
+      this.errors = null;
+      let data = {
+        name: this.update.name || this.roles[this.selectedRoleIndex].name
+      };
+
+      data = Object.assign({}, this.update, data);
+
+      // if (this.update.permissions) {
+      //   data.permissions = this.update.permissions;
+      // }
+      const { ok, error } = await ServerService.updateRole(
+        this.server.server_id,
+        this.roles[this.selectedRoleIndex].id,
+        data
+      );
+      if (ok) {
+        this.update = { name: null };
+      } else {
+        if (error.response) {
+          if (error.response.data.message)
+            this.errors = [{ msg: error.response.data.message }];
+          else this.errors = error.response.data.errors;
+        } else {
+          this.errors = [{ msg: "Something went wrong." }];
+        }
+      }
+    },
+    async deleteChannel() {
+      if (this.deleteClicked) return;
+      if (!this.deleteButtonConfirmed) {
+        return (this.deleteButtonConfirmed = true);
+      }
+      this.deleteClicked = true;
+      await ServerService.deleteRole(
+        this.server.server_id,
+        this.roles[this.selectedRoleIndex].id
+      );
+      this.deleteButtonConfirmed = false;
+      this.selectedRoleIndex = null;
+      this.deleteClicked = false;
+    },
+    inputEvent(name, event) {
+      this.update.name = event.target.value;
+    },
+    roleClick(event, index) {
+      this.selectedRoleIndex = index;
+      this.$nextTick(() => {
+        this.$refs["name"].value = this.roles[this.selectedRoleIndex].name;
+        this.update = { name: null };
+        this.deleteButtonConfirmed = false;
+      });
+    },
+    updatePermissions(permissionName) {
+      const permissions = this.update.permissions || {};
+      permissions[permissionName] = !this.sendMessagePermission;
+      this.$set(this.update, "permissions", permissions);
+    },
+    colorChangeEvent(e) {
+      const hexColor = e.target.value;
+      e.target.value = "";
+      this.$set(this.update, "color", hexColor);
+    }
+  },
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
+      return this.$store.getters["servers/servers"][serverID];
+    },
+    roles() {
+      return this.$store.getters["servers/roles"][this.server.server_id];
+    },
+    channels() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
+      const channels = this.$store.getters.channels;
+      const channelIDs = this.$store.getters["servers/channelsIDs"][serverID];
+      return channelIDs.map(c => {
+        return channels[c];
+      });
+    },
+    sendMessagePermission() {
+      const channel = this.channels[this.selectedRoleIndex];
+      const permissions = this.update.permissions || undefined;
+      if (permissions) {
+        return !!permissions.send_message;
+      }
+      if (!channel.permissions) {
+        return true;
+      }
+      return !!channel.permissions.send_message;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.server-avatar {
+  background: grey;
+  height: 90px;
+  width: 90px;
+  border-radius: 50%;
+}
+.content-inner {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+.roles-list {
+  background: rgba(0, 0, 0, 0.12);
+  height: 100%;
+  width: 165px;
+  flex-shrink: 0;
+  overflow: auto;
+}
+.role {
+  padding: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: 0.3s;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.role .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.role div {
+  align-self: center;
+}
+.role:hover {
+  background: #04232d;
+}
+.role.selected {
+  background: #03191f;
+}
+.add-role-button {
+  background: rgba(17, 148, 255, 0.692);
+  transition: 0.3s;
+}
+.add-role-button:hover {
+  background: rgb(17, 148, 255);
+}
+.details {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+}
+.button {
+  background: #024554;
+  padding: 10px;
+  align-self: center;
+  margin: 5px;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s;
+}
+.button:hover {
+  background: #02303c;
+}
+.button.warn {
+  background: rgba(255, 17, 17, 0.692);
+}
+.button.warn:hover {
+  background: rgb(255, 17, 17);
+}
+.button.disabled {
+  background: grey;
+}
+.button.disabled:hover {
+  background: grey;
+}
+.add-role-button.warn {
+  background: rgba(255, 17, 17, 0.192);
+  cursor: not-allowed;
+}
+
+.delete-server {
+  margin: auto;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  align-self: initial;
+  border-radius: 0;
+  text-align: center;
+}
+.input {
+  display: flex;
+  flex-direction: column;
+  background-color: #044050;
+  padding: 10px;
+  margin: 10px;
+}
+.input input {
+  width: 100%;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  margin-top: 0;
+}
+
+.role-name {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.role-color {
+  display: flex;
+  flex-shrink: 0;
+  background: rgb(255, 255, 255);
+  transition: 0.2s;
+  margin-top: 5px;
+}
+
+.color-picker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 35px;
+  flex-shrink: 0;
+  user-select: none;
+  color: rgba(255, 255, 255, 0.877);
+  cursor: pointer;
+  .material-icons {
+    text-shadow: 0px 0px 9px #000000bb;
+  }
+}
+
+.check-box {
+  display: flex;
+  margin: 5px;
+  align-content: center;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  .box {
+    height: 20px;
+    width: 20px;
+    flex-shrink: 0;
+    background-color: rgb(255, 31, 31);
+    margin-right: 5px;
+    border-radius: 2px;
+    &.checked {
+      background-color: rgb(31, 154, 255);
+    }
+  }
+}
+</style>

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

@@ -23,9 +23,10 @@
         </div>
         <general v-if="index === 0" />
         <manage-channels v-if="index === 1" />
-        <manage-bans v-if="index === 2" />
+        <manage-roles v-if="index === 2" />
-        <server-visibility v-if="index === 3" />
+        <manage-bans v-if="index === 3" />
-        <delete-server v-if="index === 4" />
+        <server-visibility v-if="index === 4" />
+        <delete-server v-if="index === 5" />
       </div>
     </div>
   </div>
@@ -36,6 +37,7 @@
 import General from "./General.vue";
 import DeleteServer from "./DeleteServer.vue";
 import ManageChannels from "./ManageChannels.vue";
+import ManageRoles from "./ManageRoles.vue";
 import ManageBans from "./ManageBans.vue";
 import ServerVisibility from "./ServerVisibility.vue";
 export default {
@@ -44,14 +46,16 @@ export default {
     DeleteServer,
     ManageChannels,
     ServerVisibility,
-    ManageBans
+    ManageBans,
+    ManageRoles
   },
   data() {
     return {
       index: 0,
       tabs: [
         { title: "General", icon: "info" },
-        { title: "Manage Channels", icon: "storage" },
+        { title: "Channels", icon: "storage" },
+        { title: "Roles", icon: "extension" },
         // {title: "Manage Invites", icon: "local_post_office"},
         { title: "Banned Members", icon: "lock" },
         { title: "Server Visibility", icon: "visibility" },

src/services/ServerService.js

@@ -68,5 +68,34 @@ export default {
   },
   memberBans(serverID) {
     return wrapper(instance().get(`/servers/${serverID}/bans`));
+  },
+
+  // roles
+  createRole(serverID, data) {
+    return wrapper(instance().post(`/servers/${serverID}/roles`, data));
+  },
+  // roles
+  deleteRole(serverID, roleID) {
+    return wrapper(instance().delete(`/servers/${serverID}/roles/${roleID}`));
+  },
+  // roles
+  updateRole(serverID, roleID, data) {
+    return wrapper(
+      instance().patch(`/servers/${serverID}/roles/${roleID}`, data)
+    );
+  },
+  applyRoleToMember(serverID, roleID, memberID) {
+    return wrapper(
+      instance().patch(
+        `/servers/${serverID}/members/${memberID}/roles/${roleID}`
+      )
+    );
+  },
+  removeRoleFromMember(serverID, roleID, memberID) {
+    return wrapper(
+      instance().delete(
+        `/servers/${serverID}/members/${memberID}/roles/${roleID}`
+      )
+    );
   }
 };

src/store/modules/serversModule.js

@@ -4,13 +4,17 @@ const state = {
   selectedServerID: null,
   servers: {},
   channelsIDs: {},
-  serverMembers: []
+  serverMembers: [],
+  roles: {}
 };
 
 const getters = {
   servers(state) {
     return state.servers;
   },
+  roles(state) {
+    return state.roles;
+  },
   channelsIDs(state) {
     return state.channelsIDs;
   },
@@ -45,6 +49,81 @@ const actions = {
   addServerMembers(context, serverMembersArr) {
     context.commit("ADD_SERVER_MEMBERS", serverMembersArr);
   },
+  // Roles
+  addRole({ commit, state }, role) {
+    const serverRoles = [...state.roles[role.server_id]];
+    serverRoles.push(role);
+
+    commit("UPDATE_SERVER_ROLES", {
+      roles: serverRoles,
+      server_id: role.server_id
+    });
+  },
+  deleteRole({ commit, state }, { server_id, role_id }) {
+    const serverRoles = [...state.roles[server_id]].filter(
+      r => r.id !== role_id
+    );
+
+    commit("UPDATE_SERVER_ROLES", {
+      roles: serverRoles,
+      server_id: server_id
+    });
+  },
+  updateRole({ commit, state }, roleUpdates) {
+    const updatedRoles = state.roles[roleUpdates.server_id].map(r => {
+      if (r.id === roleUpdates.id) {
+        return Object.assign({}, r, roleUpdates);
+      } else {
+        return r;
+      }
+    });
+
+    commit("UPDATE_SERVER_ROLES", {
+      roles: updatedRoles,
+      server_id: roleUpdates.server_id
+    });
+  },
+  setAllRoles(context, rolesArr) {
+    context.commit("SET_ALL_ROLES", rolesArr);
+  },
+  addMemberRole({ commit, state }, { role_id, uniqueID, server_id }) {
+    const serverMemberIndex = state.serverMembers.findIndex(
+      sm => sm.uniqueID === uniqueID && sm.server_id === server_id
+    );
+    if (!serverMemberIndex) return;
+
+    const serverMemberNew = { ...state.serverMembers[serverMemberIndex] };
+    if (!serverMemberNew.roles) {
+      serverMemberNew.roles = [role_id];
+    } else {
+      if (serverMemberNew.roles.includes(role_id)) {
+        return;
+      }
+      serverMemberNew.roles.push(role_id);
+    }
+
+    commit("SET_MEMBER", {
+      serverMember: serverMemberNew,
+      index: serverMemberIndex
+    });
+  },
+  removeMemberRole({ commit, state }, { role_id, uniqueID, server_id }) {
+    const serverMemberIndex = state.serverMembers.findIndex(
+      sm => sm.uniqueID === uniqueID && sm.server_id === server_id
+    );
+    if (!serverMemberIndex) return;
+
+    let serverMemberNew = { ...state.serverMembers[serverMemberIndex] };
+    if (!serverMemberNew.roles || !serverMemberNew.roles.includes(role_id))
+      return;
+
+    serverMemberNew.roles = serverMemberNew.roles.filter(r => r != role_id);
+
+    commit("SET_MEMBER", {
+      serverMember: serverMemberNew,
+      index: serverMemberIndex
+    });
+  },
   removeServerMember(context, { uniqueID, server_id }) {
     context.commit("REMOVE_SERVER_MEMBER", { uniqueID, server_id });
   },
@@ -99,6 +178,9 @@ const actions = {
 };
 
 const mutations = {
+  SET_MEMBER(state, { serverMember, index }) {
+    Vue.set(state.serverMembers, index, serverMember);
+  },
   SET_CHANNEL_IDs(state, { serverID, channelIDs }) {
     Vue.set(state.channelsIDs, serverID, channelIDs);
   },
@@ -142,6 +224,12 @@ const mutations = {
     if (exists) return;
     state.serverMembers.push(serverMember);
   },
+  SET_ALL_ROLES(state, rolesArr) {
+    Vue.set(state, "roles", rolesArr);
+  },
+  UPDATE_SERVER_ROLES(state, { roles, server_id }) {
+    Vue.set(state.roles, server_id, roles);
+  },
   REMOVE_SERVER_MEMBER(state, { uniqueID, server_id }) {
     state.serverMembers = state.serverMembers.filter(
       m => m.uniqueID !== uniqueID || m.server_id !== server_id

src/store/modules/socketIOModule.js

@@ -26,6 +26,7 @@ const actions = {
     const {
       user,
       serverMembers,
+      serverRoles,
       dms,
       notifications,
       currentFriendStatus,
@@ -55,26 +56,6 @@ const actions = {
     context.dispatch("members/addPresences", presence);
 
     context.dispatch("members/addMembers", memberObj);
-
-    // const friendsArray = user.friends;
-    // const friendObject = {};
-
-    // // convert array into object and add online status.
-    // if(friendsArray !== undefined && friendsArray.length >=1) {
-    //   for (let index = 0; index < friendsArray.length; index++) {
-    //     const element = friendsArray[index];
-    //     if (element.recipient) {
-    //       friendObject[element.recipient.uniqueID] = element;
-    //       for (let currentFriendStatus of currentFriendStatus){
-    //         console.log(currentFriendStatus[0], currentFriendStatus[1])
-    //         if(currentFriendStatus[0] == element.recipient.uniqueID){
-    //           friendObject[element.recipient.uniqueID].recipient.status = currentFriendStatus[1]
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
-
     let servers = user.servers || [];
 
     if (settings.server_position) {
@@ -158,6 +139,16 @@ const actions = {
       serverMembersArr.push(serverMember);
       membersObj[member.uniqueID] = member;
     }
+    const serverRolesSorted = {};
+    for (let index = 0; index < serverRoles.length; index++) {
+      const role = serverRoles[index];
+      if (!serverRolesSorted[role.server_id]) {
+        serverRolesSorted[role.server_id] = [role];
+      } else {
+        serverRolesSorted[role.server_id].push(role);
+      }
+    }
+    context.dispatch("servers/setAllRoles", serverRolesSorted);
     context.dispatch("members/addMembers", membersObj);
     context.dispatch("servers/addServerMembers", serverMembersArr);
 
@@ -490,6 +481,23 @@ const actions = {
       serverID,
       channelIDs: channel_position
     });
+  },
+  ["socket_server:createRole"](context, role) {
+    context.dispatch("servers/addRole", role);
+  },
+  ["socket_server:updateRole"](context, updatedDetails) {
+    context.dispatch("servers/updateRole", updatedDetails);
+  },
+  ["socket_server:deleteRole"](context, { role_id, server_id }) {
+    context.dispatch("servers/deleteRole", { role_id, server_id });
+  },
+  ["socket_serverMember:addRole"](context, { role_id, uniqueID, server_id }) {
+    context.dispatch("servers/addMemberRole", { role_id, uniqueID, server_id });
+  },
+  // eslint-disable-next-line prettier/prettier
+  ["socket_serverMember:removeRole"](context, { role_id, uniqueID, server_id }) {
+    // eslint-disable-next-line prettier/prettier
+    context.dispatch("servers/removeMemberRole", { role_id, uniqueID, server_id });
   }
 };
 

src/utils/RolePermissions.js

@@ -0,0 +1,11 @@
+const permissions = {
+  ADMIN: {
+    name: "Admin",
+    value: 2
+  },
+  SEND_MESSAGE: {
+    name: "Send Message",
+    value: 2
+  }
+};
+export default permissions;