Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

template storing

Browse source
This commit is contained in:
Julian Krauser 2024-12-22 10:29:31 +01:00
parent 467dfd8c1b
commit 78a9d206c3
11 changed files with 581 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/components/admin/settings/template/CreateTemplateModal.vue Normal file
View file

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

73
src/components/admin/settings/template/DeleteTemplateModal.vue Normal file
View file

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

54
src/components/admin/settings/template/TemplateListItem.vue Normal file
View file

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

72
src/helpers/unlayerEditor.ts
View file

@ -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,
};
}

14
src/router/index.ts
View file

@ -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,
},
],

55
src/stores/admin/template.ts Normal file
View file

@ -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;
},
},
});

5
src/types/permissionTypes.ts
View file

@ -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"],
};

24
src/viewmodels/admin/template.models.ts Normal file
View file

@ -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;
}

86
src/views/admin/settings/template/Template.vue
View file

@ -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")))
);
},
},
});

158
src/views/admin/settings/template/TemplateEdit.vue Normal file
View file

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

24
src/views/admin/settings/template/UsageInfo.vue Normal file
View file

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