Raphix
de2be3c213
All checks were successful
Frontend Deployment / deploy-frontend (push) Successful in 33s
139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<template>
|
|
<div class="users">
|
|
<div class="user" v-for="member in users" :key="member.identity.id">
|
|
<div class="group">
|
|
<User :user="member" />
|
|
<div class="info">
|
|
<Role :user="member" />
|
|
<Tag v-if="member.isBanned" color="var(--text-error)">Banni</Tag>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div v-if="member.identity.id == userStore.userInfo.identity.id">
|
|
<p class="you">Vous</p>
|
|
</div>
|
|
<div v-else-if="member.identity.isAdmin">
|
|
<p class="you">Administrateur</p>
|
|
</div>
|
|
<div v-else-if="member.identity.isOwner">
|
|
<p class="you">Propriétaire</p>
|
|
</div>
|
|
<div class="actions" v-else>
|
|
<IconAction title="Bannir" v-if="!member.identity.isMod" :color="member.isBanned ? 'var(--text)' : 'var(--text-tertiary)'" @click="banUser(member)" icon="fa-solid fa-hammer"/>
|
|
<IconAction title="Nommer / Retirer modérateur" v-if="userStore.userInfo.identity.id == server.owner && !member.isBanned" :color="member.identity.isMod ? 'var(--text)' : 'var(--text-tertiary)'" @click="toggleMod(member)" icon="fa-solid fa-user-shield"/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Events from '@/utils/Events';
|
|
import { IORequest } from '@/utils/IORequest';
|
|
import { ref } from 'vue';
|
|
import User from '@/components/UI/User.vue';
|
|
import Role from '@/components/UI/Role.vue';
|
|
import IconAction from '@/components/UI/IconAction.vue';
|
|
import Tag from '@/components/UI/Tag.vue';
|
|
import { useUserStore } from '@/stores/userStore';
|
|
|
|
const users = ref(null)
|
|
const userStore = useUserStore();
|
|
|
|
const props = defineProps({
|
|
server: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
Events.on("GUILD_JOINED", () => {
|
|
if(!(userStore.userInfo.identity.isAdmin || userStore.userInfo.identity.isMod || userStore.userInfo.identity.id == props.server.owner)) return;
|
|
IORequest("/MOD/USERS/LIST", (data) => {
|
|
users.value = data;
|
|
});
|
|
});
|
|
|
|
function toggleMod(member) {
|
|
if(member.identity.id == userStore.userInfo.identity.id) return;
|
|
IORequest("/OWNER/USERS/SWITCH_MOD", (response) => {
|
|
console.log(response)
|
|
}, member.identity.id);
|
|
}
|
|
|
|
function banUser(member) {
|
|
if(member.identity.id == userStore.userInfo.identity.id) return;
|
|
IORequest("/MOD/USERS/BAN", (response) => {
|
|
console.log(response)
|
|
}, member.identity.id);
|
|
}
|
|
|
|
</script>
|
|
<style scoped>
|
|
|
|
@media screen and (max-width: 768px),
|
|
screen and (max-height: 607px) {
|
|
|
|
.group {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
gap: 20px;
|
|
|
|
}
|
|
|
|
.user{
|
|
padding: 5px 10px 5px 5px !important;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.user{
|
|
background-color: var(--tertiary);
|
|
padding: 5px 10px 2px 5px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.users {
|
|
margin: 10px 0;
|
|
gap: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
max-height: 25vh;
|
|
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.you {
|
|
font-size: 0.8em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
</style> |