Merge remote-tracking branch 'origin/master'

ui/src/pages/ProductPricing.vue

@@ -53,9 +53,10 @@
         :virtual-scroll-sticky-size-start="headerHeight"
         :virtual-scroll-slice-size="36"
         :rows-per-page-options="[0]"
-        :pagination="{ rowsPerPage: 0 }"
+        v-model:pagination="tablePagination"
         hide-bottom
         :table-style="tableStyle"
+        @virtual-scroll="onTableVirtualScroll"
       >
         <template #header="props">
           <q-tr :props="props" class="header-row-fixed">
@@ -309,10 +310,13 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useProductPricingStore } from 'src/stores/ProductPricingStore'
 
 const store = useProductPricingStore()
+const FETCH_LIMIT = 500
+const currentOffset = ref(0)
+const loadingMore = ref(false)
 
 const usdToTry = 38.25
 const eurToTry = 41.6
@@ -381,6 +385,12 @@ const headerFilterFieldSet = new Set([
 ])
 
 const mainTableRef = ref(null)
+const tablePagination = ref({
+  page: 1,
+  rowsPerPage: 0,
+  sortBy: 'productCode',
+  descending: false
+})
 const selectedMap = ref({})
 const selectedCurrencies = ref(['USD', 'EUR', 'TRY'])
 const showSelectedOnly = ref(false)
@@ -570,6 +580,7 @@ const selectedRowCount = computed(() => Object.values(selectedMap.value).filter(
 const selectedVisibleCount = computed(() => visibleRowIds.value.filter((id) => !!selectedMap.value[id]).length)
 const allSelectedVisible = computed(() => visibleRowIds.value.length > 0 && selectedVisibleCount.value === visibleRowIds.value.length)
 const someSelectedVisible = computed(() => selectedVisibleCount.value > 0)
+const hasMoreRows = computed(() => Boolean(store.hasMore))
 
 function isHeaderFilterField (field) {
   return headerFilterFieldSet.has(field)
@@ -840,12 +851,52 @@ function clearAllCurrencies () {
   selectedCurrencies.value = []
 }
 
+async function fetchChunk ({ reset = false } = {}) {
+  const offset = reset ? 0 : currentOffset.value
+  const result = await store.fetchRows({
+    limit: FETCH_LIMIT,
+    offset,
+    append: !reset
+  })
+  const fetched = Number(result?.fetched) || 0
+  currentOffset.value = offset + fetched
+  return fetched
+}
+
+async function loadMoreRows () {
+  if (loadingMore.value || store.loading || !hasMoreRows.value) return
+  loadingMore.value = true
+  try {
+    await fetchChunk({ reset: false })
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+function onTableVirtualScroll (details) {
+  const to = Number(details?.to || 0)
+  if (!Number.isFinite(to)) return
+  if (to >= filteredRows.value.length - 25) {
+    void loadMoreRows()
+  }
+}
+
+async function ensureEnoughVisibleRows (minRows = 80, maxBatches = 4) {
+  let guard = 0
+  while (hasMoreRows.value && filteredRows.value.length < minRows && guard < maxBatches) {
+    await loadMoreRows()
+    guard++
+  }
+}
+
 async function reloadData () {
   const startedAt = Date.now()
   console.info('[product-pricing][ui] reload:start', {
     at: new Date(startedAt).toISOString()
   })
-  await store.fetchRows()
+  currentOffset.value = 0
+  await fetchChunk({ reset: true })
+  await ensureEnoughVisibleRows(120, 6)
   console.info('[product-pricing][ui] reload:done', {
     duration_ms: Date.now() - startedAt,
     row_count: Array.isArray(store.rows) ? store.rows.length : 0,
@@ -857,6 +908,19 @@ async function reloadData () {
 onMounted(async () => {
   await reloadData()
 })
+
+watch(
+  [
+    columnFilters,
+    numberRangeFilters,
+    dateRangeFilters,
+    showSelectedOnly,
+    () => tablePagination.value.sortBy,
+    () => tablePagination.value.descending
+  ],
+  () => { void ensureEnoughVisibleRows(80, 4) },
+  { deep: true }
+)
 </script>
 
 <style scoped>