Redo all the items list process.

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(viewMode) {
+                this.$eventBusSearch.setViewMode(viewMode);
+            },
             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,12 +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"/>
+                <div v-html="itemsListTemplate"/>
 
                 <tainacan-cards-list
                         v-if="viewMode == 'cards' && !isLoadingItems && items.length > 0"
@@ -188,8 +188,7 @@
                 collapseAll: true,
                 isOnTheme: false,
                 futureSearchQuery: '',
-                isHeaderShrinked: false,
-                viewMode: 'table'
+                isHeaderShrinked: false
             }
         },
         props: {
@@ -205,7 +204,8 @@
         },
         methods: {
             ...mapGetters('collection', [
-                'getItems'
+                'getItems',
+                'getItemsListTemplate'
             ]),
             ...mapActions('fields', [
                 'fetchFields'
@@ -221,7 +221,8 @@
             ]),
             ...mapGetters('search', [
                 'getSearchQuery',
-                'getStatus'
+                'getStatus',
+                'getViewMode'
             ]),
             updateSearch() {
                 this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
@@ -328,6 +329,9 @@
             items() {
                 return this.getItems();
             },
+            itemsListTemplate() {
+                return this.getItemsListTemplate();
+            },
             filters() {
                 return this.getFilters();
             },
@@ -339,6 +343,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,10 +25,17 @@ 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});
-        })
+
+            if (postQueries['format'] != 'table' && postQueries['format'] != undefined && postQueries['format'] != '') {
+                commit('setItemsListTemplate', items );
+                dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
+                resolve({'itemsListTemplate': items, 'total': res.headers['x-wp-total'], hasFiltered: hasFiltered});
+            } else {
+                commit('setItems', items );
+                dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
+                resolve({'items': items, 'total': res.headers['x-wp-total'], hasFiltered: hasFiltered});
+            }
+         })
         .catch(error => reject(error));
     });
 }

src/js/store/modules/collection/getters.js

@@ -2,6 +2,10 @@ export const getItems = state => {
     return state.items;
 }
 
+export const getItemsListTemplate = state => {
+    return state.itemsListTemplate;
+}
+
 export const getCollections = state => {
     return state.collections;
 }

src/js/store/modules/collection/index.js

@@ -4,6 +4,7 @@ import * as mutations from './mutations';
 
 const state = {
     items: [],
+    itemsListTemplate: '',
     collections: [],
     collection: null,
     collectionName: '',

src/js/store/modules/collection/mutations.js

@@ -3,6 +3,9 @@ import Vue from 'vue';
 export const setItems = ( state, items ) => {
     state.items = items;
 }
+export const setItemsListTemplate = ( state, items ) => {
+    state.itemsListTemplate = items;
+}
 
 export const cleanItems = (state) => {
     state.items = [];

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 view mode
+export const setViewMode= ({ commit }, viewMode ) => {
+    commit('setViewMode', viewMode );
 };

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

@@ -44,6 +44,10 @@ export const getStatus = state => {
     return state.postquery.status;
 }
 
+export const getViewMode = state => {
+    return state.postquery.format;
+}
+
 export const getFetchOnly = state => {
     return state.postquery.fetch_only;
 }

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;
 };