mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<div class="pagination-buttons" v-if="totalRows > perPage">
|
|
<b-row class="m-4">
|
|
<b-col class="text-right">
|
|
<b-button class="previous-page" :disabled="!hasPrevious" @click="currentValue--">
|
|
<b-icon icon="chevron-left" variant="primary"></b-icon>
|
|
</b-button>
|
|
</b-col>
|
|
<b-col cols="3">
|
|
<p class="text-center pt-2">{{ value }} {{ $t('math.div') }} {{ totalPages }}</p>
|
|
</b-col>
|
|
<b-col>
|
|
<b-button class="next-page" :disabled="!hasNext" @click="currentValue++">
|
|
<b-icon icon="chevron-right" variant="primary"></b-icon>
|
|
</b-button>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'PaginationButtons',
|
|
props: {
|
|
totalRows: { required: true },
|
|
perPage: { type: Number, required: true },
|
|
value: { type: Number, required: true },
|
|
},
|
|
data() {
|
|
return {
|
|
currentValue: { type: Number, default: 1 },
|
|
}
|
|
},
|
|
computed: {
|
|
hasNext() {
|
|
return this.value * this.perPage < this.totalRows
|
|
},
|
|
hasPrevious() {
|
|
return this.value > 1
|
|
},
|
|
totalPages() {
|
|
return Math.ceil(this.totalRows / this.perPage)
|
|
},
|
|
},
|
|
created() {
|
|
this.currentValue = this.value
|
|
},
|
|
watch: {
|
|
currentValue() {
|
|
if (this.currentValue !== this.value) this.$emit('input', this.currentValue)
|
|
},
|
|
},
|
|
}
|
|
</script>
|