orders columns

package.json

@@ -9,6 +9,7 @@
     "@fortawesome/vue-fontawesome": "^2.0.6",
     "axios": "^0.23.0",
     "babel-loader": "^8.2.3",
+    "underscore": "^1.13.1",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
     "vue-style-loader": "^4.1.3",

src/components/archiveList.vue

@@ -154,6 +154,7 @@ export default {
       } else {
         this.active_column = name
       }
+      this.setColumnOrder({'name': name, 'order': this.columns_order[name]})
     },
     isActiveCol: function(name) {
       return name == this.active_column ? true : false
@@ -165,7 +166,7 @@ export default {
       'getDisplayedSites'
     ]),
     ...mapMutations([
-      'setSites'
+      'setSites', 'setColumnOrder'
     ]),
   },
   watched: {

src/store.js

@@ -7,6 +7,7 @@ This file is part of ArciveList.
 
 import Vue from 'vue'
 import Vuex from 'vuex'
+import _ from 'underscore';
 
 
 Vue.use(Vuex)
@@ -36,6 +37,16 @@ const store = new Vuex.Store({
       }
       state.filtered_sites = sites
     },
+    setColumnOrder(state, payload) {
+      var column_name = payload.name
+      var order = payload.order
+      state.sites = _.sortBy(state.sites, column_name)
+      state.filtered_sites = _.sortBy(state.filtered_sites, column_name)
+      if (order == 'desc') {
+        state.sites.reverse()
+        state.filtered_sites.reverse()
+      }
+    },
   },
   getters: {
     getDisplayedSites: state => {