From 78a9d206c3e6c5e1a803ec6771762faf5c9dcef5 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 22 Dec 2024 10:29:31 +0100
Subject: [PATCH] template storing

---
 .../settings/template/CreateTemplateModal.vue |  79 +++++++++
 .../settings/template/DeleteTemplateModal.vue |  73 ++++++++
 .../settings/template/TemplateListItem.vue    |  54 ++++++
 src/helpers/unlayerEditor.ts                  |  72 ++++++++
 src/router/index.ts                           |  14 +-
 src/stores/admin/template.ts                  |  55 ++++++
 src/types/permissionTypes.ts                  |   5 +-
 src/viewmodels/admin/template.models.ts       |  24 +++
 .../admin/settings/template/Template.vue      |  86 ++++------
 .../admin/settings/template/TemplateEdit.vue  | 158 ++++++++++++++++++
 .../admin/settings/template/UsageInfo.vue     |  24 +++
 11 files changed, 581 insertions(+), 63 deletions(-)
 create mode 100644 src/components/admin/settings/template/CreateTemplateModal.vue
 create mode 100644 src/components/admin/settings/template/DeleteTemplateModal.vue
 create mode 100644 src/components/admin/settings/template/TemplateListItem.vue
 create mode 100644 src/stores/admin/template.ts
 create mode 100644 src/viewmodels/admin/template.models.ts
 create mode 100644 src/views/admin/settings/template/TemplateEdit.vue
 create mode 100644 src/views/admin/settings/template/UsageInfo.vue

diff --git a/src/components/admin/settings/template/CreateTemplateModal.vue b/src/components/admin/settings/template/CreateTemplateModal.vue
new file mode 100644
index 0000000..4f10366
--- /dev/null
+++ b/src/components/admin/settings/template/CreateTemplateModal.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Template erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="template">Bezeichnung</label>
+        <input type="text" id="template" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <input type="text" id="description" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useTemplateStore } from "@/stores/admin/template";
+import type { CreateTemplateViewModel } from "@/viewmodels/admin/template.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useTemplateStore, ["createTemplate"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createTemplate: CreateTemplateViewModel = {
+        template: formData.template.value,
+        description: formData.description.value,
+      };
+      this.createTemplate(createTemplate)
+        .then((res) => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+            this.$router.push({ name: "admin-settings-template-edit", params: { id: res.data } });
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/settings/template/DeleteTemplateModal.vue b/src/components/admin/settings/template/DeleteTemplateModal.vue
new file mode 100644
index 0000000..cd42728
--- /dev/null
+++ b/src/components/admin/settings/template/DeleteTemplateModal.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Auszeichnung {{ template?.template }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+import { useTemplateStore } from "../../../../stores/admin/template";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useTemplateStore, ["templates"]),
+    template() {
+      return this.templates.find((t) => t.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useTemplateStore, ["deleteTemplate"]),
+    triggerDelete() {
+      this.deleteTemplate(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/settings/template/TemplateListItem.vue b/src/components/admin/settings/template/TemplateListItem.vue
new file mode 100644
index 0000000..a9ed5d4
--- /dev/null
+++ b/src/components/admin/settings/template/TemplateListItem.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ template.template }}</p>
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'settings', 'template')"
+          :to="{ name: 'admin-settings-template-edit', params: { id: template.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'settings', 'template')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ template.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { QualificationViewModel } from "@/viewmodels/admin/qualification.models";
+import type { TemplateViewModel } from "../../../../viewmodels/admin/template.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    template: { type: Object as PropType<TemplateViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/template/DeleteTemplateModal.vue"))),
+        this.template.id
+      );
+    },
+  },
+});
+</script>
diff --git a/src/helpers/unlayerEditor.ts b/src/helpers/unlayerEditor.ts
index 1b5afb7..3fd1871 100644
--- a/src/helpers/unlayerEditor.ts
+++ b/src/helpers/unlayerEditor.ts
@@ -1,3 +1,4 @@
+import type { EmailEditor } from "vue-email-editor";
 import type { EmailEditorProps } from "vue-email-editor/dist/components/types";
 
 export const options: EmailEditorProps["options"] = {
@@ -26,3 +27,74 @@ export const options: EmailEditorProps["options"] = {
   },
   customJS: [window.location.origin + "/unlayerTool.js"],
 };
