UI: Refresh search results when search resubmitted or active tag filter clicked

server/ui-src/components/NavTags.vue

@@ -1,10 +1,13 @@
 <script>
 import CommonMixins from '../mixins/CommonMixins'
 import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
 
 export default {
 	mixins: [CommonMixins],
 
+	emits: ['loadMessages'],
+
 	data() {
 		return {
 			mailbox,
@@ -12,6 +15,21 @@ export default {
 	},
 
 	methods: {
+		// if the current filter is active then reload view
+		reloadFilter: function (tag) {
+			const urlParams = new URLSearchParams(window.location.search)
+			const query = urlParams.get('q')
+			if (!query) {
+				return false
+			}
+
+			let re = new RegExp(`^tag:"?${tag}"?$`, 'i')
+			if (query.match(re)) {
+				pagination.start = 0
+				this.$emit('loadMessages')
+			}
+		},
+
 		// test whether a tag is currently being searched for (in the URL)
 		inSearch: function (tag) {
 			const urlParams = new URLSearchParams(window.location.search)
@@ -74,7 +92,7 @@ export default {
 		</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"
-				v-on:click.ctrl="toggleTag($event, tag)"
+				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' : ''">
 				<i class="bi bi-tag-fill" v-if="inSearch(tag)"></i>

server/ui-src/components/SearchForm.vue

@@ -5,10 +5,11 @@ import { pagination } from '../stores/pagination'
 export default {
 	mixins: [CommonMixins],
 
+	emits: ['loadMessages'],
+
 	data() {
 		return {
-			search: '',
-			pagination
+			search: ''
 		}
 	},
 
@@ -33,6 +34,12 @@ export default {
 			if (this.search == '') {
 				this.$router.push('/')
 			} else {
+				const urlParams = new URLSearchParams(window.location.search)
+				let curr = urlParams.get('q')
+				if (curr && curr == this.search) {
+					pagination.start = 0
+					this.$emit('loadMessages')
+				}
 				this.$router.push('/search?q=' + encodeURIComponent(this.search))
 			}
 

server/ui-src/views/SearchView.vue

@@ -74,7 +74,7 @@ export default {
 			</RouterLink>
 		</div>
 		<div class="col col-md-4k col-lg-5 col-xl-6">
-			<SearchForm />
+			<SearchForm @loadMessages="loadMessages" />
 		</div>
 		<div class="col-12 col-md-auto col-lg-4 col-xl-4 text-end mt-2 mt-lg-0">
 			<div class="float-start d-md-none">
@@ -96,7 +96,7 @@ export default {
 		</div>
 		<div class="offcanvas-body">
 			<NavSearch @loadMessages="loadMessages" />
-			<NavTags />
+			<NavTags @loadMessages="loadMessages" />
 			<AboutMailpit />
 		</div>
 	</div>
@@ -105,7 +105,7 @@ export default {
 		<div class="d-none d-md-block col-xl-2 col-md-3 mh-100 position-relative"
 			style="overflow-y: auto; overflow-x: hidden;">
 			<NavSearch @loadMessages="loadMessages" />
-			<NavTags />
+			<NavTags @loadMessages="loadMessages" />
 			<AboutMailpit />
 		</div>