src/router/adminGuard.ts

@@ -12,7 +12,14 @@ export async function abilityAndNavUpdate(to: any, from: any, next: any) {
   let section = to.meta.section;
   let module = to.meta.module;
 
-  if ((admin && ability.isAdmin()) || ability.can(type, section, module)) {
+  if (to.name == "admin-default") {
+    navigation.activeNavigation = "club";
+    navigation.activeLink = null;
+    navigation.updateTopLevel();
+    navigation.updateNavigation();
+    NProgress.done();
+    next();
+  } else if ((admin && ability.isAdmin()) || ability.can(type, section, module)) {
     NProgress.done();
     navigation.activeNavigation = to.name.split("-")[1];
     navigation.activeLink = to.name.split("-")[2];

src/router/index.ts

@@ -15,7 +15,7 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      redirect: { name: "admin" },
+      redirect: { name: "admin-default" },
     },
     {
       path: "/login",
@@ -76,12 +76,13 @@ const router = createRouter({
       path: "/admin",
       name: "admin",
       component: () => import("@/views/admin/View.vue"),
-      beforeEnter: [isAuthenticated],
+      beforeEnter: [isAuthenticated, abilityAndNavUpdate],
       children: [
         {
           path: "",
           name: "admin-default",
           component: () => import("@/views/admin/ViewSelect.vue"),
+          beforeEnter: [abilityAndNavUpdate],
         },
         {
           path: "club",

src/stores/ability.ts

@@ -33,13 +33,21 @@ export const useAbilityStore = defineStore("ability", {
         if (type == "admin") return permissions?.admin ?? permissions?.adminByOwner ?? false;
         if (permissions?.admin || permissions?.adminByOwner) return true;
         if (
-          permissions[section]?.all == "*" ||
-          permissions[section]?.all?.includes(type) ||
+          (permissions[section]?.all == "*" || permissions[section]?.all?.includes(type)) &&
           permissions[section] != undefined
         )
           return true;
         return false;
       },
+    canAccessSection:
+      (state) =>
+      (section: PermissionSection): boolean => {
+        const permissions = state.permissions;
+        if (state.isOwner) return true;
+        if (permissions?.admin || permissions?.adminByOwner) return true;
+        if (permissions[section] != undefined) return true;
+        return false;
+      },
     isAdmin: (state) => (): boolean => {
       const permissions = state.permissions;
       if (state.isOwner) return true;
@@ -72,13 +80,20 @@ export const useAbilityStore = defineStore("ability", {
         if (type == "admin") return permissions?.admin ?? permissions?.adminByOwner ?? false;
         if (permissions?.admin || permissions?.adminByOwner) return true;
         if (
-          permissions[section]?.all == "*" ||
-          permissions[section]?.all?.includes(type) ||
+          (permissions[section]?.all == "*" || permissions[section]?.all?.includes(type)) &&
           permissions[section] != undefined
         )
           return true;
         return false;
       },
+    _canAccessSection:
+      () =>
+      (permissions: PermissionObject, section: PermissionSection): boolean => {
+        // ignores ownership
+        if (permissions?.admin || permissions?.adminByOwner) return true;
+        if (permissions[section] != undefined) return true;
+        return false;
+      },
   },
   actions: {
     setAbility(permissions: PermissionObject, isOwner: boolean) {

src/stores/admin/navigation.ts

@@ -48,7 +48,7 @@ export const useNavigationStore = defineStore("navigation", {
     updateTopLevel() {
       const abilityStore = useAbilityStore();
       this.topLevel = [
-        ...(abilityStore.canSection("read", "club")
+        ...(abilityStore.canAccessSection("club")
           ? [
               {
                 key: "club",
@@ -57,7 +57,7 @@ export const useNavigationStore = defineStore("navigation", {
               } as topLevelNavigationModel,
             ]
           : []),
-        ...(abilityStore.canSection("read", "configuration")
+        ...(abilityStore.canAccessSection("configuration")
           ? [
               {
                 key: "configuration",
@@ -66,7 +66,7 @@ export const useNavigationStore = defineStore("navigation", {
               } as topLevelNavigationModel,
             ]
           : []),
-        ...(abilityStore.canSection("read", "management")
+        ...(abilityStore.canAccessSection("management")
           ? [
               {
                 key: "management",
@@ -147,7 +147,8 @@ export const useNavigationStore = defineStore("navigation", {
         this.activeNavigationObject.main.findIndex((e) => e.key == this.activeLink) == -1 ||
         this.activeLink == "default"
       ) {
-        let link = this.activeNavigationObject.main[0].key;
+        let link = this.activeNavigationObject.main.filter((m) => !m.key.startsWith("divider"))[0].key;
+        this.activeLink = link;
         router.push({ name: `admin-${this.activeNavigation}-${link}` });
       }
     },

src/templates/Main.vue

@@ -16,10 +16,13 @@
   <div
     class="max-w-full w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
   >
+    <div v-if="topBar || title" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+      <h1 v-if="title" class="font-bold text-xl h-8 min-h-fit">{{ title }}</h1>
       <slot name="topBar"></slot>
+    </div>
     <div class="flex flex-col gap-2 grow py-5 overflow-hidden">
       <slot name="diffMain"></slot>
-      <div v-if="!diffMain" class="flex flex-col gap-2 grow px-7 overflow-y-scroll">
+      <div v-if="!diffMain" class="flex flex-col gap-2 grow px-7 overflow-y-auto">
         <slot name="main"></slot>
       </div>
     </div>
@@ -51,6 +54,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    title: {
+      type: String,
+      default: "",
+    },
   },
   computed: {
     ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
@@ -60,6 +67,9 @@ export default defineComponent({
     rootRoute() {
       return ((this.$route?.name as string) ?? "").split("-")[0];
     },
+    topBar() {
+      return this.$slots.topBar;
+    },
     diffMain() {
       return this.$slots.diffMain;
     },

src/views/account/Administration.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Administration übertragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Administration übertragen" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/LoginData.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Anmeldedaten" :useStagedOverviewLink="false">
     <template #diffMain>
       <Spinner v-if="loading" class="mx-auto" />
       <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">

src/views/account/Me.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mein Account</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mein Account" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/Permission.vue

@@ -1,18 +1,13 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Berechtigungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Berechtigungen" :useStagedOverviewLink="false">
     <template #main>
-      <Permission :permissions="permissions" :disableEdit="true" />
+      <Permission :permissions="permissions" disableEdit />
     </template>
   </MainTemplate>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Permission from "@/components/admin/Permission.vue";

src/views/admin/club/calendar/Calendar.vue

@@ -1,16 +1,10 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Kalender">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
       <div class="flex flex-row gap-2">
-          <PlusIcon
-            class="text-gray-500 h-5 w-5 cursor-pointer"
-            @click="select({ start: '', end: '', allDay: false })"
-          />
+        <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select({ start: '', end: '', allDay: false })" />
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">

src/views/admin/club/listprint/ListPrint.vue

@@ -1,12 +1,6 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Liste Drucken</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+  <MainTemplate title="Liste Drucken">
+    <template #main>
       <form
         class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
         @submit.prevent="sendPrintJob"
@@ -80,7 +74,6 @@
           <a ref="download" button primary class="w-fit!">download</a>
         </div>
       </div>
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/club/members/Member.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitglieder</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitglieder">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/members/MemberRouting.vue

@@ -4,12 +4,11 @@
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+      <h1 class="font-bold text-xl h-8 min-h-fit">
         {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
         {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
       </h1>
-
+      <div class="flex flex-row gap-2">
         <div title="Mitgliederliste drucken" @click="openPrintModal">
           <DocumentTextIcon class="w-5 h-5 cursor-pointer" />
         </div>

src/views/admin/club/members/Overview.vue

@@ -1,24 +0,0 @@
-<template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Übersicht</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 justify-center items-center h-full"></div>
-    </template>
-  </MainTemplate>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState } from "pinia";
-import MainTemplate from "@/templates/Main.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  computed: {},
-});
-</script>

src/views/admin/club/newsletter/Newsletter.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/newsletter/NewsletterRouting.vue

@@ -1,11 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="origin?.title">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}</h1>
       <NewsletterSyncing
         :executeSyncAll="executeSyncAll"
         @syncState="
@@ -14,7 +12,6 @@
           }
         "
       />
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">

src/views/admin/club/protocol/Protocol.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Protokolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Protokolle">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -1,11 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`${origin?.title}, ${origin?.date}`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
       <ProtocolSyncing
         :executeSyncAll="executeSyncAll"
         @syncState="
@@ -14,7 +12,6 @@
           }
         "
       />
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@@ -92,10 +89,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchProtocolByActiveId();
-    this.fetchProtocolAgenda()
-    this.fetchProtocolDecision()
-    this.fetchProtocolPresence()
-    this.fetchProtocolVoting()
+    this.fetchProtocolAgenda();
+    this.fetchProtocolDecision();
+    this.fetchProtocolPresence();
+    this.fetchProtocolVoting();
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {

src/views/admin/club/query/Builder.vue

@@ -1,12 +1,6 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Query Builder</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+  <MainTemplate title="Query Builder">
+    <template #main>
       <BuilderHost
         v-model="query"
         allow-predefined-select
@@ -51,7 +45,6 @@
           <p>{{ row }}</p>
         </template>
       </Pagination>
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/configuration/award/Award.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Auszeichnungen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/award/AwardEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Auszeichnung ${origin?.award} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/calendarType/CalendarType.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp</h1>
-      </div>
-    </template>
+  <MainTemplate title="Termintyp">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/calendarType/CalendarTypeEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Termintyp ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/communicationType/CommunicationType.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsarten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Kommunikationsarten">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Kommunikationsart ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/executivePosition/ExecutivePosition.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsämter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Vereinsämter">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Vereinsamt ${origin?.position} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/membershipStatus/MembershipStatus.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitgliedsstatus">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Mitgliedsstatus ${origin?.status} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter Konfiguration</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter Konfiguration">
     <template #main>
       <p>
         Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br />

src/views/admin/configuration/qualification/Qualification.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikationen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Qualifikationen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/qualification/QualificationEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Qualifikation ${origin?.qualification} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/queryStore/QueryStore.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">gespeicherte Abfragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="gespeicherte Abfragen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/Salutation.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede</h1>
-      </div>
-    </template>
+  <MainTemplate title="Anrede">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/SalutationEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Anrede ${origin?.salutation} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede {{ origin?.salutation }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/Template.vue

@@ -1,12 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Templates">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates</h1>
       <RouterLink :to="{ name: 'admin-configuration-template-info' }">
         <InformationCircleIcon class="text-gray-500 h-5 w-5" />
       </RouterLink>
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">

src/views/admin/configuration/template/TemplateEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Template ${origin?.template} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template {{ origin?.template }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/UsageInfo.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates - Verwendungsinformation</h1>
-      </div>
-    </template>
+  <MainTemplate title="Templates - Verwendungsinformation">
     <template #main>
       <p>
         Mit diesem Editor können Vorlagen erstellt werden, welche später dafür genutzt werden können, um pdfs zu drucken

src/views/admin/configuration/templateUsage/TemplateUsage.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template-Verwendung</h1>
-      </div>
-    </template>
+  <MainTemplate title="Template-Verwendung">
     <template #main>
       <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
     </template>

src/views/admin/management/backup/BackupRouting.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Backups</h1>
-      </div>
-    </template>
+  <MainTemplate title="Backups">
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">

src/views/admin/management/backup/GeneratedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/backup/UploadedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/role/Role.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rollen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Rollen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/role/RoleEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${origin?.role} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/role/RoleEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${role?.role} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/setting/Setting.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Einstellungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Einstellungen">
     <template #main>
       <p>Hinweis: Optionale Felder können leer gelassen werden und nutzen dann einen Fallback-Werte.</p>
       <ClubImageSetting />

src/views/admin/management/user/Invite.vue

@@ -1,17 +1,10 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="offene Einladungen">
     <template #headerInsert>
       <RouterLink :to="{ name: 'admin-management-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">offene Einladungen</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
+    <template #main>
       <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/management/user/User.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Benutzer</h1>
-      </div>
-    </template>
+  <MainTemplate title="Benutzer">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/user/UserEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/user/UserEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${user?.username} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <p>Hinweis: Berechtigungen von Nutzer und Rolle sind ergänzend.</p>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />

src/views/admin/management/user/UserEditRoles.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Rollen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/version/VersionDisplay.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Versions-Kontrolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Versions-Kontrolle" :useStagedOverviewLink="false">
     <template #diffMain>
       <div class="h-full flex flex-col px-7 overflow-hidden">
         <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">

src/views/admin/management/webapi/Webapi.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token</h1>
-      </div>
-    </template>
+  <MainTemplate title="Webapi-Token">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/webapi/WebapiEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${origin?.title} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ origin?.title }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/webapi/WebapiEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${webapi?.title} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ webapi?.title }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/docs/DocPage.vue

@@ -2,7 +2,7 @@
   <MainTemplate :useStagedOverviewLink="false">
     <!-- <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">{{page}}</h1>
+        <h1 class="font-bold text-xl h-8 min-h-fit">{{page}}</h1>
       </div>
     </template> -->
     <template #diffMain>

src/views/public/calendar/Calendar.vue

@@ -1,9 +1,7 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender" :showBack="false">
     <template #topBar>
-      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
-        <div class="grow"></div>
+      <div class="flex flex-row gap-2">
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
         <RouterLink :to="{ name: 'public-calendar-explain' }">
           <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />

src/views/public/calendar/CalendarExplain.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender-Erklärung - WebCal Kalendar einbinden" :showBack="false">
     <template #headerInsert>
       <RouterLink
         :to="{
@@ -10,11 +10,6 @@
         zum Kalender
       </RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
-      </div>
-    </template>
     <template #main>
       <div class="instruction">
         <h2>iOS: Webcal-Link einbinden</h2>