Adds format post query, to determine which view mode will be rendered on theme.

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

@@ -70,7 +70,7 @@
                     class="header-item">
                 <b-field>
                    <b-dropdown 
-                            @change="$emit('onChangeViewMode', $event)"
+                            @change="onChangeViewMode($event)"
                             :value="viewMode">
                         <button 
                                 class="button is-white" 
@@ -192,6 +192,9 @@
             onChangeTab(status) {
                 this.$eventBusSearch.setStatus(status);
             },
+            onChangeViewMode(event) {
+                this.$eventBusSearch.setViewMode(event);
+            },
             onChangeDisplayedFields() {
                 let fetchOnlyFieldIds = [];
 

src/admin/pages/lists/items-page.vue

@@ -101,8 +101,7 @@
                     :is-on-theme="isOnTheme"
                     :status="status"
                     :has-results="items.length > 0"
-                    :view-mode="viewMode"
-                    @onChangeViewMode="viewMode = $event"/>
+                    :view-mode="viewMode"/>
             
             <!-- <div 
                     :items="items"
@@ -113,13 +112,13 @@
                         :is-full-page="false"
                         :active.sync="isLoadingItems"/>
                 <items-list
-                        v-if="viewMode == 'table' && !isLoadingItems && items.length > 0"
+                        v-if="(viewMode == 'table' || viewMode == undefined || viewMode == '') && !isLoadingItems && items.length > 0"
                         :collection-id="collectionId"
                         :table-fields="tableFields"
                         :items="items"
                         :is-loading="isLoading"
                         :is-on-theme="isOnTheme"/>
-
+        
                 <tainacan-cards-list
                         v-if="viewMode == 'cards' && !isLoadingItems && items.length > 0"
                         :table-fields="tableFields"
@@ -189,7 +188,6 @@
                 isOnTheme: false,
                 futureSearchQuery: '',
                 isHeaderShrinked: false,
-                viewMode: 'table'
             }
         },
         props: {
@@ -221,7 +219,8 @@
             ]),
             ...mapGetters('search', [
                 'getSearchQuery',
-                'getStatus'
+                'getStatus',
+                'getViewMode'
             ]),
             updateSearch() {
                 this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
@@ -339,6 +338,9 @@
             },
             status() {
                 return this.getStatus();
+            },
+            viewMode() {
+                return this.getViewMode();
             }
         },
         created() {

src/js/event-bus-search.js

@@ -108,6 +108,10 @@ export default {
                     this.$store.dispatch('search/setSearchQuery', searchQuery);
                     this.updateURLQueries();
                 },
+                setViewMode(viewMode) {
+                    this.$store.dispatch('search/setViewMode', viewMode);
+                    this.updateURLQueries();  
+                },
                 updateURLQueries() {
                     this.$router.push({ query: {}});
                     this.$router.push({ query: this.$store.getters['search/getPostQuery'] });

src/js/store/modules/collection/actions.js

@@ -25,9 +25,11 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
         axios.tainacan.get(endpoint + qs.stringify(postQueries) )
         .then(res => {
             let items = res.data;
+
             commit('setItems', items );
             dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
-            resolve({'items': items, 'total': res.headers['x-wp-total'], hasFiltered: hasFiltered});
+            resolve({'items': items, 'total': res.headers['x-wp-total'], hasFiltered: hasFiltered} );
+
         })
         .catch(error => reject(error));
     });

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

@@ -95,4 +95,9 @@ export const setOrder = ({ commit }, order ) => {
 // Set search query
 export const setSearchQuery = ({ commit }, searchQuery ) => {
     commit('setSearchQuery', searchQuery );
+};
+
+// Set ViewMode (format)
+export const setViewMode = ({ commit }, viewMode ) => {
+    commit('setViewMode', viewMode );
 };

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

@@ -50,4 +50,8 @@ export const getFetchOnly = state => {
 
 export const getFetchOnlyMeta = state => {
     return ( ! state.postquery.fetch_only['meta'] ) ? [] : state.postquery.fetch_only['meta'];
+}
+
+export const getViewMode = state => {
+    return state.postquery.format;
 }

src/js/store/modules/search/index.js

@@ -19,6 +19,7 @@ const state = {
             '1': 'creation_date',
             '2': 'author_name' 
         },
+        format: 'table'
     },
     totalItems: 0
 };

src/js/store/modules/search/mutations.js

@@ -111,5 +111,9 @@ export const setSearchQuery = ( state, searchQuery ) => {
 };
 
 export const setStatus = ( state, status ) => {
-    state.status = status;
+    state.postquery.status = status;
+};
+
+export const setViewMode = ( state, viewMode ) => {
+    state.postquery.format = viewMode;
 };