Added Worship page rendering

src/content/admin/EditPagesComponent.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import axios from '../../axios';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
@@ -97,7 +97,7 @@ export default {
       ],
       content: '',
       onUpdate: ({ editor }) => {
-        store.commit('UPDATE_PAGE_CONTENT', editor.getHTML());
+        store.commit('SET_PAGE_CONTENT', editor.getHTML());
       },
     });
 
@@ -118,6 +118,7 @@ export default {
         const allPages = [];
         flattenPages(data, allPages);
         pages.value = allPages.sort((a, b) => a.name.localeCompare(b.name));
+        store.commit('setMenuData', data);
       } catch (error) {
         console.error('Fehler beim Abrufen der Seiten:', error);
       }
@@ -127,7 +128,6 @@ export default {
       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);
@@ -135,7 +135,6 @@ export default {
             setTimeout(setEditorContent, 100);
           }
         };
-
         setEditorContent();
       } catch (error) {
         console.error('Fehler beim Laden des Seiteninhalts:', error);
@@ -167,6 +166,15 @@ export default {
       return pages.value;
     });
 
+    watch(selectedPage, (newPage) => {
+      store.dispatch('setSelectedPage', newPage);
+      const page = pages.value.find(page => page.link === newPage);
+      if (page) {
+        store.dispatch('setPageTitle', page.name);
+      }
+      loadPageContent();
+    });
+
     const openWorshipDialog = () => {
       worshipDialog.value.openWorshipDialog();
     };