Some fixes, added Events in edit

controllers/contactPersonController.js

@@ -1,4 +1,5 @@
-const { ContactPerson, Position } = require('../models');
+const { ContactPerson, Position, Event, EventType, EventPlace } = require('../models');
+const { Op } = require('sequelize');
 
 const getAllContactPersons = async (req, res) => {
   try {
@@ -70,9 +71,61 @@ const deleteContactPerson = async (req, res) => {
   }
 };
 
+const filterContactPersons = async (req, res) => {
+  try {
+    const { config: configString } = req.body;
+    console.log(configString, typeof configString);
+    const config = JSON.parse(configString);
+    const where = {};
+
+    console.log(config, typeof config);
+    console.log(config.selection);
+    if (config.selection.id && config.selection.id === 'all') {
+    } else if (config.selection.id) {
+      where.id = config.selection.id;
+    } else {
+      const filters = [];
+
+      if (config.selection.types && config.selection.types.length > 0) {
+        filters.push({ '$positions.id$': { [Op.in]: config.selection.types } });
+      }
+
+      if (config.selection.places && config.selection.places.length > 0) {
+        filters.push({ '$events.eventPlaceId$': { [Op.in]: config.selection.places } });
+      }
+
+      if (filters.length > 0) {
+        where[Op.and] = filters;
+      }
+    }
+
+    const contactPersons = await ContactPerson.findAll({
+      where,
+      include: [
+        {
+          model: Position,
+          as: 'positions',
+          through: { attributes: [] },
+        },
+        {
+          model: Event,
+          as: 'events',
+          through: { attributes: [] },
+        },
+      ],
+    });
+
+    res.json(contactPersons);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch contact persons' });
+    console.error(error);
+  }
+};
+
 module.exports = {
   getAllContactPersons,
   createContactPerson,
   updateContactPerson,
-  deleteContactPerson
+  deleteContactPerson,
+  filterContactPersons
 };

controllers/eventController.js

@@ -123,6 +123,7 @@ const filterEvents = async (req, res) => {
 const createEvent = async (req, res) => {
   try {
     const { contactPersonIds, ...eventData } = req.body;
+    eventData.alsoOnHomepage = eventData.alsoOnHomepage ?? 0;
     const event = await Event.create(eventData);
     if (contactPersonIds) {
       await event.setContactPersons(contactPersonIds);

routes/contactPerson.js

@@ -1,11 +1,12 @@
 const express = require('express');
 const router = express.Router();
-const { getAllContactPersons, createContactPerson, updateContactPerson, deleteContactPerson } = require('../controllers/contactPersonController');
+const { getAllContactPersons, createContactPerson, updateContactPerson, deleteContactPerson, filterContactPersons } = require('../controllers/contactPersonController');
-const authMiddleware = require('../middleware/authMiddleware')
+const authMiddleware = require('../middleware/authMiddleware');
 
-router.get('/', authMiddleware, getAllContactPersons);
+router.get('/', getAllContactPersons);
 router.post('/', authMiddleware, createContactPerson);
 router.put('/:id', authMiddleware, updateContactPerson);
 router.delete('/:id', authMiddleware, deleteContactPerson);
+router.post('/filter', filterContactPersons); 
 
 module.exports = router;

routes/eventPlaces.js

@@ -3,7 +3,7 @@ const router = express.Router();
 const { getAllEventPlaces, createEventPlace, updateEventPlace, deleteEventPlace } = require('../controllers/eventPlaceController.js');
 const authMiddleware = require('../middleware/authMiddleware')
 
-router.get('/', authMiddleware, getAllEventPlaces);
+router.get('/', getAllEventPlaces);
 router.post('/', authMiddleware, createEventPlace);
 router.put('/:id', authMiddleware, updateEventPlace);
 router.delete('/:id', authMiddleware, deleteEventPlace);

routes/eventtypes.js

@@ -3,7 +3,7 @@ const router = express.Router();
 const { getAllEventTypes, createEventType, updateEventType, deleteEventType } = require('../controllers/eventtypecontroller');
 const authMiddleware = require('../middleware/authMiddleware')
 
-router.get('/', authMiddleware, getAllEventTypes);
+router.get('/', getAllEventTypes);
 router.post('/', authMiddleware, createEventType);
 router.put('/:id', authMiddleware, updateEventType);
 router.delete('/:id', authMiddleware, deleteEventType);

src/components/AddContactDialog.vue

@@ -0,0 +1,224 @@
+<template>
+    <div>
+        <div v-if="isOpen" class="dialog-overlay">
+            <div class="dialog-content">
+                <h3>Kontaktperson hinzufügen</h3>
+                <div>
+                    <label for="type-select">Typen:</label>
+                    <multiselect id="type-select" v-model="selectedTypes" :options="typeOptions" :multiple="true"
+                        label="caption" track-by="id" @select="onTypeSelect" />
+                </div>
+                <div v-if="selectedTypes.some(type => type.id === 'places')">
+                    <label for="places-select">Wählen Sie Orte:</label>
+                    <multiselect id="places-select" v-model="selectedPlaces" :options="places" :multiple="true"
+                        label="name" track-by="id" />
+                </div>
+                <div v-if="selectedTypes.some(type => type.id === 'types')">
+                    <label for="types-select">Wählen Sie Typen:</label>
+                    <multiselect id="types-select" v-model="selectedEventTypes" :options="eventTypes" :multiple="true"
+                        label="caption" track-by="id" />
+                </div>
+                <div v-if="selectedTypes.some(type => type.id === 'specific')">
+                    <label for="contact-select">Wählen Sie eine Kontaktperson:</label>
+                    <multiselect id="contact-select" v-model="selectedContact" :options="contacts" :multiple="false"
+                        label="name" track-by="id" />
+                </div>
+                <div>
+                    <label>Wählen Sie welche Elemente angezeigt werden sollen:</label>
+                    <div class="display-options">
+                        <label><input type="checkbox" v-model="displayOptions.phone" /> Telefon</label>
+                        <label><input type="checkbox" v-model="displayOptions.street" /> Straße</label>
+                        <label><input type="checkbox" v-model="displayOptions.zipcode" /> Postleitzahl</label>
+                        <label><input type="checkbox" v-model="displayOptions.city" /> Stadt</label>
+                        <label><input type="checkbox" v-model="displayOptions.email" /> E-Mail</label>
+                        <label><input type="checkbox" v-model="displayOptions.positions" /> Positionen</label>
+                    </div>
+                    <div>
+                        <label for="displayStyle">Anzeigen als</label>
+                        <select id="displayStyle" v-model="displayStyle">
+                            <option v-for="style in displayStyles" :value="style.id" :key="style.id">{{ style.label }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <button @click="confirmAddContactConfiguration">Bestätigen</button>
+                    <button @click="closeAddContactDialog">Schließen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import axios from '@/axios';
+import Multiselect from 'vue-multiselect';
+
+export default {
+    name: 'AddContactDialog',
+    components: {
+        Multiselect,
+    },
+    emits: ['confirm'],
+    setup(props, { emit }) {
+        const isOpen = ref(false);
+        const contacts = ref([]);
+        const eventTypes = ref([]);
+        const places = ref([]);
+        const selectedContact = ref(null);
+        const selectedTypes = ref([]);
+        const selectedEventTypes = ref([]);
+        const selectedPlaces = ref([]);
+        const displayStyle = ref('float');
+
+        const displayOptions = ref({
+            phone: false,
+            street: false,
+            zipcode: false,
+            city: false,
+            email: false,
+            positions: false,
+        });
+
+        const typeOptions = ref([
+            { id: 'all', caption: 'Alle' },
+            { id: 'specific', caption: 'Eine Person' },
+            { id: 'places', caption: 'Für bestimmte Orte' },
+            { id: 'types', caption: 'Für bestimmte Typen' },
+        ]);
+
+        const displayStyles = ref([
+            { id: 'float', label: 'Durchlaufender Text' },
+            { id: 'box', label: 'Textbox' },
+        ]);
+
+        const openAddContactDialog = () => {
+            isOpen.value = true;
+            fetchContacts();
+            fetchEventTypes();
+            fetchPlaces();
+        };
+
+        const closeAddContactDialog = () => {
+            isOpen.value = false;
+        };
+
+        const onTypeSelect = () => {
+            if (selectedTypes.value.some(type => type.id === 'all')) {
+                selectedTypes.value = [{ id: 'all', caption: 'Alle' }];
+                selectedContact.value = null;
+                selectedEventTypes.value = [];
+                selectedPlaces.value = [];
+            } else if (selectedTypes.value.some(type => type.id === 'specific')) {
+                selectedTypes.value = [{ id: 'specific', caption: 'Eine Person' }];
+                selectedEventTypes.value = [];
+                selectedPlaces.value = [];
+            } else if (selectedTypes.value.some(type => type.id === 'places')) {
+                selectedContact.value = null;
+                selectedEventTypes.value = [];
+            } else if (selectedTypes.value.some(type => type.id === 'types')) {
+                selectedContact.value = null;
+                selectedPlaces.value = [];
+            }
+        };
+
+        const confirmAddContactConfiguration = () => {
+            let configString = '';
+            const displayArray = Object.keys(displayOptions.value).filter((key) => displayOptions.value[key]);
+            let selection = {};
+            if (selectedTypes.value.some(type => type.id === 'all')) {
+                selection['id'] = 'all';
+            } else if (selectedTypes.value.some(type => type.id === 'specific') && selectedContact.value) {
+                selection['id'] = selectedContact.value.id;
+            } else {
+                selection['types'] = selectedEventTypes.value.map((type) => type.id).join('|');
+                selection['places'] = selectedPlaces.value.map((place) => place.id).join('|');
+            }
+            const contact = {
+                selection: selection,
+                display: displayArray,
+                style: displayStyle.value
+            }
+            configString = '{{ contact:' + JSON.stringify(contact) + ' }}';
+            emit('confirm', configString);
+            closeAddContactDialog();
+        };
+
+        const fetchContacts = async () => {
+            try {
+                const response = await axios.get('/contact-persons');
+                contacts.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der Kontaktpersonen:', error);
+            }
+        };
+
+        const fetchEventTypes = async () => {
+            try {
+                const response = await axios.get('/event-types');
+                eventTypes.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der Event-Typen:', error);
+            }
+        };
+
+        const fetchPlaces = async () => {
+            try {
+                const response = await axios.get('/event-places');
+                console.log(response);
+                places.value = response.data;
+            } catch (error) {
+                console.error('Fehler beim Laden der Orte:', error);
+            }
+        };
+
+        return {
+            isOpen,
+            contacts,
+            selectedContact,
+            selectedTypes,
+            selectedEventTypes,
+            selectedPlaces,
+            displayOptions,
+            displayStyle,
+            displayStyles,
+            typeOptions,
+            openAddContactDialog,
+            closeAddContactDialog,
+            confirmAddContactConfiguration,
+            onTypeSelect,
+            places,
+            eventTypes,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dialog-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.multiselect {
+    width: 100%;
+}
+
+.display-options label {
+    display: block;
+}
+</style>

src/components/ContactRender.vue

@@ -0,0 +1,70 @@
+<template>
+    <div v-if="config && config.style === 'box' && contacts && contacts.length && contacts.length > 0">
+        <div v-for="contact in contacts" :key="contact.id">
+            <h3>{{ contact.name }}</h3>
+            <p v-if="displayOptions.includes('phone')">Telefon: {{ contact.phone }}</p>
+            <p v-if="displayOptions.includes('street')">Straße: {{ contact.street }}</p>
+            <p v-if="displayOptions.includes('zipcode')">Postleitzahl: {{ contact.zipcode }}</p>
+            <p v-if="displayOptions.includes('city')">Stadt: {{ contact.city }}</p>
+            <p v-if="displayOptions.includes('email')">E-Mail: {{ contact.email }}</p>
+            <p v-if="displayOptions.includes('positions')">Positionen: {{ contact.positions.map(pos =>
+                pos.caption).join(', ') }}</p>
+        </div>
+    </div>
+    <span v-else-if="config.style === 'float' && contacts && contacts.length && contacts.length > 0">
+        <span v-for="contact in contacts" :key="contact.id">
+            {{ contact.name }}
+            <span v-if="displayOptions.includes('phone')">, Telefon: {{ contact.phone }}</span>
+            <span v-if="displayOptions.includes('street')">, Straße: {{ contact.street }}</span>
+            <span v-if="displayOptions.includes('zipcode')">, Postleitzahl: {{ contact.zipcode }}</span>
+            <span v-if="displayOptions.includes('city')">, Stadt: {{ contact.city }}</span>
+            <span v-if="displayOptions.includes('email')">, E-Mail: {{ contact.email }}</span>
+            <span v-if="displayOptions.includes('positions')">, Positionen: {{ contact.positions.map(pos =>
+                pos.caption).join(', ') }}</span>
+        </span>
+    </span>
+</template>
+
+<script>
+import axios from '@/axios';
+
+export default {
+    name: 'ContactRender',
+    props: {
+        config: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            contacts: [],
+            loading: true,
+            error: null,
+            displayOptions: [],
+        };
+    },
+    async created() {
+        try {
+            console.log('Initial config:', JSON.stringify(this.config));
+            this.displayOptions = this.config.display || [];
+            console.log('Display options:', this.displayOptions);
+            const response = await axios.post('/contact-persons/filter', {
+                config: JSON.stringify(this.config),
+            });
+            this.contacts = response.data;
+            console.log('Fetched contacts:', JSON.stringify(this.contacts));
+            console.log('Config style:', this.config.style);
+            this.loading = false;
+        } catch (error) {
+            console.error('Error loading contacts:', error);
+            this.error = 'Fehler beim Laden der Kontaktpersonen';
+            this.loading = false;
+        }
+    },
+};
+</script>
+
+<style scoped>
+/* Add styles if needed */
+</style>

src/components/EventForm.vue

@@ -193,7 +193,7 @@ export default {
           event_place_id: this.selectedEventPlace ? this.selectedEventPlace.id : null,
           contactPersonIds: this.selectedContactPersons.map(person => person.id)
         };
-        payload.dayOfWeek = payload.dayOfWeek.value;
+        payload.dayOfWeek = payload.dayOfWeek ? payload.dayOfWeek.value ?? -1 : -1;
         let response;
         if (this.eventData.id) {
           response = await axios.put(`/events/${this.eventData.id}`, payload);

src/components/RenderContentComponent.vue

@@ -7,7 +7,7 @@ import { createApp, h, ref, watch } from 'vue';
 import WorshipRender from './WorshipRender.vue';
 import ImageRender from './ImageRender.vue';
 import EventRender from './EventRender.vue';
-import DownloadLink from './DownloadLink.vue';
+import ContactRender from './ContactRender.vue'; // Neue Komponente importieren
 
 export default {
   name: 'RenderContentComponent',
@@ -24,7 +24,7 @@ export default {
       let result = renderWorship(content);
       result = renderImage(result);
       result = renderEvent(result);
-      result = renderDownload(result);
+      result = renderContact(result); // Neuer Filter
       return result;
     };
 
@@ -93,23 +93,25 @@ export default {
       return result;
     };
 
-    const renderDownload = (content) => {
+    const renderContact = (content) => {
-      const downloadPattern = /{{ download title="(.*?)" hash="(.*?)" extension="(.*?)" }}/g;
+      const contactPattern = /{{ contact:(.*?) }}/g;
       let result = content;
-      result = result.replace(downloadPattern, (match, title, hash, extension) => {
+      result = result.replace(contactPattern, (match, config) => {
-        const placeholderId = `download-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        const props = JSON.parse(config);
+        const placeholderId = `contact-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
         setTimeout(() => {
           const placeholder = document.getElementById(placeholderId);
           if (placeholder) {
             const app = createApp({
               render() {
-                return h(DownloadLink, { title, hash, extension });
+                return h(ContactRender, { config: props });
               },
             });
             app.mount(placeholder);
           }
         }, 0);
-        return `<div id="${placeholderId}"></div>`;
+        const tag = props.style === 'box' ? 'div' : 'span'
+        return `<${tag} id="${placeholderId}"></${tag}>`;
       });
       return result;
     };

src/content/MiriamsWunderkisteContent.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="some-page">
+      <ContentComponent :link="currentLink" />
+    </div>
+  </template>
+  
+  <script>
+  import ContentComponent from '@/components/ContentComponent.vue';
+  
+  export default {
+    name: 'SomePage',
+    components: {
+      ContentComponent,
+    },
+    computed: {
+      currentLink() {
+        return this.$route.path;
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  </style>
+  

src/content/admin/EditPagesComponent.vue

@@ -76,7 +76,7 @@
     </div>
     <div class="additional-toolbar">
       <button @click="openAddEventsDialog">Events</button>
-      <button>Kontaktpersonen</button>
+      <button @click="openAddContactDialog">Kontaktpersonen</button>
       <button>Institutionen</button>
       <button @click="openWorshipDialog">Gottesdienste</button>
     </div>
@@ -90,6 +90,7 @@
     <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
     <AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
     <AddDownloadDialog ref="addDownloadDialog" @confirm="insertDownload" />
+    <AddContactDialog ref="addContactDialog" @confirm="insertContact" />
     <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
   </div>
 </template>
@@ -118,6 +119,7 @@ import AddImageDialog from '@/components/AddImageDialog.vue';
 import AddEventDialog from '@/components/AddEventDialog.vue';
 import AddLinkDialog from '@/components/AddLinkDialog.vue';
 import AddDownloadDialog from '@/components/AddDownloadDialog.vue';
+import AddContactDialog from '@/components/AddContactDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
   Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon,
@@ -147,6 +149,7 @@ export default {
     AddEventDialog,
     AddLinkDialog,
     AddDownloadDialog,
+    AddContactDialog,
     OpenInWindowIcon,
     DownloadIcon,
   },
@@ -160,6 +163,7 @@ export default {
     const addEventDialog = ref(null);
     const addLinkDialog = ref(null);
     const addDownloadDialog = ref(null);
+    const addContactDialog = ref(null);
     const colorPicker = ref(null);
 
     const editor = useEditor({
@@ -318,6 +322,16 @@ export default {
       }
     };
 
+    const openAddContactDialog = () => {
+      addContactDialog.value.openAddContactDialog();
+    };
+
+    const insertContact = (configString) => {
+      if (editor.value) {
+        editor.value.chain().focus().insertContent(configString).run();
+      }
+    };
+
     const openColorPicker = () => {
       colorPicker.value.click();
     };
@@ -361,6 +375,38 @@ export default {
       editor.value.chain().focus().toggleOrderedList().run();
     };
 
+    const addColumnBefore = () => {
+      editor.value.chain().focus().addColumnBefore().run();
+    };
+
+    const addColumnAfter = () => {
+      editor.value.chain().focus().addColumnAfter().run();
+    };
+
+    const addRowBefore = () => {
+      editor.value.chain().focus().addRowBefore().run();
+    };
+
+    const addRowAfter = () => {
+      editor.value.chain().focus().addRowAfter().run();
+    };
+
+    const deleteColumn = () => {
+      editor.value.chain().focus().deleteColumn().run();
+    };
+
+    const deleteRow = () => {
+      editor.value.chain().focus().deleteRow().run();
+    };
+
+    const toggleHeaderColumn = () => {
+      editor.value.chain().focus().toggleHeaderColumn().run();
+    };
+
+    const toggleHeaderRow = () => {
+      editor.value.chain().focus().toggleHeaderRow().run();
+    };
+
     return {
       pages,
       sortedPages,
@@ -384,6 +430,9 @@ export default {
       addDownloadDialog,
       openAddDownloadDialog,
       insertDownload,
+      addContactDialog,
+      openAddContactDialog,
+      insertContact,
       colorPicker,
       openColorPicker,
       setColor,
@@ -395,6 +444,14 @@ export default {
       insertTable,
       toggleBulletList,
       toggleOrderedList,
+      addColumnBefore,
+      addColumnAfter,
+      addRowBefore,
+      addRowAfter,
+      deleteColumn,
+      deleteRow,
+      toggleHeaderColumn,
+      toggleHeaderRow,
     };
   },
 };