Adds pagination to vue component.
This commit is contained in:
parent
2a87dc2ec5
commit
047e25117a
|
@ -433,6 +433,26 @@
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button.sorting-button-selected svg {
|
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button.sorting-button-selected svg {
|
||||||
fill: #545758; }
|
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 {
|
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -58,8 +58,19 @@
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input
|
||||||
:value="searchString"
|
:value="searchString"
|
||||||
@input="(value) => { $root.debounce(applySearchString(value), 1000) } "
|
@input="(value) => { $root.debounce(applySearchString(value), 300) } "
|
||||||
type="text" >
|
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>
|
||||||
<div
|
<div
|
||||||
v-if="isLoading"
|
v-if="isLoading"
|
||||||
|
@ -122,12 +133,15 @@ export default {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
localMaxItemsNumber: undefined,
|
localMaxItemsNumber: undefined,
|
||||||
localOrder: undefined,
|
localOrder: undefined,
|
||||||
tainacanAxios: undefined
|
tainacanAxios: undefined,
|
||||||
|
paged: undefined,
|
||||||
|
totalItems: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
applySearchString(event) {
|
applySearchString(event) {
|
||||||
|
|
||||||
|
this.paged = 1;
|
||||||
let value = event.target.value;
|
let value = event.target.value;
|
||||||
|
|
||||||
if (this.searchString != value) {
|
if (this.searchString != value) {
|
||||||
|
@ -179,6 +193,12 @@ export default {
|
||||||
this.searchString = undefined;
|
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
|
// Remove unecessary queries
|
||||||
delete queryObject.readmode;
|
delete queryObject.readmode;
|
||||||
delete queryObject.iframemode;
|
delete queryObject.iframemode;
|
||||||
|
@ -191,7 +211,10 @@ export default {
|
||||||
.then(response => {
|
.then(response => {
|
||||||
for (let item of response.data.items)
|
for (let item of response.data.items)
|
||||||
this.items.push(item);
|
this.items.push(item);
|
||||||
|
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
|
this.totalItems = response.headers['x-wp-total'];
|
||||||
|
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
|
@ -38,6 +38,29 @@
|
||||||
fill: #545758;
|
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 {
|
input {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
|
Loading…
Reference in New Issue