Finishes implementation of EnabledViewModes configuration.

src/admin/components/edition/collection-edition-form.vue

@@ -276,6 +276,38 @@
                         </b-select>
                     </b-field>
 
+                    <!-- Enabled View Modes ------------------------------- --> 
+                    <div class="field">
+
+                        <b-dropdown
+                                ref="enabledViewModesDropdown"
+                                :mobile-modal="false"
+                                :disabled="Object.keys(registeredViewModes).length < 0">
+                            <button
+                                    class="button is-white"
+                                    slot="trigger"
+                                    position="is-top-right"
+                                    type="button">
+                                <span>{{ $i18n.get('label_enabled_view_modes') }}</span>
+                                <b-icon icon="menu-down"/>
+                            </button>
+                            <b-dropdown-item
+                                    v-for="(viewMode, index) in Object.keys(registeredViewModes)"
+                                    :key="index"
+                                    class="control"
+                                    custom>
+                                <b-checkbox
+                                        @input="updateViewModeslist(viewMode)"
+                                        :value="checkIfViewModeEnabled(viewMode)">
+                                    {{ registeredViewModes[viewMode].label }}
+                                </b-checkbox>
+                            </b-dropdown-item>   
+                        </b-dropdown>
+                        <help-button 
+                                :title="$i18n.getHelperTitle('collections', 'enabled_view_modes')" 
+                                :message="$i18n.getHelperMessage('collections', 'enabled_view_modes')"/>
+                    </div>
+
                 </div>
             </div>
 
