added generation of pdf phonelist

frontend/src/components/PDFGenerator.js

@@ -141,6 +141,40 @@ class PDFGenerator {
     save(filename) {
         this.pdf.save(filename);
     }
+
+    addPhoneList(members) {
+        this.pdf.setFontSize(14);
+        this.pdf.setFont('helvetica', 'bold');
+        this.pdf.text('Telefonliste - Aktive Mitglieder', this.margin, this.yPos);
+        this.yPos += 10;
+        this.addPhoneListHeaders();
+
+        this.pdf.setFont('helvetica', 'normal');
+        for (const member of members) {
+            this.addPhoneListRow(member);
+            this.checkPageOverflow();
+        }
+    }
+
+    addPhoneListHeaders() {
+        this.pdf.setFont('helvetica', 'bold');
+        this.pdf.text('Name, Vorname', this.margin, this.yPos);
+        this.pdf.text('Geburtsdatum', this.margin + 60, this.yPos);
+        this.pdf.text('Telefon-Nr.', this.margin + 120, this.yPos);
+        this.yPos += this.LINE_HEIGHT;
+        this.pdf.setFont('helvetica', 'normal');
+    }
+
+    addPhoneListRow(member) {
+        const fullName = `${member.lastName}, ${member.firstName}`;
+        const birthDate = member.birthDate ? new Date(member.birthDate).toLocaleDateString('de-DE') : '';
+        const phoneNumber = member.phone || '';
+
+        this.pdf.text(fullName, this.margin, this.yPos);
+        this.pdf.text(birthDate, this.margin + 60, this.yPos);
+        this.pdf.text(phoneNumber, this.margin + 120, this.yPos);
+        this.yPos += this.LINE_HEIGHT;
+    }
 }
 
 export default PDFGenerator;

frontend/src/views/DiaryView.vue

@@ -851,7 +851,7 @@ h3 {
 .column:first-child {
     flex: 1;
     overflow: hidden;
-    height: 100%;
+    height: 100%;justify-self: start;
     display: flex;
     flex-direction: column;
 }

frontend/src/views/MembersView.vue

@@ -1,6 +1,9 @@
 <template>
     <div>
         <h2>Mitglieder</h2>
+        <div>
+            <button @click="createPhoneList">Telefonliste generieren</button>Es werden nur aktive Mitglieder ausgegeben
+        </div>
         <div class="newmember">
             <div class="toggle-new-member">
                 <span @click="toggleNewMember">
@@ -93,6 +96,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '../apiClient.js';
+import PDFGenerator from '../components/PDFGenerator.js';
 
 export default {
     name: 'MembersView',
@@ -290,6 +294,12 @@ export default {
                 member.imageUrl = null; 
             }
         },
+        async createPhoneList() {
+            const activeMembers = this.members.filter(member => member.active);
+            const pdfGenerator = new PDFGenerator();
+            pdfGenerator.addPhoneList(activeMembers);
+            pdfGenerator.save('Telefonliste.pdf');
+        },
     }
 }
 </script>