From 9b6a6dab06a5a9ddef66f675e2628d6f97862a1d Mon Sep 17 00:00:00 2001
From: James Pattinson <james.pattinson@sasalliance.org>
Date: Sun, 12 Oct 2025 21:20:53 +0000
Subject: [PATCH] Sub mamangement

---
 web/README.md            |  33 +++++--
 web/index.html           |  66 ++++++++++----
 web/nginx.conf           |   6 +-
 web/static/css/style.css | 184 +++++++++++++++++++++++++++++++++++++
 web/static/js/app.js     |  88 +++---------------
 web/static/js/ui.js      | 190 ++++++++++++++++++++++++++++++++++++++-
 6 files changed, 463 insertions(+), 104 deletions(-)

diff --git a/web/README.md b/web/README.md
index 336a5c0..596b232 100644
--- a/web/README.md
+++ b/web/README.md
@@ -62,6 +62,28 @@ open http://localhost:3000
 - Token persistence in browser storage
 - Automatic logout on authentication errors
 
+### Subscription Management (New & Improved!)
+
+#### Member-Centric Subscription Management
+The subscription management has been completely overhauled for a much better user experience:
+
+1. **Access Member Subscriptions**: In the Members tab, click the "Subscriptions" button next to any member
+2. **Visual Toggle Interface**: See all available mailing lists with modern toggle switches
+3. **Intuitive Controls**: 
+   - Green toggle = Member is subscribed
+   - Gray toggle = Member is not subscribed
+   - Click anywhere on a list item to toggle subscription
+4. **Batch Operations**: Make multiple changes and save them all at once
+5. **Real-time Feedback**: The save button shows how many changes you've made
+
+#### Benefits Over Previous System
+- ✅ **Much faster** - No need to add subscriptions one by one
+- ✅ **Visual** - See all subscriptions at a glance with color coding
+- ✅ **Intuitive** - Toggle switches work like modern mobile apps
+- ✅ **Batch operations** - Change multiple subscriptions simultaneously
+- ✅ **Less error-prone** - Clear visual feedback prevents mistakes
+- ✅ **Change tracking** - Only saves actual changes, not unchanged items
+
 ### Mailing Lists
 - View all mailing lists in a clean table
 - Create new lists with name, email, and description
@@ -79,11 +101,12 @@ open http://localhost:3000
 - Status management
 
 ### Subscriptions
-- Visual subscription management interface
-- Add members to mailing lists
-- Remove members from lists
-- See all subscriptions organized by list
-- Quick unsubscribe functionality
+- **Member-centric subscription management** - Click on any member to manage their subscriptions
+- **Interactive toggle interface** - Check/uncheck lists with visual toggles
+- **Batch changes** - Make multiple subscription changes and save them all at once
+- **Real-time feedback** - See subscription status instantly with visual indicators
+- **Subscription overview** - View all subscriptions organized by list
+- **Quick add functionality** - Legacy bulk subscription interface for power users
 
 ### User Experience
 - **Responsive Design** - Works seamlessly on all device sizes
diff --git a/web/index.html b/web/index.html
index 320f4ec..30672aa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,10 +47,6 @@
                     <i class="fas fa-users"></i>
                     Members
                 </button>
-                <button class="tab-btn" data-tab="subscriptions">
-                    <i class="fas fa-link"></i>
-                    Subscriptions
-                </button>
             </nav>
 
             <!-- Notification Area -->
@@ -93,7 +89,13 @@
             <!-- Members Tab -->
             <div class="tab-content" id="members-tab">
                 <div class="section-header">
-                    <h2>Members</h2>
+                    <div class="header-content">
+                        <h2>Members</h2>
+                        <div class="header-help">
+                            <i class="fas fa-info-circle"></i>
+                            <span>Click the "Lists" button next to any member to manage their subscriptions</span>
+                        </div>
+                    </div>
                     <button class="btn btn-primary" id="addMemberBtn">
                         <i class="fas fa-plus"></i>
                         Add Member
@@ -118,20 +120,7 @@
                 </div>
             </div>
 
