160 lines
8.3 KiB
Vue
160 lines
8.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { Link } from '@inertiajs/vue3';
|
||
|
|
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 calculateNextPageLink = computed(() => {
|
||
|
|
let url = new URL(document.location.href);
|
||
|
|
url.searchParams.set('page', String(props.data.current_page + 1));
|
||
|
|
return url.href;
|
||
|
|
});
|
||
|
|
const calculatePrevPageLink = computed(() => {
|
||
|
|
let url = new URL(document.location.href);
|
||
|
|
url.searchParams.set('page', String(props.data.current_page - 1));
|
||
|
|
return url.href;
|
||
|
|
});
|
||
|
|
const toPage = computed(() => {
|
||
|
|
let currentPage = props.data.current_page;
|
||
|
|
let perPage = props.data.per_page;
|
||
|
|
|
||
|
|
if (props.data.current_page == props.data.last_page) {
|
||
|
|
return props.data.total;
|
||
|
|
} else {
|
||
|
|
return currentPage * perPage;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const fromPage = computed(() => {
|
||
|
|
let currentPage = props.data.current_page;
|
||
|
|
let perPage = props.data.per_page;
|
||
|
|
return currentPage * perPage - (perPage - 1);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<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.current_page <= 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.previous_page_url"
|
||
|
|
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.current_page < data.last_page" :href="data.next_page_url"
|
||
|
|
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.current_page <= 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 opacity-50"
|
||
|
|
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="calculatePrevPageLink" 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.last_page + 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.current_page < props.data.last_page" :href="calculateNextPageLink" 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 opacity-50"
|
||
|
|
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>
|