Merge pull request #1010 from frappe/backend-pagination

feat: query pagination

Author: nextchamp-saqib

frontend/.prettierrc.json

@@ -2,6 +2,8 @@
   "semi": false,
   "singleQuote": true,
   "useTabs": true,
+  "tabWidth": 4,
   "printWidth": 100,
-  "vueIndentScriptAndStyle": false
-}
+  "vueIndentScriptAndStyle": false,
+  "trailingComma": "all"
+}

frontend/package.json

@@ -51,7 +51,7 @@
 		"eslint-plugin-vue": "^9.1.1",
 		"patch-package": "^8.0.1",
 		"postcss": "^8.4.14",
-		"prettier": "2.8.4",
+		"prettier": "3.1.0",
 		"sass": "^1.54.9",
 		"tailwindcss": "3.4.17",
 		"typescript": "^5.5.2",

frontend/src2/charts/chart.ts

@@ -72,22 +72,23 @@ function makeChart(name: string) {
 		addFilterOperation(query)
 		addChartOperation(query)
 		addOrderByOperation(query)
-		addLimitOperation(query)
 
+		const currentLimit = chart.doc.config.limit || 100
 		const shouldExecute =
 			force ||
 			reload ||
 			!dataQuery.value.result.executedSQL ||
 			dataQuery.value.adhocFilters ||
-			JSON.stringify(query.doc.operations) !== JSON.stringify(dataQuery.value.doc.operations)
+			JSON.stringify(query.doc.operations) !== JSON.stringify(dataQuery.value.doc.operations) ||
+			currentLimit !== dataQuery.value.pageSize
 
 		if (!shouldExecute) {
 			return
 		}
 
 		dataQuery.value.setOperations(copy(query.doc.operations))
 		dataQuery.value.doc.use_live_connection = query.doc.use_live_connection
-		return dataQuery.value.execute(force)
+		return dataQuery.value.execute(force, chart.doc.config.limit)
 	}
 
 	function validateConfig() {
@@ -362,12 +363,6 @@ function makeChart(name: string) {
 		})
 	}
 
