tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Moves pagination to a separate component in ItemsList. Adds a watcher to follow route updates on paged and perpage

This commit is contained in:
Mateus Machado Luna 2018-04-03 17:17:54 -03:00
parent e228f6042f
commit f3ce1e152f
9 changed files with 166 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/edition/category-edition-form.vue
View File

@ -218,7 +218,7 @@
this.formErrorMessage = '';
this.editFormErrors = {};
this.$router.push(this.$routerHelper.getCategoryPath(this.categoryId));
this.$router.push(this.$routerHelper.getCategoriesPath());
})
.catch((errors) => {
for (let error of errors.errors) {

3
src/admin/components/lists/items-list.vue
View File

@ -102,9 +102,6 @@ export default {
collectionId: Number,
tableFields: Array,
prefTableFields: Array,
totalItems: 0,
page: 1,
itemsPerPage: 12,
items: Array,
isLoading: false
},

0
src/admin/components/lists/filters-items-list.vue → src/admin/components/search/filters-items-list.vue
View File

130
src/admin/components/search/pagination.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<div class="pagination-area">
<div class="shown-items">
{{
$i18n.get('info_showing_items') +
getFirstItem() +
$i18n.get('info_to') +
getLastItemNumber() +
$i18n.get('info_of') + totalItems + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_items_per_page')">
<b-select
:value="itemsPerPage"
@input="onChangeItemsPerPage">
<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="totalItems"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="itemsPerPage"/>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { eventFilterBus } from '../../../js/event-bus-filters'
export default {
name: 'Pagination',
data(){
return {
}
},
computed: {
totalItems(){
return this.getTotalItems();
},
page(){
return this.getPage();
},
itemsPerPage(){
return this.getItemsPerPage();
}
},
watch: {
page( value ){
this.page = ( value > 0 ) ? value : 1;
}
},
methods: {
...mapGetters('search', [
'getTotalItems',
'getPage',
'getItemsPerPage',
'getPostQuery'
]),
...mapActions('search', [
'setPage',
'setItemsPerPage'
]),
onChangeItemsPerPage(value) {
if( this.itemsPerPage == value){
return false;
}
let prevValue = this.itemsPerPage;
this.setItemsPerPage( value );
this.$userPrefs.set('items_per_page', value, prevValue);
this.updateURLQueries();
},
onPageChange(page) {
if(page == 0)
return;
this.setPage( page );
this.updateURLQueries();
},
getLastItemNumber() {
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
return last > this.totalItems ? this.totalItems : last;
},
getFirstItem(){
if( this.totalItems == 0 )
return 0;
return ( this.itemsPerPage * ( this.page - 1 ) + 1)
},
updateURLQueries(){
this.$router.push({ query: {} });
this.$router.push({ query: this.getPostQuery() });
}
},
created () {
this.$userPrefs.get('items_per_page')
.then((value) => {
this.itemsPerPage = value;
this.setPage(this.page);
this.setItemsPerPage(this.itemsPerPage);
this.updateURLQueries();
})
.catch(() => {
this.$userPrefs.set('items_per_page', 12, null);
this.itemsPerPage = 12;
this.setPage(this.page);
this.setItemsPerPage(this.itemsPerPage);
this.updateURLQueries();
});
}
}
</script>
<style scoped>
</style>

2
src/admin/pages/lists/categories-page.vue
View File

@ -24,7 +24,7 @@
:categories="categories"/>
<!-- Footer -->
<div
class="table-footer"
class="pagination-area"
v-if="totalCategories > 0">
<div class="shown-items">
{{

2
src/admin/pages/lists/collections-page.vue
View File

@ -22,7 +22,7 @@
:collections-per-page="collectionsPerPage"
:collections="collections"/>
<!-- Footer -->
<div class="table-footer">
<div class="pagination-area">
<div class="shown-items">
{{
$i18n.get('info_showing_collections') +

137
src/admin/pages/lists/items-page.vue
View File

@ -38,54 +38,17 @@
<div class="columns above-subheader">
<aside class="column filters-menu">
<h3>{{ $i18n.get('filters') }}</h3>
<filters-items-list/>
<filters-items-list v-if="items.length > 0"/>
</aside>
<div class="column table-container">
<items-list
:collection-id="collectionId"
:table-fields="tableFields"
:pref-table-fields="prefTableFields"
:total-items="totalItems"
:page="page"
:items="items"
:is-loading="isLoading"
:items-per-page="itemsPerPage"/>
<!-- Footer -->
<div class="table-footer">
<div class="shown-items">
{{
$i18n.get('info_showing_items') +
getFirstItem() +
$i18n.get('info_to') +
getLastItemNumber() +
$i18n.get('info_of') + totalItems + '.'
}}
</div>
<div class="items-per-page">
<b-field
horizontal
:label="$i18n.get('label_items_per_page')">
<b-select
:value="itemsPerPage"
@input="onChangeItemsPerPage"
:disabled="items.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="totalItems"
:current.sync="page"
order="is-centered"
size="is-small"
:per-page="itemsPerPage"/>
</div>
</div>
:is-loading="isLoading"/>
<!-- Pagination Footer -->
<pagination v-if="items.length > 0"/>
</div>
</div>
</div>
@ -93,7 +56,8 @@
<script>
import ItemsList from '../../components/lists/items-list.vue';
import FiltersItemsList from '../../components/lists/filters-items-list.vue';
import FiltersItemsList from '../../components/search/filters-items-list.vue';
import Pagination from '../../components/search/pagination.vue'
import { mapActions, mapGetters } from 'vuex';
export default {
@ -107,14 +71,10 @@ export default {
isLoading: false
}
},
watch: {
page( value ){
this.page = ( value > 0 ) ? value : 1;
}
},
components: {
ItemsList,
FiltersItemsList
FiltersItemsList,
Pagination
},
methods: {
...mapActions('collection', [
@ -126,10 +86,7 @@ export default {
'getFields'
]),
...mapGetters('search', [
'getPostQuery',
'getTotalItems',
'getPage',
'getItemsPerPage'
'getPostQuery'
]),
...mapActions('fields', [
'fetchFields'
@ -139,8 +96,6 @@ export default {
]),
...mapActions('search', [
'set_postquery',
'setPage',
'setItemsPerPage',
'search_by_collection'
]),
onChangeTableFields(field) {
@ -161,92 +116,44 @@ export default {
//this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, prevValue);
},
onChangeItemsPerPage(value) {
if( this.itemsPerPage == value){
return false;
}
let prevValue = this.itemsPerPage;
this.setItemsPerPage( value );
this.$userPrefs.set('items_per_page', value, prevValue);
this.alterQueryString();
this.loadItems();
},
onPageChange(page) {
if(page == 0)
return;
this.setPage( page );
this.alterQueryString();
this.loadItems();
},
loadItems() {
this.isLoading = true;
let promisse = null;
if( Object.keys( this.$route.query ).length > 0 ) {
this.set_postquery(this.$route.query);
if (this.$route.params && this.$route.params.collectionId) {
promisse = this.search_by_collection(this.$route.params.collectionId);
}
}
if(!promisse){
promisse = this.fetchItems({ 'collectionId': this.collectionId, 'page': this.page, 'itemsPerPage': this.itemsPerPage });
this.alterQueryString();
}
promisse.then(() => {
this.search_by_collection(this.$route.params.collectionId).then(() => {
this.isLoading = false;
})
.catch(() => {
this.isLoading = false;
});
}
}
},
getLastItemNumber() {
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
watch: {
'$route.query'() {
if (this.$route.query.perpage == undefined)
this.$route.query.perpage = 12;
if (this.$route.query.paged == undefined)
this.$route.query.paged = 1;
return last > this.totalItems ? this.totalItems : last;
},
getFirstItem(){
if( this.totalItems == 0 )
return 0;
return ( this.itemsPerPage * ( this.page - 1 ) + 1)
},
alterQueryString(){
this.$router.push({ query: {} });
this.$router.push({ query: this.getPostQuery() });
this.loadItems();
}
},
computed: {
items(){
return this.getItems();
},
totalItems(){
return this.getTotalItems();
},
page(){
return this.getPage();
},
itemsPerPage(){
return this.getItemsPerPage();
}
},
created() {
this.collectionId = this.$route.params.collectionId;
this.isRepositoryLevel = (this.collectionId == undefined);
this.$userPrefs.get('items_per_page')
.then((value) => {
this.itemsPerPage = value;
})
.catch(() => {
this.$userPrefs.set('items_per_page', 12, null);
});
},
mounted(){
this.loadItems();
this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: false }).then((res) => {
let rawFields = res;
this.tableFields.push({ label: this.$i18n.get('label_thumbnail'), field: 'featured_image', slug: 'featured_image', visible: true });

2
src/admin/scss/tainacan-admin.scss
View File

@ -281,7 +281,7 @@ html {
font-weight: normal !important;
}
}
.table-footer {
.pagination-area {
display: flex;
justify-content: space-between;
align-items: center;

1
src/js/store/modules/search/actions.js
View File

@ -4,6 +4,7 @@ import qs from 'qs';
// METAQUERIES ----------------------------------------------------
export const search_by_collection = ({ state, dispatch, commit }, collectionId) => {
return new Promise((resolve, reject) =>{
axios.tainacan.get('/collection/' + collectionId + '/items?' + qs.stringify( state.postquery ))
.then(res => {
let items = res.data;