Adds sorting on SearchControl.

src/admin/components/search/search-control.vue

@@ -30,15 +30,15 @@
                 <option
                     v-for="(field, index) in tableFields"
                     v-if="field.id != undefined"
-                    :value="field"
+                    :value="field.id"
                     :key="index">
                     {{ field.label }}
                 </option>
             </b-select>
             <button 
                     class="button is-small"
-                    @click="onChangeOrderAsc()">
+                    @click="onChangeOrder()">
-                <b-icon :icon="orderAsc ? 'sort-ascending' : 'sort-descending'"/>
+                <b-icon :icon="order == 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
             </button>
             </b-field>
         </div>
@@ -46,27 +46,33 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import { eventSearchBus } from '../../../js/event-search-bus';
 
 export default {
     name: 'SearchControl',
-    data() {
-        return {
-            orderBy: 'date',
-            orderAsc: false
-        }
-    },
     props: {
         collectionId: Number,
         isRepositoryLevel: false,
         tableFields: Array,
         prefTableFields: Array    
     },
+    computed: {
+        orderBy() {
+            return this.getOrderBy();
+        },
+        order() {
+            return this.getOrder();
+        }
+    },
     methods: {
         ...mapActions('fields', [
             'fetchFields'
         ]),
+        ...mapGetters('search', [
+            'getOrderBy',
+            'getOrder'
+        ]),
         onChangeTableFields(field) {
             // let prevValue = this.prefTableFields;
             // let index = this.prefTableFields.findIndex(alteredField => alteredField.slug === field.slug);
@@ -82,13 +88,11 @@ export default {
 
             // this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, prevValue);
         },
-        onChangeOrderBy(event) {
+        onChangeOrderBy(fieldId) {  
-            this.orderBy = event.id;  
+            eventSearchBus.setOrderBy(fieldId);
-            eventSearchBus.setOrderBy(this.orderBy);
         },
-        onChangeOrderAsc() {
+        onChangeOrder() {
-            this.orderAsc = !this.orderAsc;
+            this.order == 'DESC' ? eventSearchBus.setOrder('ASC') : eventSearchBus.setOrder('DESC');
-            eventSearchBus.setOrderAsc(this.orderAsc);
         }
     },
     mounted() {

src/js/event-search-bus.js

@@ -24,6 +24,10 @@ export const eventSearchBus = new Vue({
                     this.$route.query.perpage = 12;
                 if (this.$route.query.paged == undefined)
                     this.$route.query.paged = 1;
+                if (this.$route.query.order == undefined)
+                    this.$route.query.order = 'DESC';
+                if (this.$route.query.orderby == undefined)
+                    this.$route.query.orderby = 'date';
 
                 store.dispatch('search/set_postquery', this.$route.query);
                 //console.log(this.$route.query);
@@ -63,8 +67,8 @@ export const eventSearchBus = new Vue({
             store.dispatch('search/setOrderBy', newOrderBy);
             this.updateURLQueries();
         },
-        setOrderAsc(newOrderAsc) {
+        setOrder(newOrder) {
-            store.dispatch('search/setOrderBy', newOrderAsc);
+            store.dispatch('search/setOrder', newOrder);
             this.updateURLQueries();
         },
         updateURLQueries() {

src/js/store/modules/search/actions.js

@@ -38,11 +38,8 @@ export const setOrderBy = ({ commit }, orderBy ) => {
     commit('setPostQueryAttribute', {  attr: 'orderby', value: orderBy } );
 };
 
-export const setOrder = ({ commit }, isOrderAsc ) => {
+export const setOrder = ({ commit }, order ) => {
-    if (isOrderAsc)
+    commit('setPostQueryAttribute', {  attr: 'order', value: order } );
-        commit('setPostQueryAttribute', {  attr: 'order', value: 'ASC' } );
-    else
-        commit('setPostQueryAttribute', {  attr: 'order', value: 'DESC' } );
 };
 
 

src/js/store/modules/search/getters.js

@@ -20,4 +20,12 @@ export const getPage = state => {
 
 export const getItemsPerPage = state => {
     return state.postquery.perpage;
+};
+
+export const getOrder = state => {
+    return state.postquery.order;
+}
+
+export const getOrderBy = state => {
+    return state.postquery.orderby;
 };