mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-05-19 04:08:32 +00:00
progress on the roles and some bug fixes.
This commit is contained in:
unknown
parent
cda2dc953e
commit
b83334103f
15 changed files with 736 additions and 53 deletions
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,8 @@
|
|||
"@vue/prettier"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": 0
|
||||
"no-console": 0,
|
||||
"no-unreachable": 0
|
||||
},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,36 @@
|
|||
<template>
|
||||
<div class="drop-down-menu" v-click-outside="outsideClick">
|
||||
<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 warn" v-if="showKickBanOption" @click="kickMember">
|
||||
Kick
|
||||
<div
|
||||
class="drop-down-menu"
|
||||
v-click-outside="outsideClick"
|
||||
@mouseleave="editRoleHovered = false"
|
||||
>
|
||||
<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";
|
||||
this.$el.style.left = x + "px";
|
||||
// if context is out of screen
|
||||
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;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -23,9 +23,10 @@
|
|||
</div>
|
||||
<general v-if="index === 0" />
|
||||
<manage-channels v-if="index === 1" />
|
||||
<manage-bans v-if="index === 2" />
|
||||
<server-visibility v-if="index === 3" />
|
||||
<delete-server v-if="index === 4" />
|
||||
<manage-roles v-if="index === 2" />
|
||||
<manage-bans v-if="index === 3" />
|
||||
<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" },
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
11
src/utils/RolePermissions.js
Normal file
11
src/utils/RolePermissions.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const permissions = {
|
||||
ADMIN: {
|
||||
name: "Admin",
|
||||
value: 2
|
||||
},
|
||||
SEND_MESSAGE: {
|
||||
name: "Send Message",
|
||||
value: 2
|
||||
}
|
||||
};
|
||||
export default permissions;
|
||||
Loading…
Reference in a new issue