diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue index 3c9f5f6..85f4639 100644 --- a/app/components/catalog/SelectionPanel.vue +++ b/app/components/catalog/SelectionPanel.vue @@ -1,7 +1,7 @@ + + +
+ +
@@ -85,16 +94,48 @@ const props = defineProps<{ suppliers?: Item[] selectedId?: string loading?: boolean + loadingMore?: boolean + hasMore?: boolean }>() const emit = defineEmits<{ 'select': [type: string, item: Item] 'close': [] + 'load-more': [] }>() const { t } = useI18n() const searchQuery = ref('') +const loadMoreSentinel = ref(null) + +// Infinite scroll using IntersectionObserver +let observer: IntersectionObserver | null = null + +onMounted(() => { + observer = new IntersectionObserver( + (entries) => { + const entry = entries[0] + if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) { + emit('load-more') + } + }, + { threshold: 0.1 } + ) +}) + +watch(loadMoreSentinel, (el) => { + if (el && observer) { + observer.observe(el) + } +}) + +onUnmounted(() => { + if (observer) { + observer.disconnect() + observer = null + } +}) const title = computed(() => { switch (props.selectMode) { diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue index 2e7d039..d04dc0d 100644 --- a/app/components/navigation/MainNavigation.vue +++ b/app/components/navigation/MainNavigation.vue @@ -143,8 +143,8 @@ - -
+ +
+ + +