Fix catalog UI: navbar alignment, selection panel, map search, infinite scroll
All checks were successful
Build Docker Image / build (push) Successful in 3m37s
All checks were successful
Build Docker Image / build (push) Successful in 3m37s
- Fix team selector alignment in navbar (use items-center, fixed height) - Fix SelectionPanel header padding to account for parent p-4 - Add map search input (white glass, positioned next to panel) - Add infinite scroll to SelectionPanel with IntersectionObserver - Products load all at once (no server-side pagination yet) - Hubs and Suppliers support pagination with loadMore
This commit is contained in:
@@ -19,8 +19,11 @@
|
||||
:hubs="hubs"
|
||||
:suppliers="suppliers"
|
||||
:loading="selectionLoading"
|
||||
:loading-more="selectionLoadingMore"
|
||||
:has-more="selectionHasMore"
|
||||
@select="onSelectItem"
|
||||
@close="cancelSelect"
|
||||
@load-more="onLoadMore"
|
||||
/>
|
||||
|
||||
<!-- Quote results: show offers after search -->
|
||||
@@ -62,9 +65,9 @@ const {
|
||||
} = useCatalogSearch()
|
||||
|
||||
// Composables for data (initialize immediately when selectMode changes)
|
||||
const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
|
||||
const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
|
||||
const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
|
||||
const { items: products, isLoading: productsLoading, isLoadingMore: productsLoadingMore, canLoadMore: productsCanLoadMore, loadMore: loadMoreProducts, init: initProducts } = useCatalogProducts()
|
||||
const { items: hubs, isLoading: hubsLoading, isLoadingMore: hubsLoadingMore, canLoadMore: hubsCanLoadMore, loadMore: loadMoreHubs, init: initHubs } = useCatalogHubs()
|
||||
const { items: suppliers, isLoading: suppliersLoading, isLoadingMore: suppliersLoadingMore, canLoadMore: suppliersCanLoadMore, loadMore: loadMoreSuppliers, init: initSuppliers } = useCatalogSuppliers()
|
||||
|
||||
// Selection loading state
|
||||
const selectionLoading = computed(() => {
|
||||
@@ -74,6 +77,29 @@ const selectionLoading = computed(() => {
|
||||
return false
|
||||
})
|
||||
|
||||
// Selection loading more state
|
||||
const selectionLoadingMore = computed(() => {
|
||||
if (selectMode.value === 'product') return productsLoadingMore.value
|
||||
if (selectMode.value === 'hub') return hubsLoadingMore.value
|
||||
if (selectMode.value === 'supplier') return suppliersLoadingMore.value
|
||||
return false
|
||||
})
|
||||
|
||||
// Selection has more state
|
||||
const selectionHasMore = computed(() => {
|
||||
if (selectMode.value === 'product') return productsCanLoadMore.value
|
||||
if (selectMode.value === 'hub') return hubsCanLoadMore.value
|
||||
if (selectMode.value === 'supplier') return suppliersCanLoadMore.value
|
||||
return false
|
||||
})
|
||||
|
||||
// Load more handler
|
||||
const onLoadMore = () => {
|
||||
if (selectMode.value === 'product') loadMoreProducts()
|
||||
if (selectMode.value === 'hub') loadMoreHubs()
|
||||
if (selectMode.value === 'supplier') loadMoreSuppliers()
|
||||
}
|
||||
|
||||
// Initialize data and sync map view when selectMode changes
|
||||
watch(selectMode, async (mode) => {
|
||||
if (mode === 'product') {
|
||||
|
||||
Reference in New Issue
Block a user