feat(ui) : contextual back navigation in DetailHeader
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user