Verbessert die Mitgliederansicht in ClubView.vue, indem aktive Mitglieder nach Nachnamen und Vornamen sortiert angezeigt werden. Fügt Geschlechtssymbole und -bezeichnungen hinzu, um die Darstellung zu optimieren. Implementiert neue Methoden zur Geschlechtslabelierung und -symbolisierung sowie entsprechende CSS-Klassen für eine ansprechendere Benutzeroberfläche.

frontend/src/views/ClubView.vue

@@ -8,8 +8,13 @@
             </div>
             <div>
                 <h3>Mitglieder</h3>
-                <ul>
-                    <li v-for="member in club.members" :key="member.id">{{ member.lastName }}, {{ member.firstName }}</li>
+                <ul class="members">
+                    <li v-for="member in displayedMembers" :key="member.id" class="member-item">
+                        <span class="gender-symbol" :class="'gender-' + (member.gender || 'unknown')" :title="labelGender(member.gender)">{{ genderSymbol(member.gender) }}</span>
+                        <span class="gender-name" :class="['gender-' + (member.gender || 'unknown'), { 'is-test': member.testMembership }]">
+                            {{ member.lastName }}, {{ member.firstName }}
+                        </span>
+                    </li>
                 </ul>
             </div>
             <div>
@@ -64,6 +69,40 @@ export default {
             if (response.status === 200) {
                 alert('Zugriff wurde angefragt');
             }
+        },
+        labelGender(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return 'Männlich';
+            if (v === 'female') return 'Weiblich';
+            if (v === 'diverse') return 'Divers';
+            return 'Unbekannt';
+        },
+        genderSymbol(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return '♂';
+            if (v === 'female') return '♀';
+            if (v === 'diverse') return '⚧';
+            return '';
+        }
+    },
+    computed: {
+        ...mapGetters(['isAuthenticated', 'currentClub', 'clubs']),
+        displayedMembers() {
+            const members = Array.isArray(this.club.members) ? this.club.members : [];
+            const onlyActive = members.filter(m => m && (m.active === true));
+            return onlyActive.sort((a, b) => {
+                const lnA = (a.lastName || '').toLowerCase();
+                const lnB = (b.lastName || '').toLowerCase();
+                if (lnA && !lnB) return -1;
+                if (!lnA && lnB) return 1;
+                if (lnA && lnB) {
+                    const cmp = lnA.localeCompare(lnB, 'de-DE');
+                    if (cmp !== 0) return cmp;
+                }
+                const fnA = (a.firstName || '').toLowerCase();
+                const fnB = (b.firstName || '').toLowerCase();
+                return fnA.localeCompare(fnB, 'de-DE');
+            });
         }
     },
     async mounted() {
@@ -83,4 +122,18 @@ ul {
     padding: 0;
     margin: 0;
 }
+
+.members { margin-top: .25rem; }
+.member-item { padding: .15rem 0; }
+.gender-symbol, .gender-name { background: transparent; border: none; }
+.gender-name.gender-male { color: #1a73e8; }
+.gender-name.gender-female { color: #d81b60; }
+.gender-name.gender-diverse { color: #6a1b9a; }
+.gender-name.gender-unknown { color: #444; }
+.gender-symbol.gender-male { color: #1a73e8; }
+.gender-symbol.gender-female { color: #d81b60; }
+.gender-symbol.gender-diverse { color: #6a1b9a; }
+.gender-symbol.gender-unknown { color: #444; }
+.gender-symbol { margin-right: .35rem; opacity: .9; font-size: 1.05em; display: inline-block; width: 1.1em; text-align: center; }
+.is-test { font-style: italic; }
 </style>