From 0f99f543b4536293b6f04a179f397ce528892bdf Mon Sep 17 00:00:00 2001 From: jel Date: Mon, 26 Aug 2024 15:05:54 +0200 Subject: [PATCH] Ajout de la pagination sur la page /exploitations --- src/cartobio-api.js | 6 +- src/components/widgets/Pagination.test.js | 52 +++++++++++++ src/components/widgets/Pagination.vue | 66 +++++++++++++++++ .../certification/exploitations/index.vue | 42 ++--------- src/pages/exploitations/index.vue | 73 ++++++++++++++----- 5 files changed, 183 insertions(+), 56 deletions(-) create mode 100644 src/components/widgets/Pagination.test.js create mode 100644 src/components/widgets/Pagination.vue diff --git a/src/cartobio-api.js b/src/cartobio-api.js index 13a3849f..452d567b 100644 --- a/src/cartobio-api.js +++ b/src/cartobio-api.js @@ -44,10 +44,12 @@ export async function searchOperators ({ input, page, sort, order }) { } /** + * @param {number?} limit + * @param {number?} offset * @return {Promise} */ -export async function getUserOperators () { - const { data } = await apiClient.get(`/v2/operators`) +export async function getUserOperators (limit, offset) { + const { data } = await apiClient.get(`/v2/operators`, { params: { limit, offset } }) return data } diff --git a/src/components/widgets/Pagination.test.js b/src/components/widgets/Pagination.test.js new file mode 100644 index 00000000..4eed1d4d --- /dev/null +++ b/src/components/widgets/Pagination.test.js @@ -0,0 +1,52 @@ +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import Pagination from '@/components/widgets/Pagination.vue'; + +describe('Pagination.vue', () => { + const getWrapper = (page) => + mount(Pagination, { + props: { + currentPage: page, + maxPage: 5, + }, + }); + + it('renders correctly', () => { + const wrapper = getWrapper(1); + expect(wrapper.find('.fr-btns-group--pagination').exists()).toBe(true); + }); + + it('emits changePage event with correct value when select option is changed', async () => { + const wrapper = getWrapper(1); + const select = wrapper.find('select'); + await select.setValue(3); + expect(wrapper.emitted().changePage[0]).toEqual([3]); + expect(select.element.value).toBe('3'); + }); + + it('emits changePage event with correct value when previous button is clicked', async () => { + const wrapper = getWrapper(2); + const prevButton = wrapper.find('.pagination-page-previous'); + await prevButton.trigger('click'); + expect(wrapper.emitted().changePage[0]).toEqual([1]); + }); + + it('emits changePage event with correct value when next button is clicked', async () => { + const wrapper = getWrapper(2); + const nextButton = wrapper.find('.pagination-page-next'); + await nextButton.trigger('click'); + expect(wrapper.emitted().changePage[0]).toEqual([3]); + }); + + it('disables previous button on the first page', () => { + const wrapper = getWrapper(1); + const prevButton = wrapper.find('.pagination-page-previous'); + expect(prevButton.attributes('disabled')).not.toBeUndefined(); + }); + + it('disables next button on the last page', () => { + const wrapper = getWrapper(5); + const nextButton = wrapper.find('.pagination-page-next'); + expect(nextButton.attributes('disabled')).not.toBeUndefined(); + }); +}); diff --git a/src/components/widgets/Pagination.vue b/src/components/widgets/Pagination.vue new file mode 100644 index 00000000..e851781e --- /dev/null +++ b/src/components/widgets/Pagination.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue index 159da920..267a8ef4 100644 --- a/src/pages/certification/exploitations/index.vue +++ b/src/pages/certification/exploitations/index.vue @@ -115,21 +115,11 @@ meta: {{ operators.length }} sur {{ pagination.total }} résultats - + @@ -172,6 +162,7 @@ import { useUserStore } from '@/stores/user.js' import { useOnline } from "@vueuse/core" import { useCartoBioStorage } from "@/stores/storage.js" import Conflict from "@/components/versions/Conflict.vue" +import Pagination from '@/components/widgets/Pagination.vue'; const props = defineProps({ search: { @@ -229,7 +220,6 @@ const pagination = ref({ const showOptionalControl = computed(() => Boolean(searchInput.value)) const hasResults = computed(() => searchResults.value.length > 0) -const hasPagination = computed(() => searchResults.value.length && searchResults.value.length < pagination.value.total) const sortAttribute = (sort) => { if (sort !== sortOrder.value.sort) { @@ -314,25 +304,7 @@ watch(() => route.query.search, (search) => { } .fr-btns-group--pagination { - .fr-label, .fr-select { - font-size: inherit; /* reset size so as they are consistent */ - } - - .fr-btn { - margin: 0; - } -} - -.fr-select-group--inline { - display: flex; - align-items: center; - - select { - background-color: transparent; - box-shadow: none; - text-align: right; - width: 6rem; /* up to 3 digits, so 999 pages */ - } + justify-content: flex-end; } .fr-table table { diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue index 14cc7534..007570dd 100644 --- a/src/pages/exploitations/index.vue +++ b/src/pages/exploitations/index.vue @@ -9,11 +9,13 @@ meta:
-

- Sélectionner mon exploitation -

+

Sélectionner mon exploitation

-
+
+ Chargement des données… +
+ +
@@ -21,8 +23,12 @@ meta:

{{ operator.nom }}

    -
  • Siège : {{ operator.commune }} ({{ operator.departement }})
    • -
  • Dénomination courante : {{ operator.denominationCourante }}
    • +
  • + Siège : {{ operator.commune }} ({{ operator.departement }}) +
    • +
  • + Dénomination courante : {{ operator.denominationCourante }} +
  • SIRET : {{ operator.siret }}
  • PACAGE : {{ operator.numeroPacage }}
  • Numéro Bio : {{ operator.numeroBio }}
    • @@ -39,7 +45,7 @@ meta:
-
    +
    • Voir cette exploitation @@ -51,34 +57,63 @@ meta:
+ +