Skip to content
This repository has been archived by the owner on Jun 8, 2023. It is now read-only.

refactor: change paginator style and layout #216

Merged
merged 6 commits into from
Sep 12, 2022
Merged

refactor: change paginator style and layout #216

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78676c5
refactor: change paginator style and layout
asbiin Sep 10, 2022
e570039
slight change
djaiss Sep 11, 2022
5c3b995
Merge branch 'main' into 20220910-paginator
djaiss Sep 11, 2022
f74942c
mistake
asbiin Sep 11, 2022
2340e3a
fix test
asbiin Sep 11, 2022
28c37ff
fix type
asbiin Sep 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions resources/js/Components/ChevronLeft.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<svg class="h-5 w-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>
</template>
8 changes: 8 additions & 0 deletions resources/js/Components/ChevronRight.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<svg class="h-5 w-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>
</template>
162 changes: 162 additions & 0 deletions resources/js/Components/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<script setup>
import { Link } from '@inertiajs/inertia-vue3';
import ChevronLeft from '@/Components/ChevronLeft.vue';
import ChevronRight from '@/Components/ChevronRight.vue';

defineProps({
items: Object,
withSummary: {
type: Boolean,
default: true,
},
});

const commonClasses =
'relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 leading-5';
const linkClasses =
'hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-700 focus:border-blue-300 focus:dark:border-blue-700 active:bg-gray-100 active:dark:bg-gray-900 active:text-gray-700 active:dark:text-gray-300 transition ease-in-out duration-150';
</script>

<template>
<nav
v-if="items.currentPage !== 1 || items.lastPage > 1"
role="navigation"
:aria-label="$t('Pagination Navigation')"
class="flex items-center justify-between">
<div class="flex flex-1 justify-between sm:hidden">
<span v-if="items.currentPage === 1" :class="[commonClasses, 'rounded-md', 'text-gray-500', 'cursor-default']">
<span v-html="$t('pagination.previous')"></span>
</span>
<Link
v-else
:href="items.previousPageUrl"
preserve-scroll
:class="[commonClasses, linkClasses, 'rounded-md', 'text-gray-700', 'dark:text-gray-300']">
<span v-html="$t('pagination.previous')"></span>
</Link>

<Link
v-if="items.lastPage > 1"
:href="items.nextPageUrl"
preserve-scroll
:class="[commonClasses, linkClasses, 'ml-3', 'rounded-md', 'text-gray-700', 'dark:text-gray-300']">
<span v-html="$t('pagination.next')"></span>
</Link>
<span v-else :class="[commonClasses, 'ml-3', 'rounded-md', 'text-gray-500', 'cursor-default']">
<span v-html="$t('pagination.next')"></span>
</span>
</div>

<div class="hidden sm:flex sm:flex-1 sm:flex-col sm:items-center sm:justify-between">
<p v-if="withSummary" class="mb-2 text-xs leading-5 text-gray-700 dark:text-gray-300">
<span v-if="items.firstItem">
{{
$t('Showing :first to :last of :total results', {
first: items.firstItem,
last: items.lastItem,
total: items.total,
})
}}
</span>
<span v-else>
{{
$t('Showing :count of :total results', {
count: items.data.length,
total: items.total,
})
}}
</span>
</p>

<div class="relative z-0 inline-flex rounded-md shadow-sm">
<span
v-if="items.currentPage === 1"
:class="[commonClasses, 'px-2', 'rounded-l-md', 'text-gray-500', 'focus:z-10', 'cursor-default']"
:aria-label="$t('pagination.previous')"
aria-hidden="true"
aria-disabled="true">
<ChevronLeft />
</span>

<Link
v-else
:href="items.previousPageUrl"
preserve-scroll
rel="prev"
:class="[
commonClasses,
linkClasses,
'px-2',
'rounded-l-md',
'text-gray-500',
'hover:text-gray-400',
'hover:dark:text-gray-600',
'focus:z-10',
]"
:aria-label="$t('pagination.previous')">
<ChevronLeft />
</Link>

<template v-for="(link, id) in items.links" :key="id">
<span
v-if="link.url === null"
aria-disabled="true"
:class="[commonClasses, '-ml-px', 'text-gray-700', 'dark:text-gray-500', 'cursor-default']"
v-html="link.label">
</span>
<span
v-else-if="link.active"
aria-current="page"
:class="[commonClasses, '-ml-px', 'text-gray-500', 'bg-gray-100', 'dark:bg-gray-800', 'cursor-default']"
v-html="link.label">
</span>
<Link
v-else
:href="link.url"
preserve-scroll
:class="[commonClasses, linkClasses, '-ml-px', 'text-gray-700', 'dark:text-gray-300', 'focus:z-10']"
:aria-label="$t('Go to page :page', { page: link.label })">
<span v-html="link.label"></span>
</Link>
</template>

