added 2 new permissions

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

@@ -1,7 +1,11 @@
 <template>
   <div class="drop-down-menu" v-click-outside="outsideClick">
     <div class="item" @click="createInvite">Manage Invites</div>
-    <div class="item" v-if="checkServerCreator" @click="showSettings">
+    <div
+      class="item"
+      v-if="checkServerCreator || hasAdminRoles"
+      @click="showSettings"
+    >
       Server Settings
     </div>
     <div class="item warn" v-if="!checkServerCreator" @click="leaveServer">
@@ -14,6 +18,7 @@
 </template>
 
 <script>
+import { permissions, containsPerm } from "@/utils/RolePermissions";
 import ServerService from "../../../../services/ServerService";
 export default {
   data() {
@@ -76,6 +81,42 @@ export default {
     },
     checkServerCreator() {
       return this.contextDetails.creatorUniqueID === this.user.uniqueID;
+    },
+    serverMember() {
+      return this.$store.getters["servers/serverMembers"].find(
+        sm =>
+          sm.server_id === this.contextDetails.serverID &&
+          sm.uniqueID === this.user.uniqueID
+      );
+    },
+    myRolePermissions() {
+      if (!this.serverMember) return undefined;
+      const roles = this.$store.getters["servers/roles"][
+        this.contextDetails.serverID
+      ];
+      if (!roles) return undefined;
+
+      let perms = 0;
+
+      if (this.serverMember.roles) {
+        for (let index = 0; index < roles.length; index++) {
+          const role = roles[index];
+          if (this.serverMember.roles.includes(role.id)) {
+            perms = perms | (role.permissions || 0);
+          }
+        }
+      }
+
+      const defaultRole = roles.find(r => r.default);
+      perms = perms | defaultRole.permissions;
+      return perms;
+    },
+    hasAdminRoles() {
+      const adminPermsFlags =
+        permissions.MANAGE_CHANNELS.value |
+        permissions.MANAGE_ROLES.value |
+        permissions.ADMIN.value;
+      return containsPerm(this.myRolePermissions, adminPermsFlags);
     }
   }
 };

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

@@ -20,7 +20,11 @@
       <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="item"
+        @mouseenter="editRoleHoverEvent"
+        v-if="isServerMember || hasManageRolePerm"
+      >
         <div class="material-icons">keyboard_arrow_left</div>
         Edit Roles
       </div>
@@ -36,6 +40,7 @@
 
 <script>
 import ServerService from "../../../../services/ServerService";