-            <!-- Subscriptions Tab -->
-            <div class="tab-content" id="subscriptions-tab">
-                <div class="section-header">
-                    <h2>Manage Subscriptions</h2>
-                    <button class="btn btn-primary" id="addSubscriptionBtn">
-                        <i class="fas fa-plus"></i>
-                        Add Subscription
-                    </button>
-                </div>
 
-                <div class="subscriptions-grid" id="subscriptionsGrid">
-                    <!-- Dynamic content -->
-                </div>
-            </div>
         </div>
     </main>
 
@@ -215,7 +204,46 @@
         </div>
     </div>
 
-    <!-- Add Subscription Modal -->
+    <!-- Member Subscriptions Modal -->
+    <div class="modal" id="memberSubscriptionsModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="memberSubscriptionsTitle">Manage Subscriptions</h3>
+                <button class="modal-close" id="memberSubscriptionsModalClose">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="member-info-banner" id="memberInfoBanner">
+                    <div class="member-avatar">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <div class="member-details">
+                        <h4 id="memberSubscriptionsName">Member Name</h4>
+                        <p id="memberSubscriptionsEmail">member@example.com</p>
+                    </div>
+                </div>
+                
+                <div class="subscriptions-section">
+                    <h5>Mailing List Subscriptions</h5>
+                    <p class="text-muted text-sm">Check the lists this member should be subscribed to:</p>
+                    
+                    <div class="subscription-list" id="subscriptionCheckboxList">
+                        <!-- Dynamic content will be inserted here -->
+                    </div>
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button type="button" class="btn btn-secondary" id="memberSubscriptionsCancelBtn">Cancel</button>
+                <button type="button" class="btn btn-primary" id="memberSubscriptionsSaveBtn">
+                    <i class="fas fa-save"></i>
+                    Save Changes
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Subscription Modal (Legacy - keeping for bulk operations) -->
     <div class="modal" id="subscriptionModal">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/web/nginx.conf b/web/nginx.conf
index 71a7170..07f53db 100644
--- a/web/nginx.conf
+++ b/web/nginx.conf
@@ -5,8 +5,10 @@ server {
     # Cache static assets - this needs to come BEFORE the main location block
     location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
         root /usr/share/nginx/html;
-        expires 1y;
-        add_header Cache-Control "public, no-transform";
+        expires -1; # Disable caching for development
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
     }
     
     # Serve static files
diff --git a/web/static/css/style.css b/web/static/css/style.css
index 8401cf3..ca7b2fe 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -279,6 +279,28 @@ body {
     color: var(--gray-900);
 }
 
+.header-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.header-help {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--gray-600);
+    font-size: var(--font-size-sm);
+    background: var(--gray-50);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius);
+    border: 1px solid var(--gray-200);
+}
+
+.header-help i {
+    color: var(--info-color);
+}
+
 /* Notifications */
 .notification {
     display: flex;
@@ -384,6 +406,15 @@ body {
 .action-buttons {
     display: flex;
     gap: var(--space-2);
+    flex-wrap: wrap;
+    min-width: 200px;
+}
+
+/* Ensure actions column is wide enough */
+.table th:last-child,
+.table td:last-child {
+    min-width: 220px;
+    width: 220px;
 }
 
 /* Subscriptions Grid */
@@ -654,9 +685,162 @@ body {
     
     .action-buttons {
         flex-direction: column;
+        min-width: auto;
+    }
+    
+    .table th:last-child,
+    .table td:last-child {
+        min-width: auto;
+        width: auto;
     }
 }
 
+/* Member Subscriptions Modal */
+.member-info-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-4);
+    background: var(--gray-50);
+    border-radius: var(--radius);
+    margin-bottom: var(--space-6);
+}
+
+.member-avatar {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    font-size: var(--font-size-xl);
+}
+
+.member-details h4 {
+    margin: 0 0 var(--space-1) 0;
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--gray-900);
+}
+
+.member-details p {
+    margin: 0;
+    color: var(--gray-600);
+    font-size: var(--font-size-sm);
+}
+
+.subscriptions-section h5 {
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    color: var(--gray-900);
+    margin-bottom: var(--space-2);
+}
+
+.subscription-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    max-height: 300px;
+    overflow-y: auto;
+    padding: var(--space-2);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius);
+    background: var(--white);
+}
+
+.subscription-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3);
+    border-radius: var(--radius);
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+.subscription-item:hover {
+    background: var(--gray-50);
+}
+
+.subscription-item.subscribed {
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.list-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.list-name {
+    font-weight: 500;
+    color: var(--gray-900);
+    font-size: var(--font-size-sm);
+}
+
+.list-email {
+    color: var(--gray-600);
+    font-size: var(--font-size-xs);
+}
+
+.subscription-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    background: var(--gray-300);
+    border-radius: 12px;
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+.toggle-switch.active {
+    background: var(--success-color);
+}
+
+.toggle-switch::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: var(--white);
+    border-radius: 50%;
+    transition: var(--transition);
+    box-shadow: var(--shadow-sm);
+}
+
+.toggle-switch.active::before {
+    transform: translateX(20px);
+}
+
+.subscription-status {
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    min-width: 80px;
+    text-align: right;
+}
+
+.subscription-status.subscribed {
+    color: var(--success-color);
+}
+
+.subscription-status.not-subscribed {
+    color: var(--gray-500);
+}
+
+
+
 /* Utility Classes */
 .text-center { text-align: center; }
 .text-right { text-align: right; }
