feat(catalog): add loading states for InfoPanel tabs and filter map by active tab
All checks were successful
Build Docker Image / build (push) Successful in 3m35s

- Add separate loading states for products, hubs, suppliers, offers
- Show spinner on tabs while loading, disable tab during load
- Filter relatedPoints on map by current active tab
This commit is contained in:
Ruslan Bakiev
2026-01-26 17:49:59 +07:00
parent f680740f52
commit 3f56a2f117
3 changed files with 156 additions and 93 deletions

View File

@@ -46,6 +46,10 @@
:selected-product="infoProduct ?? null"
:current-tab="infoTab"
:loading="infoLoading"
:loading-products="isLoadingProducts"
:loading-hubs="isLoadingHubs"
:loading-suppliers="isLoadingSuppliers"
:loading-offers="isLoadingOffers"
@close="onInfoClose"
@add-to-filter="onInfoAddToFilter"
@open-info="onInfoOpenRelated"
@@ -134,6 +138,10 @@ const {
relatedOffers,
selectedProduct,
isLoading: infoLoading,
isLoadingProducts,
isLoadingHubs,
isLoadingSuppliers,
isLoadingOffers,
loadInfo,
selectProduct: selectInfoProduct,
clearInfo
@@ -253,7 +261,7 @@ watch(infoProduct, async (productUuid) => {
}
})
// Related points for Info mode (shown on map)
// Related points for Info mode (shown on map) - filtered by active tab
const relatedPoints = computed(() => {
if (!infoId.value) return []
@@ -265,44 +273,57 @@ const relatedPoints = computed(() => {
type: 'hub' | 'supplier' | 'offer'
}> = []
// Add 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'
})
}
})
const currentTab = infoTab.value
// Add 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'
})
}
})
// 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 offers
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 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'
})
}
})
}
return points
})