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

Adds pagination to vue component.

This commit is contained in:
Mateus Machado Luna 2019-05-06 17:42:57 -03:00
parent 2a87dc2ec5
commit 047e25117a
4 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/css/tainacan-gutenberg-blocks-style.css
View File

@ -433,6 +433,26 @@
box-shadow: none; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button.sorting-button-selected svg {
fill: #545758; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar a.next-button {
max-width: 12px;
border-left: 12px solid #cbcbcb;
border-right: 12px solid transparent;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
cursor: pointer; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar a.next-button:hover {
border-left-color: #555758; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar a.previous-button {
margin-left: auto;
margin-right: 1rem;
max-width: 12px;
border-right: 12px solid #cbcbcb;
border-left: 12px solid transparent;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
cursor: pointer; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar a.previous-button:hover {
border-right-color: #555758; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
height: 32px;
width: 20%;

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

File diff suppressed because one or more lines are too long

29
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue
View File

@ -58,8 +58,19 @@
</button>
<input
:value="searchString"
@input="(value) => { $root.debounce(applySearchString(value), 1000) } "
type="text" >
@input="(value) => { $root.debounce(applySearchString(value), 300) } "
type="text">
<a
class="previous-button"
v-if="paged > 1"
@click="paged--; fetchItems()"
:label="$root.__('Previous page', 'tainacan')" />
<a
:style="{ marginLeft: paged <= 1 ? 'auto' : '0' }"
class="next-button"
v-if="paged < totalPages || items.length < totalItems"
@click="paged++; fetchItems()"
:label="$root.__('Next page', 'tainacan')" />
</div>
<div
v-if="isLoading"
@ -122,12 +133,15 @@ export default {
isLoading: false,
localMaxItemsNumber: undefined,
localOrder: undefined,
tainacanAxios: undefined
tainacanAxios: undefined,
paged: undefined,
totalItems: 0
}
},
methods: {
applySearchString(event) {
this.paged = 1;
let value = event.target.value;
if (this.searchString != value) {
@ -179,6 +193,12 @@ export default {
this.searchString = undefined;
}
// Set up paging
if (this.paged != undefined)
queryObject.paged = this.paged;
else if (queryObject.paged != undefined)
this.paged = queryObject.paged;
// Remove unecessary queries
delete queryObject.readmode;
delete queryObject.iframemode;
@ -191,7 +211,10 @@ export default {
.then(response => {
for (let item of response.data.items)
this.items.push(item);
this.isLoading = false;
this.totalItems = response.headers['x-wp-total'];
}).catch((error) => {
this.isLoading = false;
console.log(error);

23
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss
View File

@ -38,6 +38,29 @@
fill: #545758;
}
}
a.next-button {
margin-right: 1rem;
max-width: 12px;
border-left: 12px solid #cbcbcb;
border-right: 12px solid transparent;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
cursor: pointer;
&:hover { border-left-color: #555758; }
}
a.previous-button {
margin-left: auto;
margin-right: 1rem;
max-width: 12px;
border-right: 12px solid #cbcbcb;
border-left: 12px solid transparent;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
cursor: pointer;
&:hover { border-right-color: #555758; }
}
input {
height: 32px;
width: 20%;