template usage to modules

src/components/admin/settings/templateUsage/TemplateUsageListItem.vue

@@ -0,0 +1,105 @@
+<template>
+  <form ref="form" class="flex flex-col h-fit w-full border border-primary rounded-md" @submit.prevent="updateUsage">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Templates zu "{{ templateUsage.scope }}" zuweisen</p>
+      <div class="flex flex-row justify-end w-16">
+        <button v-if="status == null" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
+          <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
+        </button>
+        <Spinner v-else-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+        <button type="button" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
+          <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-col p-2 gap-2">
+      <div class="flex flex-row gap-2 items-center">
+        <p class="min-w-16">Kopfzeile:</p>
+        <select ref="header" id="header" :value="templateUsage.header?.id ?? 'def'">
+          <option value="def">Standart-Vorlage verwenden</option>
+          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+        </select>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <p class="min-w-16">Hauptteil:</p>
+        <select ref="body" id="body" :value="templateUsage.body?.id ?? 'def'">
+          <option value="def">Standart-Vorlage verwenden</option>
+          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+        </select>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <p class="min-w-16">Fußzeile:</p>
+        <select ref="footer" id="footer" :value="templateUsage.footer?.id ?? 'def'">
+          <option value="def">Standart-Vorlage verwenden</option>
+          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+        </select>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon } from "@heroicons/vue/24/outline";
+import type { TemplateUsageViewModel } from "../../../../viewmodels/admin/templateUsage.models";
+import { useTemplateStore } from "../../../../stores/admin/template";
+import { useTemplateUsageStore } from "../../../../stores/admin/templateUsage";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    templateUsage: { type: Object as PropType<TemplateUsageViewModel>, default: {} },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useTemplateStore, ["templates"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useTemplateUsageStore, ["updateTemplateUsage"]),
+    updateUsage(e: any) {
+      const fromData = e.target.elements;
+      const headerId = fromData.header.value === "def" ? null : fromData.header.value;
+      const bodyId = fromData.body.value === "def" ? null : fromData.body.value;
+      const footerId = fromData.footer.value === "def" ? null : fromData.footer.value;
+
+      this.updateTemplateUsage({
+        scope: this.templateUsage.scope,
+        headerId: headerId,
+        bodyId: bodyId,
+        footerId: footerId,
+      })
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+    resetForm() {
+      (this.$refs.header as HTMLSelectElement).value = String(this.templateUsage.header?.id ?? "def");
+      (this.$refs.body as HTMLSelectElement).value = String(this.templateUsage.body?.id ?? "def");
+      (this.$refs.footer as HTMLSelectElement).value = String(this.templateUsage.footer?.id ?? "def");
+    },
+  },
+});
+</script>

src/router/adminGuard.ts

@@ -19,7 +19,7 @@ export async function abilityAndNavUpdate(to: any, from: any, next: any) {
     next();
   } else {
     NProgress.done();
-    next(false);
+    next({ name: "admin-default" });
   }
 }
 

src/router/index.ts

@@ -431,6 +431,13 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "template-usage",
+              name: "admin-settings-template_usage",
+              component: () => import("@/views/admin/settings/templateUsage/TemplateUsage.vue"),
+              meta: { type: "read", section: "settings", module: "template_usage" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -77,8 +77,10 @@ export const useNavigationStore = defineStore("navigation", {
             ]
           : []),
       ];
-      if (this.topLevel.findIndex((e) => e.key == this.activeNavigation) == -1 && !first)
+      if (this.topLevel.findIndex((e) => e.key == this.activeNavigation) == -1) {
+        this.activeNavigation = this.topLevel[0]?.key ?? "club";
         router.push({ name: `admin-${this.topLevel[0]?.key ?? "club"}-default` });
+      }
     },
     updateNavigation(first: boolean = false) {
       const abilityStore = useAbilityStore();
@@ -113,7 +115,10 @@ export const useNavigationStore = defineStore("navigation", {
               ? [{ key: "calendar_type", title: "Terminarten" }]
               : []),
             ...(abilityStore.can("read", "settings", "query") ? [{ key: "query_store", title: "Query Store" }] : []),
-            ...(true ? [{ key: "template", title: "Templates" }] : []),
+            ...(abilityStore.can("read", "settings", "template") ? [{ key: "template", title: "Templates" }] : []),
+            ...(abilityStore.can("read", "settings", "template_usage")
+              ? [{ key: "template_usage", title: "Template-Verwendung" }]
+              : []),
           ],
         },
         user: {
@@ -124,8 +129,9 @@ export const useNavigationStore = defineStore("navigation", {
           ],
         },
       } as navigationModel;
