add prototype for pagination to tables

Signed-off-by: grnd-alt <[email protected]>
nextcloud · Apr 5, 2024 · 0e6b685 · 0e6b685
1 parent f2fab65
commit 0e6b685
Showing 1 changed file with 36 additions and 16 deletions.
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -19,7 +19,7 @@
 				</TableHeader>
 			</thead>
 			<tbody>
-				<TableRow v-for="(row, index) in getSearchedAndFilteredAndSortedRows"
+				<TableRow v-for="(row, index) in getSearchedAndFilteredAndSortedRows.slice(pageNumber * rowsPerPage,lastRowIndex)"
 					:key="index"
 					data-cy="customTableRow"
 					:row="row"
@@ -30,6 +30,15 @@
 					@update-row-selection="updateRowSelection"
 					@edit-row="rowId => $emit('edit-row', rowId)" />
 			</tbody>
+			<tfoot>
+				<NcButton @click="prevPage">
+					PREV
+				</NcButton>
+				{{ pageNumber + ' ' + lastRowIndex }}
+				<NcButton @click="nextPage">
+					NEXT
+				</NcButton>
+			</tfoot>
 		</table>
 	</div>
 </template>
@@ -39,13 +48,15 @@ import TableHeader from '../partials/TableHeader.vue'
 import TableRow from '../partials/TableRow.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { MagicFields } from '../mixins/magicFields.js'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'CustomTable',
 
 	components: {
 		TableRow,
 		TableHeader,
+		NcButton,
 	},
 
 	props: {
@@ -80,24 +91,17 @@ export default {
 			selectedRows: [],
 			searchTerm: null,
 			localViewSetting: this.viewSetting,
+			pageNumber: 0,
+			rowsPerPage: 100,
 		}
 	},
 
 	computed: {
 		sorting() {
 			return this.viewSetting?.sorting
 		},
-		getSearchedAndFilteredAndSortedRows() {
-			// if we have to sort
-			if (this.viewSetting?.presetSorting) {
-				const sortColumn = this.columns.find(item => item.id === this.viewSetting.presetSorting?.[0].columnId)
-				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.presetSorting[0].mode))
-			}
-			if (this.viewSetting?.sorting) {
-				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting[0].columnId)
-				return [...this.getSearchedAndFilteredRows].sort(sortColumn.sort(this.viewSetting.sorting[0].mode))
-			}
-			return this.getSearchedAndFilteredRows
+		lastRowIndex() {
+			return this.pageNumber * this.rowsPerPage + this.rowsPerPage
 		},
 		getSearchedAndFilteredRows() {
 			const debug = false
@@ -119,9 +123,8 @@ export default {
 
 			const data = [] // array of rows
 			const searchString = this.viewSetting?.searchString
-
 			// each row
-			this.rows?.forEach(row => {
+			for (const row of this.rows) {
 				if (debug) {
 					console.debug('new row ===============================================', row)
 				}
@@ -209,10 +212,21 @@ export default {
 				if ((filterStatusRow || filterStatusRow === null) && searchStatusRow) {
 					data.push({ ...row })
 				}
-			})
-
+			}
 			return data
 		},
+		getSearchedAndFilteredAndSortedRows() {
+			// if we have to sort
+			if (this.viewSetting?.presetSorting) {
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.presetSorting?.[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.presetSorting[0].mode))
+			}
+			if (this.viewSetting?.sorting) {
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn.sort(this.viewSetting.sorting[0].mode))
+			}
+			return this.getSearchedAndFilteredRows
+		},
 	},
 
 	watch: {
@@ -232,6 +246,12 @@ export default {
 	},
 
 	methods: {
+		nextPage() {
+			this.pageNumber++
+		},
+		prevPage() {
+			this.pageNumber--
+		},
 		addMagicFieldsValues(filter) {
 			Object.values(MagicFields).forEach(field => {
 				const newFilterValue = filter.value.replace('@' + field.id, field.replace)