<Link
v-if="items.currentPage < items.lastPage"
:href="items.nextPageUrl"
preserve-scroll
rel="next"
:class="[
commonClasses,
linkClasses,
'-ml-px',
'px-2',
'rounded-r-md',
'text-gray-500',
'hover:text-gray-400',
'hover:dark:text-gray-600',
'focus:z-10',
]"
:aria-label="$t('pagination.next')">
<ChevronRight />
</Link>
<span
v-else
:class="[
commonClasses,
linkClasses,
'-ml-px',
'px-2',
'rounded-r-md',
'text-gray-500',
'focus:z-10',
'cursor-default',
]"
:aria-label="$t('pagination.next')"
aria-hidden="true"
aria-disabled="true">
<ChevronRight />
</span>
</div>
</div>
</nav>
</template>
15 changes: 3 additions & 12 deletions resources/js/Pages/Vault/Contact/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,7 @@
</ul>

<!-- pagination -->
<div v-if="!moduleMode" class="flex justify-between text-center">
<inertia-link
v-show="paginator.previousPageUrl"
class="fl dib"
:href="paginator.previousPageUrl"
title="Previous">
&larr; {{ $t('app.previous') }}
</inertia-link>
<inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
{{ $t('app.next') }} &rarr;
</inertia-link>
</div>
<Pagination :items="paginator" />
</div>
</div>
</div>
Expand All @@ -95,12 +84,14 @@
import Layout from '@/Shared/Layout.vue';
import PrettyLink from '@/Shared/Form/PrettyLink.vue';
import Avatar from '@/Shared/Avatar.vue';
import Pagination from '@/Components/Pagination.vue';

export default {
components: {
Layout,
PrettyLink,
Avatar,
Pagination,
},

props: {
Expand Down
4 changes: 2 additions & 2 deletions resources/js/Pages/Vault/Contact/Photos/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
</div>

<!-- pagination -->
<pagination :paginator="paginator" />
<Pagination :items="paginator" />

<div
v-if="localPhotos.length == 0"
Expand All @@ -124,7 +124,7 @@
<script>
import Layout from '@/Shared/Layout.vue';
import PrettyButton from '@/Shared/Form/PrettyButton.vue';
import Pagination from '@/Shared/Pagination.vue';
import Pagination from '@/Components/Pagination.vue';
import Uploadcare from '@/Components/Uploadcare.vue';

export default {
Expand Down
15 changes: 3 additions & 12 deletions resources/js/Pages/Vault/Files/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,18 +100,7 @@
</ul>

<!-- pagination -->
<div v-if="!moduleMode" class="flex justify-between text-center">
<inertia-link
v-show="paginator.previousPageUrl"
class="fl dib"
:href="paginator.previousPageUrl"
title="Previous">
&larr; {{ $t('app.previous') }}
</inertia-link>
<inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
{{ $t('app.next') }} &rarr;
</inertia-link>
</div>
<Pagination :items="paginator" />

<!-- blank state -->
<div
Expand All @@ -131,11 +120,13 @@
<script>
import Layout from '@/Shared/Layout.vue';
import Avatar from '@/Shared/Avatar.vue';
import Pagination from '@/Components/Pagination.vue';

export default {
components: {
Layout,
Avatar,
Pagination,
},

props: {
Expand Down
15 changes: 3 additions & 12 deletions resources/js/Shared/Modules/Notes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,18 +231,7 @@
</div>

<!-- pagination -->
<div v-if="!moduleMode" class="flex justify-between text-center">
<inertia-link
v-show="paginator.previousPageUrl"
class="fl dib"
:href="paginator.previousPageUrl"
title="Previous">
&larr; Previous
</inertia-link>
<inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
Next &rarr;
</inertia-link>
</div>
<Pagination v-if="!moduleMode" :items="paginator" />
</div>

<!-- blank state -->
Expand All @@ -262,6 +251,7 @@ import TextInput from '@/Shared/Form/TextInput.vue';
import TextArea from '@/Shared/Form/TextArea.vue';
import Errors from '@/Shared/Form/Errors.vue';
import Avatar from '@/Shared/Avatar.vue';
import Pagination from '@/Components/Pagination.vue';

export default {
components: {
Expand All @@ -272,6 +262,7 @@ export default {
TextArea,
Errors,
Avatar,
Pagination,
},

props: {
Expand Down
31 changes: 0 additions & 31 deletions resources/js/Shared/Pagination.vue
View file
Open in desktop

This file was deleted.