Fixes pagination implementation for bg-process. Begins moving processes page from separate page to evetns page on a new tab.

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

@@ -85,11 +85,11 @@
                                 :aria-label="$i18n.get('label_name') + ': ' + bgProcess.name">
                             <p
                                     v-tooltip="{
-                                        content: bgProcess.name,
+                                        content: bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process'),
                                         autoHide: false,
                                         placement: 'auto-start'
                                     }">
-                                {{ bgProcess.name }}</p>
+                                {{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
                         </td>
                         <!-- Progress -->
                         <td 
@@ -144,23 +144,23 @@
                                         v-if="bgProcess.done <= 0"
                                         class="icon has-text-gray action-icon"
                                         @click="pauseProcess(index)">
-                                    <i class="mdi mdi-24px mdi-pause-circle"/>
+                                    <i class="mdi mdi-18px mdi-pause-circle"/>
                                 </span>
                                 <span 
                                         v-if="bgProcess.done <= 0"
                                         class="icon has-text-gray action-icon"
                                         @click="pauseProcess(index)">
-                                    <i class="mdi mdi-24px mdi-close-circle-outline"/>
+                                    <i class="mdi mdi-18px mdi-close-circle-outline"/>
                                 </span>
                                 <span 
                                         v-tooltip="{
-                                            content: $i18n.get('label_process_conpleted'),
+                                            content: $i18n.get('label_process_completed'),
                                             autoHide: false,
                                             placement: 'auto-start'
                                         }"
                                         v-if="bgProcess.done > 0"
                                         class="icon has-text-success">
-                                    <i class="mdi mdi-24px mdi-checkbox-marked-circle"/>
+                                    <i class="mdi mdi-18px mdi-checkbox-marked-circle"/>
                                 </span>
                             </div>
                         </td>

src/admin/components/other/processes-popup.vue

@@ -43,7 +43,7 @@
                                         class="mdi mdi-18px"
                                         :class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
                             </span>  
-                            <p>Name of Process</p>
+                            <p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
                         </div>
                         <span 
                                 v-if="bgProcess.done <= 0"
@@ -139,7 +139,7 @@ export default {
         getUnfinishedProcesses() {
             let nUnfinishedProcesses = 0
             for(let i = 0; i < this.bgProcesses.length; i++) {
-                if (this.bgProcesses[i].done > 0)
+                if (this.bgProcesses[i].done <= 0)
                     nUnfinishedProcesses++;
             }
             return nUnfinishedProcesses;
@@ -156,7 +156,7 @@ export default {
         }
     },
     mounted() {    
-        this.fetchProcesses();
+        this.fetchProcesses({ page: 1, processesPerPage: 12 });
         this.showProcessesList = false;
     }
 }

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

@@ -8,23 +8,59 @@
             <tainacan-title />
             <div :class="{ 'above-subheader': isRepositoryLevel }">
 
+                <div 
+                        v-if="isRepositoryLevel"
+                        class="tabs">
+                    <ul>
+                        <li 
+                                @click="onChangeTab('')"
+                                :class="{ 'is-active': tab == undefined || tab == ''}"><a>{{ $i18n.get('events') }}</a></li>
+                        <li 
+                                @click="onChangeTab('processes')"
+                                :class="{ 'is-active': tab == 'processes'}"><a>{{ $i18n.get('processes') }}</a></li>
+                    </ul>
+                </div>
+
                 <b-loading 
                         :active.sync="isLoading" 
                         :can-cancel="false"/>
                 <events-list
+                        v-if="tab != 'processes'"
                         :is-loading="isLoading"
                         :total-events="totalEvents"
-                        :page="page"
+                        :page="eventsPage"
                         :events-per-page="eventsPerPage"
                         :events="events"/>
+                <processes-list
+                        v-if="tab == 'processes'"
+                        :is-loading="isLoading"
+                        :total="total"
+                        :page="processesPage"
+                        :processes-per-page="processesPerPage"
+                        :processes="processes"/>
+
+                <!-- Empty state processes image -->
+                <div v-if="tab == 'processes' && processes.length <= 0 && !isLoading">
+                    <section class="section">
+                        <div class="content has-text-grey has-text-centered">
+                            <p>
+                                <b-icon
+                                        icon="inbox"
+                                        size="is-large"/>
+                            </p>
+                            <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_process') }}</p>
+                        </div>
+                    </section>
+                </div>
+
                 <!-- Footer -->
                 <div
                         class="pagination-area"
-                        v-if="totalEvents > 0">
+                        v-if="tab != 'processes' && totalEvents > 0">
                     <div class="shown-items">
                         {{
                             $i18n.get('info_showing_events') +
-                            (eventsPerPage * (page - 1) + 1) +
+                            (eventsPerPage * (eventsPage - 1) + 1) +
                             $i18n.get('info_to') +
                             getLastEventNumber() +
                             $i18n.get('info_of') + totalEvents + '.'
@@ -49,12 +85,49 @@
                         <b-pagination
                                 @change="onPageChange"
                                 :total="totalEvents"
-                                :current.sync="page"
+                                :current.sync="eventsPage"
                                 order="is-centered"
                                 size="is-small"
                                 :per-page="eventsPerPage"/>
                     </div>
                 </div>
+                <div 
+                        class="pagination-area" 
+                        v-if="tab == 'processes' && processes.length > 0">
+                    <div class="shown-items">
+                        {{
+                            $i18n.get('info_showing_processes') +
+                            (processesPerPage * (processesPage - 1) + 1) +
+                            $i18n.get('info_to') +
+                            getLastProcessesNumber() +
+                            $i18n.get('info_of') + total + '.'
+                        }}
+                    </div>
+                    <div class="items-per-page">
+                        <b-field 
+                                horizontal 
+                                :label="$i18n.get('label_processes_per_page')">
+                            <b-select
+                                    :value="processesPerPage"
+                                    @input="onChangeProcessesPerPage"
+                                    :disabled="processes.length <= 0">
+                                <option value="12">12</option>
+                                <option value="24">24</option>
+                                <option value="48">48</option>
+                                <option value="96">96</option>
+                            </b-select>
+                        </b-field>
+                    </div>
+                    <div class="pagination">
+                        <b-pagination
+                                @change="onPageChange"
+                                :total="total"
+                                :current.sync="processesPage"
+                                order="is-centered"
+                                size="is-small"
+                                :per-page="processesPerPage"/>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -62,6 +135,7 @@
 
 <script>
     import EventsList from "../../components/lists/events-list.vue";
+    import ProcessesList from "../../components/lists/processes-list.vue";
     import { mapActions, mapGetters } from 'vuex';
     import moment from 'moment'
 
@@ -71,13 +145,17 @@
             return {
                 isLoading: false,
                 totalEvents: 0,
-                page: 1,
+                eventsPage: 1,
+                processesPage: 1,
                 eventsPerPage: 12,
-                isRepositoryLevel: false
+                processesPerPage: 12,
+                isRepositoryLevel: false,
+                tab: ''
             }
         },
         components: {
-            EventsList
+            EventsList,
+            ProcessesList
         },
         methods: {
             ...mapActions('event', [
@@ -87,6 +165,19 @@
             ...mapGetters('event', [
                 'getEvents'
             ]),
+            ...mapActions('bgprocess', [
+                'fetchProcesses',
+            ]),
+            ...mapGetters('bgprocess', [
+                'getProcesses'
+            ]),
+            onChangeTab(tab) {
+                this.tab = tab;
+                if (this.tab == 'processes')
+                    this.loadProcesses();
+                else
+                    this.loadEvents();
+            },
             onChangeEventsPerPage(value) {
                 this.eventsPerPage = value;
                 this.$userPrefs.set('events_per_page', value)
@@ -98,15 +189,32 @@
                 });
                 this.loadEvents();
             },
+            onChangeProcessesPerPage(value) {
+                this.processesPerPage = value;
+                this.$userPrefs.set('processes_per_page', value)
+                .then((newValue) => {
+                    this.processesPerPage = newValue;
+                })
+                .catch(() => {
+                    this.$console.log("Error settings user prefs for processes per page")
+                });
+                this.load();
+            },
             onPageChange(page) {
-                this.page = page;
+                
-                this.loadEvents();
+                if (this.tab == 'processes') {
+                    this.processesPage = page;
+                    this.loadProcesses();
+                } else {
+                    this.eventsPage = page;
+                    this.loadEvents();
+                }
             },
             loadEvents() {
                 this.isLoading = true;
 
                 if(this.isRepositoryLevel) {
-                    this.fetchEvents({'page': this.page, 'eventsPerPage': this.eventsPerPage})
+                    this.fetchEvents({'page': this.eventsPage, 'eventsPerPage': this.eventsPerPage})
                         .then((res) => {
                             this.isLoading = false;
                             this.totalEvents = res.total;
@@ -115,7 +223,7 @@
                             this.isLoading = false;
                         });
                 } else {
-                    this.fetchCollectionEvents({'page': this.page, 'eventsPerPage': this.eventsPerPage, 'collectionId': this.$route.params.collectionId})
+                    this.fetchCollectionEvents({'page': this.eventsPage, 'eventsPerPage': this.eventsPerPage, 'collectionId': this.$route.params.collectionId})
                         .then((res) => {
                             this.isLoading = false;
                             this.totalEvents = res.total;
@@ -125,9 +233,25 @@
                         });
                 }
             },
+            loadProcesses() {
+                this.isLoading = true;
+
+                this.fetchProcesses({ 'page': this.processesPage, 'processesPerPage': this.processesPerPage })
+                    .then((res) => {
+                        this.isLoading = false;
+                        this.total = res.total;
+                    })
+                    .catch(() => {
+                        this.isLoading = false;
+                    });
+            },
             getLastEventNumber() {
-                let last = (Number(this.eventsPerPage * (this.page - 1)) + Number(this.eventsPerPage));
+                let last = (Number(this.eventsPerPage * (this.eventPage - 1)) + Number(this.eventsPerPage));
                 return last > this.totalEvents ? this.totalEvents : last;
+            },
+            getLastProcessesNumber() {
+                let last = (Number(this.processesPerPage * (this.processesPage - 1)) + Number(this.processesPerPage));
+                return last > this.total ? this.total : last;
             }
         },
         computed: {
@@ -140,6 +264,9 @@
                         moment(event['log_date'], 'YYYY-MM-DD h:mm:ss').format('DD/MM/YYYY, hh:mm:ss');
 
                 return eventsList;
+            },
+            processes(){
+                return this.getProcesses();
             }
         },
         created() {

src/admin/tainacan-admin-i18n.php

@@ -265,7 +265,8 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_queued_on'                                => __( 'Queued on:', 'tainacan' ),
 	'label_last_processed_on'                        => __( 'Last processed on:', 'tainacan' ),
 	'label_progress'                                 => __( 'Progress', 'tainacan' ),
-	'label_process_conpleted'                        => __( 'Process completed', 'tainacan' ),
+	'label_process_completed'                        => __( 'Process completed', 'tainacan' ),
+	'label_unamed_process'                       	 => __( 'Unamed process', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),

src/api/endpoints/class-tainacan-rest-background-processes-controller.php

@@ -114,13 +114,13 @@ class REST_Background_Processes_Controller extends REST_Controller {
 
     public function get_items( $request ) {
         global $wpdb;
-        $body = json_decode($request->get_body(), true);
+        //$body = json_decode($request->get_body(), true);
 
-        $perpage = isset($body['perpage']) && is_numeric($body['perpage']) ? $body['perpage'] : 10;
+        $perpage = isset($request['perpage']) && is_numeric($request['perpage']) ? $request['perpage'] : 10;
         if ($perpage < 1) {
             $perpage = 1;
         }
-        $paged = isset($body['paged']) && is_numeric($body['paged']) ? $body['paged'] : 1;
+        $paged = isset($request['paged']) && is_numeric($request['paged']) ? $request['paged'] : 1;
         if ($paged < 1) {
             $paged = 1;
         }
@@ -133,8 +133,8 @@ class REST_Background_Processes_Controller extends REST_Controller {
         $status_q = "";
 
         if (current_user_can('edit_users')) {
-            if (isset($body['user_id'])) {
+            if (isset($request['user_id'])) {
-                $user_q = $wpdb->prepare("AND user_id = %d", $body['user_id']);
+                $user_q = $wpdb->prepare("AND user_id = %d", $request['user_id']);
             }
 
             if ( isset($user_q['all_users']) && $user_q['all_users'] ) {

src/js/store/modules/bgprocess/actions.js

@@ -1,13 +1,13 @@
 import axios from '../../../axios/axios';
 
 // Actions related to background processes
-export const fetchProcesses = ({ commit }) => {
+export const fetchProcesses = ({ commit }, {page, processesPerPage}) => {
     return new Promise((resolve, reject) => {
-        axios.tainacan.get(`/bg-processes/`)
+        axios.tainacan.get('/bg-processes?paged=' + page + '&perpage=' + processesPerPage)
         .then( res => {
             let processes = res.data;
             commit('setProcesses', processes);
-            resolve(processes)
+            resolve({ 'processes': processes, 'total': res.headers['x-wp-total'] });
         })
         .catch( error => {
             reject(error);