Split system views into individual ones

This commit is contained in:
Johannes Zellner
2025-07-03 12:15:06 +02:00
parent e64cc325d7
commit 4025ef2070
4 changed files with 52 additions and 16 deletions
+30 -11
View File
@@ -28,7 +28,9 @@ import EventlogView from './views/EventlogView.vue';
import NetworkView from './views/NetworkView.vue';
import ProfileView from './views/ProfileView.vue';
import ServicesView from './views/ServicesView.vue';
import SystemView from './views/SystemView.vue';
import SystemLocaleView from './views/SystemLocaleView.vue';
import SystemUpdateView from './views/SystemUpdateView.vue';
import SystemDockerView from './views/SystemDockerView.vue';
import MetricsView from './views/MetricsView.vue';
import UserDirectorySettingsView from './views/UserDirectorySettingsView.vue';
import UserDirectoryLdapProviderView from './views/UserDirectoryLdapProviderView.vue';
@@ -50,12 +52,14 @@ const VIEWS = {
EMAIL_SETTINGS: 'email-settings',
EMAIL_EVENTLOG: 'email-eventlog',
EMAIL_STATUS: 'email-status',
EVENTLOG: 'eventlog',
METRICS: 'metrics',
NETWORK: 'network',
PROFILE: 'profile',
SERVICES: 'services',
SYSTEM: 'system',
SYSTEM_LOCALE: 'system-locale',
SYSTEM_DOCKER: 'system-docker',
SYSTEM_EVENTLOG: 'system-eventlog',
SYSTEM_UPDATE: 'system-update',
USER_DIRECTORY_SETTINGS: 'user-directory-settings',
USER_DIRECTORY_LDAP_PROVIDER: 'user-directory-ldap-provider',
USER_DIRECTORY_OPENID_PROVIDER: 'user-directory-openid-provider',
@@ -123,6 +127,7 @@ function onHashChange() {
activeSidebarItem.value = v;
if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
if (activeSidebarItem.value.indexOf('system') === 0) activeSidebarGroup.value = 'system';
else if (activeSidebarItem.value.indexOf('user-directory') === 0) activeSidebarGroup.value = 'user-directory';
else activeSidebarGroup.value = '';
@@ -152,8 +157,6 @@ function onHashChange() {
view.value = VIEWS.EMAIL_EVENTLOG;
} else if (v === VIEWS.EMAIL_STATUS && profile.value.isAtLeastMailManager) {
view.value = VIEWS.EMAIL_STATUS;
} else if (v === VIEWS.EVENTLOG && profile.value.isAtLeastAdmin) {
view.value = VIEWS.EVENTLOG;
} else if (v === VIEWS.METRICS && profile.value.isAtLeastAdmin) {
view.value = VIEWS.METRICS;
} else if (v === VIEWS.NETWORK && profile.value.isAtLeastAdmin) {
@@ -162,8 +165,14 @@ function onHashChange() {
view.value = VIEWS.PROFILE;
} else if (v === VIEWS.SERVICES && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SERVICES;
} else if (v === VIEWS.SYSTEM && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SYSTEM;
} else if (v === VIEWS.SYSTEM_LOCALE && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SYSTEM_LOCALE;
} else if (v === VIEWS.SYSTEM_DOCKER && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SYSTEM_DOCKER;
} else if (v === VIEWS.SYSTEM_EVENTLOG && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SYSTEM_EVENTLOG;
} else if (v === VIEWS.SYSTEM_UPDATE && profile.value.isAtLeastAdmin) {
view.value = VIEWS.SYSTEM_UPDATE;
} else if (v === VIEWS.USER_DIRECTORY_SETTINGS && profile.value.isAtLeastAdmin) {
view.value = VIEWS.USER_DIRECTORY_SETTINGS;
} else if (v === VIEWS.USER_DIRECTORY_LDAP_PROVIDER && profile.value.isAtLeastAdmin) {
@@ -266,10 +275,18 @@ onMounted(async () => {
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-settings' }" href="#/email-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('emails.settings.title') }}</a>
</div>
</Transition>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
<!-- <a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a> -->
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('system')"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'system' }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'system'">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-eventlog' }" href="#/system-eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-locale' }" href="#/system-locale" @click="onSidebarClose()"><i class="fa fa-fw fa-language"></i> {{ $t('system.locale.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-docker' }" href="#/system-docker" @click="onSidebarClose()"><i class="fa-brands fa-fw fa-docker"></i> {{ $t('settings.privateDockerRegistry.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-update' }" href="#/system-update" @click="onSidebarClose()"><i class="fa fa-fw fa-square-up-right"></i> {{ $t('settings.updates.title') }}</a>
</div>
</Transition>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'user-directory' }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
@@ -303,12 +320,14 @@ onMounted(async () => {
<EmailSettingsView v-else-if="view === VIEWS.EMAIL_SETTINGS" />
<EmailEventlogView v-else-if="view === VIEWS.EMAIL_EVENTLOG" />
<EmailStatusView v-else-if="view === VIEWS.EMAIL_STATUS" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.SYSTEM_EVENTLOG" />
<MetricsView v-else-if="view === VIEWS.METRICS" />
<NetworkView v-else-if="view === VIEWS.NETWORK" />
<ProfileView v-else-if="view === VIEWS.PROFILE" />
<ServicesView v-else-if="view === VIEWS.SERVICES" />
<SystemView v-else-if="view === VIEWS.SYSTEM" />
<SystemLocaleView v-else-if="view === VIEWS.SYSTEM_LOCALE" />
<SystemDockerView v-else-if="view === VIEWS.SYSTEM_DOCKER" />
<SystemUpdateView v-else-if="view === VIEWS.SYSTEM_UPDATE" />
<UserDirectorySettingsView v-else-if="view === VIEWS.USER_DIRECTORY_SETTINGS" />
<UserDirectoryLdapProviderView v-else-if="view === VIEWS.USER_DIRECTORY_LDAP_PROVIDER" />
<UserDirectoryOpenIdProviderView v-else-if="view === VIEWS.USER_DIRECTORY_OPENID_PROVIDER" />