refactor(catalog): replace InfoPanel tabs with vertical sections
All checks were successful
Build Docker Image / build (push) Successful in 3m57s

- Remove all tabs from InfoPanel, use stacked sections instead
- Load suppliers (for hub) and hubs (for supplier) immediately
- Show entity header as text, not card
- Simplify relatedPoints to show all points on map
- Add translations for new section titles
This commit is contained in:
Ruslan Bakiev
2026-01-26 19:34:04 +07:00
parent 69bb978526
commit e905098cb5
5 changed files with 236 additions and 323 deletions

View File

@@ -44,7 +44,6 @@
:related-suppliers="relatedSuppliers"
:related-offers="relatedOffers"
:selected-product="infoProduct ?? null"
:current-tab="infoTab"
:loading="infoLoading"
:loading-products="isLoadingProducts"
:loading-hubs="isLoadingHubs"
@@ -54,7 +53,6 @@
@add-to-filter="onInfoAddToFilter"
@open-info="onInfoOpenRelated"
@select-product="onInfoSelectProduct"
@update:current-tab="setInfoTab"
/>
<!-- Quote results: show offers after search -->
@@ -111,7 +109,6 @@ const {
catalogMode,
selectMode,
infoId,
infoTab,
infoProduct,
productId,
supplierId,
@@ -124,7 +121,6 @@ const {
cancelSelect,
openInfo,
closeInfo,
setInfoTab,
setInfoProduct,
setLabel
} = useCatalogSearch()
@@ -261,7 +257,7 @@ watch(infoProduct, async (productUuid) => {
}
})
// Related points for Info mode (shown on map) - filtered by active tab
// Related points for Info mode (shown on map) - show all related entities
const relatedPoints = computed(() => {
if (!infoId.value) return []
@@ -273,57 +269,31 @@ const relatedPoints = computed(() => {
type: 'hub' | 'supplier' | 'offer'
}> = []
const currentTab = infoTab.value
// Add all hubs
relatedHubs.value.forEach(hub => {
if (hub.latitude && hub.longitude) {
points.push({
uuid: hub.uuid,
name: hub.name,
latitude: hub.latitude,
longitude: hub.longitude,
type: 'hub'
})
}
})
// Show content based on active tab
// Hub entity: offers tab → offers, suppliers tab → suppliers
// Supplier entity: offers tab → offers, hubs tab → hubs
// Offer entity: hubs tab → hubs, suppliers tab → suppliers
// Add hubs (for supplier's hubs tab or offer's hubs tab)
if (currentTab === 'hubs') {
relatedHubs.value.forEach(hub => {
if (hub.latitude && hub.longitude) {
points.push({
uuid: hub.uuid,
name: hub.name,
latitude: hub.latitude,
longitude: hub.longitude,
type: 'hub'
})
}
})
}
// Add suppliers (for hub's suppliers tab or offer's suppliers tab)
if (currentTab === 'suppliers') {
relatedSuppliers.value.forEach(supplier => {
if (supplier.latitude && supplier.longitude) {
points.push({
uuid: supplier.uuid,
name: supplier.name,
latitude: supplier.latitude,
longitude: supplier.longitude,
type: 'supplier'
})
}
})
}
// Add offers (for hub's/supplier's offers tab when product is selected)
if (currentTab === 'offers' && infoProduct.value) {
relatedOffers.value.forEach(offer => {
if (offer.latitude && offer.longitude) {
points.push({
uuid: offer.uuid,
name: offer.productName || offer.name,
latitude: offer.latitude,
longitude: offer.longitude,
type: 'offer'
})
}
})
}
// Add all suppliers
relatedSuppliers.value.forEach(supplier => {
if (supplier.latitude && supplier.longitude) {
points.push({
uuid: supplier.uuid,
name: supplier.name,
latitude: supplier.latitude,
longitude: supplier.longitude,
type: 'supplier'
})
}
})
return points
})