diff --git a/index.html b/index.html index 28cd04b..c8331c5 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Mitgliederverwaltung diff --git a/package-lock.json b/package-lock.json index 33b0fc3..4e27f60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ "@heroicons/vue": "^2.1.5", "@vueup/vue-quill": "^1.2.0", "axios": "^0.26.1", + "grapesjs": "^0.22.4", + "grapesjs-preset-newsletter": "^1.0.2", "jwt-decode": "^4.0.0", "lodash.clonedeep": "^4.5.0", "lodash.difference": "^4.5.0", @@ -31,7 +33,6 @@ "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": { @@ -3074,6 +3075,16 @@ "integrity": "sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==", "dev": true }, + "node_modules/@types/backbone": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@types/backbone/-/backbone-1.4.15.tgz", + "integrity": "sha512-WWeKtYlsIMtDyLbbhkb96taJMEbfQBnuz7yw1u0pkphCOtksemoWhIXhK74VRCY9hbjnsH3rsJu2uUiFtnsEYg==", + "license": "MIT", + "dependencies": { + "@types/jquery": "*", + "@types/underscore": "*" + } + }, "node_modules/@types/eslint": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.0.tgz", @@ -3090,6 +3101,15 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/@types/jquery": { + "version": "3.5.32", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz", + "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==", + "license": "MIT", + "dependencies": { + "@types/sizzle": "*" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -3179,12 +3199,24 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "dev": true }, + "node_modules/@types/sizzle": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz", + "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==", + "license": "MIT" + }, "node_modules/@types/trusted-types": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "dev": true }, + "node_modules/@types/underscore": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.13.0.tgz", + "integrity": "sha512-L6LBgy1f0EFQZ+7uSA57+n2g/s4Qs5r06Vwrwn0/nuK1de+adz00NWaztRQ30aEqw5qOaWbPI8u2cGQ52lj6VA==", + "license": "MIT" + }, "node_modules/@types/uuid": { "version": "9.0.8", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", @@ -4020,6 +4052,26 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/backbone": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.4.1.tgz", + "integrity": "sha512-ADy1ztN074YkWbHi8ojJVFe3vAanO/lrzMGZWUClIP7oDD/Pjy2vrASraUP+2EVCfIiTtCW4FChVow01XneivA==", + "license": "MIT", + "dependencies": { + "underscore": ">=1.8.3" + } + }, + "node_modules/backbone-undo": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/backbone-undo/-/backbone-undo-0.2.6.tgz", + "integrity": "sha512-AsfpNiljLXlk7TcffDUu3EAUq7CxWbyTNwARWrql5XTzN4vh6WzEEBZYaKK4kTTz+iW1tSzqUooaGRIwO83kWA==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "license": "MIT", + "dependencies": { + "backbone": ">=1.0.0", + "underscore": ">=1.4.4" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -4384,6 +4436,18 @@ "node": ">=0.8" } }, + "node_modules/codemirror": { + "version": "5.63.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.63.0.tgz", + "integrity": "sha512-KlLWRPggDg2rBD1Mx7/EqEhaBdy+ybBCVh/efgjBDsPpMeEu6MbTAJzIT4TuCzvmbTEgvKOGzVT6wdBTNusqrg==", + "license": "MIT" + }, + "node_modules/codemirror-formatting": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/codemirror-formatting/-/codemirror-formatting-1.0.0.tgz", + "integrity": "sha512-br9yM6eJI3pJHekEnoyHaBEb1B7XxxDjju+vRyBe8QGLp5saTIXXkZ+eFCTqXSAtI8QEZDFVEX2/SOjH2sVWRQ==", + "license": "MIT" + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -5890,6 +5954,28 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "dev": true }, + "node_modules/grapesjs": { + "version": "0.22.4", + "resolved": "https://registry.npmjs.org/grapesjs/-/grapesjs-0.22.4.tgz", + "integrity": "sha512-4ea7T5FguyPC2fLytpSBgPXcSGreRKKisknXUbsgHBCzv4G11Z0oBJNM5jRucupBr2CRxt/3U2zixeEHEisfbw==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/backbone": "1.4.15", + "backbone": "1.4.1", + "backbone-undo": "0.2.6", + "codemirror": "5.63.0", + "codemirror-formatting": "1.0.0", + "html-entities": "~1.4.0", + "promise-polyfill": "8.3.0", + "underscore": "1.13.1" + } + }, + "node_modules/grapesjs-preset-newsletter": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/grapesjs-preset-newsletter/-/grapesjs-preset-newsletter-1.0.2.tgz", + "integrity": "sha512-z8KJ1ZrTXfASSJZ/tHOcnpcWu4AMr2F/ZfQit+QjimNi3UGowwl7+Yjefuh3R7lbDTrXMMaxhCannCaJo/kPJw==", + "license": "BSD-3-Clause" + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -5988,6 +6074,12 @@ "dev": true, "license": "MIT" }, + "node_modules/html-entities": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz", + "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==", + "license": "MIT" + }, "node_modules/html-tags": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", @@ -7826,6 +7918,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/promise-polyfill": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz", + "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==", + "license": "MIT" + }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -9331,6 +9429,12 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/underscore": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz", + "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==", + "license": "MIT" + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", @@ -9411,12 +9515,6 @@ "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", @@ -9707,15 +9805,6 @@ } } }, - "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 0373442..dde1382 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,8 @@ "@heroicons/vue": "^2.1.5", "@vueup/vue-quill": "^1.2.0", "axios": "^0.26.1", + "grapesjs": "^0.22.4", + "grapesjs-preset-newsletter": "^1.0.2", "jwt-decode": "^4.0.0", "lodash.clonedeep": "^4.5.0", "lodash.difference": "^4.5.0", @@ -46,7 +48,6 @@ "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 deleted file mode 100644 index 8533f1a..0000000 --- a/public/unlayerTool.js +++ /dev/null @@ -1,51 +0,0 @@ -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/grapesEditor.ts b/src/helpers/grapesEditor.ts new file mode 100644 index 0000000..f843d4f --- /dev/null +++ b/src/helpers/grapesEditor.ts @@ -0,0 +1,49 @@ +import type { Editor } from "grapesjs"; + +export function configureEditor(editor: Editor): void { + editor.Panels.getPanel("devices-c")?.set("visible", false); + editor.Panels.removeButton("devices-c", "set-device-mobile"); + editor.Panels.removeButton("devices-c", "set-device-desktop"); + editor.Panels.removeButton("views", "open-tm"); + editor.Panels.removeButton("options", "export-template"); + editor.Panels.removeButton("options", "preview"); + // editor.Panels.removeButton("options", "fullscreen"); + editor.Panels.removeButton("options", "gjs-open-import-template"); + editor.Panels.removeButton("options", "gjs-toggle-images"); + editor.BlockManager.remove("button"); + editor.BlockManager.remove("image"); + editor.BlockManager.remove("link-block"); + editor.BlockManager.remove("list-items"); + editor.BlockManager.remove("grid-items"); + editor.BlockManager.remove("sect37"); + editor.BlockManager.remove("text-sect"); + + editor.DomComponents.addType("heading", { + model: { + defaults: { + tagName: "h1", + content: "Heading", + }, + }, + isComponent(el) { + return el.tagName === "H1"; + }, + }); + editor.BlockManager.add("heading-block", { + label: "Heading", + content: { type: "heading" }, + category: "Text", + media: ` + + + + `, + }); + editor.BlockManager.get("text").set("category", "Text"); + editor.BlockManager.get("quote").set("category", "Text"); + editor.BlockManager.get("link").set("category", "Text"); + editor.BlockManager.get("sect100").set("category", "Struktur"); + editor.BlockManager.get("sect50").set("category", "Struktur"); + editor.BlockManager.get("sect30").set("category", "Struktur"); + editor.BlockManager.get("divider").set("category", "Struktur"); +} diff --git a/src/helpers/unlayerEditor.ts b/src/helpers/unlayerEditor.ts deleted file mode 100644 index 3fd1871..0000000 --- a/src/helpers/unlayerEditor.ts +++ /dev/null @@ -1,100 +0,0 @@ -import type { EmailEditor } from "vue-email-editor"; -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"], -}; - -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/stores/admin/template.ts b/src/stores/admin/template.ts index 1dd0edc..58ef452 100644 --- a/src/stores/admin/template.ts +++ b/src/stores/admin/template.ts @@ -39,9 +39,7 @@ export const useTemplateStore = defineStore("template", { template: template.template, description: template.description, design: template.design, - headerHTML: template.headerHTML, - bodyHTML: template.bodyHTML, - footerHTML: template.footerHTML, + html: template.html, }); this.fetchTemplates(); return result; diff --git a/src/viewmodels/admin/template.models.ts b/src/viewmodels/admin/template.models.ts index 65833c3..c470fd1 100644 --- a/src/viewmodels/admin/template.models.ts +++ b/src/viewmodels/admin/template.models.ts @@ -3,9 +3,7 @@ export interface TemplateViewModel { template: string; description: string | null; design: object; - headerHTML: string; - bodyHTML: string; - footerHTML: string; + html: string; } export interface CreateTemplateViewModel { @@ -18,7 +16,5 @@ export interface UpdateTemplateViewModel { template: string; description: string | null; design: object; - headerHTML: string; - bodyHTML: string; - footerHTML: string; + html: string; } diff --git a/src/views/admin/settings/template/TemplateEdit.vue b/src/views/admin/settings/template/TemplateEdit.vue index 50c0602..108648f 100644 --- a/src/views/admin/settings/template/TemplateEdit.vue +++ b/src/views/admin/settings/template/TemplateEdit.vue @@ -12,11 +12,11 @@

laden fehlgeschlagen

-
+
@@ -26,21 +26,11 @@
-
- -
-
-

- 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. -

+
+

Lade Template-Anzeige

+
+