template editor

src/helpers/unlayerEditor.ts

@@ -0,0 +1,28 @@
+import type { EmailEditorProps } from "vue-email-editor/dist/components/types";
+
+export const options: EmailEditorProps["options"] = {
+  tools: {
+    image: {
+      enabled: false,
+    },
+    menu: {
+      enabled: false,
+    },
+    button: {
+      enabled: false,
+    },
+  },
+  displayMode: "document",
+  appearance: {
+    theme: "light",
+    panels: {
+      tools: {
+        dock: "left",
+      },
+    },
+  },
+  features: {
+    preview: false,
+  },
+  customJS: [window.location.origin + "/unlayerTool.js"],
+};

src/router/index.ts

@@ -403,6 +403,28 @@ const router = createRouter({
               meta: { type: "read", section: "settings", module: "query_store" },
               beforeEnter: [abilityAndNavUpdate],
             },
+            {
+              path: "template",
+              name: "admin-settings-template-route",
+              component: () => import("@/views/RouterView.vue"),
+              // meta: { type: "read", section: "settings", module: "template" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-settings-template",
+                  component: () => import("@/views/admin/settings/template/Template.vue"),
+                },
+                {
+                  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],
+                  props: true,
+                },
+              ],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -113,6 +113,7 @@ 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" }] : []),
           ],
         },
         user: {

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

@@ -0,0 +1,87 @@
+<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</h1>
+      </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>
+        <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>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { EmailEditor } from "vue-email-editor";
+import { options } from "@/helpers/unlayerEditor";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  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,
+      });
+    },
+  },
+});
+</script>