Events renderable

src/content/admin/EditPagesComponent.vue

@@ -67,7 +67,7 @@
       </button>
     </div>
     <div class="additional-toolbar">
-      <button>Events</button>
+      <button @click="openAddEventsDialog">Events</button>
       <button>Kontaktpersonen</button>
       <button>Institutionen</button>
       <button @click="openWorshipDialog">Gottesdienste</button>
@@ -79,6 +79,7 @@
 
     <WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
     <AddImageDialog ref="addImageDialog" @confirm="insertImage" />
+    <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
   </div>
 </template>
 
@@ -100,6 +101,7 @@ import Heading from '@tiptap/extension-heading';
 import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
 import WorshipDialog from '@/components/WorshipDialog.vue';
 import AddImageDialog from '@/components/AddImageDialog.vue';
+import AddEventDialog from '@/components/AddEventDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
   Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
@@ -125,6 +127,7 @@ export default {
     AlignTopBoxIcon,
     AlignLeftBoxIcon,
     StatsReportIcon,
+    AddEventDialog,
   },
   setup() {
     const store = useStore();
@@ -133,6 +136,7 @@ export default {
     const pageHtmlContent = computed(() => store.state.pageContent);
     const worshipDialog = ref(null);
     const addImageDialog = ref(null);
+    const addEventDialog = ref(null);
 
     const editor = useEditor({
       extensions: [
@@ -254,6 +258,16 @@ export default {
       }
     };
 
+    const openAddEventDialog = () => {
+      addEventDialog.value.openAddEventDialog();
+    };
+
+    const insertEvent = (configString) => {
+      if (editor.value) {
+        editor.value.chain().focus().insertContent(configString).run();
+      }
+    };
+
     return {
       pages,
       sortedPages,
@@ -268,6 +282,9 @@ export default {
       addImageDialog,
       openAddImageDialog,
       insertImage,
+      addEventDialog,
+      openAddEventsDialog: openAddEventDialog,
+      insertEvent,
     };
   },
 };