From 638f750f26edf6663afc86530c91a5661feb8d46 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Thu, 7 Nov 2024 09:04:17 +0100
Subject: [PATCH] "Updated MembersView.vue: fixed checkbox syntax, added
 showInactiveMembers feature, and reformatted HTML structure"

---
 frontend/src/views/MembersView.vue | 62 ++++++++++++++++--------------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index 22644bf..f7fdbd0 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -21,19 +21,22 @@
                 <label><span>Telefon-Nr.:</span> <input type="text" v-model="newPhone"></label>
                 <label><span>Email-Adresse:</span> <input type="email" v-model="newEmail"></label>
                 <label><span>Aktiv:</span> <input type="checkbox" v-model="newActive"></label>
-                <label><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership"</label>
-                <label><span>Bild:</span> <input type="file" @change="onFileSelected"></label>
-                <div v-if="memberImagePreview">
-                    <img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
-                        style="max-width: 200px; max-height: 200px;">
-                </div>
-                <div>
-                    <button @click="addNewMember">{{ memberToEdit ? 'Ändern' : 'Anlegen' }}</button>
-                    <button @click="resetNewMember" v-if="memberToEdit === null" class="cancel-action">Felder
-                        leeren</button>
-                </div>
+                <label><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership" </label>
+                    <label><span>Bild:</span> <input type="file" @change="onFileSelected"></label>
+                    <div v-if="memberImagePreview">
+                        <img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
+                            style="max-width: 200px; max-height: 200px;">
+                    </div>
+                    <div>
+                        <button @click="addNewMember">{{ memberToEdit ? 'Ändern' : 'Anlegen' }}</button>
+                        <button @click="resetNewMember" v-if="memberToEdit === null" class="cancel-action">Felder
+                            leeren</button>
+                    </div>
             </div>
         </div>
+        <div>
+            <input type="checkbox" v-model="showInactiveMembers"> Inaktive Mitglieder anzeigen
+        </div>
         <div>
             <table>
                 <thead>
@@ -48,21 +51,23 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="member in members" :key="member.id" @click="editMember(member)">
-                        <td>
-                            <img v-if="member.imageUrl" :src="member.imageUrl" alt="Mitgliedsbild"
-                                style="max-width: 50px; max-height: 50px;"
-                                @click.stop="openImageModal(member.imageUrl)">
-                        </td>
-                        <td>{{ member.lastName }}, {{ member.firstName }}</td>
-                        <td>{{ member.street }}, {{ member.city }}</td>
-                        <td>{{ getFormattedBirthdate(member.birthDate) }}</td>
-                        <td>{{ member.phone }}</td>
-                        <td>{{ member.email }}</td>
-                        <td>
-                            <button @click.stop="openNotesModal(member)">Notizen</button>
-                        </td>
-                    </tr>
+                    <template v-for="member in members" :key="member.id">
+                        <tr v-if="member.active || showInactiveMembers" class="member-row" @click="editMember(member)">
+                            <td>
+                                <img v-if="member.imageUrl" :src="member.imageUrl" alt="Mitgliedsbild"
+                                    style="max-width: 50px; max-height: 50px;"
+                                    @click.stop="openImageModal(member.imageUrl)">
+                            </td>
+                            <td>{{ member.lastName }}, {{ member.firstName }}</td>
+                            <td>{{ member.street }}, {{ member.city }}</td>
+                            <td>{{ getFormattedBirthdate(member.birthDate) }}</td>
+                            <td>{{ member.phone }}</td>
+                            <td>{{ member.email }}</td>
+                            <td>
+                                <button @click.stop="openNotesModal(member)">Notizen</button>
+                            </td>
+                        </tr>
+                    </template>
                 </tbody>
             </table>
         </div>
@@ -124,6 +129,7 @@ export default {
             showImageModal: false, 
             selectedImageUrl: null,
             testMembership: false,
+            showInactiveMembers: false,
         }
     },
     async mounted() {
@@ -306,7 +312,7 @@ export default {
         getFormattedBirthdate(birthDate) {
             const date = new Date(birthDate);
             return `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
-        }
+        },
     }
 }
 </script>
@@ -365,7 +371,7 @@ table td {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: fixed;
+    position: fixed;toggleNewMember() {}
     z-index: 1000;
     left: 0;
     top: 0;