house keeping

src/components/archiveList.vue

@@ -8,7 +8,7 @@ This file is part of ArciveList.
 
 <template>
 <div>
-  <Search></Search>
+  <Search v-bind:url_search_text="url_search_text"></Search>
 
   <section class="collections-list">
 
@@ -118,7 +118,7 @@ This file is part of ArciveList.
 
 <script>
 import axios from 'axios';
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations, mapGetters, mapActions } from 'vuex'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faLongArrowAltUp } from '@fortawesome/free-solid-svg-icons'
 import { faLongArrowAltDown } from '@fortawesome/free-solid-svg-icons'
@@ -135,20 +135,22 @@ export default {
       active_column: 'date',
       faLongArrowAltUp: faLongArrowAltUp,
       faLongArrowAltDown: faLongArrowAltDown,
+      url_search_text: location.hash.substr(1),
     };
   },
   created() {
 
-  },
-  ready: function () {
-
   },
   mounted() {
     var payload = {
               'sites': JSON.parse(this.collections),
-              'column_name': this.active_column,
-              'order': this.columns_order[this.active_column]}
+              'active_column': this.active_column,
+              'column_order': this.columns_order[this.active_column]}
     this.setSites(payload)
+    if (this.url_search_text) {
+      this.setSearchText(this.url_search_text)
+      this.siteSearch()
+    }
   },
   methods: {
     setActiveColumn: function(name) {
@@ -166,15 +168,17 @@ export default {
       return this.columns_order[name] == 'asc' ? faLongArrowAltUp : faLongArrowAltDown
     },
     loadMoreSites() {
-      console.log('loading')
       this.incrementPageCount()
     },
     ...mapGetters([
-      'getSitesForDisplay', 'getPageCount'
+      'getSitesForDisplay', 'getPageCount',
     ]),
     ...mapMutations([
-      'setSites', 'setColumnOrder', 'incrementPageCount'
+      'setColumnOrder', 'incrementPageCount', 'setSearchText'
     ]),
+    ...mapActions([
+      'siteSearch', 'setSites'
+    ])
   },
   watched: {
 

src/components/search.vue

@@ -27,31 +27,29 @@ This file is part of ArciveList.
 
 <script>
 import axios from 'axios';
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations, mapGetters, mapActions } from 'vuex'
 
 export default {
   name: "Search",
+  props: [
+    'url_search_text'
+  ],
   data() {
     return {
       search_text: "",
     };
   },
+  mounted() {
+  },
   methods: {
     search: function() {
+      //console.log('searching for: '+this.search_text)
+      const uri = window.location.toString()
+      const withNoHash = uri.substring(0, uri.indexOf('#'))
+      //console.log('setting hash')
+      window.history.replaceState({}, document.title, withNoHash+'#'+this.search_text)
       this.setSearchText(this.search_text)
-      var local_search_result = this.searchLocalSiteData()
-      var api_endpoint = '/api/collections/search?fulltext_search='
-      var search_url = api_endpoint + this.search_text;
-      var self = this;
-      axios.get(search_url, {
-      })
-      .then(function (response) {
-        //console.log(response.data)
-        self.setFilteredSites(Object.assign({}, local_search_result, response.data))
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
+      this.siteSearch()
     },
     ...mapMutations([
       'setFilteredSites', 'setSearchText'
@@ -59,7 +57,9 @@ export default {
     ...mapGetters([
       'searchLocalSiteData'
     ]),
-
+    ...mapActions([
+      'siteSearch'
+    ])
   },
 };
 </script>

src/store.js

@@ -8,6 +8,7 @@ This file is part of ArciveList.
 import Vue from 'vue'
 import Vuex from 'vuex'
 import _ from 'underscore';
+import axios from 'axios';
 
 
 Vue.use(Vuex)
@@ -18,19 +19,18 @@ const store = new Vuex.Store({
     sites: [],
     filtered_sites: [],
     page_count: 1,
+    active_column: null,
+    column_order: null
   },
   mutations: {
     setSearchText(state, text) {
       state.search_text = text
     },
-    setSites(state, payload) {
-      state.sites = _.sortBy(payload.sites, payload.column_name)
-    },
     incrementPageCount(state) {
       state.page_count = state.page_count +1
     },
     setFilteredSites(state, filtered_site_ids) {
-      console.log(filtered_site_ids)
+      //console.log(filtered_site_ids)
       var sites = []
       for (const [site_id, weight] of Object.entries(filtered_site_ids)) {
         var site = state.sites.find(x => x.id == site_id)
@@ -42,19 +42,44 @@ const store = new Vuex.Store({
       state.page_count = 1
     },
     setColumnOrder(state, payload) {
-      //state.sites = _.sortBy(state.sites, payload.column_name)
-      //state.filtered_sites = _.sortBy(state.filtered_sites, payload.column_name)
-      state.sites = order_items(state.sites, payload.column_name, payload.order)
-      state.filtered_sites = order_items(state.filtered_sites, payload.column_name, payload.order)
-      /*
-      if (payload.order == 'desc') {
-        state.sites.reverse()
-        state.filtered_sites.reverse()
-      }
-      */
+      state.active_column = payload.active_column
+      state.column_order = payload.column_order
+      state.sites = order_items(state.sites,
+                                payload.active_column,
+                                payload.column_order)
+      state.filtered_sites = order_items(state.filtered_sites,
+                                         payload.active_column,
+                                         payload.column_order)
+    },
+  },
+  actions: {
+    setSites(context, payload) {
+      context.state.sites = payload.sites
+      context.commit("setColumnOrder", {'active_column': payload.active_column,
+                                        'column_order': payload.column_order})
+    },
+    siteSearch (context) {
+      console.log('new site search')
+      var api_endpoint = '/api/collections/search?fulltext_search='
+      axios.post(api_endpoint + context.getters.getSearchText, {})
+      .then(function (response) {
+        var local_search_result = context.getters.searchLocalSiteData
+        var merged_results = Object.assign({},
+                                           local_search_result,
+                                           response.data)
+        context.commit("setFilteredSites", merged_results)
+        context.commit("setColumnOrder", {'active_column': context.state.active_column,
+                                          'column_order': context.state.column_order})
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
     },
   },
   getters: {
+    getSearchText: state => {
+      return state.search_text
+    },
     getSitesForDisplay: state => {
       if (state.search_text === "") {
         return state.sites
@@ -92,8 +117,6 @@ const store = new Vuex.Store({
           result[id] = weight
         }
       }
-      console.log('load search')
-      console.log(result)
       return result
     },
   }
@@ -106,8 +129,6 @@ function order_items(items, field_name, ascending) {
       if (field_name == 'date') {
         field_name = 'project_date'
       }
-      console.log("sss: "+ field_name)
-      console.log(first_el)
       if (first_el[field_name] === undefined || first_el[field_name] === ""){
         return -1
       }