Fixes pagination implementation for bg-process. Begins moving processes page from separate page to evetns page on a new tab.
This commit is contained in:
Mateus Machado Luna
parent
6d4ff28f2d
commit
701a2b4b67
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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' ),
|
||||
|
|
|
|||
|
|
@ -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'])) {
|
||||
$user_q = $wpdb->prepare("AND user_id = %d", $body['user_id']);
|
||||
if (isset($request['user_id'])) {
|
||||
$user_q = $wpdb->prepare("AND user_id = %d", $request['user_id']);
|
||||
}
|
||||
|
||||
if ( isset($user_q['all_users']) && $user_q['all_users'] ) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue