Version 1.0.0 - Finalisation de Account et de GuildHeader

src/components/Widget/Guild/Settings/GuildUsers.vue

@@ -0,0 +1,139 @@
+<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 { defineProps } from 'vue';
+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) {
+   
+    .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>