fdbc374d7e
* #93 - wip * #93 - wip * #93 - fix if statement * #93 - wip * #93 - added default error page * #93 - fix to error page * #93 - fix linter * #93 - delete unnecessary file * #93 - added EOL * #93 - fix * #93 - cr fix Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>
62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
v-if="pagination.last_page !== 1"
|
|
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
|
>
|
|
<div class="flex-1 flex justify-between sm:hidden">
|
|
<Component
|
|
:is="prevLink ? 'InertiaLink': 'span'"
|
|
:href="prevLink"
|
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Poprzednia
|
|
</Component>
|
|
<Component
|
|
:is="nextLink ? 'InertiaLink': 'span'"
|
|
:href="nextLink"
|
|
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Następna
|
|
</Component>
|
|
</div>
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div class="text-sm text-gray-700">
|
|
Wyświetlanie od
|
|
<span class="font-medium">{{ pagination.from }}</span>
|
|
do
|
|
<span class="font-medium">{{ pagination.to }}</span>
|
|
z
|
|
<span class="font-medium">{{ pagination.total }}</span>
|
|
wyników
|
|
</div>
|
|
<nav class="relative z-0 inline-flex space-x-1">
|
|
<template
|
|
v-for="(link, index) in pagination.links"
|
|
:key="index"
|
|
>
|
|
<Component
|
|
:is="link.url ? 'InertiaLink' : 'span'"
|
|
:href="link.url"
|
|
:preserve-scroll="true"
|
|
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
|
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
|
v-text="link.label"
|
|
/>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
pagination: Object,
|
|
})
|
|
|
|
const prevLink = computed(() => props.pagination.links.at(0)?.url)
|
|
const nextLink = computed(() => props.pagination.links.at(-1)?.url)
|
|
|
|
</script>
|