fix: prevent changing search when results are loading (#2025)

usdigitalresponse · Oct 4, 2023 · c479178 · c479178
1 parent d4c439a
commit c479178
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/packages/client/src/components/GrantsTableNext.vue b/packages/client/src/components/GrantsTableNext.vue
@@ -2,15 +2,15 @@
   <section class="container-fluid grants-table-container">
     <b-row class="my-3" v-if="showSearchControls">
       <div class="ml-3">
-        <SavedSearchPanel />
+        <SavedSearchPanel :isDisabled="loading" />
       </div>
       <div class="ml-2">
-        <SearchPanel ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
+        <SearchPanel :isDisabled="loading" ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
       </div>
     </b-row>
     <b-row  class="grants-table-title-control">
       <b-col v-if="showSearchControls" >
-        <SearchFilter :filterKeys="searchFilters" @filter-removed="clearSearch" />
+        <SearchFilter :isDisabled="loading" :filterKeys="searchFilters" @filter-removed="clearSearch" />
       </b-col>
       <b-col align-self="end" v-if="!showSearchControls">
         <h4 class="mb-0">{{ searchTitle }}</h4>

diff --git a/packages/client/src/components/Modals/SavedSearchPanel.vue b/packages/client/src/components/Modals/SavedSearchPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="saved-search-panel">
-    <b-button @click="initManageSearches" variant="primary" size="sm">
+    <b-button @click="initManageSearches" variant="primary" size="sm" :disabled="isDisabled">
       My Saved Searches
     </b-button>
     <b-sidebar
@@ -89,6 +89,7 @@ import { formatFilterDisplay } from '@/helpers/filters';
 export default {
   props: {
     showModal: Boolean,
+    isDisabled: Boolean,
   },
   directives: {
     'v-b-toggle': VBToggle,

diff --git a/packages/client/src/components/Modals/SearchPanel.vue b/packages/client/src/components/Modals/SearchPanel.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="search-panel">
-      <b-button @click="initNewSearch" variant="outline-primary" size="sm">
+      <b-button @click="initNewSearch" variant="outline-primary" size="sm" :disabled="isDisabled">
         New Search
       </b-button>
 
@@ -241,6 +241,7 @@ export default {
     SearchType: String,
     showModal: Boolean,
     searchId: Number,
+    isDisabled: Boolean,
   },
   directives: {
     'v-b-toggle': VBToggle,

diff --git a/packages/client/src/components/SearchFilter.vue b/packages/client/src/components/SearchFilter.vue
@@ -4,7 +4,8 @@
       <div class="align-self-end">
         <h4 class="mb-0">{{ selectedSearch === null ? "All Grants" : searchName }} </h4>
         <span v-if="selectedSearch !== null">
-          <a href="#" v-on:click.prevent="editFilter">Edit</a> | <a href="#" v-on:click.prevent="clearAll" >Clear</a>
+          <a href="#" :class="{ inactiveLink: isDisabled }" v-on:click.prevent="editFilter">Edit</a> |
+          <a href="#" :class="{ inactiveLink: isDisabled }" v-on:click.prevent="clearAll" >Clear</a>
         </span>
       </div>
       <span class="filter-item" v-for="(item, idx) in $props.filterKeys" :key="idx">
@@ -18,6 +19,7 @@ import { mapActions, mapGetters } from 'vuex';
 
 export default {
   props: {
+    isDisabled: Boolean,
     filterKeys: {
       type: Array,
       required: true,
@@ -41,9 +43,15 @@ export default {
       return value;
     },
     editFilter() {
+      if (!this.isDisabled) {
+        return;
+      }
       this.initEditSearch(this.selectedSearch.id);
     },
     clearAll() {
+      if (!this.isDisabled) {
+        return;
+      }
       this.clearSelectedSearch();
       this.$emit('filter-removed');
     },
@@ -63,3 +71,9 @@ export default {
 };
 
 </script>
+<style>
+.inactiveLink {
+  pointer-events: none;
+  color: grey;
+}
+</style>