add Pagination component

Signed-off-by: grnd-alt <[email protected]>

src/shared/components/ncTable/sections/CustomTable.vue

@@ -18,27 +18,19 @@
 					</template>
 				</TableHeader>
 			</thead>
-			<tbody>
-				<TableRow v-for="(row, index) in getSearchedAndFilteredAndSortedRows.slice(pageNumber * rowsPerPage,lastRowIndex)"
-					:key="index"
-					data-cy="customTableRow"
-					:row="row"
-					:columns="columns"
-					:selected="isRowSelected(row.id)"
-					:view-setting.sync="localViewSetting"
-					:config="config"
-					@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>
+			<Paginator :data="getSearchedAndFilteredAndSortedRows" wrapper-el="tbody" :rows-per-page="rowsPerPage">
+				<template #rowItem="slotProps">
+					<TableRow :key="slotProps.index"
+						data-cy="customTableRow"
+						:row="slotProps.item"
+						:columns="columns"
+						:selected="isRowSelected(slotProps.item.id)"
+						:view-setting.sync="localViewSetting"
+						:config="config"
+						@update-row-selection="updateRowSelection"
+						@edit-row="rowId => $emit('edit-row', rowId)" />
+				</template>
+			</Paginator>
 		</table>
 	</div>
 </template>
@@ -48,15 +40,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'
+import Paginator from './Paginator.vue'
 
 export default {
 	name: 'CustomTable',
 
 	components: {
 		TableRow,
 		TableHeader,
-		NcButton,
+		Paginator,
 	},
 
 	props: {
@@ -91,18 +83,14 @@ export default {
 			selectedRows: [],
 			searchTerm: null,
 			localViewSetting: this.viewSetting,
-			pageNumber: 0,
-			rowsPerPage: 100,
+			rowsPerPage: 50,
 		}
 	},
 
 	computed: {
 		sorting() {
 			return this.viewSetting?.sorting
 		},
-		lastRowIndex() {
-			return this.pageNumber * this.rowsPerPage + this.rowsPerPage
-		},
 		getSearchedAndFilteredRows() {
 			const debug = false
 			// if we don't have to search and/or filter
@@ -246,12 +234,6 @@ 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)

src/shared/components/ncTable/sections/Paginator.vue

@@ -0,0 +1,69 @@
+<template>
+	<component :is="wrapperEl">
+		<slot v-for="(item,index) in data.slice(pageNumber * rowsPerPage, lastRowIndex)" name="rowItem" :index="index" :item="item" />
+		<div class="paginator-footer">
+			<NcButton v-if="pageNumber > 0" @click="pageNumber = 0">
+				<<
+			</NcButton>
+			<NcButton v-if="pageNumber > 0" @click="prevPage">
+				<
+			</NcButton>
+			{{ pageNumber }}
+			<NcButton v-if="pageNumber < data.length/rowsPerPage -1" @click="nextPage">
+				>
+			</NcButton>
+			<NcButton v-if="pageNumber < data.length/rowsPerPage -1" @click="pageNumber = data.length/rowsPerPage -1">
+				>>
+			</NcButton>
+		</div>
+	</component>
+</template>
+
+<script>
+import { NcButton } from '@nextcloud/vue'
+export default {
+	name: 'Paginator',
+	components: {
+		NcButton,
+	},
+	props: {
+		data: {
+			type: Array,
+			default: null,
+		},
+		wrapperEl: {
+			type: String,
+			default: 'ul',
+		},
+		rowsPerPage: {
+			type: Number,
+			default: 100,
+		},
+	},
+	data() {
+		return {
+			pageNumber: 0,
+		}
+	},
+	computed: {
+		lastRowIndex() {
+			return this.pageNumber * this.rowsPerPage + this.rowsPerPage
+		},
+	},
+	methods: {
+		nextPage() {
+			this.pageNumber++
+		},
+		prevPage() {
+			this.pageNumber--
+		},
+	},
+}
+</script>
+<style>
+.paginator-footer{
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+</style>