forked from geolba/tethys.backend
209 lines
9.2 KiB
Vue
209 lines
9.2 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
// meta:
|
|
// {total: 19, perPage: 5, currentPage: 1, lastPage: 4, firstPage: 1, …}
|
|
// currentPage:
|
|
// 1
|
|
// firstPage:
|
|
// 1
|
|
// firstPageUrl:
|
|
// '/?page=1'
|
|
// lastPage:
|
|
// 4
|
|
// lastPageUrl:
|
|
// '/?page=4'
|
|
// nextPageUrl:
|
|
// '/?page=2'
|
|
// perPage:
|
|
// 5
|
|
// previousPageUrl:
|
|
// null
|
|
// total:
|
|
// 19
|
|
const nextPageLink = computed(() => {
|
|
let url = new URL(document.location);
|
|
url.searchParams.set('page', props.data.currentPage + 1);
|
|
return url.href;
|
|
// return url + '&page=' + (Number(props.data.currentPage) + 1);
|
|
});
|
|
const prevPageLink = computed(() => {
|
|
let url = new URL(document.location);
|
|
url.searchParams.set('page', props.data.currentPage - 1);
|
|
return url.href;
|
|
// return url + '&page=' + (props.data.currentPage - 1);
|
|
});
|
|
const toPage = computed(() => {
|
|
let currentPage = props.data.currentPage;
|
|
let perPage = props.data.perPage;
|
|
|
|
if (props.data.currentPage == props.data.lastPage) {
|
|
return props.data.total;
|
|
} else {
|
|
return currentPage * perPage;
|
|
}
|
|
});
|
|
const fromPage = computed(() => {
|
|
let currentPage = props.data.currentPage;
|
|
let perPage = props.data.perPage;
|
|
return currentPage * perPage - (perPage - 1);
|
|
});
|
|
</script>
|
|
|
|
<!-- currentPage:
|
|
1
|
|
firstPage:
|
|
1
|
|
firstPageUrl:
|
|
'/?page=1'
|
|
lastPage:
|
|
3
|
|
lastPageUrl:
|
|
'/?page=3'
|
|
nextPageUrl:
|
|
'/?page=2'
|
|
perPage:
|
|
5
|
|
previousPageUrl:
|
|
null
|
|
total:
|
|
15 -->
|
|
|
|
<template>
|
|
<!-- <nav v-if="data.links.length > 3" -->
|
|
<nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
|
|
<div class="flex justify-between flex-1 sm:hidden">
|
|
<span
|
|
v-if="data.currentPage <= 1"
|
|
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
|
|
>
|
|
Previous
|
|
</span>
|
|
<Link
|
|
v-else
|
|
:href="data.previousPageUrl"
|
|
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
|
|
>
|
|
Previous
|
|
</Link>
|
|
|
|
<Link
|
|
v-if="data.currentPage < data.lastPage"
|
|
:href="data.nextPageUrl"
|
|
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
|
|
>
|
|
Next
|
|
</Link>
|
|
<span
|
|
v-else
|
|
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
|
|
>
|
|
Next
|
|
</span>
|
|
</div>
|
|
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700 leading-5">
|
|
Showing
|
|
<span class="font-medium">{{ fromPage }}</span>
|
|
to
|
|
<span class="font-medium">{{ toPage }}</span>
|
|
of
|
|
<span class="font-medium">{{ data.total }}</span>
|
|
results
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="relative z-0 inline-flex shadow-sm rounded-md">
|
|
<span v-if="props.data.currentPage <= 1" aria-disabled="true" aria-label="Previous">
|
|
<span
|
|
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
|
|
aria-hidden="true"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
|
|
<!-- <Link v-else :href="data.previousPageUrl" rel="prev" -->
|
|
<Link
|
|
v-else
|
|
:href="prevPageLink"
|
|
rel="prev"
|
|
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
|
aria-label="Previous"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
|
|
<!-- <template v-for="(link, key) in data.links">
|
|
<template v-if="key > 0 && key < data.lastPage + 1">
|
|
<span v-if="!link.active && link.url === null" :key="key" aria-disabled="true">
|
|
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
|
|
</span>
|
|
|
|
<span v-else-if="link.active" :key="`current-${key}`" aria-current="page">
|
|
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
|
|
</span>
|
|
|
|
<Link v-else :key="`link-${key}`" :href="link.url" v-html="link.label" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="`Go to page ${link.label}`" />
|
|
</template>
|
|
</template> -->
|
|
|
|
<Link
|
|
v-if="props.data.currentPage < props.data.lastPage"
|
|
:href="nextPageLink"
|
|
rel="next"
|
|
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
|
aria-label="Next"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<!-- else disabled link -->
|
|
<span v-else aria-disabled="true" aria-label="Next">
|
|
<span
|
|
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
|
|
aria-hidden="true"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|