@@ -358,7 +390,9 @@ export default {
             collections: [],
             isFetchingCollections: true,
             thumbnailMediaFrame: undefined,
-            headerImageMediaFrame: undefined
+            headerImageMediaFrame: undefined,
+            registeredViewModes: tainacan_plugin.registered_view_modes,
+            viewModesList: []
         }
     },
     methods: {
@@ -393,7 +427,8 @@ export default {
                 slug: this.form.slug, 
                 status: this.form.status,
                 moderators_ids: this.form.moderators_ids,
-                parent: this.form.parent
+                parent: this.form.parent,
+                enabled_view_modes: this.form.enabled_view_modes
             };
             this.updateCollection(data).then(updatedCollection => {    
                 
@@ -406,6 +441,7 @@ export default {
                 this.form.status = this.collection.status;
                 this.form.cover_page_id = this.collection.cover_page_id;
                 this.form.enable_cover_page = this.collection.enable_cover_page;
+                this.form.enabled_view_modes = this.collection.enabled_view_modes;
 
                 this.isLoading = false;
                 this.formErrorMessage = '';
@@ -444,8 +480,21 @@ export default {
                 this.form.cover_page_id = this.collection.cover_page_id;
                 this.form.slug = this.collection.slug;
                 this.form.parent = this.collection.parent;
+                this.form.enabled_view_modes = [];
                 this.moderators = [];
 
+                // Fills or update enabled view modes 
+                // for (let viewMode of Object.keys(this.registeredViewModes)) {
+                //     let indexOfViewMode = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode.viewMode == viewMode);
+                //     if (indexOfViewMode < 0) {                     
+                //         this.form.enabled_view_modes.push({ 
+                //             viewMode: viewMode, 
+                //             label: this.registeredViewModes[viewMode].label,
+                //             enabled: false 
+                //         });
+                //     }
+                // }
+
                 // Pre-fill status with publish to incentivate it
                 this.form.status = 'publish';
 
@@ -472,6 +521,18 @@ export default {
         cancelBack(){
             this.$router.push(this.$routerHelper.getCollectionsPath());
         },
+        updateViewModeslist(viewMode) {
+        
+            let index = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode == viewMode);
+            if (index > -1)
+                this.form.enabled_view_modes.splice(index, 1);
+            else    
+                this.form.enabled_view_modes.push(viewMode);
+        },
+        checkIfViewModeEnabled(viewMode) {
+            let index = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode == viewMode);
+            return index > -1;
+        },
         fecthCoverPages(search) {
             this.isFetchingPages = true;
             this.fetchPages(search)
@@ -601,9 +662,21 @@ export default {
                 this.form.enable_cover_page = this.collection.enable_cover_page;
                 this.form.cover_page_id = this.collection.cover_page_id;
                 this.form.parent = this.collection.parent;
-
+                this.form.enabled_view_modes = JSON.parse(JSON.stringify(this.collection.enabled_view_modes));
                 this.moderators = JSON.parse(JSON.stringify(this.collection.moderators));
 
+                // Fills or update enabled view modes 
+                // for (let viewMode of Object.keys(this.registeredViewModes)) {
+                //     let indexOfViewMode = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode.viewMode == viewMode);
+                //     if (indexOfViewMode < 0) {                     
+                //         this.form.enabled_view_modes.push({ 
+                //             viewMode: viewMode, 
+                //             label: this.registeredViewModes[viewMode].label,
+                //             enabled: false 
+                //         });
+                //     }
+                // }
+                 
                 // Generates CoverPage from current cover_page_id info
                 if (this.form.cover_page_id != undefined && this.form.cover_page_id != '') {
                     
@@ -639,6 +712,7 @@ export default {
         }
     },
     mounted() {
+
         if (this.$route.fullPath.split("/").pop() != "new") {
             document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
                 this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53)); 

src/admin/js/theme-main.js

@@ -88,12 +88,20 @@ new Vue({
     store,
     router: routerTheme, 
     data: {
-        collectionId: ''   
+        collectionId: '',
+        defaultViewMode: '',
+        enabledViewModes: {}   
     },
     render: h => h(ThemeItemsList),
     beforeMount () {
+
         if (this.$el.attributes['collection-id'] != undefined)
             this.collectionId = this.$el.attributes['collection-id'].value;
+        if (this.$el.attributes['default-view-mode'] != undefined)
+            this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
+        if (this.$el.attributes['enabled-view-modes'] != undefined)
+            this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
+
     }
     
 });

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

@@ -137,7 +137,9 @@
 
                 </div>
                 <!-- Displayed Fields Dropdown -->
-                <div class="search-control-item">
+                <div    
+                        v-if="!isOnTheme || registeredViewModes[viewMode].dynamic_metadata"
+                        class="search-control-item">
                     <b-dropdown
                             ref="displayedFieldsDropdown"
                             :mobile-modal="false"
@@ -178,24 +180,19 @@
                     <b-field>
                     <b-dropdown 
                                 @change="onChangeViewMode($event)"
-                                :value="viewMode">
+                                :mobile-modal="false">
                             <button 
                                     class="button is-white" 
                                     slot="trigger">
                                 <span>{{ $i18n.get('label_view_mode') }}</span>
                                 <b-icon icon="menu-down" />
                             </button>
-                            <b-dropdown-item :value="'table'">
+                            <b-dropdown-item 
-                                <b-icon icon="table"/>
+                                    v-for="(viewMode, index) of enabledViewModes"
-                                Table
+                                    :key="index"
-                            </b-dropdown-item>
+                                    :value="viewMode">
-                            <b-dropdown-item :value="'cards'">
+                                <span v-html="registeredViewModes[viewMode].icon" />
-                                <b-icon icon="view-list"/>
+                                {{ registeredViewModes[viewMode].label }}
-                                Cards
-                            </b-dropdown-item>
-                            <b-dropdown-item :value="'grid'">
-                                <b-icon icon="view-grid"/>
-                                Grid
                             </b-dropdown-item>
                         </b-dropdown>
                     </b-field>
@@ -309,7 +306,7 @@
                 </section>
 
                 <!-- Pagination -->
-                <pagination v-if="totalItems > 0"/>
+                <pagination v-if="totalItems > 0 && (!isOnTheme || registeredViewModes[viewMode].show_pagination)"/>
             </div>
         </div>
         
@@ -343,7 +340,9 @@
             }
         },
         props: {
-            collectionId: Number
+            collectionId: Number,
+            defaultViewMode: String, // Used only on theme
+            enabledViewModes: Object // Used only on theme
         },
         computed: {
             items() {
@@ -571,8 +570,8 @@
 
         },
         mounted() {
-            this.prepareFieldsAndFilters();
             
+            this.prepareFieldsAndFilters();
             this.localTableFields = JSON.parse(JSON.stringify(this.tableFields));
 
             // Watch Scroll for shrinking header, only on Admin at collection level

src/admin/tainacan-admin-i18n.php

@@ -194,6 +194,8 @@ return [
 	'label_created_by'						   => __( 'Created by', 'tainacan' ),
 	'label_apply_changes'					   => __( 'Apply changes', 'tainacan' ),
 	'label_view_mode'					   	   => __( 'View mode', 'tainacan' ),
+	'label_default_view_mode'			   	   => __( 'Default view mode', 'tainacan' ),
+	'label_enabled_view_modes'			   	   => __( 'Enabled view modes', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'    => __( 'Delete selected collections', 'tainacan' ),

src/admin/theme-items-list.vue

@@ -1,6 +1,8 @@
 <template>
     <items-page
             class="theme-items-list"
+            :enabled-view-modes="$root.enabledViewModes" 
+            :default-view-mode="$root.defaultViewMode"
             :collection-id="$root.collectionId" />
 </template>
 

src/classes/repositories/class-tainacan-collections.php

@@ -133,7 +133,7 @@ class Collections extends Repository {
 			'enabled_view_modes'        => [
 				'map'         => 'meta',
 				'title'       => __( 'Enabled view modes', 'tainacan' ),
-				'type'        => 'string',
+				'type'        => 'array',
 				'description' => __( 'Which visualization modes will be available for the public to choose from', 'tainacan' ),
 				'default'     => [],
 				//'validation' => v::stringType(),

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

@@ -127,7 +127,18 @@ export const deleteCollection = ({ commit }, { collectionId, isPermanently }) =>
     });
 }
 
-export const updateCollection = ({ commit }, { collection_id, name, description, slug, status, enable_cover_page, cover_page_id, moderators_ids, parent }) => {
+export const updateCollection = ({ commit }, { 
+        collection_id, 
+        name, 
+        description, 
+        slug, 
+        status, 
+        enable_cover_page, 
+        cover_page_id,
+        moderators_ids, 
+        parent,
+        enabled_view_modes
+    }) => {
     return new Promise((resolve, reject) => {
         axios.tainacan.patch('/collections/' + collection_id, {
             name: name,
@@ -137,7 +148,8 @@ export const updateCollection = ({ commit }, { collection_id, name, description,
             cover_page_id: "" + cover_page_id,
             enable_cover_page: enable_cover_page,
             moderators_ids: moderators_ids,
-            parent: parent
+            parent: parent,
+            enabled_view_modes: enabled_view_modes
         }).then( res => {
             commit('setCollection', { 
                 id: collection_id, 
@@ -148,7 +160,8 @@ export const updateCollection = ({ commit }, { collection_id, name, description,
                 enable_cover_page: enable_cover_page, 
                 cover_page_id: cover_page_id,
                 moderators_ids: moderators_ids,
-                parent: parent
+                parent: parent,
+                enabled_view_modes: enabled_view_modes
             });
             resolve( res.data );
         }).catch( error => {