inital commit

2024-06-15 23:01:46 +02:00
parent 1b7fefe381
commit 61653ff407
105 changed files with 7805 additions and 524 deletions
--- a/src/content/admin/EditPagesComponent.vue
+++ b/src/content/admin/EditPagesComponent.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="edit-pages">
+    <h2>Webseiten bearbeiten</h2>
+    <div>
+      <label for="page-select">Wähle eine Seite:</label>
+      <select id="page-select" v-model="selectedPage" @change="loadPageContent">
+        <option v-for="page in pages" :key="page.link" :value="page.link">{{ page.name }}</option>
+      </select>
+    </div>
+    <div class="toolbar">
+      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+      <button @click="editor.chain().focus().toggleBold().run()">Fett</button>
+      <button @click="editor.chain().focus().toggleItalic().run()">Kursiv</button>
+      <button @click="editor.chain().focus().toggleUnderline().run()">Unterstrichen</button>
+      <button @click="editor.chain().focus().toggleStrike().run()">Durchgestrichen</button>
+      <button
+        @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">Tabelle</button>
+      <button @click="editor.chain().focus().toggleBulletList().run()">Liste</button>
+      <button @click="editor.chain().focus().toggleOrderedList().run()">Nummerierte Liste</button>
+    </div>
+    <div class="table-toolbar">
+      <button @click="editor.chain().focus().addColumnBefore().run()">Spalte davor einfügen</button>
+      <button @click="editor.chain().focus().addColumnAfter().run()">Spalte danach einfügen</button>
+      <button @click="editor.chain().focus().addRowBefore().run()">Zeile davor einfügen</button>
+      <button @click="editor.chain().focus().addRowAfter().run()">Zeile danach einfügen</button>
+      <button @click="editor.chain().focus().deleteColumn().run()">Spalte löschen</button>
+      <button @click="editor.chain().focus().deleteRow().run()">Zeile löschen</button>
+      <button @click="editor.chain().focus().toggleHeaderColumn().run()">Header-Spalte umschalten</button>
+      <button @click="editor.chain().focus().toggleHeaderRow().run()">Header-Zeile umschalten</button>
+      <button @click="editor.chain().focus().toggleHeaderCell().run()">Header-Zelle umschalten</button>
+    </div>
+    <div class="additional-toolbar">
+      <button>Events</button>
+      <button>Kontaktpersonen</button>
+      <button>Institutionen</button>
+      <button>Gottesdienste</button>
+    </div>
+    <div :class="['htmleditor']">
+      <EditorContent :editor="editor" />
+    </div>
+    <button @click="savePageContent">Speichern</button>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import axios from '../../axios';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import Bold from '@tiptap/extension-bold';
+import Italic from '@tiptap/extension-italic';
+import Underline from '@tiptap/extension-underline';
+import Strike from '@tiptap/extension-strike';
+import BulletList from '@tiptap/extension-bullet-list';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Heading from '@tiptap/extension-heading';
+import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell'; // Importiere die angepasste Erweiterung
+
+export default {
+  name: 'EditPagesComponent',
+  components: {
+    EditorContent,
+  },
+  setup() {
+    const store = useStore();
+    const pages = ref([]);
+    const selectedPage = ref('');
+    const pageHtmlContent = computed(() => store.state.pageContent);
+
+    const editor = useEditor({
+      extensions: [
+        StarterKit,
+        Table.configure({
+          resizable: true,
+        }),
+        TableRow,
+        CustomTableCell,
+        CustomTableHeader,
+        Bold,
+        Italic,
+        Underline,
+        Strike,
+        BulletList,
+        OrderedList,
+        Heading.configure({
+          levels: [1, 2, 3],
+        }),
+      ],
+      content: '',
+      onUpdate: ({ editor }) => {
+        store.commit('UPDATE_PAGE_CONTENT', editor.getHTML());
+      },
+    });
+
+    const fetchPages = async () => {
+      try {
+        const response = await axios.get('http://localhost:3000/api/menu-data');
+        pages.value = response.data;
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Seiten:', error);
+      }
+    };
+
+    const loadPageContent = async () => {
+      try {
+        await store.dispatch('loadPageContent', selectedPage.value);
+        const content = store.getters.pageContent;
+
+        const setEditorContent = () => {
+          if (editor.value && editor.value.commands) {
+            editor.value.commands.setContent(content, false);
+          } else {
+            setTimeout(setEditorContent, 100); // Try again after 100ms if not ready
+          }
+        };
+
+        setEditorContent();
+      } catch (error) {
+        console.error('Fehler beim Laden des Seiteninhalts:', error);
+      }
+    };
+
+    const savePageContent = async () => {
+      try {
+        const selectedPageName = pages.value.find(page => page.link === selectedPage.value)?.name || '';
+        if (!selectedPageName) {
+          return;
+        }
+
+        const contentToSave = editor.value.getHTML();
+        store.commit('SET_PAGE_CONTENT', contentToSave);
+
+        await store.dispatch('savePageContent', {
+          link: selectedPage.value,
+          name: selectedPageName,
+        });
+      } catch (error) {
+        console.error('Fehler beim Speichern des Seiteninhalts:', error);
+      }
+    };
+
+    onMounted(fetchPages);
+
+    return {
+      pages,
+      selectedPage,
+      editor,
+      loadPageContent,
+      savePageContent,
+      pageHtmlContent,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.edit-pages {
+  width: 100%;
+  margin: auto;
+}
+
+#page-select {
+  margin-bottom: 20px;
+}
+
+.toolbar {
+  margin-bottom: 10px;
+}
+
+.toolbar button { 
+  margin-right: 5px;
+}
+
+.table-toolbar {
+  margin-bottom: 10px;
+}
+
+.table-toolbar button {
+  margin-right: 5px;
+}
+
+.additional-toolbar {
+  margin-bottom: 10px;
+}
+
+.additional-toolbar button {
+  margin-right: 5px;
+}
+
+.ql-container {
+  background-color: #fff !important;
+}
+
+.ql-editor {
+  background-color: #fff !important;
+}
+</style>