Changes format to view_mode query. Puts dynamic loading component on ItemsPage. Separates ItemsList in a comonent for Admin and another for theme.

src/admin/components/lists/events-list.vue

@@ -53,7 +53,6 @@
                                     }" 
                                     v-html="event.user_name" />
                         </td>
-<<<<<<< HEAD
                         <!-- Event Date -->
                         <td
                                 class="table-creation column-small-width" 
@@ -68,8 +67,6 @@
                                     }" 
                                     v-html="event.log_date" />
                         </td>
-=======
->>>>>>> Initiated items page in repository
                         <!-- Status -->
                         <!--<td-->
                                 <!--@click="goToEventPage(event.id)"-->
@@ -135,17 +132,10 @@
             events: Array
         },
         methods: {
-<<<<<<< HEAD
             // ...mapActions('event', [
             //     'approve',
             //     'notApprove'
             // ]),
-=======
-            ...mapActions('event', [
-                'approve',
-                'notApprove'
-            ]),
->>>>>>> Initiated items page in repository
             // approveEvent(eventId){
             //    this.approve(eventId);
             // },

src/admin/js/theme-main.js

@@ -29,6 +29,7 @@ import FilterCategorySelectbox from '../../classes/filter-types/category/Selectb
 import TaincanFormItem from '../../classes/field-types/tainacan-form-item.vue';
 import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
 import ItemsPage from '../pages/lists/items-page.vue';
+import TableViewMode from '../../theme-helper/table-view-mode.vue';
 
 // Remaining imports
 import HelpButton from '../components/other/help-button.vue';
@@ -76,6 +77,8 @@ Vue.component('help-button', HelpButton);
 Vue.component('draggable', draggable);
 Vue.component('items-page', ItemsPage);
 
+Vue.component('table-view-mode', TableViewMode);
+
 Vue.use(eventBusSearch, { store: store, router: routerTheme});
 
 import ThemeItemsList from '../theme-items-list.vue';

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

@@ -255,23 +255,37 @@
 
                 <!-- Admin Table -->
                 <items-list
-                        v-if="(viewMode == 'table' || viewMode == undefined || viewMode == '') && !isLoadingItems && totalItems > 0"
+                        v-if="!isOnTheme && 
+                              !isLoadingItems && 
+                              totalItems > 0"
                         :collection-id="collectionId"
                         :table-fields="tableFields"
                         :items="items"
-                        :is-loading="isLoading"
+                        :is-loading="isLoadingItems"
-                        :is-on-theme="isOnTheme"/>
+                        :is-on-theme="isOnTheme"
-
+                        :is-on-trash="status == 'trash'"/>     
-                        
                 
                 <!-- Theme View Modes -->
                 <div 
-                        v-if="viewMode != 'table' && viewMode != undefined && viewMode != ''"
+                        v-if="isOnTheme &&
+                              !isLoadingItems &&
+                              registeredViewModes[viewMode] != undefined &&
+                              registeredViewModes[viewMode].type == 'template'"
                         v-html="itemsListTemplate"/>
+                <component
+                        v-if="isOnTheme && 
+                              !isLoadingItems && 
+                              registeredViewModes[viewMode] != undefined &&
+                              registeredViewModes[viewMode].type == 'component'"
+                        :collection-id="collectionId"
+                        :table-fields="tableFields"
+                        :items="items"
+                        :is-loading="isLoadingItems"
+                        :is="'table-view-mode'"/>     
 
                 <!-- Empty Placeholder (only used in Admin) -->
                 <section
-                        v-if="(viewMode == 'table' || viewMode == undefined || viewMode == '') && !isLoadingItems && totalItems <= 0"
+                        v-if="!isOnTheme && !isLoadingItems && totalItems <= 0"
                         class="section">
                     <div class="content has-text-grey has-text-centered">
                         <p>
@@ -308,9 +322,6 @@
     import Pagination from '../../components/search/pagination.vue'
     import { mapActions, mapGetters } from 'vuex';
 
-    // import TainacanCardsList from '../../components/item-view-modes/tainacan-cards-list.vue';
-    // import TainacanListList from '../../components/item-view-modes/tainacan-list-list.vue';
-
     export default {
         name: 'ItemsPage',
         data() {
@@ -327,7 +338,8 @@
                 isOnTheme: false,
                 futureSearchQuery: '',
                 isHeaderShrinked: false,
-                localTableFields: []
+                localTableFields: [],
+                registeredViewModes: tainacan_plugin.registered_view_modes
             }
         },
         props: {

src/api/endpoints/class-tainacan-rest-items-controller.php

@@ -220,23 +220,30 @@ class REST_Items_Controller extends REST_Controller {
 
 		$response = [];
 
-		if ( isset($request['view_mode_template']) ) {
+		$return_template = false;
+
+		if ( isset($request['view_mode']) ) {
 			
 			// TODO: Check if requested view mode is really enabled for current collection
-			$view_mode = \Tainacan\Theme_Helper::get_instance()->get_view_mode($request['view_mode_template']);
+			$view_mode = \Tainacan\Theme_Helper::get_instance()->get_view_mode($request['view_mode']);
 			
-			if ( $view_mode && isset($view_mode['template']) && file_exists($view_mode['template']) ) {
+			if ($view_mode && $view_mode['type'] == 'template' && isset($view_mode['template']) && file_exists($view_mode['template'])) {
-				
+				$return_template = true;
-				ob_start();
-
-				global $wp_query;
-				$wp_query = $items;
-				$displayed_metadata = array_map(function($el) { return (int) $el; }, $request['fetch_only']['meta']);
-				include $view_mode['template'];
-
-				$response = ob_get_clean();
 			}
 
+		}
+		
+		if ( $return_template ) {
+			
+			ob_start();
+
+			global $wp_query;
+			$wp_query = $items;
+			$displayed_metadata = array_map(function($el) { return (int) $el; }, $request['fetch_only']['meta']);
+			include $view_mode['template'];
+
+			$response = ob_get_clean();
+
 		} else {
 
 			if ($items->have_posts()) {

src/js/event-bus-search.js

@@ -126,7 +126,10 @@ export default {
                         this.$emit( 'hasToPrepareFieldsAndFilters', to);
                     else {
                         this.$emit( 'isLoadingItems', true);
-                        this.$store.dispatch('collection/fetchItems', { 'collectionId': this.collectionId, 'isOnTheme': (this.$route.name == null) })
+                        this.$store.dispatch('collection/fetchItems', 
+                            {   'collectionId': this.collectionId, 
+                                'isOnTheme': (this.$route.name == null) 
+                        })
                         .then((res) => {
                             this.$emit( 'isLoadingItems', false);
                             this.$emit( 'hasFiltered', res.hasFiltered);

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

@@ -24,17 +24,18 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
 
         axios.tainacan.get(endpoint + qs.stringify(postQueries) )
         .then(res => {
-            let items = res.data;
             
-            if (postQueries['format'] != 'table' && postQueries['format'] != undefined && postQueries['format'] != '') {
+            let items = res.data;
+            let viewModeObject = tainacan_plugin.registered_view_modes[postQueries.view_mode];
+                        
+            if (isOnTheme && viewModeObject != undefined && viewModeObject.type == 'template') {
                 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});
             }
+            dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
          })
         .catch(error => reject(error));
     });

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

@@ -97,7 +97,7 @@ export const setSearchQuery = ({ commit }, searchQuery ) => {
     commit('setSearchQuery', searchQuery );
 };
 
-// Set ViewMode (format)
+// Set ViewMode (view_mode)
 export const setViewMode = ({ commit }, viewMode ) => {
     commit('setViewMode', viewMode );
 };

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

@@ -45,7 +45,7 @@ export const getStatus = state => {
 }
 
 export const getViewMode = state => {
-    return state.postquery.format;
+    return state.postquery.view_mode;
 }
 
 export const getFetchOnly = state => {

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

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

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

@@ -115,5 +115,5 @@ export const setStatus = ( state, status ) => {
 };
 
 export const setViewMode = ( state, viewMode ) => {
-    state.postquery.format = viewMode;
+    state.postquery.view_mode = viewMode;
 };

src/theme-helper/class-tainacan-theme-helper.php

@@ -49,6 +49,13 @@ class Theme_Helper {
 
 		add_shortcode( 'tainacan-search', array($this, 'search_shortcode'));
 
+		$this->register_view_mode('table', [
+			'label' => __('Table', 'tainacan'),
+			'dynamic_metadata' => true,
+			'icon' => '<span class="icon"><i class="mdi mdi-table mdi-24px"></i></span>',
+			'type' => 'component',
+		]);
+		
 	}
 	
 	public function enqueue_scripts($force = false) {

src/theme-helper/table-view-mode.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="table-container">
         <div class="table-wrapper">
-            <table 
+            <table class="tainacan-table">
-                    class="tainacan-table">
                 <thead>
                     <tr>
                         <!-- Displayed Fields -->
@@ -82,7 +81,6 @@
                             </p>
 
                         </td>
-
                     </tr>
                 </tbody>
             </table>
@@ -91,14 +89,14 @@
 </template>
 
 <script>
+
 export default {
-    name: 'ItemsList',
+    name: 'TableViewMode',
     props: {
         collectionId: Number,
         tableFields: Array,
         items: Array,
-        isLoading: false,
+        isLoading: false
-        isOnTrash: false
     },
     methods: {
         goToItemPage(item) {

src/theme-helper/template-tags.php

@@ -188,5 +188,5 @@ function tainacan_get_term() {
  * @see \Tainacan\Theme_Helper->register_view_mode()
  */
 function tainacan_register_view_mode($slug, $args = []) {
-	\Tainacan\Theme_Helper::get_instance()->register_view_mode($slug, $args = []);
+	\Tainacan\Theme_Helper::get_instance()->register_view_mode($slug, $args);
 }