Show map by default on /catalog, add offersCount to products
All checks were successful
Build Docker Image / build (push) Successful in 3m27s
All checks were successful
Build Docker Image / build (push) Successful in 3m27s
- Change displayMode from 'hero' to 'map-default' for /catalog - Always show map on catalog page (fullWidthMap when no selectMode) - Add offersCount to GetProducts, GetProductsBySupplier, GetProductsNearHub - Remove CatalogHero from catalog page (hero content stays on /)
This commit is contained in:
@@ -2,7 +2,7 @@ import type { LocationQuery } from 'vue-router'
|
|||||||
|
|
||||||
export type SelectMode = 'product' | 'supplier' | 'hub' | null
|
export type SelectMode = 'product' | 'supplier' | 'hub' | null
|
||||||
export type DisplayMode =
|
export type DisplayMode =
|
||||||
| 'hero'
|
| 'map-default'
|
||||||
| 'grid-products'
|
| 'grid-products'
|
||||||
| 'grid-suppliers'
|
| 'grid-suppliers'
|
||||||
| 'grid-hubs'
|
| 'grid-hubs'
|
||||||
@@ -148,8 +148,8 @@ export function useCatalogSearch() {
|
|||||||
if (supplierId.value) return 'grid-products-from-supplier'
|
if (supplierId.value) return 'grid-products-from-supplier'
|
||||||
if (hubId.value) return 'grid-products-in-hub'
|
if (hubId.value) return 'grid-products-in-hub'
|
||||||
|
|
||||||
// Empty state
|
// Default: show map with all offers
|
||||||
return 'hero'
|
return 'map-default'
|
||||||
})
|
})
|
||||||
|
|
||||||
// Check if we're on the main page (not /catalog)
|
// Check if we're on the main page (not /catalog)
|
||||||
|
|||||||
@@ -57,9 +57,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<!-- Hero for empty state -->
|
<Text v-if="displayMode !== 'map-default'" tone="muted">{{ t('catalog.empty.noResults') }}</Text>
|
||||||
<CatalogHero v-if="displayMode === 'hero'" @start-select="startSelect" />
|
|
||||||
<Text v-else tone="muted">{{ t('catalog.empty.noResults') }}</Text>
|
|
||||||
</template>
|
</template>
|
||||||
</CatalogPage>
|
</CatalogPage>
|
||||||
</template>
|
</template>
|
||||||
@@ -125,23 +123,25 @@ const cardType = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const showMap = computed(() => displayMode.value !== 'hero')
|
// Always show map on /catalog
|
||||||
|
const showMap = computed(() => true)
|
||||||
|
|
||||||
// Full width map when not in select mode (after filter is selected)
|
// Full width map when not in select mode (after filter is selected or default map view)
|
||||||
// selectMode is active = grid + map, after selection = only map
|
// selectMode is active = grid + map, after selection or default = only map
|
||||||
const fullWidthMap = computed(() => !selectMode.value && displayMode.value !== 'hero')
|
const fullWidthMap = computed(() => !selectMode.value)
|
||||||
|
|
||||||
// Use server clustering for grids that need it
|
// Use server clustering for grids that need it
|
||||||
const useServerClustering = computed(() => {
|
const useServerClustering = computed(() => {
|
||||||
// Products grid - show offers clusters
|
// Products grid - show offers clusters
|
||||||
// Hubs grid - show hubs clusters
|
// Hubs grid - show hubs clusters
|
||||||
// Offers grid - show offer clusters
|
// Offers grid - show offer clusters
|
||||||
return ['grid-products', 'grid-hubs', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)
|
// Default map - show all offers clusters
|
||||||
|
return ['map-default', 'grid-products', 'grid-hubs', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const clusterNodeType = computed(() => {
|
const clusterNodeType = computed(() => {
|
||||||
// For products/offers show offer locations
|
// For products/offers/default map show offer locations
|
||||||
if (['grid-products', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)) {
|
if (['map-default', 'grid-products', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)) {
|
||||||
return 'offer'
|
return 'offer'
|
||||||
}
|
}
|
||||||
// For hubs show logistics nodes
|
// For hubs show logistics nodes
|
||||||
@@ -219,7 +219,7 @@ const currentItems = computed(() => {
|
|||||||
case 'grid-offers':
|
case 'grid-offers':
|
||||||
items = offers.value
|
items = offers.value
|
||||||
break
|
break
|
||||||
case 'hero':
|
case 'map-default':
|
||||||
default:
|
default:
|
||||||
items = []
|
items = []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,5 +2,6 @@ query GetProducts {
|
|||||||
products {
|
products {
|
||||||
uuid
|
uuid
|
||||||
name
|
name
|
||||||
|
offersCount
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,5 +2,6 @@ query GetProductsBySupplier($supplierUuid: String!) {
|
|||||||
productsBySupplier(supplierUuid: $supplierUuid) {
|
productsBySupplier(supplierUuid: $supplierUuid) {
|
||||||
uuid
|
uuid
|
||||||
name
|
name
|
||||||
|
offersCount
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,5 +2,6 @@ query GetProductsNearHub($hubUuid: String!, $radiusKm: Float) {
|
|||||||
productsNearHub(hubUuid: $hubUuid, radiusKm: $radiusKm) {
|
productsNearHub(hubUuid: $hubUuid, radiusKm: $radiusKm) {
|
||||||
uuid
|
uuid
|
||||||
name
|
name
|
||||||
|
offersCount
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user