47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<template>
|
|
<div class="content-l">
|
|
<div class="left-center">
|
|
<h3>Users</h3>
|
|
<UiButton icon="add" class="square small" @click="() => goto(3.5)"></UiButton>
|
|
</div>
|
|
<div class="resource-container user-container">
|
|
<div class="header">
|
|
<p>Username</p>
|
|
<p>E-Mail</p>
|
|
<p>Roles</p>
|
|
<p>Initial</p>
|
|
</div>
|
|
<div class="resource" v-for="user, index in users" :class="{ even: index % 2 }">
|
|
<p class="grid-element">{{ user.username }}</p>
|
|
<p class="grid-element"><span v-if="user.email">{{ user.email }}</span><span v-else>-</span></p>
|
|
<p class="grid-element" v-if="user.roles">{{ user.roles.join(", ") }}</p>
|
|
<p class="grid-element">{{ user.initial === true }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { User } from '~/classes/User';
|
|
import { getUsers } from '~/requests/user';
|
|
|
|
defineProps<{
|
|
goto: (tab: number) => void;
|
|
}>();
|
|
|
|
const users: Ref<User[] | undefined> = ref(undefined);
|
|
|
|
onMounted(() => {
|
|
getUsers((_users: User[]) => {
|
|
users.value = _users;
|
|
});
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-container {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
</style> |