From e87b98b73bedd58018434e9cde071f0cec957d7c Mon Sep 17 00:00:00 2001
From: Yuuki Takahashi <20282867+yktakaha4@users.noreply.github.com>
Date: Sat, 1 Jun 2024 20:32:11 +0900
Subject: [PATCH] Feature: Add pagination & limits to URL parameters (#303)

* Set search conditions to query parameters

* Fixed by review

* Update query parameters when new message notified
---
 server/ui-src/components/ListMessages.vue  | 11 ++++++++++-
 server/ui-src/components/NavMailbox.vue    |  1 +
 server/ui-src/components/NavTags.vue       | 19 ++++++++++++++++---
 server/ui-src/components/Notifications.vue |  7 +++++++
 server/ui-src/components/Pagination.vue    | 21 ++++++++++++++++-----
 server/ui-src/components/SearchForm.vue    |  7 ++++++-
 server/ui-src/mixins/CommonMixins.js       | 19 +++++++++++++++++--
 server/ui-src/stores/pagination.js         |  2 ++
 server/ui-src/views/MailboxView.vue        |  9 +++++++++
 server/ui-src/views/MessageView.vue        | 13 +++++++++++--
 server/ui-src/views/SearchView.vue         | 18 +++++++++++-------
 11 files changed, 106 insertions(+), 21 deletions(-)

diff --git a/server/ui-src/components/ListMessages.vue b/server/ui-src/components/ListMessages.vue
index 63075d6..6da9525 100644
--- a/server/ui-src/components/ListMessages.vue
+++ b/server/ui-src/components/ListMessages.vue
@@ -2,6 +2,7 @@
 import { mailbox } from '../stores/mailbox'
 import CommonMixins from '../mixins/CommonMixins'
 import dayjs from 'dayjs'
+import {pagination} from "../stores/pagination";
 
 export default {
 	mixins: [
@@ -99,6 +100,14 @@ export default {
 				}
 			}
 		},
+
+		toTagUrl: function (t) {
+			const params = new URLSearchParams({
+				start: String(0),
+				limit: pagination.limit.toString(),
+			})
+			return '/search?q=' + this.tagEncodeURI(t) + '&' + params.toString()
+		},
 	}
 }
 </script>
@@ -143,7 +152,7 @@ export default {
 						{{ message.Snippet }}
 					</div>
 					<div v-if="message.Tags.length">
-						<RouterLink class="badge me-1" v-for="t in message.Tags" :to="'/search?q=' + tagEncodeURI(t)"
+						<RouterLink class="badge me-1" v-for="t in message.Tags" :to="toTagUrl(t)"
 							:style="mailbox.showTagColors ? { backgroundColor: colorHash(t) } : { backgroundColor: '#6c757d' }"
 							:title="'Filter messages tagged with ' + t">
 							{{ t }}
diff --git a/server/ui-src/components/NavMailbox.vue b/server/ui-src/components/NavMailbox.vue
index 50a41ec..6dc9fff 100644
--- a/server/ui-src/components/NavMailbox.vue
+++ b/server/ui-src/components/NavMailbox.vue
@@ -32,6 +32,7 @@ export default {
 	methods: {
 		reloadInbox: function () {
 			pagination.start = 0
+			this.$router.push('/')
 			this.loadMessages()
 		},
 
diff --git a/server/ui-src/components/NavTags.vue b/server/ui-src/components/NavTags.vue
index 5b77f86..b023343 100644
--- a/server/ui-src/components/NavTags.vue
+++ b/server/ui-src/components/NavTags.vue
@@ -67,9 +67,22 @@ export default {
 			if (query == '') {
 				this.$router.push('/')
 			} else {
-				this.$router.push('/search?q=' + encodeURIComponent(query))
+				const params = new URLSearchParams({
+					q: query,
+					start: pagination.start.toString(),
+					limit: pagination.limit.toString(),
+				})
+				this.$router.push('/search?' + params.toString())
 			}
-		}
+		},
+
+		toTagUrl(tag) {
+			const params = new URLSearchParams({
+				start: String(0),
+				limit: pagination.limit.toString(),
+			})
+			return '/search?q=' + this.tagEncodeURI(tag) + '&' + params.toString()
+		},
 	}
 }
 </script>
