101 lines
4.7 KiB
Vue
101 lines
4.7 KiB
Vue
<template>
|
||
<!--
|
||
Vue de detail d'une ligne d'audit : tableau field/old/new pour une
|
||
update, sinon snapshot complet sous forme de liste { cle: valeur }.
|
||
-->
|
||
<div class="text-sm">
|
||
<p class="text-xs text-gray-500 mb-2">
|
||
<span v-if="entry.ipAddress">IP: {{ entry.ipAddress }}</span>
|
||
<span v-if="entry.requestId" class="ml-3">Req: {{ entry.requestId }}</span>
|
||
</p>
|
||
|
||
<div v-if="entry.action === 'update'">
|
||
<!-- Tableau de comparaison field/old/new. MalioDataTable n'est
|
||
pas adapte ici : cas presentationnel non-paginable (cf.
|
||
exception documentee dans CLAUDE.md). -->
|
||
<table class="min-w-full border border-gray-200 text-xs">
|
||
<thead class="bg-gray-100">
|
||
<tr>
|
||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.field') }}</th>
|
||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.old_value') }}</th>
|
||
<th class="px-2 py-1 text-left font-medium">{{ t('audit.detail.new_value') }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
|
||
<td class="px-2 py-1">{{ field }}</td>
|
||
<td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
|
||
<td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
|
||
</tr>
|
||
<!-- Modifications de collections to-many : shape different
|
||
{ added: [ids], removed: [ids] } → affiche + et - sur
|
||
la meme ligne pour garder une colonne field unique. -->
|
||
<tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
|
||
<td class="px-2 py-1">{{ field }}</td>
|
||
<td class="px-2 py-1 text-red-700">
|
||
<span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
|
||
<span v-else class="text-gray-400">∅</span>
|
||
</td>
|
||
<td class="px-2 py-1 text-green-700">
|
||
<span v-if="diff.added.length">+ {{ diff.added.join(', ') }}</span>
|
||
<span v-else class="text-gray-400">∅</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div v-else class="space-y-1">
|
||
<div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
|
||
<span class="text-xs text-gray-600">{{ key }}:</span>
|
||
<span class="text-xs">{{ formatValue(value) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import type { AuditLogEntry } from '~/shared/types'
|
||
|
||
const props = defineProps<{ entry: AuditLogEntry }>()
|
||
|
||
const { t } = useI18n()
|
||
|
||
// Extrait les entrees au shape { old, new } pour les updates scalaires.
|
||
const updateDiff = computed<Record<string, { old: unknown; new: unknown }>>(() => {
|
||
const out: Record<string, { old: unknown; new: unknown }> = {}
|
||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||
if (value && typeof value === 'object' && 'old' in value && 'new' in value) {
|
||
out[key] = value as { old: unknown; new: unknown }
|
||
}
|
||
}
|
||
return out
|
||
})
|
||
|
||
// Extrait les entrees au shape { added, removed } pour les modifications
|
||
// de collections to-many (cf. AuditListener::captureCollectionChange).
|
||
const collectionDiff = computed<Record<string, { added: unknown[]; removed: unknown[] }>>(() => {
|
||
const out: Record<string, { added: unknown[]; removed: unknown[] }> = {}
|
||
for (const [key, value] of Object.entries(props.entry.changes)) {
|
||
if (value && typeof value === 'object' && 'added' in value && 'removed' in value) {
|
||
const diff = value as { added: unknown; removed: unknown }
|
||
out[key] = {
|
||
added: Array.isArray(diff.added) ? diff.added : [],
|
||
removed: Array.isArray(diff.removed) ? diff.removed : [],
|
||
}
|
||
}
|
||
}
|
||
return out
|
||
})
|
||
|
||
function formatValue(value: unknown): string {
|
||
if (value === null || value === undefined) return '∅'
|
||
// Passe par i18n plutot qu'un hardcode FR : si une autre locale est
|
||
// ajoutee, le rendu s'adapte sans nouvelle passe sur ce composant.
|
||
if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
|
||
if (typeof value === 'object') return JSON.stringify(value)
|
||
return String(value)
|
||
}
|
||
</script>
|