From ed462c6cfcbde9b7dc59612a221ee5433409c16a Mon Sep 17 00:00:00 2001 From: Alexis Saettler Date: Mon, 12 Sep 2022 19:41:24 +0200 Subject: [PATCH] refactor: change paginator style and layout (monicahq/chandler#216) --- app/Helpers/PaginatorHelper.php | 32 ++-- resources/js/Components/ChevronLeft.vue | 8 + resources/js/Components/ChevronRight.vue | 8 + resources/js/Components/Pagination.vue | 162 ++++++++++++++++++ resources/js/Pages/Vault/Contact/Index.vue | 15 +- .../js/Pages/Vault/Contact/Photos/Index.vue | 4 +- resources/js/Pages/Vault/Files/Index.vue | 15 +- resources/js/Shared/Modules/Notes.vue | 15 +- resources/js/Shared/Pagination.vue | 31 ---- tests/Unit/Helpers/PaginatorHelperTest.php | 30 ++++ 10 files changed, 238 insertions(+), 82 deletions(-) create mode 100644 resources/js/Components/ChevronLeft.vue create mode 100644 resources/js/Components/ChevronRight.vue create mode 100644 resources/js/Components/Pagination.vue delete mode 100644 resources/js/Shared/Pagination.vue diff --git a/app/Helpers/PaginatorHelper.php b/app/Helpers/PaginatorHelper.php index f5b3b14f7c0..e036548804d 100644 --- a/app/Helpers/PaginatorHelper.php +++ b/app/Helpers/PaginatorHelper.php @@ -2,28 +2,34 @@ namespace App\Helpers; +use Illuminate\Contracts\Pagination\LengthAwarePaginator; + class PaginatorHelper { /** * Provide an array of all the data needed to display a pagination. * - * @param mixed $eloquentCollection + * @param LengthAwarePaginator $paginator * @return array */ - public static function getData($eloquentCollection): array + public static function getData(LengthAwarePaginator $paginator): array { return [ - 'count' => $eloquentCollection->count(), - 'currentPage' => $eloquentCollection->currentPage(), - 'firstItem' => $eloquentCollection->firstItem(), - 'hasMorePages' => $eloquentCollection->hasMorePages(), - 'lastItem' => $eloquentCollection->lastItem(), - 'lastPage' => $eloquentCollection->lastPage(), - 'nextPageUrl' => $eloquentCollection->nextPageUrl(), - 'onFirstPage' => $eloquentCollection->onFirstPage(), - 'perPage' => $eloquentCollection->perPage(), - 'previousPageUrl' => $eloquentCollection->previousPageUrl(), - 'total' => $eloquentCollection->total(), + 'count' => $paginator->count(), + 'currentPage' => $paginator->currentPage(), + 'firstItem' => $paginator->firstItem(), + 'firstPageUrl' => $paginator->url(1), + 'hasMorePages' => $paginator->hasMorePages(), + 'lastItem' => $paginator->lastItem(), + 'lastPage' => $paginator->lastPage(), + 'lastPageUrl' => $paginator->url($paginator->lastPage()), + 'links' => $paginator->linkCollection()->toArray(), + 'nextPageUrl' => $paginator->nextPageUrl(), + 'onFirstPage' => $paginator->onFirstPage(), + 'path' => $paginator->path(), + 'perPage' => $paginator->perPage(), + 'previousPageUrl' => $paginator->previousPageUrl(), + 'total' => $paginator->total(), ]; } } diff --git a/resources/js/Components/ChevronLeft.vue b/resources/js/Components/ChevronLeft.vue new file mode 100644 index 00000000000..6e4c595ed1d --- /dev/null +++ b/resources/js/Components/ChevronLeft.vue @@ -0,0 +1,8 @@ + diff --git a/resources/js/Components/ChevronRight.vue b/resources/js/Components/ChevronRight.vue new file mode 100644 index 00000000000..c91f0b47f6c --- /dev/null +++ b/resources/js/Components/ChevronRight.vue @@ -0,0 +1,8 @@ + diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue new file mode 100644 index 00000000000..58f7affa9bc --- /dev/null +++ b/resources/js/Components/Pagination.vue @@ -0,0 +1,162 @@ + + + diff --git a/resources/js/Pages/Vault/Contact/Index.vue b/resources/js/Pages/Vault/Contact/Index.vue index 4ae40e80a32..f0935b49e42 100644 --- a/resources/js/Pages/Vault/Contact/Index.vue +++ b/resources/js/Pages/Vault/Contact/Index.vue @@ -72,18 +72,7 @@ -
- - ← {{ $t('app.previous') }} - - - {{ $t('app.next') }} → - -
+ @@ -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: { diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue index bfc71807dcd..8dabdb58cce 100644 --- a/resources/js/Pages/Vault/Contact/Photos/Index.vue +++ b/resources/js/Pages/Vault/Contact/Photos/Index.vue @@ -107,7 +107,7 @@ - +
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 { diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue index c1938be73b4..a76fe23ccc5 100644 --- a/resources/js/Pages/Vault/Files/Index.vue +++ b/resources/js/Pages/Vault/Files/Index.vue @@ -100,18 +100,7 @@ -
- - ← {{ $t('app.previous') }} - - - {{ $t('app.next') }} → - -
+
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: { diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue index cd4c3473619..9876240e349 100644 --- a/resources/js/Shared/Modules/Notes.vue +++ b/resources/js/Shared/Modules/Notes.vue @@ -231,18 +231,7 @@
-
- - ← Previous - - - Next → - -
+
@@ -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: { @@ -272,6 +262,7 @@ export default { TextArea, Errors, Avatar, + Pagination, }, props: { diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue deleted file mode 100644 index 70b5fa44e23..00000000000 --- a/resources/js/Shared/Pagination.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/tests/Unit/Helpers/PaginatorHelperTest.php b/tests/Unit/Helpers/PaginatorHelperTest.php index bcabc659a7a..50d4ff5d923 100644 --- a/tests/Unit/Helpers/PaginatorHelperTest.php +++ b/tests/Unit/Helpers/PaginatorHelperTest.php @@ -26,11 +26,41 @@ public function it_returns_an_array_containing_everything_needed_for_a_paginatio 'count' => 1, 'currentPage' => 1, 'firstItem' => 1, + 'firstPageUrl' => config('app.url').'?page=1', 'hasMorePages' => true, 'lastItem' => 1, 'lastPage' => 3, + 'lastPageUrl' => config('app.url').'?page=3', + 'links' => [ + [ + 'url' => null, + 'label' => '« Previous', + 'active' => false, + ], + [ + 'url' => config('app.url').'?page=1', + 'label' => '1', + 'active' => true, + ], + [ + 'url' => config('app.url').'?page=2', + 'label' => '2', + 'active' => false, + ], + [ + 'url' => config('app.url').'?page=3', + 'label' => '3', + 'active' => false, + ], + [ + 'url' => config('app.url').'?page=2', + 'label' => 'Next »', + 'active' => false, + ], + ], 'nextPageUrl' => config('app.url').'?page=2', 'onFirstPage' => true, + 'path' => config('app.url'), 'perPage' => 1, 'previousPageUrl' => null, 'total' => 3,