From d110900e85f57dcfee0b12dbdf98d3f87e1b0ed4 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 8 Oct 2025 17:47:43 +0200
Subject: [PATCH] Implement member statistics dropdown in MembersView. Add
 computed properties for active, test, and inactive member counts, and
 introduce a toggle for displaying member info. Enhance styling for the
 dropdown and member stats for improved user experience.

---
 frontend/src/views/MembersView.vue | 104 ++++++++++++++++++++++++++++-
 1 file changed, 103 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index 0e442e3..4df6078 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -2,6 +2,27 @@
     <div>
         <h2>Mitglieder</h2>
         <div class="action-buttons">
+            <div class="dropdown-container">
+                <button @click="toggleMemberInfo" class="btn-dropdown">
+                    Mitglieder-Info {{ showMemberInfo ? '▼' : '▶' }}
+                </button>
+                <div v-if="showMemberInfo" class="dropdown-content">
+                    <div class="member-stats">
+                        <div class="stat-item">
+                            <span class="stat-label">Aktive Mitglieder:</span>
+                            <span class="stat-value">{{ activeMembersCount }}</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Testmitglieder:</span>
+                            <span class="stat-value">{{ testMembersCount }}</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Inaktive Mitglieder:</span>
+                            <span class="stat-value">{{ inactiveMembersCount }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <button @click="createPhoneList">Telefonliste generieren</button>
             <span class="info-text">Es werden nur aktive Mitglieder ausgegeben</span>
             <button @click="updateRatingsFromMyTischtennis" class="btn-update-ratings" :disabled="isUpdatingRatings">
@@ -195,6 +216,18 @@ export default {
     },
     computed: {
         ...mapGetters(['isAuthenticated', 'currentClub']),
+        
+        activeMembersCount() {
+            return this.members.filter(member => member.active).length;
+        },
+        
+        testMembersCount() {
+            return this.members.filter(member => member.testMembership).length;
+        },
+        
+        inactiveMembersCount() {
+            return this.members.filter(member => !member.active).length;
+        }
     },
     data() {
         return {
@@ -237,7 +270,8 @@ export default {
             testMembership: false,
             showInactiveMembers: false,
             newPicsInInternetAllowed: false,
-            isUpdatingRatings: false
+            isUpdatingRatings: false,
+            showMemberInfo: false
         }
     },
     async mounted() {
@@ -301,6 +335,10 @@ export default {
         toggleNewMember() {
             this.memberFormIsOpen = !this.memberFormIsOpen;
         },
+        
+        toggleMemberInfo() {
+            this.showMemberInfo = !this.showMemberInfo;
+        },
         resetNewMember() {
             this.newFirstname = '';
             this.newLastname = '';
@@ -811,4 +849,68 @@ table td {
 .btn-primary:hover {
     opacity: 0.9;
 }
+
+/* Dropdown Styles */
+.dropdown-container {
+    position: relative;
+    display: inline-block;
+}
+
+.btn-dropdown {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s ease;
+}
+
+.btn-dropdown:hover {
+    background-color: #0056b3;
+}
+
+.dropdown-content {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    min-width: 200px;
+    margin-top: 4px;
+}
+
+.member-stats {
+    padding: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.stat-item:last-child {
+    margin-bottom: 0;
+}
+
+.stat-label {
+    font-weight: 500;
+    color: #333;
+}
+
+.stat-value {
+    font-weight: 600;
+    color: #007bff;
+    background-color: #f8f9fa;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    min-width: 2rem;
+    text-align: center;
+}
 </style>