+import { containsPerm, permissions } from "../../../../utils/RolePermissions";
 export default {
   data() {
     return {
@@ -208,6 +213,41 @@ export default {
       // 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.isServerMember;
+    },
+    selfServerMember() {
+      return this.$store.getters["servers/serverMembers"].find(
+        sm =>
+          sm.server_id === this.contextDetails.serverID &&
+          sm.uniqueID === this.user.uniqueID
+      );
+    },
+    myRolePermissions() {
+      if (!this.selfServerMember) return undefined;
+      const roles = this.$store.getters["servers/roles"][
+        this.contextDetails.serverID
+      ];
+      if (!roles) return undefined;
+
+      let perms = 0;
+
+      if (this.selfServerMember.roles) {
+        for (let index = 0; index < roles.length; index++) {
+          const role = roles[index];
+          if (this.selfServerMember.roles.includes(role.id)) {
+            perms = perms | (role.permissions || 0);
+          }
+        }
+      }
+
+      const defaultRole = roles.find(r => r.default);
+      perms = perms | defaultRole.permissions;
+      return perms;
+    },
+    hasManageRolePerm() {
+      return containsPerm(
+        this.myRolePermissions,
+        permissions.MANAGE_ROLES.value | permissions.ADMIN.value
+      );
     }
   }
 };

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

@@ -7,10 +7,10 @@
       <div class="tabs">
         <div
           class="tab"
-          v-for="(tab, _index) in tabs"
-          :key="_index"
-          :class="{ selected: index === _index, critical: tab.critical }"
-          @click="index = _index"
+          v-for="tab in tabsFiltered"
+          :key="tab.index"
+          :class="{ selected: index === tab.index, critical: tab.critical }"
+          @click="index = tab.index"
         >
           <div class="material-icons">{{ tab.icon }}</div>
           <div>{{ tab.title }}</div>
@@ -43,6 +43,8 @@ import ManageChannels from "./ManageChannels.vue";
 import ManageRoles from "./ManageRoles.vue";
 import ManageBans from "./ManageBans.vue";
 import ServerVisibility from "./ServerVisibility.vue";
+import { permissions, containsPerm } from "@/utils/RolePermissions";
+
 export default {
   components: {
     General,
@@ -54,16 +56,7 @@ export default {
   },
   data() {
     return {
-      index: 0,
-      tabs: [
-        { title: "General", icon: "info" },
-        { 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" },
-        { title: "Delete Server", icon: "warning", critical: true }
-      ]
+      index: 0
     };
   },
 
@@ -79,10 +72,99 @@ export default {
       }
     }
   },
+  mounted() {},
   computed: {
     server() {
       const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
       return this.$store.getters["servers/servers"][serverID];
+    },
+    user() {
+      return this.$store.getters.user;
+    },
+    checkServerCreator() {
+      return this.server.creator.uniqueID === this.user.uniqueID;
+    },
+    serverMember() {
+      return this.$store.getters["servers/serverMembers"].find(
+        sm =>
+          sm.server_id === this.server.server_id &&
+          sm.uniqueID === this.user.uniqueID
+      );
+    },
+    myRolePermissions() {
+      if (!this.serverMember) return undefined;
+      const roles = this.$store.getters["servers/roles"][this.server.server_id];
+      if (!roles) return undefined;
+
+      let perms = 0;
+
+      if (this.serverMember.roles) {
+        for (let index = 0; index < roles.length; index++) {
+          const role = roles[index];
+          if (this.serverMember.roles.includes(role.id)) {
+            perms = perms | (role.permissions || 0);
+          }
+        }
+      }
+
+      const defaultRole = roles.find(r => r.default);
+      perms = perms | defaultRole.permissions;
+      return perms;
+    },
+    tabs() {
+      return [
+        {
+          title: "General",
+          icon: "info",
+          index: 0,
+          shown: this.checkServerCreator
+        },
+        {
+          title: "Channels",
+          icon: "storage",
+          index: 1,
+          shown:
+            this.checkServerCreator ||
+            !!containsPerm(
+              this.myRolePermissions,
+              permissions.ADMIN.value | permissions.MANAGE_CHANNELS.value
+            )
+        },
+        {
+          title: "Roles",
+          icon: "extension",
+          index: 2,
+          shown:
+            this.checkServerCreator ||
+            !!containsPerm(
+              this.myRolePermissions,
+              permissions.ADMIN.value | permissions.MANAGE_ROLES.value
+            )
+        },
+        // {title: "Manage Invites", icon: "local_post_office"},
+        {
+          title: "Banned Members",
+          icon: "lock",
+          index: 3,
+          shown: this.checkServerCreator
+        },
+        {
+          title: "Server Visibility",
+          icon: "visibility",
+          index: 4,
+          shown: this.checkServerCreator
+        },
+        {
+          title: "Delete Server",
+          icon: "warning",
+          critical: true,
+          index: 5,
+          shown: this.checkServerCreator
+        }
+      ];
+    },
+    tabsFiltered() {
+      return this.tabs.filter(t => t.shown === true);
     }
   }
 };

src/utils/RolePermissions.js

@@ -8,6 +8,16 @@ export const permissions = {
     name: "Send Messages",
     value: 2,
     info: "Send messages to server channels"
+  },
+  MANAGE_ROLES: {
+    name: "Manage Roles",
+    value: 4,
+    info: "Update or delete roles"
+  },
+  MANAGE_CHANNELS: {
+    name: "Manage Channels",
+    value: 8,
+    info: "Update or delete channels"
   }
 };
 

src/utils/changelog.js

@@ -1,10 +1,22 @@
 const config = [
+  {
+    version: 9.2,
+    title: "Image cache, more role permissions!",
+    shortTitle: "",
+    date: "08/01/2019",
+    headColor: "#007792",
+    new: [
+      "Image cache has been implimented.",
+      "2 new role permissions have been added: Manage roles, manage channels."
+    ],
+    msg:
+      "Although image cache has been implimented, it might not fix anything :( I need a better storage solution. Also, Happy late new year!"
+  },
   {
     version: 9.1,
     title: "Roles!",
     shortTitle: "",
     date: "23/12/2019",
-    headColor: "#007792",
     new: [
       "You can now create roles and then see them in the members list. This feature is not finished yet but seems to be bug free for now :D"
     ]