63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<PopupTemplate heading="Account" ref="base">
|
|
<div class="account-page">
|
|
<div class="nav">
|
|
<NuxtLink class="nav-link" :class="{ active: tab === 0 }" @click="() => tab = 0">Allgemein</NuxtLink>
|
|
<NuxtLink class="nav-link" :class="{ active: tab === 1 }" @click="() => tab = 1">Einstellungen</NuxtLink>
|
|
<NuxtLink class="nav-link" :class="{ active: tab === 2 }" @click="() => tab = 2" v-if="hasAnyRole(getUser(), ['admin'])">Benutzer</NuxtLink>
|
|
<NuxtLink class="nav-link" :class="{ active: tab === 3 }" @click="() => tab = 3">Logout</NuxtLink>
|
|
</div>
|
|
<div>
|
|
<AccountTab v-if="tab === 0"></AccountTab>
|
|
<SettingsTab v-if="tab === 1"></SettingsTab>
|
|
<UserTab v-if="tab === 2" :goto="(n: number) => tab = n"></UserTab>
|
|
<LogoutTab v-if="tab === 3"></LogoutTab>
|
|
<AddUserTab v-if="tab === 3.5" :goto="(n: number) => tab = n"></AddUserTab>
|
|
</div>
|
|
</div>
|
|
</PopupTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UserTab from './account/UserTab.vue';
|
|
import SettingsTab from './account/SettingsTab.vue';
|
|
import { hasAnyRole } from '~/classes/User';
|
|
import LogoutTab from './account/LogoutTab.vue';
|
|
import AddUserTab from './account/AddUserTab.vue';
|
|
|
|
const base = ref();
|
|
|
|
const tab = ref(0);
|
|
|
|
function open()
|
|
{
|
|
tab.value = 0;
|
|
base.value.open();
|
|
}
|
|
|
|
defineExpose({
|
|
open
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.account-page {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 2rem;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.nav-link {
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
}
|
|
.nav-link.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
</style> |