diff --git a/package-lock.json b/package-lock.json index 06048b0..33b0fc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "fireportal-ui", + "name": "member-administration-ui", "version": "0.0.11", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "fireportal-ui", + "name": "member-administration-ui", "version": "0.0.11", "license": "GPL-3.0-only", "dependencies": { @@ -31,6 +31,7 @@ "socket.io-client": "^4.5.0", "uuid": "^9.0.0", "vue": "^3.4.29", + "vue-email-editor": "^2.1.4", "vue-router": "^4.3.3" }, "devDependencies": { @@ -9410,6 +9411,12 @@ "node": ">= 10.0.0" } }, + "node_modules/unlayer-types": { + "version": "1.188.0", + "resolved": "https://registry.npmjs.org/unlayer-types/-/unlayer-types-1.188.0.tgz", + "integrity": "sha512-tnn+FjUZv1qUOoRUYRFxSDz9kHfhy7dLxzMZgnU5+k6GDSBlpa8mA+r4+r0D83M+mUUd/XwuM+gvfRLGzrqZ+g==", + "license": "MIT" + }, "node_modules/upath": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", @@ -9700,6 +9707,15 @@ } } }, + "node_modules/vue-email-editor": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/vue-email-editor/-/vue-email-editor-2.1.4.tgz", + "integrity": "sha512-9H6P2zgjOx4XJmKyMb4ZzCpsnKAqFk74daD86l/MhUvucF/qizTMUhOFnIMU6u9jtiB64NFvPTTzkRTTYTGkFw==", + "dependencies": { + "unlayer-types": "latest", + "vue": "^3.2.13" + } + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/package.json b/package.json index 66fbfab..0373442 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "socket.io-client": "^4.5.0", "uuid": "^9.0.0", "vue": "^3.4.29", + "vue-email-editor": "^2.1.4", "vue-router": "^4.3.3" }, "devDependencies": { diff --git a/public/unlayerTool.js b/public/unlayerTool.js new file mode 100644 index 0000000..8533f1a --- /dev/null +++ b/public/unlayerTool.js @@ -0,0 +1,51 @@ +unlayer.registerTool({ + name: "my_tool", + label: "My Tool", + icon: "fa-smile", + // supportedDisplayModes: ["web", "email", "document"], + options: { + colors: { + // Property Group + title: "Colors", // Title for Property Group + position: 1, // Position of Property Group + options: { + textColor: { + // Property: textColor + label: "Text Color", // Label for Property + defaultValue: "#FF0000", + widget: "color_picker", // Property Editor Widget: color_picker + }, + backgroundColor: { + // Property: backgroundColor + label: "Background Color", // Label for Property + defaultValue: "#FF0000", + widget: "color_picker", // Property Editor Widget: color_picker + }, + }, + }, + }, + values: {}, + renderer: { + Viewer: unlayer.createViewer({ + render(values) { + return `
I am a custom tool.
`; + }, + }), + exporters: { + web: function (values) { + return `
I am a custom tool.
`; + }, + email: function (values) { + return `
I am a custom tool.
`; + }, + }, + head: { + css: function (values) {}, + js: function (values) {}, + }, + }, + validator(data) { + const { defaultErrors, values } = data; + return []; + }, +}); diff --git a/src/helpers/unlayerEditor.ts b/src/helpers/unlayerEditor.ts new file mode 100644 index 0000000..1b5afb7 --- /dev/null +++ b/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"], +}; diff --git a/src/router/index.ts b/src/router/index.ts index 777aa7c..e0d4bd8 100644 --- a/src/router/index.ts +++ b/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, + }, + ], + }, ], }, { diff --git a/src/stores/admin/navigation.ts b/src/stores/admin/navigation.ts index f14502b..4385a8f 100644 --- a/src/stores/admin/navigation.ts +++ b/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: { diff --git a/src/views/admin/settings/template/Template.vue b/src/views/admin/settings/template/Template.vue new file mode 100644 index 0000000..44ff19f --- /dev/null +++ b/src/views/admin/settings/template/Template.vue @@ -0,0 +1,87 @@ + + + + +