jamesp/sasa-maillist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sub mamangement

Browse Source
This commit is contained in:
James Pattinson
2025-10-12 21:20:53 +00:00
parent ba1bf32393
commit 9b6a6dab06
6 changed files with 463 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/README.md
View File

@@ -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

64
web/index.html
View File

@@ -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">
<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">

6
web/nginx.conf
View File

@@ -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

184
web/static/css/style.css
View File

@@ -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; }

86
web/static/js/app.js
View File

@@ -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

190
web/static/js/ui.js
View File

@@ -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
*/