feat(ui) : contextual back navigation in DetailHeader

This commit is contained in:
2026-04-04 16:40:40 +02:00
parent 4f13f7d301
commit 239f417a35

View File

@@ -15,9 +15,10 @@
<IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" /> <IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" />
{{ isEditMode ? 'Voir détails' : 'Modifier' }} {{ isEditMode ? 'Voir détails' : 'Modifier' }}
</button> </button>
<button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack"> <NuxtLink :to="backDestination" class="btn btn-ghost btn-sm md:btn-md">
Retour au catalogue <IconLucideArrowLeft class="w-4 h-4 mr-1" aria-hidden="true" />
</button> {{ backLabel }}
</NuxtLink>
</div> </div>
</div> </div>
</template> </template>
@@ -25,8 +26,9 @@
<script setup lang="ts"> <script setup lang="ts">
import IconLucideSquarePen from '~icons/lucide/square-pen' import IconLucideSquarePen from '~icons/lucide/square-pen'
import IconLucideEye from '~icons/lucide/eye' import IconLucideEye from '~icons/lucide/eye'
import IconLucideArrowLeft from '~icons/lucide/arrow-left'
const router = useRouter() const route = useRoute()
const props = defineProps<{ const props = defineProps<{
title: string title: string
@@ -34,18 +36,24 @@ const props = defineProps<{
isEditMode: boolean isEditMode: boolean
canEdit: boolean canEdit: boolean
backLink: string backLink: string
backLinkLabel?: string
}>() }>()
defineEmits<{ defineEmits<{
'toggle-edit': [] 'toggle-edit': []
}>() }>()
function goBack() { const backDestination = computed(() => {
if (window.history.length > 1) { if (route.query.from === 'machine' && route.query.machineId) {
router.back() return `/machine/${route.query.machineId}`
} }
else { return props.backLink
navigateTo(props.backLink) })
const backLabel = computed(() => {
if (route.query.from === 'machine') {
return '← Retour à la machine'
} }
} return props.backLinkLabel ?? 'Retour au catalogue'
})
</script> </script>