Multiple changes

src/content/admin/EditPagesComponent.vue

@@ -4,7 +4,7 @@
     <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>
+        <option v-for="page in sortedPages" :key="page.link" :value="page.link">{{ page.name }}</option>
       </select>
     </div>
     <div class="toolbar">
@@ -15,8 +15,7 @@
       <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().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>
@@ -35,12 +34,14 @@
       <button>Events</button>
       <button>Kontaktpersonen</button>
       <button>Institutionen</button>
-      <button>Gottesdienste</button>
+      <button @click="openWorshipDialog">Gottesdienste</button>
     </div>
     <div :class="['htmleditor']">
       <EditorContent :editor="editor" />
     </div>
     <button @click="savePageContent">Speichern</button>
+
+    <WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
   </div>
 </template>
 
@@ -59,18 +60,21 @@ 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
+import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
+import WorshipDialog from '@/components/WorshipDialog.vue';
 
 export default {
   name: 'EditPagesComponent',
   components: {
     EditorContent,
+    WorshipDialog,
   },
   setup() {
     const store = useStore();
     const pages = ref([]);
     const selectedPage = ref('');
     const pageHtmlContent = computed(() => store.state.pageContent);
+    const worshipDialog = ref(null);
 
     const editor = useEditor({
       extensions: [
@@ -97,10 +101,23 @@ export default {
       },
     });
 
+    const flattenPages = (pages, allPages, parentName = '') => {
+      pages.forEach(page => {
+        const pageName = parentName ? `${parentName} -> ${page.name}` : page.name;
+        allPages.push({ ...page, name: pageName });
+        if (page.submenu && page.submenu.length) {
+          flattenPages(page.submenu, allPages, pageName);
+        }
+      });
+    };
+    
     const fetchPages = async () => {
       try {
         const response = await axios.get('/menu-data');
-        pages.value = response.data;
+        const data = response.data;
+        const allPages = [];
+        flattenPages(data, allPages);
+        pages.value = allPages.sort((a, b) => a.name.localeCompare(b.name));
       } catch (error) {
         console.error('Fehler beim Abrufen der Seiten:', error);
       }
@@ -115,7 +132,7 @@ export default {
           if (editor.value && editor.value.commands) {
             editor.value.commands.setContent(content, false);
           } else {
-            setTimeout(setEditorContent, 100); // Try again after 100ms if not ready
+            setTimeout(setEditorContent, 100);
           }
         };
 
@@ -146,13 +163,31 @@ export default {
 
     onMounted(fetchPages);
 
+    const sortedPages = computed(() => {
+      return pages.value;
+    });
+
+    const openWorshipDialog = () => {
+      worshipDialog.value.openWorshipDialog();
+    };
+
+    const insertWorshipList = (configuration) => {
+      if (editor.value) {
+        editor.value.chain().focus().insertContent(`{{ worshipslist:location=${configuration},order:"date asc" }}`).run();
+      }
+    };
+
     return {
       pages,
+      sortedPages,
       selectedPage,
       editor,
       loadPageContent,
       savePageContent,
       pageHtmlContent,
+      openWorshipDialog,
+      insertWorshipList,
+      worshipDialog,
     };
   },
 };