Files
InvoiceShelf/resources/scripts/features/company/settings/views/SettingsLayoutView.vue
Darko Gjorgjijoski 5c11147e95 feat(settings): allow Danger Zone for any owner regardless of company count
Removes three layered gates that kept the Danger Zone completely hidden unless the current user had more than one company:

1. SettingsLayoutView's showDangerZone computed no longer checks companies.length > 1 — just is_owner. 2. DangerZoneView drops the v-if that wrapped the delete button with the same check. 3. Admin\\CompaniesController::destroy() drops the companies_count <= 1 early-return that was enforcing the rule server-side (translation key You_cannot_delete_all_companies was inline in the controller, not in lang files or tests, so nothing else needs cleanup).

The reasoning behind the old gate was that a user with zero companies would be stranded. That's a misread of how the app degrades: /admin/no-company already exists as a graceful fallback view, and the user can create a fresh company from there to recover. Hiding the entire delete flow just to avoid that fallback UX was overkill — the name-confirmation modal already prevents accidental deletion.
2026-04-11 08:00:00 +02:00

135 lines
3.7 KiB
Vue

<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useGlobalStore } from '../../../../stores/global.store'
import { useUserStore } from '../../../../stores/user.store'
interface SettingMenuItem {
title: string
link: string
icon: string
}
interface DropdownMenuItem extends SettingMenuItem {
title: string
}
const { t } = useI18n()
const globalStore = useGlobalStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const showDangerZone = computed<boolean>(() => {
return userStore.currentUser?.is_owner === true
})
const currentSetting = ref<DropdownMenuItem | undefined>(undefined)
const dropdownMenuItems = computed<DropdownMenuItem[]>(() => {
const items = (globalStore.settingMenu as SettingMenuItem[]).map((item) => ({
...item,
title: t(item.title),
}))
if (showDangerZone.value) {
items.push({
title: t('settings.company_info.danger_zone'),
link: '/admin/settings/danger-zone',
icon: 'ExclamationTriangleIcon',
})
}
return items
})
watchEffect(() => {
if (route.path === '/admin/settings') {
// Redirect to first available setting menu item, or account settings as fallback
const firstItem = globalStore.settingMenu?.[0]
router.push(firstItem?.link ?? '/admin/settings/account-settings')
}
const item = dropdownMenuItems.value.find((item) => item.link === route.path)
currentSetting.value = item
})
function hasActiveUrl(url: string): boolean {
return route.path.indexOf(url) > -1
}
function navigateToSetting(setting: DropdownMenuItem): void {
router.push(setting.link)
}
</script>
<template>
<BasePage>
<BasePageHeader :title="$t('settings.setting', 1)" class="mb-6">
<BaseBreadcrumb>
<BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
<BaseBreadcrumbItem
:title="$t('settings.setting', 2)"
to="/admin/settings"
active
/>
</BaseBreadcrumb>
</BasePageHeader>
<div class="w-full mb-6 select-wrapper xl:hidden">
<BaseMultiselect
v-model="currentSetting"
:options="dropdownMenuItems"
:can-deselect="false"
value-prop="title"
track-by="title"
label="title"
object
@update:model-value="navigateToSetting"
/>
</div>
<div class="flex gap-8">
<div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
<BaseList>
<BaseListItem
v-for="(menuItem, index) in globalStore.settingMenu"
:key="index"
:title="$t(menuItem.title)"
:to="menuItem.link"
:active="hasActiveUrl(menuItem.link)"
:index="index"
class="py-3"
>
<template #icon>
<BaseIcon :name="menuItem.icon" />
</template>
</BaseListItem>
</BaseList>
<router-link
v-if="showDangerZone"
to="/admin/settings/danger-zone"
:class="[
'cursor-pointer px-3 py-2 mt-1 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors',
hasActiveUrl('/admin/settings/danger-zone')
? 'text-red-600 bg-red-50 font-semibold'
: 'text-red-500 hover:bg-red-50 hover:text-red-600',
]"
>
<span class="mr-3">
<BaseIcon name="ExclamationTriangleIcon" />
</span>
<span>{{ $t('settings.company_info.danger_zone') }}</span>
</router-link>
</div>
<div class="w-full overflow-visible">
<RouterView />
</div>
</div>
</BasePage>
</template>