|
document.addEventListener('DOMContentLoaded', () => {
|
|
const userQuotaList = document.getElementById('user-quota-list');
|
|
|
|
async function fetchAndRenderUsers() {
|
|
try {
|
|
const response = await fetch('/api/users');
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
userQuotaList.innerHTML = '';
|
|
|
|
if (data.users.length === 0) {
|
|
userQuotaList.innerHTML = '<p style="text-align: center; padding: 40px;">No users found. Click "Add New User" to create one.</p>';
|
|
return;
|
|
}
|
|
|
|
data.users.forEach(user => {
|
|
const quotaItem = document.createElement('div');
|
|
quotaItem.className = 'user-quota-item card';
|
|
const percentage = user.storage_quota_gb > 0 ? ((user.storage_used_gb / user.storage_quota_gb) * 100).toFixed(2) : 0;
|
|
|
|
quotaItem.innerHTML = `
|
|
<div class="user-info">
|
|
<h4>${user.full_name}</h4>
|
|
<p>${user.email}</p>
|
|
</div>
|
|
<div class="quota-details">
|
|
<div class="storage-gauge small">
|
|
<div class="storage-gauge-bar" style="width: ${percentage}%;"></div>
|
|
</div>
|
|
<p>${user.storage_used_gb} GB / ${user.storage_quota_gb} GB (${percentage}%)</p>
|
|
</div>
|
|
<div class="quota-actions">
|
|
<a href="/users/${user.email}/details" class="btn-outline">View Details</a>
|
|
<a href="/users/${user.email}/edit" class="btn-outline">Edit Quota</a>
|
|
<button class="btn-outline delete-user-btn" data-email="${user.email}">Delete User</button>
|
|
${user.parent_email === null ? `<button class="btn-outline delete-team-btn" data-parent-email="${user.email}">Delete Team</button>` : ''}
|
|
</div>
|
|
`;
|
|
userQuotaList.appendChild(quotaItem);
|
|
});
|
|
|
|
attachButtonListeners();
|
|
|
|
} catch (error) {
|
|
console.error('Error fetching users:', error);
|
|
userQuotaList.innerHTML = '<p>Error loading user quotas.</p>';
|
|
}
|
|
}
|
|
|
|
function attachButtonListeners() {
|
|
document.querySelectorAll('.delete-user-btn').forEach(button => {
|
|
button.addEventListener('click', async (event) => {
|
|
const email = event.target.dataset.email;
|
|
if (confirm(`Are you sure you want to delete user ${email}?`)) {
|
|
try {
|
|
const response = await fetch(`/api/users/${email}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
|
}
|
|
alert(`User ${email} deleted successfully.`);
|
|
fetchAndRenderUsers();
|
|
} catch (error) {
|
|
console.error('Error deleting user:', error);
|
|
alert(`Failed to delete user: ${error.message}`);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.delete-team-btn').forEach(button => {
|
|
button.addEventListener('click', async (event) => {
|
|
const parentEmail = event.target.dataset.parentEmail;
|
|
if (confirm(`Are you sure you want to delete the team managed by ${parentEmail}? This will delete all users created by this account.`)) {
|
|
try {
|
|
const response = await fetch(`/api/teams/${parentEmail}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
|
}
|
|
alert(`Team managed by ${parentEmail} and associated users deleted successfully.`);
|
|
fetchAndRenderUsers();
|
|
} catch (error) {
|
|
console.error('Error deleting team:', error);
|
|
alert(`Failed to delete team: ${error.message}`);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
fetchAndRenderUsers();
|
|
});
|