diff --git a/web/static/js/app.js b/web/static/js/app.js
index b5fb6c7..38d7bf8 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -155,7 +155,6 @@ class MailingListApp {
             // Render all views
             this.renderLists();
             this.renderMembers();
-            this.renderSubscriptions();
             
         } catch (error) {
             uiManager.handleError(error, 'Failed to load data');
@@ -327,6 +326,15 @@ class MailingListApp {
             // Add action buttons
             const actionsCell = row.cells[4].querySelector('.action-buttons');
             
+            // Create Lists button with proper subscription modal functionality
+            const subscriptionsBtn = document.createElement('button');
+            subscriptionsBtn.className = 'btn btn-sm btn-primary';
+            subscriptionsBtn.innerHTML = '<i class="fas fa-list"></i> Lists';
+            subscriptionsBtn.title = 'Manage Subscriptions';
+            subscriptionsBtn.addEventListener('click', () => {
+                uiManager.showMemberSubscriptionsModal(member);
+            });
+
             const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
                 uiManager.showMemberModal(member);
             });
@@ -340,87 +348,15 @@ class MailingListApp {
                 );
             });
             
+            // Append all buttons
+            actionsCell.appendChild(subscriptionsBtn);
             actionsCell.appendChild(editBtn);
             actionsCell.appendChild(deleteBtn);
             tbody.appendChild(row);
         });
     }
 