+
+export function configureEditor(editor: typeof EmailEditor): void {
+  editor.editor.setBodyValues({
+    contentWidth: "100%",
+    backgroundColor: "#ffffff",
+    linkStyle: {
+      linkColor: "#990b00",
+      linkHoverColor: "#bb1e10",
+      linkUnderline: false,
+      linkHoverUnderline: false,
+    },
+  });
+}
+
+export function loadEditor(editor: typeof EmailEditor, design: object | undefined = undefined): void {
+  if (design === undefined) {
+    editor.editor.loadBlank();
+  } else {
+    editor.editor.loadDesign(design);
+  }
+}
+
+export function exportEditor(editor: typeof EmailEditor): {
+  design: object;
+  headerHTML: string;
+  bodyHTML: string;
+  footerHTML: string;
+} {
+  let savedDesign: any = undefined;
+  let savedHeader: string = "";
+  let savedBody: string = "";
+  let savedFooter: string = "";
+
+  editor.editor.saveDesign((design: any) => {
+    savedDesign = design;
+  });
+
+  editor.editor.exportHtml(
+    (data: any) => {
+      savedHeader = data;
+    },
+    {
+      minify: true,
+      onlyHeader: true,
+    }
+  );
+  editor.editor.exportHtml(
+    (data: any) => {
+      savedBody = data;
+    },
+    {
+      minify: true,
+    }
+  );
+  editor.editor.exportHtml(
+    (data: any) => {
+      savedFooter = data;
+    },
+    {
+      minify: true,
+      onlyFooter: true,
+    }
+  );
+
+  return {
+    design: savedDesign,
+    headerHTML: savedHeader,
+    bodyHTML: savedBody,
+    footerHTML: savedFooter,
+  };
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index e0d4bd8..b520eeb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -407,7 +407,7 @@ const router = createRouter({
               path: "template",
               name: "admin-settings-template-route",
               component: () => import("@/views/RouterView.vue"),
-              // meta: { type: "read", section: "settings", module: "template" },
+              meta: { type: "read", section: "settings", module: "template" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
@@ -415,12 +415,18 @@ const router = createRouter({
                   name: "admin-settings-template",
                   component: () => import("@/views/admin/settings/template/Template.vue"),
                 },
+                {
+                  path: "info",
+                  name: "admin-settings-template-info",
+                  component: () => import("@/views/admin/settings/template/UsageInfo.vue"),
+                  props: true,
+                },
                 {
                   path: ":id/edit",
                   name: "admin-settings-template-edit",
-                  component: () => import("@/views/admin/settings/template/Template.vue"),
-                  // meta: { type: "update", section: "settings", module: "template" },
-                  // beforeEnter: [abilityAndNavUpdate],
+                  component: () => import("@/views/admin/settings/template/TemplateEdit.vue"),
+                  meta: { type: "update", section: "settings", module: "template" },
+                  beforeEnter: [abilityAndNavUpdate],
                   props: true,
                 },
               ],
diff --git a/src/stores/admin/template.ts b/src/stores/admin/template.ts
new file mode 100644
index 0000000..1dd0edc
--- /dev/null
+++ b/src/stores/admin/template.ts
@@ -0,0 +1,55 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import type { CreateTemplateViewModel, UpdateTemplateViewModel } from "../../viewmodels/admin/template.models";
+
+export const useTemplateStore = defineStore("template", {
+  state: () => {
+    return {
+      templates: [] as Array<any>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchTemplates() {
+      this.loading = "loading";
+      http
+        .get("/admin/template")
+        .then((result) => {
+          this.templates = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchTemplateById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/template/${id}`);
+    },
+    async createTemplate(template: CreateTemplateViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/template`, {
+        template: template.template,
+        description: template.description,
+      });
+      this.fetchTemplates();
+      return result;
+    },
+    async updateActiveTemplate(template: UpdateTemplateViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/template/${template.id}`, {
+        template: template.template,
+        description: template.description,
+        design: template.design,
+        headerHTML: template.headerHTML,
+        bodyHTML: template.bodyHTML,
+        footerHTML: template.footerHTML,
+      });
+      this.fetchTemplates();
+      return result;
+    },
+    async deleteTemplate(template: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/template/${template}`);
+      this.fetchTemplates();
+      return result;
+    },
+  },
+});
diff --git a/src/types/permissionTypes.ts b/src/types/permissionTypes.ts
index d5bb35e..62fbc51 100644
--- a/src/types/permissionTypes.ts
+++ b/src/types/permissionTypes.ts
@@ -14,7 +14,8 @@ export type PermissionModule =
   | "user"
   | "role"
   | "query"
-  | "query_store";
+  | "query_store"
+  | "template";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -53,6 +54,7 @@ export const permissionModules: Array<PermissionModule> = [
   "role",
   "query",
   "query_store",
+  "template",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
@@ -65,6 +67,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "membership_status",
     "calendar_type",
     "query_store",
+    "template",
   ],
   user: ["user", "role"],
 };
diff --git a/src/viewmodels/admin/template.models.ts b/src/viewmodels/admin/template.models.ts
new file mode 100644
index 0000000..65833c3
--- /dev/null
+++ b/src/viewmodels/admin/template.models.ts
@@ -0,0 +1,24 @@
+export interface TemplateViewModel {
+  id: number;
+  template: string;
+  description: string | null;
+  design: object;
+  headerHTML: string;
+  bodyHTML: string;
+  footerHTML: string;
+}
+
+export interface CreateTemplateViewModel {
+  template: string;
+  description: string | null;
+}
+
+export interface UpdateTemplateViewModel {
+  id: number;
+  template: string;
+  description: string | null;
+  design: object;
+  headerHTML: string;
+  bodyHTML: string;
+  footerHTML: string;
+}
diff --git a/src/views/admin/settings/template/Template.vue b/src/views/admin/settings/template/Template.vue
index 44ff19f..56cea4b 100644
--- a/src/views/admin/settings/template/Template.vue
+++ b/src/views/admin/settings/template/Template.vue
@@ -3,22 +3,20 @@
     <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-settings-template-info' }">
+          <InformationCircleIcon class="text-gray-500 h-5 w-5" />
+        </RouterLink>
       </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 grow pl-7">
-        <div class="flex flex-col gap-2 grow pr-7">
-          <EmailEditor
-            ref="emailEditor"
-            minHeight="100%"
-            :options="options"
-            @load="editorLoaded"
-            @ready="editorReady"
-          />
+        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+          <TemplateListItem v-for="template in templates" :key="template.id" :template="template" />
         </div>
         <div class="flex flex-row gap-4">
-          <button primary class="!w-fit" @click="saveDesign">Save Design</button>
-          <button primary-outline class="!w-fit" @click="loadBlank">leeren</button>
+          <button v-if="can('create', 'settings', 'template')" primary class="!w-fit" @click="openCreateModal">
+            Template erstellen
+          </button>
         </div>
       </div>
     </template>
@@ -26,61 +24,33 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
 import { mapState, mapActions } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
-import { EmailEditor } from "vue-email-editor";
-import { options } from "@/helpers/unlayerEditor";
+import TemplateListItem from "@/components/admin/settings/template/TemplateListItem.vue";
+import { useTemplateStore } from "@/stores/admin/template";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import { RouterLink } from "vue-router";
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
+  computed: {
+    ...mapState(useTemplateStore, ["templates"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchTemplates();
+  },
   methods: {
-    // called when the editor is created
-    editorLoaded() {
-      console.log("editorLoaded");
-      // Pass the template JSON here
-      // this.$refs.emailEditor.editor.loadDesign({});
-    },
-    // called when the editor has finished loading
-    editorReady() {
-      console.log("editorReady");
-      (this.$refs.emailEditor as typeof EmailEditor).editor.setBodyValues({
-        contentWidth: "100%",
-        backgroundColor: "#ffffff",
-        linkStyle: {
-          linkColor: "#990b00",
-          linkHoverColor: "#bb1e10",
-          linkUnderline: false,
-          linkHoverUnderline: false,
-        },
-      });
-    },
-    loadBlank() {
-      (this.$refs.emailEditor as typeof EmailEditor).editor.loadBlank();
-    },
-    loadDesign() {
-      (this.$refs.emailEditor as typeof EmailEditor).editor.loadDesign((design: any) => {
-        console.log("saveDesign", design);
-      });
-    },
-    saveDesign() {
-      (this.$refs.emailEditor as typeof EmailEditor).editor.saveDesign((design: any) => {
-        console.log("saveDesign", design);
-      });
-    },
-    exportHtml() {
-      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
-        minify: true,
-        onlyHeader: true,
-      });
-      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
-        minify: true,
-      });
-      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
-        minify: true,
-        onlyFooter: true,
-      });
+    ...mapActions(useTemplateStore, ["fetchTemplates"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/template/CreateTemplateModal.vue")))
+      );
     },
   },
 });
