Files
summercms/admin/src/views/SettingsIndexView.vue
Jakub Zych 0b09acdb0c feat(admin): open controller-link settings entries from the settings index
A settings entry with a controller opens that controller's route from
its card (settingsPath); singleton cards still open /settings/<code>.
On a linked controller with no navigation entry of its own the rail
marks Settings current, the breadcrumbs read Settings > entry label
(plus the record title on record and create routes) and the page title
uses the entry label. The settings docs describe the admin behaviour;
the embedded admin shell is rebuilt.
2026-10-07 18:24:54 +02:00

47 lines
1.9 KiB
Vue

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { t } from '../app/i18n'
import { iconFor } from '../app/icons'
import { settingsGroups, settingsPath } from '../state/useSettings'
// Settings index (D-21): every permitted settings page, grouped by category,
// with its icon, label and description. The server filters the list. A
// singleton entry opens its settings form; a link entry opens its controller.
</script>
<template>
<section class="flex flex-col gap-5">
<header>
<h1 class="text-[26px] font-bold tracking-[-0.02em]">{{ t('backend::lang.settings.title') }}</h1>
</header>
<p v-if="settingsGroups.length === 0" class="text-muted">{{ t('backend::lang.settings.empty') }}</p>
<section
v-for="group in settingsGroups"
:key="group.category"
data-settings-group
class="flex flex-col gap-3"
>
<h2 v-if="group.category" class="text-[13px] font-semibold tracking-[0.02em] text-muted uppercase">
{{ group.category }}
</h2>
<div class="grid grid-cols-1 gap-3 min-[900px]:grid-cols-2">
<RouterLink
v-for="entry in group.entries"
:key="entry.code"
:to="settingsPath(entry)"
:data-settings="entry.code"
class="flex items-start gap-3.5 rounded-card border border-border bg-surface p-5 text-text no-underline shadow-card hover:bg-hover"
>
<span class="flex size-10 shrink-0 items-center justify-center rounded-inner bg-subtle text-muted">
<component :is="iconFor(entry.icon)" :size="20" aria-hidden="true" />
</span>
<span class="flex min-w-0 flex-col">
<span class="font-semibold">{{ entry.label }}</span>
<span v-if="entry.description" class="text-[13px] text-muted">{{ entry.description }}</span>
</span>
</RouterLink>
</div>
</section>
</section>
</template>