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

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