refactor(advanced): Refactored advanced search to move query outside …

…of Vue store.
Ecogenomics · Jul 2, 2022 · 0bdbeff · 0bdbeff
1 parent 5190a8f
commit 0bdbeff
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/pages/advanced.vue b/pages/advanced.vue
@@ -64,6 +64,7 @@ import SearchNode from '~/components/advanced/SearchNode.vue'
 import ResultsTable from "~/components/advanced/ResultsTable.vue";
 import {Dict} from "~/assets/ts/interfaces";
 import {mdiMagnify} from "@mdi/js";
+import {ApiMessage, ApiMessageStatus} from "~/store/api";
 
 export default Vue.extend({
 
@@ -116,7 +117,7 @@ export default Vue.extend({
     },
     submitSearch() {
       const [expr, args] = this.$accessor.advanced.treeAsEncodedPayload;
-      const argsForQuery: Dict<String> = {"exp": String(expr)};
+      const argsForQuery: Dict<string> = {"exp": String(expr)};
       if (expr.length > 0 && Object.keys(args).length > 0) {
         const newUrl = [];
         for (const [k, v] of Object.entries(args)) {
@@ -129,7 +130,23 @@ export default Vue.extend({
           "",
           `${this.$route.path}?exp=${encodedExp}&${newUrl.join('&')}`
         )
-        this.$accessor.advanced.queryDatabase(argsForQuery);
+
+        // Execute the query
+        this.$accessor.advanced.startNewQuery();
+        this.$api.advanced.getSearch(argsForQuery)
+          .then(resp => {
+            this.$accessor.advanced.setResultsFromQuery(resp);
+          })
+          .catch((err) => {
+            this.$accessor.api.defaultCatch(err);
+          })
+          .finally(() => {
+            this.$accessor.advanced.queryHasFinished();
+          })
+
+        // this.$accessor.advanced.queryDatabase(argsForQuery);
+
+
       }
     }
   }

diff --git a/store/advanced.ts b/store/advanced.ts
@@ -386,7 +386,7 @@ export const getters = getterTree(state, {
   operators: state => state.operators,
   treeAsEncodedPayload: state => {
     const [expr, args] = formatTreeAsPayload([state.root]);
-    const encodedArgs: Dict<String> = {};
+    const encodedArgs: Dict<string> = {};
     for (const [k, v] of Object.entries(args)) {
       encodedArgs[k] = base64EncodeUrl(v);
     }
@@ -710,16 +710,31 @@ export const actions = actionTree({state, getters, mutations}, {
   // -------------------------------------------------------------------------------------------------------------------
   // Initial state modifications
   // -------------------------------------------------------------------------------------------------------------------
-
-  queryDatabase({commit}, payload) {
+  //
+  // queryDatabase({commit}, payload) {
+  //   commit('SET_RESULTS', null);
+  //   commit('SET_RESULTS_IS_LOADING', true);
+  //   commit('SET_RESULTS_HAS_BEEN_RUN', true);
+  //   this.$api.advanced.getSearch(payload)
+  //     .then(resp => {
+  //       commit('SET_RESULTS_IS_LOADING', false);
+  //       commit('SET_RESULTS', resp.data);
+  //     });
+  // },
+
+
+  startNewQuery({commit}) {
     commit('SET_RESULTS', null);
     commit('SET_RESULTS_IS_LOADING', true);
     commit('SET_RESULTS_HAS_BEEN_RUN', true);
-    this.$api.advanced.getSearch(payload)
-      .then(resp => {
-        commit('SET_RESULTS_IS_LOADING', false);
-        commit('SET_RESULTS', resp.data);
-      });
+  },
+
+  setResultsFromQuery({commit}, resp) {
+    commit('SET_RESULTS', resp.data);
+  },
+
+  queryHasFinished({commit}) {
+    commit('SET_RESULTS_IS_LOADING', false);
   },
 
   // Initialise the tree based on a query string