feat(06.2-04): frontend — user_handle filter, fetch+Blob export, daily-export section
- adminListAuditLog: rename user_id param to user_handle (backend API change)
- adminExportAuditLogCsv(): fetch+Blob pattern — sends Bearer header (D-13, T-06.2-04-03)
- adminListDailyExports(): raw fetch returning JSON for daily export listing (D-17)
- adminDownloadDailyExport(date): fetch+Blob download with audit-{date}.csv filename (D-17)
- AuditLogTab: rename filters.user_id to filters.user_handle + label 'User handle' (D-12, C-5)
- AuditLogTab: exportCsv() replaced with async fetch+Blob call, exportingCsv loading state
- AuditLogTab: daily exports section below pagination — date dropdown + Download button (D-17, C-4)
- window.location.href removed from AuditLogTab (broken auth bypass closed)
- Build exits 0, full backend suite: 337 passed, 1 pre-existing failure
This commit is contained in:
@@ -19,9 +19,9 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">User</label>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">User handle</label>
|
||||
<input
|
||||
v-model="filters.user_id"
|
||||
v-model="filters.user_handle"
|
||||
type="text"
|
||||
placeholder="All users"
|
||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-36"
|
||||
@@ -49,10 +49,16 @@
|
||||
</button>
|
||||
<button
|
||||
@click="exportCsv"
|
||||
class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
:disabled="exportingCsv"
|
||||
class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
|
||||
>
|
||||
Export CSV
|
||||
<span v-if="exportingCsv" class="flex items-center gap-1">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
||||
Exporting…
|
||||
</span>
|
||||
<span v-else>Export CSV</span>
|
||||
</button>
|
||||
<p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
@@ -119,6 +125,44 @@
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Daily exports section (D-17, C-4) -->
|
||||
<div class="border-t border-gray-100 mt-6 pt-6">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Daily exports</h3>
|
||||
|
||||
<p v-if="loadingExports" class="text-sm text-gray-400">Loading exports…</p>
|
||||
|
||||
<p v-else-if="dailyExports.length === 0" class="text-sm text-gray-400 italic">
|
||||
No daily exports available.
|
||||
</p>
|
||||
|
||||
<div v-else class="flex items-end gap-3">
|
||||
<select
|
||||
v-model="selectedExportDate"
|
||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white"
|
||||
>
|
||||
<option value="" disabled>Choose a date</option>
|
||||
<option
|
||||
v-for="exp in dailyExports"
|
||||
:key="exp.date"
|
||||
:value="exp.date"
|
||||
>
|
||||
{{ exp.date }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
@click="downloadDailyExport"
|
||||
:disabled="!selectedExportDate || downloadingExport"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-4 py-2 rounded-lg disabled:opacity-50 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<span v-if="downloadingExport" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="exportsError" class="text-xs text-red-600 mt-2">{{ exportsError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -131,16 +175,26 @@ const total = ref(0)
|
||||
const page = ref(1)
|
||||
const perPage = 50
|
||||
const loading = ref(false)
|
||||
const exportingCsv = ref(false)
|
||||
const exportError = ref(null)
|
||||
|
||||
// Daily exports state (D-17)
|
||||
const dailyExports = ref([])
|
||||
const loadingExports = ref(false)
|
||||
const selectedExportDate = ref('')
|
||||
const downloadingExport = ref(false)
|
||||
const exportsError = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
start: '',
|
||||
end: '',
|
||||
user_id: '',
|
||||
user_handle: '',
|
||||
event_type: '',
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchLog()
|
||||
loadDailyExports()
|
||||
})
|
||||
|
||||
async function fetchLog() {
|
||||
@@ -149,7 +203,7 @@ async function fetchLog() {
|
||||
const data = await api.adminListAuditLog({
|
||||
start: filters.start || undefined,
|
||||
end: filters.end || undefined,
|
||||
user_id: filters.user_id || undefined,
|
||||
user_handle: filters.user_handle || undefined,
|
||||
event_type: filters.event_type || undefined,
|
||||
page: page.value,
|
||||
per_page: perPage,
|
||||
@@ -182,13 +236,47 @@ function nextPage() {
|
||||
}
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
const params = new URLSearchParams({ format: 'csv' })
|
||||
if (filters.start) params.set('start', filters.start)
|
||||
if (filters.end) params.set('end', filters.end)
|
||||
if (filters.user_id) params.set('user_id', filters.user_id)
|
||||
if (filters.event_type) params.set('event_type', filters.event_type)
|
||||
window.location.href = `/api/admin/audit-log/export?${params}`
|
||||
async function exportCsv() {
|
||||
exportingCsv.value = true
|
||||
exportError.value = null
|
||||
try {
|
||||
await api.adminExportAuditLogCsv({
|
||||
start: filters.start || undefined,
|
||||
end: filters.end || undefined,
|
||||
user_handle: filters.user_handle || undefined,
|
||||
event_type: filters.event_type || undefined,
|
||||
})
|
||||
} catch (e) {
|
||||
exportError.value = 'Export failed. Please try again.'
|
||||
} finally {
|
||||
exportingCsv.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDailyExports() {
|
||||
loadingExports.value = true
|
||||
exportsError.value = null
|
||||
try {
|
||||
const data = await api.adminListDailyExports()
|
||||
dailyExports.value = data.items ?? []
|
||||
} catch (e) {
|
||||
dailyExports.value = []
|
||||
} finally {
|
||||
loadingExports.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadDailyExport() {
|
||||
if (!selectedExportDate.value) return
|
||||
downloadingExport.value = true
|
||||
exportsError.value = null
|
||||
try {
|
||||
await api.adminDownloadDailyExport(selectedExportDate.value)
|
||||
} catch (e) {
|
||||
exportsError.value = 'Download failed. Please try again.'
|
||||
} finally {
|
||||
downloadingExport.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimestamp(iso) {
|
||||
|
||||
Reference in New Issue
Block a user