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

@@ -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 }}

server/ui-src/components/NavMailbox.vue

@@ -32,6 +32,7 @@ export default {
 	methods: {
 		reloadInbox: function () {
 			pagination.start = 0
+			this.$router.push('/')
 			this.loadMessages()
 		},
 

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' : ''">

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())
 						}
 					}
 

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>

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()