Feature: New search filter [!]is:tagged

See #164

server/ui-src/components/Pagination.vue

@@ -0,0 +1,90 @@
+<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>