feat: highlight source element when navigating from tables to edit page

Clicking the pencil icon in revenus/depenses tables now passes query
params to identify the source row. The edit page auto-expands the
matching section, scrolls to the element, and briefly highlights it
with a blue ring that fades after 2 seconds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-13 06:16:29 +01:00
parent 04db85c688
commit 5c9a8c9b5e
7 changed files with 145 additions and 13 deletions

View File

@@ -77,11 +77,12 @@
<!-- Droite : Édition ou Tagging -->
<div class="w-1/2 flex flex-col bg-gray-50">
<!-- Vue 1 : JsonViewer (mode édition) -->
<JsonViewer
<JsonViewer
v-if="!showTagging && extractedData"
:data="extractedData"
@update:data="extractedData = $event"
:is-loading="false"
:highlight="highlightInfo"
class="flex-1"
/>
@@ -110,7 +111,7 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PdfPreview from '../components/PdfPreview.vue'
import JsonViewer from '../components/JsonViewer.vue'
@@ -127,6 +128,13 @@ const showTagging = ref(false)
const isSaving = ref(false)
const saveError = ref(null)
const highlightInfo = computed(() => {
const q = route.query
if (q.highlight === 'locataire') return { type: 'locataire', lot_numero: q.lot_numero, locataire_nom: q.locataire_nom }
if (q.highlight === 'operation') return { type: 'operation', fournisseur: q.fournisseur, description: q.description }
return null
})
onMounted(async () => {
await loadDocument()
})