feat(catalog): implement step-by-step navigation for offers and suppliers
All checks were successful
Build Docker Image / build (push) Successful in 4m49s

- Transform offers/index.vue to show products list with sparkline charts
- Create nested routes for offers: /offers → /offers/[productId] → /offers/[productId]/[hubId]
- Create nested routes for suppliers: /suppliers → /suppliers/[supplierId] → /suppliers/[supplierId]/[productId] → /suppliers/[supplierId]/[productId]/[hubId]
- Add OffersBreadcrumbs and SuppliersBreadcrumbs components for navigation
- Update HubCard to accept custom linkTo prop
- Key difference: Suppliers calculation uses FindRoutes (single source), Offers uses FindProductRoutes (all sources)
This commit is contained in:
Ruslan Bakiev
2026-01-16 00:52:47 +07:00
parent 210d3e935c
commit 1e87a14065
10 changed files with 1451 additions and 413 deletions

View File

@@ -0,0 +1,63 @@
<template>
<div class="breadcrumbs text-sm">
<ul>
<li v-for="(crumb, index) in breadcrumbs" :key="index">
<NuxtLink v-if="crumb.to" :to="crumb.to" class="hover:text-primary">
{{ crumb.label }}
</NuxtLink>
<span v-else class="text-base-content">{{ crumb.label }}</span>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
supplierId?: string
supplierName?: string
productId?: string
productName?: string
hubId?: string
hubName?: string
}>()
const localePath = useLocalePath()
const { t } = useI18n()
const breadcrumbs = computed(() => {
const crumbs: Array<{ label: string; to?: string }> = []
// Suppliers list
crumbs.push({
label: t('breadcrumbs.suppliers', 'Suppliers'),
to: localePath('/catalog/suppliers')
})
// Supplier
if (props.supplierId) {
const hasNext = props.productId
crumbs.push({
label: props.supplierName || `#${props.supplierId.slice(0, 8)}...`,
to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}`) : undefined
})
}
// Product
if (props.productId) {
const hasNext = props.hubId
crumbs.push({
label: props.productName || `#${props.productId.slice(0, 8)}...`,
to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}/${props.productId}`) : undefined
})
}
// Hub
if (props.hubId) {
crumbs.push({
label: props.hubName || `#${props.hubId.slice(0, 8)}...`
})
}
return crumbs
})
</script>