132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
|
<div class="rounded-b-lg">
|
|
<nav class="flex justify-between items-center">
|
|
<!-- Previous Link -->
|
|
<button
|
|
:disabled="!hasPreviousPages || linksDisabled"
|
|
class="text-xs font-bold py-3 px-4 focus:outline-none rounded-bl-lg focus:ring focus:ring-inset"
|
|
:class="{
|
|
'text-primary-500 hover:text-primary-400 active:text-primary-600':
|
|
hasPreviousPages,
|
|
'text-gray-300 dark:text-gray-600':
|
|
!hasPreviousPages || linksDisabled,
|
|
}"
|
|
rel="prev"
|
|
@click.prevent="selectPreviousPage"
|
|
dusk="previous"
|
|
>
|
|
{{ __('Previous') }}
|
|
</button>
|
|
|
|
<slot />
|
|
|
|
<!-- Next Link -->
|
|
<button
|
|
:disabled="!hasMorePages || linksDisabled"
|
|
class="text-xs font-bold py-3 px-4 focus:outline-none rounded-br-lg focus:ring focus:ring-inset"
|
|
:class="{
|
|
'text-primary-500 hover:text-primary-400 active:text-primary-600':
|
|
hasMorePages,
|
|
'text-gray-300 dark:text-gray-600': !hasMorePages || linksDisabled,
|
|
}"
|
|
rel="next"
|
|
@click.prevent="selectNextPage"
|
|
dusk="next"
|
|
>
|
|
{{ __('Next') }}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['page'],
|
|
|
|
props: {
|
|
currentResourceCount: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
allMatchingResourceCount: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
resourceCountLabel: {
|
|
type: [Number, String],
|
|
required: true,
|
|
},
|
|
page: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
pages: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
next: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
previous: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
|
|
data: () => ({ linksDisabled: false }),
|
|
|
|
mounted() {
|
|
Nova.$on('resources-loaded', this.listenToResourcesLoaded)
|
|
},
|
|
|
|
beforeUnmount() {
|
|
Nova.$off('resources-loaded', this.listenToResourcesLoaded)
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Select the previous page.
|
|
*/
|
|
selectPreviousPage() {
|
|
this.selectPage(this.page - 1)
|
|
},
|
|
|
|
/**
|
|
* Select the next page.
|
|
*/
|
|
selectNextPage() {
|
|
this.selectPage(this.page + 1)
|
|
},
|
|
|
|
/**
|
|
* Select the page.
|
|
*/
|
|
selectPage(page) {
|
|
this.linksDisabled = true
|
|
this.$emit('page', page)
|
|
},
|
|
|
|
listenToResourcesLoaded() {
|
|
this.linksDisabled = false
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* Determine if prior pages are available.
|
|
*/
|
|
hasPreviousPages: function () {
|
|
return this.previous
|
|
},
|
|
|
|
/**
|
|
* Determine if more pages are available.
|
|
*/
|
|
hasMorePages: function () {
|
|
return this.next
|
|
},
|
|
},
|
|
}
|
|
</script>
|