trigger watches on numberPerPage & sortBy only on actual change; change response item from "search-metadata" to "searchMetadata"

Author: rlxdev

src/stores/cveListSearch.js

@@ -179,7 +179,7 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
         let payLoad = this.createSearchPayload();
         const response = await axios.post(searchUrl, payLoad);
 
-        const searchMetaData = response.data['search-metadata'];
+        const searchMetaData = response.data.searchMetadata;
 
         if (searchMetaData.searchStatus === 'ok') {
           this.totalSearchResultCount = response.data.resultsTotal;
@@ -188,6 +188,11 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
           // There's likely something invalid in the search string.
           // Error message(s) and note(s) returned in the response will be
           // displayed to the user.
+          //
+          // We could reset the error message store here, because this is a
+          // "new" search, but resetting may also mask an issue where the
+          // search is inadvertently done multiple times (resulting in
+          // duplicate error messages displayed).
 
           const ems = useErrorMessageStore();
 
@@ -215,7 +220,6 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
             relevancyScore: result?._score
           });
         });
-        
       }
 
       this.searchResults = parsedResults;

src/views/CVERecord/SearchResults.vue

@@ -125,7 +125,8 @@
                       <label class="label">Show:</label>
                       <div class="control">
                         <div class="select">
-                          <select v-model="cveListSearchStore.pagination.numberPerPage" aria-label="Select how many search results to show">
+                          <select v-model="cveListSearchStore.pagination.numberPerPage"
+                            aria-label="Select how many search results to show">
                             <option v-for="num in cveListSearchStore.pagination.numberPerPageOptions" :key="`page-${num}`" :value="num">
                               {{ num }}
                             </option>
@@ -135,10 +136,10 @@
                       <label for="sort" class="label">Sort by:</label>
                       <div class="control">
                         <div class="select">
-                          <select name="partner" v-model="cveListSearchStore.pagination.sortBy" aria-label="Select a sort option">
+                          <select name="partner" v-model="cveListSearchStore.pagination.sortBy"
+                            aria-label="Select a sort option">
                             <option v-for="sort in cveListSearchStore.pagination.sortByOptions" :key="sort.key"
-                              :value="sort"
-                            >
+                              :value="sort">
                               {{ sort.label }}
                             </option>
                           </select>
@@ -274,7 +275,7 @@
 import { useCveListSearchStore } from '@/stores/cveListSearch';
 import { useGenericGlobalsStore } from '@/stores/genericGlobals';
 import { usePartnerStore } from '@/stores/partners';
-import { computed, createApp, watch } from 'vue';
+import { computed, createApp, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import ServiceUnavailable from '@/components/ServiceUnavailable.vue'
 
@@ -286,12 +287,29 @@ const app = createApp({});
 
 app.component('ServiceUnavailable', ServiceUnavailable);
 
+// Keeping track of the current settings for the results per page and
+// sort option prevents the watches from doing searches just because the
+// cveListSearchStore is reset (which triggers a watch).  We really only
+// want one of these watches triggered if the user actually changes the
+// value.
+
+let currNumPerPage = ref(cveListSearchStore.pagination.numberPerPage);
+let currSortByLabel = ref(cveListSearchStore.pagination.sortBy.label);
+
 watch(()=>cveListSearchStore.pagination.numberPerPage, ()=>{
-  if (!cveListSearchStore.isSearching) cveListSearchStore.handleNumberPerPageChange();
+  if (!cveListSearchStore.isSearching
+    && cveListSearchStore.pagination.numberPerPage !== currNumPerPage.value) {
+      currNumPerPage.value = cveListSearchStore.pagination.numberPerPage;
+      cveListSearchStore.handleNumberPerPageChange();
+    }
 }, { deep: true });
 
 watch(()=>cveListSearchStore.pagination.sortBy, ()=>{
-  if (!cveListSearchStore.isSearching) cveListSearchStore.sortResults();
+  if (!cveListSearchStore.isSearching
+    && cveListSearchStore.pagination.sortBy.label !== currSortByLabel.value) {
+      currSortByLabel.value = cveListSearchStore.pagination.sortBy.label;
+      cveListSearchStore.sortResults();
+    }
 }, { deep: true });
 
 function backToTop() {