-	function addLimitOperation(query: Query) {
-		if (chart.doc.config.limit) {
-			query.addLimit(chart.doc.config.limit)
-		}
-	}
-
 	function updateGranularity(column_name: string, granularity: GranularityType) {
 		if ('x_axis' in chart.doc.config) {
 			if (chart.doc.config.x_axis?.dimension?.dimension_name === column_name) {

frontend/src2/charts/components/ChartRenderer.vue

@@ -197,7 +197,7 @@ const showExpandedChartDialog = ref(false)
 			:result="result"
 			@drill-down="onNumberChartDrillDown"
 		/>
-		<TableChart v-else-if="!loading && chart_type == 'Table'" :chart="props.chart" />
+		<TableChart v-else-if="chart_type == 'Table'" :chart="props.chart" />
 
 		<div v-else class="flex h-full flex-1 flex-col items-center justify-center rounded border">
 			<template v-if="loading">

frontend/src2/components/DataTable.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { Button, FormControl, LoadingIndicator } from 'frappe-ui'
-import { ChevronLeft, ChevronRight, Plus, Search, Table2Icon } from 'lucide-vue-next'
-import { computed, nextTick, reactive, ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { Button, LoadingIndicator } from 'frappe-ui'
+import { Plus, Search, Table2Icon } from 'lucide-vue-next'
+import { computed, nextTick, ref } from 'vue'
+import { usePagination } from '../composables/usePagination'
 import { createHeaders, formatNumber, getShortNumber } from '../helpers'
 import { FIELDTYPES } from '../helpers/constants'
 import {
@@ -18,8 +20,11 @@ import {
 	rank_rules,
 	text_rules,
 } from '../query/components/formatting_utils'
+import { matchesFilter, parseFilterString } from '../query/helpers'
 import { QueryResultColumn, QueryResultRow, SortDirection, SortOrder } from '../types/query.types'
 import DataTableColumn from './DataTableColumn.vue'
+import DataTableFooter from './DataTableFooter.vue'
+import LazyTextInput from './LazyTextInput.vue'
 
 const props = defineProps<{
 	columns: QueryResultColumn[] | undefined
@@ -33,6 +38,7 @@ const props = defineProps<{
 	replaceNullsWithZeros?: boolean
 	compactNumbers?: boolean
 	loading?: boolean
+	filtering?: boolean
 	onExport?: Function
 	downloading?: boolean
 	formatGroup?: FormatGroupArgs
@@ -43,6 +49,12 @@ const props = defineProps<{
 	stickyColumns?: string[]
 	columnWidths?: Record<string, number>
 	textWrap?: Record<string, boolean>
+	pageSize?: number
+	totalRowCount?: number
+	onPageChange?: (page: number) => void
+	currentPage?: number
+	onFetchCount?: () => Promise<void> | void
+	onFilterChange?: (filters: Record<string, string>) => void
 }>()
 
 const headers = computed(() => {
@@ -145,40 +157,26 @@ const visibleRows = computed(() => {
 	const rows = props.rows
 	if (!columns?.length || !rows?.length || !props.showFilterRow) return rows
 
+	if (props.onFilterChange) return rows
+
 	const filters = filterPerColumn.value
 	return rows.filter((row) => {
-		return Object.entries(filters).every(([col, filter]) => {
-			if (!filter) return true
-			const isNumber = isNumberColumn(col)
-			const value = row[col]
-			return applyFilter(value, isNumber, filter)
+		return Object.entries(filters).every(([col, filterStr]) => {
+			if (!filterStr) return true
+			const parsed = parseFilterString(filterStr)
+			if (!parsed) return true
+			return matchesFilter(row[col], parsed)
 		})
 	})
 })
 
-function applyFilter(value: any, isNumber: boolean, filter: string) {
-	if (isNumber) {
-		const operator = ['>', '<', '>=', '<=', '=', '!='].find((op) => filter.startsWith(op))
-		if (operator) {
-			const num = Number(filter.replace(operator, ''))
-			switch (operator) {
-				case '>':
-					return Number(value) > num
-				case '<':
-					return Number(value) < num
-				case '>=':
-					return Number(value) >= num
-				case '<=':
-					return Number(value) <= num
-				case '=':
-					return Number(value) === num
-				case '!=':
-					return Number(value) !== num
-			}
-		}
-	}
-	return String(value).toLowerCase().includes(filter.toLowerCase())
-}
+watchDebounced(
+	filterPerColumn,
+	(filters) => {
+		props.onFilterChange?.(filters)
+	},
+	{ deep: true, debounce: 300 },
+)
 
 const totalPerColumn = computed(() => {
 	const columns = props.columns
@@ -216,32 +214,14 @@ const totalColumnTotal = computed(() => {
 	return Object.values(totalPerColumn.value).reduce((acc, val) => acc + val, 0)
 })
 
-const page = reactive({
-	current: 1,
-	size: 100,
-	total: 1,
-	startIndex: 0,
-	endIndex: 99,
-	next() {
-		if (page.current < page.total) {
-			page.current++
-		}
-	},
-	prev() {
-		if (page.current > 1) {
-			page.current--
-		}
-	},
-})
-// @ts-ignore
-page.total = computed(() => {
-	if (!visibleRows.value?.length) return 1
-	return Math.ceil(visibleRows.value.length / page.size)
+const pagination = usePagination({
+	pageSize: computed(() => props.pageSize ?? 100),
+	rowCount: computed(() => visibleRows.value?.length ?? 0),
+	totalRowCount: computed(() => props.totalRowCount),
+	currentPage: computed(() => props.currentPage),
+	onPageChange: props.onPageChange,
+	enabled: computed(() => Boolean(props.enablePagination)),
 })
-// @ts-ignore
-page.startIndex = computed(() => (page.current - 1) * page.size)
-// @ts-ignore
-page.endIndex = computed(() => Math.min(page.current * page.size, visibleRows.value?.length || 0))
 
 const colorByPercentage = {
 	0: 'bg-white text-gray-900',
@@ -661,16 +641,23 @@ function toggleNewColumn() {
 								...getColumnWidthStyle(column.name),
 							}"
 						>
-							<FormControl
-								type="text"
-								v-model="filterPerColumn[column.name]"
-								autocomplete="off"
+							<LazyTextInput
+								:model-value="filterPerColumn[column.name]"
+								@update:model-value="
+									(value) => (filterPerColumn[column.name] = value)
+								"
 								class="[&_input]:h-6 [&_input]:bg-gray-200/80"
 							>
 								<template #prefix>
-									<Search class="h-4 w-4 text-gray-500" stroke-width="1.5" />
+									<Search class="size-3.5 text-gray-500" :stroke-width="1.5" />
+								</template>
+								<template #suffix>
+									<LoadingIndicator
+										v-if="props.loading || props.filtering"
+										class="size-3.5 text-gray-500"
+									/>
 								</template>
-							</FormControl>
+							</LazyTextInput>
 						</td>
 						<td
 							v-if="props.showRowTotals"
@@ -681,17 +668,24 @@ function toggleNewColumn() {
 						</td>
 					</tr>
 				</thead>
-				<tbody>
+				<tbody
+					:class="
+						props.filtering ? 'opacity-60 transition-opacity' : 'transition-opacity'
+					"
+				>
 					<tr
-						v-for="(row, idx) in visibleRows?.slice(page.startIndex, page.endIndex)"
+						v-for="(row, idx) in visibleRows?.slice(
+							pagination.startIndex.value,
+							pagination.endIndex.value,
+						)"
 						:key="idx"
 					>
 						<td
 							class="tnum sticky left-0 h-8 whitespace-nowrap border-b border-r bg-white px-3 text-right text-xs"
 							width="1px"
 							height="30px"
 						>
-							{{ idx + page.startIndex + 1 }}
+							{{ idx + pagination.rowDisplayOffset.value + 1 }}
 						</td>
 
 						<td
@@ -777,45 +771,20 @@ function toggleNewColumn() {
 			</table>
 		</div>
 		<slot name="footer">
-			<div class="flex flex-shrink-0 items-center justify-between border-t px-2 py-1">
-				<slot name="footer-left">
-					<div></div>
-				</slot>
-				<slot name="footer-right">
-					<div class="flex items-center gap-2">
-						<div
-							v-if="props.enablePagination && visibleRows?.length && page.total > 1"
-							class="flex flex-shrink-0 items-center justify-end gap-2"
-						>
-							<p class="tnum text-sm text-gray-600">
-								{{ page.startIndex + 1 }} - {{ page.endIndex }} of
-								{{ visibleRows.length }}
-							</p>
-
-							<div class="flex gap-2">
-								<Button
-									variant="ghost"
-									@click="page.prev"
-									:disabled="page.current === 1"
-								>
-									<ChevronLeft class="h-4 w-4 text-gray-700" stroke-width="1.5" />
-								</Button>
-								<Button
-									variant="ghost"
-									@click="page.next"
-									:disabled="page.current === page.total"
-								>
-									<ChevronRight
-										class="h-4 w-4 text-gray-700"
-										stroke-width="1.5"
-									/>
-								</Button>
-							</div>
-						</div>
-						<slot name="footer-right-actions"></slot>
-					</div>
-				</slot>
-			</div>
+			<DataTableFooter
+				:pagination="props.enablePagination ? pagination : undefined"
+				:total-row-count="props.totalRowCount"
+				:on-fetch-count="props.onFetchCount"
+				@prev="pagination.prev"
+				@next="pagination.next"
+			>
+				<template #left>
+					<slot name="footer-left" />
+				</template>
+				<template #actions>
+					<slot name="footer-right-actions" />
+				</template>
+			</DataTableFooter>
 		</slot>
 	</div>
 
@@ -825,11 +794,4 @@ function toggleNewColumn() {
 			<p class="text-center text-gray-500">No data to display.</p>
 		</div>
 	</div>
-
-	<div
-		v-if="props.loading"
-		class="absolute top-10 flex h-[calc(100%-2rem)] w-full items-center justify-center rounded bg-white/30 backdrop-blur-sm"
-	>
-		<LoadingIndicator class="h-8 w-8 text-gray-700" />
-	</div>
 </template>