mirror of
https://github.com/axllent/mailpit.git
synced 2025-03-21 21:47:19 +02:00
91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<script>
|
|
import CommonMixins from "../mixins/CommonMixins"
|
|
import { pagination } from "../stores/pagination.js"
|
|
import { mailbox } from "../stores/mailbox.js"
|
|
|
|
export default {
|
|
|
|
mixins: [CommonMixins],
|
|
|
|
props: {
|
|
total: Number,
|
|
},
|
|
|
|
emits: ['loadMessages'],
|
|
|
|
|
|
data() {
|
|
return {
|
|
pagination,
|
|
mailbox,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
canPrev: function () {
|
|
return this.pagination.start > 0
|
|
},
|
|
|
|
canNext: function () {
|
|
return this.total > (this.pagination.start + this.mailbox.messages.length)
|
|
},
|
|
|
|
// returns the number of next X messages
|
|
nextMessages: function () {
|
|
let t = pagination.start + parseInt(pagination.limit, 10);
|
|
if (t > this.total) {
|
|
t = this.total
|
|
}
|
|
|
|
return t
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
changeLimit: function () {
|
|
this.pagination.start = 0
|
|
this.$emit('loadMessages')
|
|
},
|
|
|
|
viewNext: function () {
|
|
this.pagination.start = parseInt(this.pagination.start, 10) + parseInt(this.pagination.limit, 10)
|
|
this.$emit('loadMessages')
|
|
},
|
|
|
|
viewPrev: function () {
|
|
let s = this.pagination.start - this.pagination.limit
|
|
if (s < 0) {
|
|
s = 0
|
|
}
|
|
this.pagination.start = s
|
|
this.$emit('loadMessages')
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<select v-model="pagination.limit" @change="changeLimit"
|
|
class="form-select form-select-sm d-none d-md-inline w-auto me-2">
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
<option value="200">200</option>
|
|
</select>
|
|
|
|
<small>
|
|
{{ formatNumber(pagination.start + 1) }}-{{ formatNumber(nextMessages) }}
|
|
<small>of</small>
|
|
{{ formatNumber(total) }}
|
|
</small>
|
|
|
|
<button class="btn btn-outline-light ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
|
|
:title="'View previous ' + pagination.limit + ' messages'">
|
|
<i class="bi bi-caret-left-fill"></i>
|
|
</button>
|
|
<button class="btn btn-outline-light" :disabled="!canNext" v-on:click="viewNext"
|
|
:title="'View next ' + pagination.limit + ' messages'">
|
|
<i class="bi bi-caret-right-fill"></i>
|
|
</button>
|
|
</template>
|