Sub mamangement
This commit is contained in:
James Pattinson
@@ -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; }
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user