-      if (this.activeNavigationObject.main.findIndex((e) => e.key == this.activeLink) == -1 && !first)
+      if (this.activeNavigationObject.main.findIndex((e) => e.key == this.activeLink) == -1) {
         router.push({ name: `admin-${this.activeNavigation}-default` });
+      }
     },
   },
 });

src/stores/admin/template.ts

@@ -1,12 +1,16 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import type { CreateTemplateViewModel, UpdateTemplateViewModel } from "../../viewmodels/admin/template.models";
+import type {
+  CreateTemplateViewModel,
+  TemplateViewModel,
+  UpdateTemplateViewModel,
+} from "../../viewmodels/admin/template.models";
 
 export const useTemplateStore = defineStore("template", {
   state: () => {
     return {
-      templates: [] as Array<any>,
+      templates: [] as Array<TemplateViewModel>,
       loading: "loading" as "loading" | "fetched" | "failed",
     };
   },

src/stores/admin/templateUsage.ts

@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import type { CreateTemplateViewModel, UpdateTemplateViewModel } from "../../viewmodels/admin/template.models";
+import type { TemplateUsageViewModel, UpdateTemplateUsageViewModel } from "../../viewmodels/admin/templateUsage.models";
+
+export const useTemplateUsageStore = defineStore("templateUsage", {
+  state: () => {
+    return {
+      templateUsages: [] as Array<TemplateUsageViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchTemplateUsages() {
+      this.loading = "loading";
+      http
+        .get("/admin/templateusage")
+        .then((result) => {
+          this.templateUsages = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async updateTemplateUsage(templateUsage: UpdateTemplateUsageViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/templateusage/${templateUsage.scope}`, {
+        headerId: templateUsage.headerId,
+        bodyId: templateUsage.bodyId,
+        footerId: templateUsage.footerId,
+      });
+      this.fetchTemplateUsages();
+      return result;
+    },
+  },
+});

src/types/permissionTypes.ts

@@ -15,7 +15,8 @@ export type PermissionModule =
   | "role"
   | "query"
   | "query_store"
-  | "template";
+  | "template"
+  | "template_usage";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -55,6 +56,7 @@ export const permissionModules: Array<PermissionModule> = [
   "query",
   "query_store",
   "template",
+  "template_usage",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
@@ -68,6 +70,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "calendar_type",
     "query_store",
     "template",
+    "template_usage",
   ],
   user: ["user", "role"],
 };

src/viewmodels/admin/templateUsage.models.ts

@@ -0,0 +1,15 @@
+import type { PermissionModule } from "../../types/permissionTypes";
+
+export interface TemplateUsageViewModel {
+  scope: PermissionModule;
+  header: { id: number; template: string } | null;
+  body: { id: number; template: string } | null;
+  footer: { id: number; template: string } | null;
+}
+
+export interface UpdateTemplateUsageViewModel {
+  scope: PermissionModule;
+  headerId: number | null;
+  bodyId: number | null;
+  footerId: number | null;
+}

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

@@ -0,0 +1,37 @@
+<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>
+    <template #main>
+      <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useTemplateUsageStore } from "@/stores/admin/templateUsage";
+import TemplateUsageListItem from "../../../../components/admin/settings/templateUsage/TemplateUsageListItem.vue";
+import { useTemplateStore } from "../../../../stores/admin/template";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useTemplateUsageStore, ["templateUsages"]),
+  },
+  mounted() {
+    this.fetchTemplateUsages();
+    this.fetchTemplates();
+  },
+  methods: {
+    ...mapActions(useTemplateUsageStore, ["fetchTemplateUsages"]),
+    ...mapActions(useTemplateStore, ["fetchTemplates"]),
+  },
+});
+</script>