Adds option to view selected items as... opening the exposers modal only for selected items. #429.

src/views/admin/components/lists/items-list.vue

@@ -36,7 +36,7 @@
                     <button
                             class="button is-white"
                             slot="trigger">
-                        <span>{{ $i18n.get('label_bulk_actions') }}</span>
+                        <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
                         <span class="icon">
                             <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
                         </span>
@@ -67,6 +67,12 @@
                             aria-role="listitem">
                         {{ $i18n.get('label_untrash_selected_items') }}
                     </b-dropdown-item>
+                    <b-dropdown-item
+                            :disabled="isAllItemsSelected"
+                            @click="$parent.openExposersModal(selectedItems)"
+                            aria-role="listitem">
+                        {{ $i18n.get('label_view_selected_items_as') }}
+                    </b-dropdown-item>
                 </b-dropdown>
             </div>
         </div>
@@ -1082,9 +1088,6 @@ export default {
         highlightedItem () {
             return this.getHighlightedItem();
         },
-        selectedItemsFromStore() {
-            return this.getSelectedItems();
-        },
         selectedItems () {
             if (this.$route.query.iframemode)
                 this.$eventBusSearch.setSelectedItemsForIframe(this.getSelectedItems());

src/views/admin/components/modals/exposers-modal.vue

@@ -12,7 +12,7 @@
             <h2 
                     id="exposers-modal-title"
                     v-if="selectedExposer == undefined">
-                {{ itemId ? $i18n.get('label_urls_for_item_page') : $i18n.get('label_urls_for_items_list') }}
+                {{ itemId ? $i18n.get('label_urls_for_item_page') : ($i18n.get('label_urls_for_items_list') + (selectedItems && selectedItems.length ? (' (' + selectedItems.length + ' ' + $i18n.get('items') + ')') : '')) }}
             </h2>
             <h2 
                     id="exposers-modal-title"
@@ -257,7 +257,8 @@ export default {
         collectionId: Number,
         totalItems: Number,
         itemId: Number,
-        itemURL: String
+        itemURL: String,
+        selectedItems: Array
     },
     data(){
         return {
@@ -272,7 +273,7 @@ export default {
     },
     computed: {
         totalPages() {
-            return Math.ceil(Number(this.totalItems)/Number(this.maxItemsPerPage));    
+            return this.selectedItems && this.selectedItems.length ? 1 : Math.ceil(Number(this.totalItems)/Number(this.maxItemsPerPage));    
         },
         exposerBaseURL() {
             let baseURL = this.collectionId != undefined ? '/collection/' + this.collectionId + '/items/' : '/items/';
@@ -293,6 +294,7 @@ export default {
             // Removes Admin View Mode
             if (currentParams.admin_view_mode != undefined)
                 delete currentParams.admin_view_mode;
+
             
             // Handles pagination of this link
             delete currentParams.paged;
@@ -301,6 +303,13 @@ export default {
             else 
                 currentParams.perpage = this.maxItemsPerPage;
 
+            // If selectedItems were provided, filters by them
+            if (this.selectedItems && this.selectedItems.length) {
+                currentParams.postin = this.selectedItems;
+                delete currentParams.paged;
+                currentParams.perpage = this.maxItemsPerPage;
+            }
+
             return tainacan_plugin.tainacan_api_url + baseURL + '?' + qs.stringify(currentParams);
         },
         availableExposers() {
@@ -456,7 +465,7 @@ export default {
                 });
         },
         getLastItemNumber(page) {
-            let last = (Number(this.maxItemsPerPage*(page - 1)) + Number(this.maxItemsPerPage));
+            let last = (this.selectedItems && this.selectedItems.length) ? this.selectedItems.length : (Number(this.maxItemsPerPage*(page - 1)) + Number(this.maxItemsPerPage));
             
             return last > this.totalItems ? this.totalItems : last;
         },

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

@@ -890,14 +890,15 @@
                     trapFocus: true
                 });
             },
-            openExposersModal() {
+            openExposersModal(selectedItems) {
                 this.$buefy.modal.open({
                     parent: this,
                     component: ExposersModal,
                     hasModalCard: true,
                     props: { 
                         collectionId: this.collectionId,
-                        totalItems: this.totalItems
+                        totalItems: this.totalItems,
+                        selectedItems: selectedItems
                     },
                     trapFocus: true
                 })

src/views/tainacan-admin-i18n.php

@@ -477,7 +477,9 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_gallery_help'							 => __( 'Help with the gallery view mode', 'tainacan' ),
 	'label_space_key'								 => __( 'SPACE', 'tainacan' ),
 	'label_esc_key'								 	 => __( 'ESC', 'tainacan' ),
-
+	'label_view_selected_items_as'					 => __( 'View selected items as...', 'tainacan' ),
+	'label_actions_for_the_selection'				 => __( 'Actions for the selection', 'tainacan' ),
+	
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),
 	'instruction_delete_selected_items'              => __( 'Delete selected items', 'tainacan' ),