diff --git a/src/views/admin/settings/template/TemplateEdit.vue b/src/views/admin/settings/template/TemplateEdit.vue
new file mode 100644
index 0000000..50c0602
--- /dev/null
+++ b/src/views/admin/settings/template/TemplateEdit.vue
@@ -0,0 +1,158 @@
+<template>
+  <MainTemplate>
+    <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>
+      <form
+        v-else-if="template != null"
+        class="flex flex-col gap-4 py-2 w-full h-full mx-auto"
+        @submit.prevent="triggerUpdate"
+      >
+        <div class="flex flex-col xl:flex-row gap-4">
+          <div class="w-full">
+            <label for="template">Bezeichnung</label>
+            <input type="text" id="template" required v-model="template.template" />
+          </div>
+          <div class="w-full">
+            <label for="description">Beschreibung (optional)</label>
+            <input type="text" id="description" v-model="template.description" />
+          </div>
+        </div>
+        <div class="flex flex-col w-full grow max-xl:hidden">
+          <EmailEditor
+            ref="emailEditor"
+            minHeight="100%"
+            :options="options"
+            @ready="editorReady"
+            @load="loadDesign()"
+          />
+        </div>
+        <div class="px-7 xl:hidden">
+          <p>
+            Der externe Editor ist nicht auf kleine Auflösungen optimiert. Wechseln Sie auf ein Desktop-Gerät, einen
+            größeren Bildschirm oder ändern Sie die Skalierung dieser Seite.
+          </p>
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" :disabled="status == 'loading'" @click="resetForm">
+            verwerfen
+          </button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { RouterLink } from "vue-router";
+import { EmailEditor } from "vue-email-editor";
+import { configureEditor, exportEditor, loadEditor, options } from "@/helpers/unlayerEditor";
+import type { TemplateViewModel, UpdateTemplateViewModel } from "../../../../viewmodels/admin/template.models";
+import { useTemplateStore } from "../../../../stores/admin/template";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    id: String,
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | TemplateViewModel,
+      template: null as null | TemplateViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.template);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useTemplateStore, ["fetchTemplateById", "updateActiveTemplate"]),
+    editorReady() {
+      configureEditor(this.$refs.emailEditor as typeof EmailEditor);
+    },
+    loadBlank() {
+      loadEditor(this.$refs.emailEditor as typeof EmailEditor);
+    },
+    loadDesign() {
+      loadEditor(this.$refs.emailEditor as typeof EmailEditor, this.origin?.design);
+    },
+    resetForm() {
+      this.template = cloneDeep(this.origin);
+      this.loadDesign();
+    },
+    fetchItem() {
+      this.fetchTemplateById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.template = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          console.log(err);
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: any) {
+      if (this.template == null) return;
+      let { design, headerHTML, bodyHTML, footerHTML } = exportEditor(this.$refs.emailEditor as typeof EmailEditor);
+      let formData = e.target.elements;
+      let updateTemplate: UpdateTemplateViewModel = {
+        id: this.template.id,
+        template: formData.template.value,
+        description: formData.description.value,
+        design,
+        headerHTML,
+        bodyHTML,
+        footerHTML,
+      };
+      this.status = "loading";
+      this.updateActiveTemplate(updateTemplate)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
diff --git a/src/views/admin/settings/template/UsageInfo.vue b/src/views/admin/settings/template/UsageInfo.vue
new file mode 100644
index 0000000..7dc02b4
--- /dev/null
+++ b/src/views/admin/settings/template/UsageInfo.vue
@@ -0,0 +1,24 @@
+<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>
+    <template #main>
+      <p>
+        Mit diesem Editor können Vorlagen erstellt werden, welche später dafür genutzt werden können, um pdfs zu drucken
+        oder Mails zu versenden.
+      </p>
+      <p>
+        Es können Platzhalter in das Design integriert werden. Dort werden dann später Werte automatisch eingetragen.
+        Diese Werte stammen zum Beispiel aus dem Kalender oder aus Abfragen, welche mit dem Query-Builder erstellt
+        wurden.
+      </p>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>