-    /**
-     * Render subscriptions view
-     */
-    renderSubscriptions() {
-        const container = document.getElementById('subscriptionsGrid');
-        container.innerHTML = '';
-        
-        if (this.lists.length === 0) {
-            container.innerHTML = `
-                <div class="text-center text-muted">
-                    <p>No mailing lists available.</p>
-                    <button class="btn btn-primary mt-4" onclick="uiManager.switchTab('lists')">
-                        <i class="fas fa-plus"></i> Create Mailing List
-                    </button>
-                </div>
-            `;
-            return;
-        }
-        
-        this.lists.forEach(list => {
-            const members = this.subscriptions.get(list.list_id) || [];
-            const listCard = document.createElement('div');
-            listCard.className = 'subscription-list';
-            
-            listCard.innerHTML = `
-                <div class="subscription-header">
-                    <h3>${uiManager.escapeHtml(list.list_name)}</h3>
-                    <p>${uiManager.escapeHtml(list.list_email)}</p>
-                </div>
-                <div class="subscription-members">
-                    <div class="members-list"></div>
-                </div>
-            `;
-            
-            const membersList = listCard.querySelector('.members-list');
-            
-            if (members.length === 0) {
-                membersList.innerHTML = `
-                    <div class="text-center text-muted">
-                        <p>No members subscribed to this list.</p>
-                    </div>
-                `;
-            } else {
-                members.forEach(member => {
-                    const memberItem = document.createElement('div');
-                    memberItem.className = 'member-item';
-                    
-                    memberItem.innerHTML = `
-                        <div class="member-info">
-                            <div class="member-name">${uiManager.escapeHtml(member.name)}</div>
-                            <div class="member-email">${uiManager.escapeHtml(member.email)}</div>
-                        </div>
-                        <button class="btn btn-sm btn-danger" title="Unsubscribe">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    `;
-                    
-                    // Add unsubscribe functionality
-                    const unsubscribeBtn = memberItem.querySelector('.btn-danger');
-                    unsubscribeBtn.addEventListener('click', () => {
-                        uiManager.showConfirmation(
-                            `Unsubscribe ${member.name} from ${list.list_name}?`,
-                            async () => {
-                                await this.unsubscribeMember(list.list_email, member.email);
-                            }
-                        );
-                    });
-                    
-                    membersList.appendChild(memberItem);
-                });
-            }
-            
-            container.appendChild(listCard);
-        });
-    }
+
 
     /**
      * Delete a mailing list
diff --git a/web/static/js/ui.js b/web/static/js/ui.js
index 5034734..37330a5 100644
--- a/web/static/js/ui.js
+++ b/web/static/js/ui.js
@@ -54,8 +54,19 @@ class UIManager {
             this.showMemberModal();
         });
 
-        document.getElementById('addSubscriptionBtn').addEventListener('click', () => {
-            this.showSubscriptionModal();
+
+
+        // Member subscriptions modal
+        document.getElementById('memberSubscriptionsModalClose').addEventListener('click', () => {
+            this.closeModal(document.getElementById('memberSubscriptionsModal'));
+        });
+
+        document.getElementById('memberSubscriptionsCancelBtn').addEventListener('click', () => {
+            this.closeModal(document.getElementById('memberSubscriptionsModal'));
+        });
+
+        document.getElementById('memberSubscriptionsSaveBtn').addEventListener('click', () => {
+            this.handleMemberSubscriptionsSave();
         });
 
         // Form submissions
@@ -386,6 +397,181 @@ class UIManager {
         }
     }
 
+    /**
+     * Show member subscriptions modal
+     */
+    async showMemberSubscriptionsModal(member) {
+        const modal = document.getElementById('memberSubscriptionsModal');
+        
+        // Update member info
+        document.getElementById('memberSubscriptionsName').textContent = member.name;
+        document.getElementById('memberSubscriptionsEmail').textContent = member.email;
+        document.getElementById('memberSubscriptionsTitle').textContent = `Manage Subscriptions - ${member.name}`;
+        
+        try {
+            // Load all lists and member's current subscriptions
+            const [lists, memberSubscriptions] = await Promise.all([
+                apiClient.getLists(),
+                this.getMemberSubscriptions(member.member_id)
+            ]);
+            
+            this.currentMemberForSubscriptions = member;
+            this.renderSubscriptionCheckboxes(lists, memberSubscriptions);
+            this.showModal(modal);
+        } catch (error) {
+            this.handleError(error, 'Failed to load subscription data');
+        }
+    }
+
+    /**
+     * Get member's current subscriptions
+     */
+    async getMemberSubscriptions(memberId) {
+        const subscriptions = [];
+        
+        // Check each list to see if the member is subscribed
+        for (const [listId, members] of window.app.subscriptions) {
+            if (members.some(m => m.member_id === memberId)) {
+                const list = window.app.lists.find(l => l.list_id === listId);
+                if (list) {
+                    subscriptions.push(list);
+                }
+            }
+        }
+        
+        return subscriptions;
+    }
+
+    /**
+     * Render subscription checkboxes
+     */
+    renderSubscriptionCheckboxes(lists, memberSubscriptions) {
+        const container = document.getElementById('subscriptionCheckboxList');
+        container.innerHTML = '';
+        
+        this.subscriptionChanges = new Map(); // Track changes
+        
+        lists.forEach(list => {
+            const isSubscribed = memberSubscriptions.some(sub => sub.list_id === list.list_id);
+            
+            const item = document.createElement('div');
+            item.className = `subscription-item ${isSubscribed ? 'subscribed' : ''}`;
+            item.dataset.listId = list.list_id;
+            item.dataset.subscribed = isSubscribed.toString();
+            
+            item.innerHTML = `
+                <div class="list-info">
+                    <div class="list-name">${this.escapeHtml(list.list_name)}</div>
+                    <div class="list-email">${this.escapeHtml(list.list_email)}</div>
+                </div>
+                <div class="subscription-toggle">
+                    <div class="toggle-switch ${isSubscribed ? 'active' : ''}" data-list-id="${list.list_id}"></div>
+                    <span class="subscription-status ${isSubscribed ? 'subscribed' : 'not-subscribed'}">
+                        ${isSubscribed ? 'Subscribed' : 'Not subscribed'}
+                    </span>
+                </div>
+            `;
+            
+            // Add click handlers
+            const toggleSwitch = item.querySelector('.toggle-switch');
+            const statusSpan = item.querySelector('.subscription-status');
+            
+            const toggleSubscription = () => {
+                const currentlySubscribed = item.dataset.subscribed === 'true';
+                const newSubscribed = !currentlySubscribed;
+                
+                // Update UI
+                item.dataset.subscribed = newSubscribed.toString();
+                item.className = `subscription-item ${newSubscribed ? 'subscribed' : ''}`;
+                toggleSwitch.className = `toggle-switch ${newSubscribed ? 'active' : ''}`;
+                statusSpan.className = `subscription-status ${newSubscribed ? 'subscribed' : 'not-subscribed'}`;
+                statusSpan.textContent = newSubscribed ? 'Subscribed' : 'Not subscribed';
+                
+                // Track the change
+                const originallySubscribed = memberSubscriptions.some(sub => sub.list_id === list.list_id);
+                if (newSubscribed !== originallySubscribed) {
+                    this.subscriptionChanges.set(list.list_id, {
+                        list: list,
+                        action: newSubscribed ? 'subscribe' : 'unsubscribe'
+                    });
+                } else {
+                    this.subscriptionChanges.delete(list.list_id);
+                }
+                
+                // Update save button state
+                this.updateSubscriptionsSaveButton();
+            };
+            
+            item.addEventListener('click', toggleSubscription);
+            toggleSwitch.addEventListener('click', (e) => {
+                e.stopPropagation();
+                toggleSubscription();
+            });
+            
+            container.appendChild(item);
+        });
+        
+        this.updateSubscriptionsSaveButton();
+    }
+
+    /**
+     * Update save button state based on changes
+     */
+    updateSubscriptionsSaveButton() {
+        const saveBtn = document.getElementById('memberSubscriptionsSaveBtn');
+        const hasChanges = this.subscriptionChanges && this.subscriptionChanges.size > 0;
+        
+        saveBtn.disabled = !hasChanges;
+        saveBtn.innerHTML = hasChanges 
+            ? `<i class="fas fa-save"></i> Save Changes (${this.subscriptionChanges.size})`
+            : `<i class="fas fa-save"></i> No Changes`;
+    }
+
+    /**
+     * Handle saving subscription changes
+     */
+    async handleMemberSubscriptionsSave() {
+        if (!this.subscriptionChanges || this.subscriptionChanges.size === 0) {
+            return;
+        }
+
+        try {
+            this.setLoading(true);
+            
+            const promises = [];
+            
+            for (const [listId, change] of this.subscriptionChanges) {
+                if (change.action === 'subscribe') {
+                    promises.push(
+                        apiClient.createSubscription({
+                            list_email: change.list.list_email,
+                            member_email: this.currentMemberForSubscriptions.email,
+                            active: true
+                        })
+                    );
+                } else {
+                    promises.push(
+                        apiClient.deleteSubscription(
+                            change.list.list_email,
+                            this.currentMemberForSubscriptions.email
+                        )
+                    );
+                }
+            }
+            
+            await Promise.all(promises);
+            
+            this.showNotification(`Successfully updated ${this.subscriptionChanges.size} subscription(s)`, 'success');
+            this.closeModal(document.getElementById('memberSubscriptionsModal'));
+            await window.app.loadData();
+            
+        } catch (error) {
+            this.handleError(error, 'Failed to save subscription changes');
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
     /**
      * Handle API errors
      */