@@ -91,7 +104,7 @@ export default {
 			</ul>
 		</div>
 		<div class="list-group mt-1 mb-5 pb-3">
-			<RouterLink v-for="tag in mailbox.tags" :to="'/search?q=' + tagEncodeURI(tag)" @click="hideNav"
+			<RouterLink v-for="tag in mailbox.tags" :to="toTagUrl(tag)" @click="hideNav"
 				v-on:click="reloadFilter(tag)" v-on:click.ctrl="toggleTag($event, tag)"
 				:style="mailbox.showTagColors ? { borderLeftColor: colorHash(tag), borderLeftWidth: '4px' } : ''"
 				class="list-group-item list-group-item-action small px-2" :class="inSearch(tag) ? 'active' : ''">
diff --git a/server/ui-src/components/Notifications.vue b/server/ui-src/components/Notifications.vue
index fa89c3d..945e5a1 100644
--- a/server/ui-src/components/Notifications.vue
+++ b/server/ui-src/components/Notifications.vue
@@ -60,6 +60,13 @@ export default {
 						} else {
 							// update pagination offset
 							pagination.start++
+							const path = self.$route.path
+							const params = new URLSearchParams({
+								...self.$route.query,
+								start: pagination.start.toString(),
+								limit: pagination.limit.toString(),
+							})
+							self.$router.push(path + '?' + params.toString())
 						}
 					}
 
diff --git a/server/ui-src/components/Pagination.vue b/server/ui-src/components/Pagination.vue
index a106ae9..9998061 100644
--- a/server/ui-src/components/Pagination.vue
+++ b/server/ui-src/components/Pagination.vue
@@ -1,7 +1,7 @@
 <script>
 import CommonMixins from '../mixins/CommonMixins'
 import { mailbox } from '../stores/mailbox'
-import { pagination } from '../stores/pagination'
+import {limitOptions, pagination} from '../stores/pagination'
 
 export default {
 
@@ -17,6 +17,7 @@ export default {
 		return {
 			pagination,
 			mailbox,
+			limitOptions,
 		}
 	},
 
@@ -44,11 +45,13 @@ export default {
 		changeLimit: function () {
 			pagination.start = 0
 			this.$emit('loadMessages')
+			this.updateQueryParams()
 		},
 
 		viewNext: function () {
 			pagination.start = parseInt(pagination.start, 10) + parseInt(pagination.limit, 10)
 			this.$emit('loadMessages')
+			this.updateQueryParams()
 		},
 
 		viewPrev: function () {
@@ -58,6 +61,17 @@ export default {
 			}
 			pagination.start = s
 			this.$emit('loadMessages')
+			this.updateQueryParams()
+		},
+
+		updateQueryParams: function () {
+			const path = this.$route.path
+			const params = new URLSearchParams({
+				...this.$route.query,
+				start: pagination.start.toString(),
+				limit: pagination.limit.toString(),
+			})
+			this.$router.push(path + '?' + params.toString())
 		},
 	}
 }
@@ -66,10 +80,7 @@ export default {
 <template>
 	<select v-model="pagination.limit" @change="changeLimit" class="form-select form-select-sm d-inline w-auto me-2"
 		:disabled="total == 0">
-		<option value="25">25</option>
-		<option value="50">50</option>
-		<option value="100">100</option>
-		<option value="200">200</option>
+		<option v-for="option in limitOptions" :key="option" :value="option">{{option}}</option>
 	</select>
 
 	<small>
diff --git a/server/ui-src/components/SearchForm.vue b/server/ui-src/components/SearchForm.vue
index 1e74669..79ab698 100644
--- a/server/ui-src/components/SearchForm.vue
+++ b/server/ui-src/components/SearchForm.vue
@@ -40,7 +40,12 @@ export default {
 					pagination.start = 0
 					this.$emit('loadMessages')
 				}
-				this.$router.push('/search?q=' + encodeURIComponent(this.search))
+				const params = new URLSearchParams({
+					q: this.search,
+					start: pagination.start.toString(),
+					limit: pagination.limit.toString(),
+				})
+				this.$router.push('/search?' + params.toString())
 			}
 
 			e.preventDefault()
diff --git a/server/ui-src/mixins/CommonMixins.js b/server/ui-src/mixins/CommonMixins.js
index 3cc1512..00b3fd5 100644
--- a/server/ui-src/mixins/CommonMixins.js
+++ b/server/ui-src/mixins/CommonMixins.js
@@ -2,6 +2,7 @@ import axios from 'axios'
 import dayjs from 'dayjs'
 import ColorHash from 'color-hash'
 import { Modal, Offcanvas } from 'bootstrap'
+import {limitOptions} from "../stores/pagination";
 
 // BootstrapElement is used to return a fake Bootstrap element
 // if the ID returns nothing to prevent errors.
