65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<template>
|
|
<div class="content-l">
|
|
<div class="spaced-center">
|
|
<h2>Users</h2>
|
|
<UiButton icon="person_add" reverse @click="() => useRouter().push('/account/settings/users/add')">Add</UiButton>
|
|
</div>
|
|
<div class="content-l">
|
|
<div class="user-container">
|
|
<div class="contents">
|
|
<h3 class="gray">Username</h3>
|
|
<h3 class="gray">E-Mail</h3>
|
|
<h3 class="gray">Roles</h3>
|
|
</div>
|
|
<div v-for="user in users" class="contents user-row">
|
|
<p>{{ user.username }}</p>
|
|
<p>{{ Optional.ofNullable(user.email).orElse("-") }}</p>
|
|
<p v-if="user.roles">{{ user.roles.join(", ") }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { User } from '~/classes/User';
|
|
|
|
const users: Ref<User[] | undefined> = ref(undefined);
|
|
|
|
onMounted(() => {
|
|
User.get((_users) => {
|
|
users.value = _users;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
row-gap: 0.5rem;
|
|
}
|
|
.user-container > :first-child > * {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.contents {
|
|
display: contents;
|
|
}
|
|
.contents > * {
|
|
padding: 0.5rem;
|
|
}
|
|
.gray {
|
|
background-color: var(--shade-light);
|
|
}
|
|
.user-row > * {
|
|
background-color: var(--tile-color);
|
|
}
|
|
.contents > :first-child {
|
|
border-top-left-radius: 0.25rem;
|
|
border-bottom-left-radius: 0.25rem;
|
|
}
|
|
.contents > :last-child {
|
|
border-top-right-radius: 0.5rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
}
|
|
</style> |