added missing pages

src/components/AddContactDialog.vue

@@ -19,8 +19,8 @@
                         label="caption" track-by="id" />
                 </div>
                 <div v-if="selectedTypes.some(type => type.id === 'position')">
-                    <label for="contact-select">Wählen Sie eine Position:</label>
-                    <multiselect id="contact-select" v-model="selectedPositions" :options="positions" :multiple="false"
+                    <label for="position-select">Wählen Sie eine Position:</label>
+                    <multiselect id="position-select" v-model="selectedPositions" :options="positions" :multiple="false"
                         label="caption" track-by="id" />
                 </div>
                 <div v-if="selectedTypes.some(type => type.id === 'specific')">
@@ -41,8 +41,7 @@
                     <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>
+                            <option v-for="style in displayStyles" :value="style.id" :key="style.id">{{ style.label }}</option>
                         </select>
                     </div>
                 </div>
@@ -129,12 +128,13 @@ export default {
                 selectedContact.value = null;
             } else if (selectedTypes.value.some(type => type.id === 'types')) {
                 selectedContact.value = null;
-            } else if (selectedPositions.value.some(type => type.id === 'position')) {
+            } else if (selectedTypes.value.some(type => type.id === 'position')) {
                 selectedContact.value = null;
             }
         };
 
         const confirmAddContactConfiguration = () => {
+            console.log('Selected positions:', selectedPositions.value); // Log the selected positions
             let configString = '';
             const displayArray = Object.keys(displayOptions.value).filter((key) => displayOptions.value[key]);
             let selection = {};
@@ -145,7 +145,7 @@ export default {
             } else {
                 selection['types'] = selectedEventTypes.value.map((type) => type.id);
                 selection['places'] = selectedPlaces.value.map((place) => place.id);
-                selection['positions'] = selectedPositions.value((postion) => postion.id);
+                selection['positions'] = Array.isArray(selectedPositions.value) ? selectedPositions.value.map((position) => position.id) : [];
             }
             const contact = {
                 selection: selection,
@@ -153,6 +153,7 @@ export default {
                 style: displayStyle.value
             }
             configString = '{{ contact:' + JSON.stringify(contact) + ' }}';
+            console.log('Emitting config:', configString); // Log the emitted config
             emit('confirm', configString);
             closeAddContactDialog();
         };
@@ -243,4 +244,4 @@ export default {
 .display-options label {
     display: block;
 }
-</style>
+</style>

src/components/ContactRender.vue

@@ -1,7 +1,7 @@
 <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>
+        <div v-for="contact in contacts" :key="contact.id" class="contact-box">
+            <p>{{ contact.name }}</p>
             <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>
@@ -62,5 +62,7 @@ export default {
 </script>
 
 <style scoped>
-/* Add styles if needed */
+.contact-box p {
+    margin: 0;
+}
 </style>