use input events instead of watch for numberPerPage & sortBy; 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();
 

src/views/CVERecord/SearchResults.vue

@@ -125,7 +125,9 @@
                       <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"
+                            @input="numberPerPageChange">
                             <option v-for="num in cveListSearchStore.pagination.numberPerPageOptions" :key="`page-${num}`" :value="num">
                               {{ num }}
                             </option>
@@ -135,7 +137,9 @@
                       <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"
+                            @input="sortByChange">
                             <option v-for="sort in cveListSearchStore.pagination.sortByOptions" :key="sort.key"
                               :value="sort"
                             >
@@ -286,14 +290,6 @@ const app = createApp({});
 
 app.component('ServiceUnavailable', ServiceUnavailable);
 
-watch(()=>cveListSearchStore.pagination.numberPerPage, ()=>{
-  if (!cveListSearchStore.isSearching) cveListSearchStore.handleNumberPerPageChange();
-}, { deep: true });
-
-watch(()=>cveListSearchStore.pagination.sortBy, ()=>{
-  if (!cveListSearchStore.isSearching) cveListSearchStore.sortResults();
-}, { deep: true });
-
 function backToTop() {
   router.push({
     name: 'SearchResults',
@@ -311,6 +307,16 @@ function cveRecordRoute(cveId) {
   return recordRoute
 }
 
+function numberPerPageChange() {
+  if (!cveListSearchStore.isSearching)
+    cveListSearchStore.handleNumberPerPageChange();
+}
+
+function sortByChange() {
+  if (!cveListSearchStore.isSearching)
+    cveListSearchStore.sortResults();
+}
+
 const websiteEnv = computed(() => {
   return import.meta.env.VITE_WEBSITE_ENVIRONMENT;
 });