@@ -66,14 +67,28 @@ export default {
 			}
 
 			const urlParams = new URLSearchParams(window.location.search)
-			const q = urlParams.get('q').trim()
-			if (q == '') {
+			const q = urlParams.get('q')?.trim()
+			if (!q) {
 				return false
 			}
 
 			return q
 		},
 
+		getPaginationParams: function () {
+			if (!window.location.search) {
+				return null
+			}
+
+			const urlParams = new URLSearchParams(window.location.search)
+			const start = parseInt(urlParams.get('start')?.trim(), 10)
+			const limit = parseInt(urlParams.get('limit')?.trim(), 10)
+			return {
+				start: Number.isInteger(start) && start >= 0 ? start : null,
+				limit: limitOptions.includes(limit) ? limit : null,
+			}
+		},
+
 		// generic modal get/set function
 		modal: function (id) {
 			let e = document.getElementById(id)
diff --git a/server/ui-src/stores/pagination.js b/server/ui-src/stores/pagination.js
index 5dcd8b0..342b553 100644
--- a/server/ui-src/stores/pagination.js
+++ b/server/ui-src/stores/pagination.js
@@ -6,3 +6,5 @@ export const pagination = reactive({
 	total: 0,  	// total results of current view / filter
 	count: 0, 	// number of messages currently displayed
 })
+
+export const limitOptions = [25, 50, 100, 200]
diff --git a/server/ui-src/views/MailboxView.vue b/server/ui-src/views/MailboxView.vue
index f9a94ef..9902295 100644
--- a/server/ui-src/views/MailboxView.vue
+++ b/server/ui-src/views/MailboxView.vue
@@ -9,6 +9,7 @@ import NavTags from '../components/NavTags.vue'
 import Pagination from '../components/Pagination.vue'
 import SearchForm from '../components/SearchForm.vue'
 import { mailbox } from '../stores/mailbox'
+import {pagination} from "../stores/pagination";
 
 export default {
 	mixins: [CommonMixins, MessagesMixins],
@@ -30,6 +31,14 @@ export default {
 	},
 
 	mounted() {
+		const paginationParams = this.getPaginationParams()
+		if (paginationParams?.start) {
+			pagination.start = paginationParams.start
+		}
+		if (paginationParams?.limit) {
+			pagination.limit = paginationParams.limit
+		}
+
 		mailbox.searching = false
 		this.apiURI = this.resolve(`/api/v1/messages`)
 		this.loadMessages()
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index f19c7bd..d81bcd5 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -184,9 +184,18 @@ export default {
 			mailbox.lastMessage = this.$route.params.id
 
 			if (mailbox.searching) {
-				this.$router.push('/search?q=' + encodeURIComponent(mailbox.searching))
+				const params = new URLSearchParams({
+					q: mailbox.searching,
+					start: pagination.start.toString(),
+					limit: pagination.limit.toString(),
+				})
+				this.$router.push('/search?' + params.toString())
 			} else {
-				this.$router.push('/')
+				const params = new URLSearchParams({
+					start: pagination.start.toString(),
+					limit: pagination.limit.toString(),
+				})
+				this.$router.push('/?' + params.toString())
 			}
 		},
 
diff --git a/server/ui-src/views/SearchView.vue b/server/ui-src/views/SearchView.vue
index e1a9940..c78d087 100644
--- a/server/ui-src/views/SearchView.vue
+++ b/server/ui-src/views/SearchView.vue
@@ -33,17 +33,25 @@ export default {
 
 	watch: {
 		$route(to, from) {
-			this.doSearch(true)
+			this.doSearch()
 		}
 	},
 
 	mounted() {
+		const paginationParams = this.getPaginationParams()
+		if (paginationParams?.start) {
+			pagination.start = paginationParams.start
+		}
+		if (paginationParams?.limit) {
+			pagination.limit = paginationParams.limit
+		}
+
 		mailbox.searching = this.getSearch()
-		this.doSearch(false)
+		this.doSearch()
 	},
 
 	methods: {
-		doSearch: function (resetPagination) {
+		doSearch: function () {
 			let s = this.getSearch()
 
 			if (!s) {
@@ -54,10 +62,6 @@ export default {
 
 			mailbox.searching = s
 
-			if (resetPagination) {
-				pagination.start = 0
-			}
-
 			this.apiURI = this.resolve(`/api/v1/search`) + '?query=' + encodeURIComponent(s)
 			if (mailbox.timeZone != '' && (s.indexOf('after:') != -1 || s.indexOf('before:') != -1)) {
 				this.apiURI += '&tz=' + encodeURIComponent(mailbox.timeZone)