feat(09-03): extract AdminUsersView + AdminQuotasView from tab components
- Created frontend/src/views/admin/AdminUsersView.vue (verbatim extraction of AdminUsersTab.vue) - Created frontend/src/views/admin/AdminQuotasView.vue (verbatim extraction of AdminQuotasTab.vue) - Both files have no defineProps, no top-level padding, identical import paths (../../api/client.js, ../../utils/formatters.js) - Line counts match source exactly (480 and 182 lines respectively) - Build succeeds with no Vite errors referencing new view files
This commit is contained in:
curo1305
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
Loading quotas…
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="rows.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</div>
|
||||
|
||||
<!-- Quotas table -->
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 text-left">
|
||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Used</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Limit</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Usage %</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr v-for="row in rows" :key="row.id" class="bg-white text-sm">
|
||||
<td class="px-4 py-3 text-gray-900">{{ row.email }}</td>
|
||||
<td class="px-4 py-3 text-gray-700">{{ formatMB(row.used_bytes) }}</td>
|
||||
|
||||
<!-- Limit cell — inline edit when editing -->
|
||||
<td class="px-4 py-3">
|
||||
<div v-if="editingId === row.id">
|
||||
<input
|
||||
v-model.number="editLimitMB"
|
||||
type="number"
|
||||
min="1"
|
||||
step="1"
|
||||
class="block w-28 rounded-lg px-2 py-1 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
@keyup.enter="saveQuota(row)"
|
||||
@keyup.escape="cancelEdit"
|
||||
/>
|
||||
<p v-if="editWarning && editingId === row.id" class="mt-1 text-xs text-amber-600">
|
||||
New limit is below current usage ({{ formatMB(row.used_bytes) }}). Existing documents will not be deleted, but uploads will be blocked.
|
||||
</p>
|
||||
</div>
|
||||
<span v-else class="text-gray-700">{{ formatMB(row.limit_bytes) }}</span>
|
||||
</td>
|
||||
|
||||
<td class="px-4 py-3 text-gray-700">
|
||||
{{ usagePercent(row.used_bytes, row.limit_bytes) }}%
|
||||
</td>
|
||||
|
||||
<!-- Actions cell -->
|
||||
<td class="px-4 py-3">
|
||||
<div v-if="editingId === row.id" class="flex items-center gap-2">
|
||||
<button
|
||||
@click="saveQuota(row)"
|
||||
:disabled="savingId === row.id"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold disabled:opacity-50 flex items-center gap-1"
|
||||
>
|
||||
<span v-if="savingId === row.id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
||||
{{ savingId === row.id ? 'Saving…' : 'Save' }}
|
||||
</button>
|
||||
<span class="text-gray-300">·</span>
|
||||
<button @click="cancelEdit" class="text-sm text-gray-500 hover:text-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
@click="startEdit(row)"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-700"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import * as api from '../../api/client.js'
|
||||
|
||||
const rows = ref([])
|
||||
const loading = ref(false)
|
||||
const loadError = ref(null)
|
||||
const editingId = ref(null)
|
||||
const editLimitMB = ref(0)
|
||||
const editWarning = ref(false)
|
||||
const savingId = ref(null)
|
||||
|
||||
function formatMB(bytes) {
|
||||
if (bytes == null) return '—'
|
||||
return Math.round(bytes / 1048576) + ' MB'
|
||||
}
|
||||
|
||||
function usagePercent(used, limit) {
|
||||
if (!limit) return 0
|
||||
return Math.round((used / limit) * 100)
|
||||
}
|
||||
|
||||
function startEdit(row) {
|
||||
editingId.value = row.id
|
||||
editLimitMB.value = Math.round(row.limit_bytes / 1048576)
|
||||
editWarning.value = false
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId.value = null
|
||||
editWarning.value = false
|
||||
}
|
||||
|
||||
async function saveQuota(row) {
|
||||
const newBytes = editLimitMB.value * 1048576
|
||||
if (newBytes < row.used_bytes) {
|
||||
editWarning.value = true
|
||||
}
|
||||
savingId.value = row.id
|
||||
try {
|
||||
const result = await api.adminUpdateQuota(row.id, newBytes)
|
||||
// Update the row in place
|
||||
const idx = rows.value.findIndex(r => r.id === row.id)
|
||||
if (idx !== -1) {
|
||||
rows.value[idx] = {
|
||||
...rows.value[idx],
|
||||
limit_bytes: result.limit_bytes,
|
||||
used_bytes: result.used_bytes,
|
||||
}
|
||||
if (result.warning) {
|
||||
editWarning.value = true
|
||||
// Keep edit mode open briefly to show warning, then close
|
||||
setTimeout(() => {
|
||||
editingId.value = null
|
||||
editWarning.value = false
|
||||
}, 3000)
|
||||
} else {
|
||||
editingId.value = null
|
||||
editWarning.value = false
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
loadError.value = e.message
|
||||
editingId.value = null
|
||||
} finally {
|
||||
savingId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
// Load users first to get email addresses
|
||||
const usersData = await api.adminListUsers()
|
||||
const users = usersData.items || []
|
||||
|
||||
// Fetch quotas for all users in parallel
|
||||
const quotaResults = await Promise.allSettled(
|
||||
users.map(u => api.adminGetUserQuota(u.id).then(q => ({ ...q, id: u.id, email: u.email })))
|
||||
)
|
||||
|
||||
rows.value = quotaResults
|
||||
.filter(r => r.status === 'fulfilled')
|
||||
.map(r => r.value)
|
||||
} catch (e) {
|
||||
loadError.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user