Files
InvoiceShelf/resources/scripts/layouts/CompanyLayout.vue
Darko Gjorgjijoski 7885bf9d11 feat(menu): priority-sorted menu groups, user-menu items, sidebar appearance toggle
Every main_menu entry moves from numeric group (1/2/3) to string-based group + group_label + priority. Groups now carry their own i18n label and child entries are sorted by an explicit priority field instead of config-array order, so module-contributed menu items can slot into any existing group at any position.

BootstrapController merges module-registered menu items into main_menu (previously they lived in a separate module_menu response key) and introduces a user_menu response key for items modules want to place in the avatar dropdown. The global store follows suit: moduleMenu becomes userMenu, menuGroups is a computed that sorts by priority, and hasActiveModules drops out.

New admin Appearance setting page with a single toggle for whether sidebar group labels render — so instances that prefer a compact sidebar can hide the Documents/Administration/Modules headings without losing the grouping itself. CompanyLayout watches route meta and re-bootstraps when the admin-mode flag flips so the sidebar repaints with the right menu on navigation across the admin boundary.

Test suites updated: module menu merging is asserted against main_menu (name: 'module-{slug}') rather than the old module_menu response; HelloWorldIntegrationTest verifies the schema translation path; CompanyModulesIndexTest covers the display_name attachment.
2026-04-11 00:30:00 +02:00

116 lines
3.0 KiB
Vue

<template>
<div v-if="isAppLoaded" class="h-full">
<NotificationRoot />
<ImpersonationBanner />
<SiteHeader />
<SiteSidebar v-if="hasCompany" />
<main
:class="[
'h-screen h-screen-ios overflow-y-auto min-h-0 transition-all duration-300',
hasCompany
? globalStore.isSidebarCollapsed
? 'md:pl-16'
: 'md:pl-56 xl:pl-64'
: '',
]"
>
<div class="pt-16 pb-16">
<router-view />
</div>
</main>
</div>
<BaseGlobalLoader v-else />
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGlobalStore } from '@/scripts/stores/global.store'
import { useUserStore } from '@/scripts/stores/user.store'
import { useModalStore } from '@/scripts/stores/modal.store'
import { useCompanyStore } from '@/scripts/stores/company.store'
import SiteHeader from './partials/SiteHeader.vue'
import SiteSidebar from './partials/SiteSidebar.vue'
import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
import ImpersonationBanner from './partials/ImpersonationBanner.vue'
interface RouteMeta {
ability?: string | string[]
isSuperAdmin?: boolean
isOwner?: boolean
usesAdminBootstrap?: boolean
}
const globalStore = useGlobalStore()
const route = useRoute()
const userStore = useUserStore()
const router = useRouter()
const modalStore = useModalStore()
const { t } = useI18n()
const companyStore = useCompanyStore()
const isAppLoaded = computed<boolean>(() => {
return globalStore.isAppLoaded
})
const hasCompany = computed<boolean>(() => {
return !!companyStore.selectedCompany || companyStore.isAdminMode
})
const usesAdminBootstrap = computed<boolean>(() => {
return route.meta.usesAdminBootstrap === true
})
async function initializeLayout(): Promise<void> {
const meta = route.meta as RouteMeta
const res = await globalStore.bootstrap({
adminMode: meta.usesAdminBootstrap === true,
})
if (res.admin_mode === true) {
return
}
if (!res.current_company) {
if (route.name !== 'no.company') {
router.push({ name: 'no.company' })
}
return
}
if (meta.ability && !userStore.hasAbilities(meta.ability as string | string[])) {
router.push({ name: 'settings.account' })
} else if (meta.isSuperAdmin && !userStore.currentUser?.is_super_admin) {
router.push({ name: 'dashboard' })
} else if (meta.isOwner && !userStore.currentUser?.is_owner) {
router.push({ name: 'settings.account' })
}
if (
companyStore.selectedCompanySettings.bulk_exchange_rate_configured === 'NO'
) {
modalStore.openModal({
componentName: 'ExchangeRateBulkUpdateModal',
title: t('exchange_rates.bulk_update'),
size: 'sm',
})
}
}
onMounted(() => {
void initializeLayout()
})
watch(usesAdminBootstrap, (isAdminBootstrap, previousValue) => {
if (previousValue !== undefined && isAdminBootstrap !== previousValue) {
void initializeLayout()
}
})
</script>