#15-messages #22
9 changed files with 208 additions and 209 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mitgliederverwaltung</title>
|
||||
</head>
|
||||
|
|
|
|||
121
package-lock.json
generated
121
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 `<div style="color: ${values.textColor}; background-color: ${values.backgroundColor};">I am a custom tool.</div>`;
|
||||
},
|
||||
}),
|
||||
exporters: {
|
||||
web: function (values) {
|
||||
return `<div style="color: ${values.textColor}; background-color: ${values.backgroundColor};">I am a custom tool.</div>`;
|
||||
},
|
||||
email: function (values) {
|
||||
return `<div style="color: ${values.textColor}; background-color: ${values.backgroundColor};">I am a custom tool.</div>`;
|
||||
},
|
||||
},
|
||||
head: {
|
||||
css: function (values) {},
|
||||
js: function (values) {},
|
||||
},
|
||||
},
|
||||
validator(data) {
|
||||
const { defaultErrors, values } = data;
|
||||
return [];
|
||||
},
|
||||
});
|
||||
49
src/helpers/grapesEditor.ts
Normal file
49
src/helpers/grapesEditor.ts
Normal file
|
|
@ -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: `
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z"></path>
|
||||
</svg>
|
||||
`,
|
||||
});
|
||||
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");
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<form
|
||||
v-else-if="template != null"
|
||||
v-show="loading == 'fetched' && 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 v-if="template != null" 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" />
|
||||
|
|
@ -26,21 +26,11 @@
|
|||
<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 v-if="contextLoading == 'loading'" class="flex flex-col gap-2 items-center">
|
||||
<p>Lade Template-Anzeige</p>
|
||||
<Spinner />
|
||||
</div>
|
||||
<div ref="grapesEditor" id="grapesEditor"></div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<button primary-outline type="reset" class="!w-fit" :disabled="status == 'loading'" @click="resetForm">
|
||||
verwerfen
|
||||
|
|
@ -63,12 +53,14 @@ 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 { configureEditor } from "@/helpers/grapesEditor";
|
||||
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";
|
||||
import grapesjs, { Editor } from "grapesjs";
|
||||
import grapesNewsletter from "grapesjs-preset-newsletter";
|
||||
import "grapesjs/dist/css/grapes.min.css";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -83,6 +75,8 @@ export default defineComponent({
|
|||
origin: null as null | TemplateViewModel,
|
||||
template: null as null | TemplateViewModel,
|
||||
timeout: null as any,
|
||||
editor: null as null | Editor,
|
||||
contextLoading: "loading" as "loading" | "loaded" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -97,28 +91,50 @@ export default defineComponent({
|
|||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
localStorage.removeItem("gjsProject");
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useTemplateStore, ["fetchTemplateById", "updateActiveTemplate"]),
|
||||
editorReady() {
|
||||
configureEditor(this.$refs.emailEditor as typeof EmailEditor);
|
||||
initEditor() {
|
||||
this.editor = grapesjs.init({
|
||||
container: "#grapesEditor",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
fromElement: true,
|
||||
deviceManager: {
|
||||
devices: [
|
||||
{
|
||||
id: "tablet",
|
||||
name: "Tablet",
|
||||
width: "768px",
|
||||
widthMedia: "992px",
|
||||
},
|
||||
loadBlank() {
|
||||
loadEditor(this.$refs.emailEditor as typeof EmailEditor);
|
||||
],
|
||||
},
|
||||
plugins: [grapesNewsletter],
|
||||
});
|
||||
configureEditor(this.editor);
|
||||
},
|
||||
loadDesign() {
|
||||
loadEditor(this.$refs.emailEditor as typeof EmailEditor, this.origin?.design);
|
||||
this.contextLoading = "loading";
|
||||
this.editor?.destroy();
|
||||
localStorage.setItem("gjsProject", JSON.stringify(this.origin?.design ?? {}));
|
||||
setTimeout(() => {
|
||||
this.initEditor();
|
||||
this.contextLoading = "loaded";
|
||||
}, 1000);
|
||||
},
|
||||
resetForm() {
|
||||
this.template = cloneDeep(this.origin);
|
||||
this.loadDesign();
|
||||
},
|
||||
fetchItem() {
|
||||
fetchItem(fromSave: boolean = false) {
|
||||
this.fetchTemplateById(parseInt(this.id ?? ""))
|
||||
.then((result) => {
|
||||
this.template = result.data;
|
||||
this.origin = cloneDeep(result.data);
|
||||
this.loading = "fetched";
|
||||
if (!fromSave) this.loadDesign();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
|
|
@ -127,21 +143,22 @@ export default defineComponent({
|
|||
},
|
||||
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;
|
||||
const htmlContent = this.editor?.getHtml();
|
||||
const cssContent = this.editor?.getCss();
|
||||
const html = `<style>${cssContent}</style>${htmlContent}`;
|
||||
|
||||
let updateTemplate: UpdateTemplateViewModel = {
|
||||
id: this.template.id,
|
||||
template: formData.template.value,
|
||||
description: formData.description.value,
|
||||
design,
|
||||
headerHTML,
|
||||
bodyHTML,
|
||||
footerHTML,
|
||||
design: this.editor?.getProjectData() ?? {},
|
||||
html,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.updateActiveTemplate(updateTemplate)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.fetchItem(true);
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue