From 599033cb70f8f5cbe3ed67b0fa95ff44cd746d51 Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:14:30 +0100
Subject: [PATCH] feat(certification/exploitations): recherche avec tri

---
 package.json                                  |   1 +
 src/cartobio-api.js                           |  13 +-
 src/components/Certification/TableSort.vue    |  49 ++++
 src/pages/__fixtures__/search-records.json    |  51 ++++
 src/pages/__fixtures__/user.json              |  14 +
 .../certification/exploitations/index.test.js | 149 ++++++++++
 .../certification/exploitations/index.vue     | 270 ++++++++++++++----
 vite.config.js                                |  11 +-
 8 files changed, 493 insertions(+), 65 deletions(-)
 create mode 100644 src/components/Certification/TableSort.vue
 create mode 100644 src/pages/__fixtures__/search-records.json
 create mode 100644 src/pages/__fixtures__/user.json
 create mode 100644 src/pages/certification/exploitations/index.test.js

diff --git a/package.json b/package.json
index 906ffe5a..afeb8a44 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
       "src/components/Features/SingleItem*.test.js",
       "src/components/Features/Table.test.js",
       "src/components/OperatorSetup/*.test.js",
+      "src/pages/certification/exploitations/index.test.js",
       "src/pages/exploitations/\\[numeroBio\\]/index.test.js"
     ],
     "rules": {
diff --git a/src/cartobio-api.js b/src/cartobio-api.js
index 33f88d92..3cfae8b4 100644
--- a/src/cartobio-api.js
+++ b/src/cartobio-api.js
@@ -28,8 +28,8 @@ export async function getOperatorNcviFeatures ({ evv, numeroBio }) {
  * @param {string} input
  * @returns {Promise<AgenceBioNormalizedOperatorWithRecord[]>}
  */
-export async function searchOperators (input) {
-  const { data } = await apiClient.post(`/v2/certification/operators/search`, { input })
+export async function searchOperators ({ input, page, sort, order }) {
+  const { data } = await apiClient.post(`/v2/certification/search`, { input, page, sort, order })
 
   return data
 }
@@ -53,15 +53,6 @@ export async function pacageLookup (pacage) {
   return data
 }
 
-/**
- * @returns {Promise<AgenceBioNormalizedOperatorWithRecord[]>}
- */
-export async function fetchLatestOperators () {
-  const { data } = await apiClient.get(`/v2/certification/operators/latest`, { timeout: 10000 })
-
-  return data.operators
-}
-
 
 /**
  * @param {string} numeroBio
diff --git a/src/components/Certification/TableSort.vue b/src/components/Certification/TableSort.vue
new file mode 100644
index 00000000..47234baf
--- /dev/null
+++ b/src/components/Certification/TableSort.vue
@@ -0,0 +1,49 @@
+<template>
+  <label v-if="$slots.default" :for="id">
+    <slot name="default" />
+  </label>
+
+  <button v-if="showControl" type="button" :aria-pressed="isAscending || isDescending" :id="id" class="fr-btn fr-btn--tertiary-no-outline" @click="emit('update:modelValue', { sort: code, order: !isAscending ? 'asc' : 'desc' })">
+    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 0L13 6H1L7 0Z" :fill="isAscending ? '#000091' : '#929292'"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16L1 10L13 10L7 16Z" :fill="isDescending ? '#000091' : '#929292'"/>
+    </svg>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  showControl: {
+    type: Boolean,
+    default : true
+  }
+})
+
+const isAscending = computed(() => props.modelValue.sort === props.code && props.modelValue.order === 'asc')
+const isDescending = computed(() => props.modelValue.sort === props.code && props.modelValue.order === 'desc')
+const id = computed(() => `sort-order-${props.code}`)
+</script>
+
+<style scoped>
+label,
+button {
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+button {
+  padding: .5rem;
+}
+</style>
diff --git a/src/pages/__fixtures__/search-records.json b/src/pages/__fixtures__/search-records.json
new file mode 100644
index 00000000..c8eb0450
--- /dev/null
+++ b/src/pages/__fixtures__/search-records.json
@@ -0,0 +1,51 @@
+[
+  {
+    "commune": "Crest",
+    "codePostal": "26400",
+    "numeroBio": 1,
+    "nom": "opérateur 1",
+    "dateEngagement": null,
+    "record_id": null,
+    "audit_date": null,
+    "certification_date_debut": null,
+    "certification_date_fin": null,
+    "certification_state": null
+  },
+  {
+    "commune": "Crest",
+    "codePostal": "26400",
+    "numeroBio": 2,
+    "nom": "opérateur 2",
+    "dateEngagement": null,
+    "record_id": null,
+    "audit_date": null,
+    "certification_date_debut": null,
+    "certification_date_fin": null,
+    "certification_state": null
+  },
+
+  {
+    "commune": "Die",
+    "codePostal": "26150",
+    "numeroBio": 3,
+    "nom": "opérateur 3",
+    "dateEngagement": "2020-02-02",
+    "record_id": "a-b-c-d",
+    "audit_date": null,
+    "certification_date_debut": null,
+    "certification_date_fin": null,
+    "certification_state": "OPERATOR_DRAFT"
+  },
+  {
+    "commune": "Die",
+    "codePostal": "26150",
+    "numeroBio": 4,
+    "nom": "opérateur 4",
+    "dateEngagement": "2020-02-02",
+    "record_id": "e-f-g-h",
+    "audit_date": "2024-01-01",
+    "certification_date_debut": "2024-01-01",
+    "certification_date_fin": "2024-03-31",
+    "certification_state": "CERTIFIED"
+  }
+]
diff --git a/src/pages/__fixtures__/user.json b/src/pages/__fixtures__/user.json
new file mode 100644
index 00000000..5af81ae0
--- /dev/null
+++ b/src/pages/__fixtures__/user.json
@@ -0,0 +1,14 @@
+{
+  "id": 1,
+  "prenom": "Test",
+  "nom": "Utilisateur",
+  "organismeCertificateur": {
+    "id": 999,
+    "nom": "CartobiOC",
+    "numeroControleEu": "FR-BIO-999"
+  },
+  "groups": [
+    { "nom": "Auditeur"}
+  ],
+  "mainGroup": {"nom": "Auditeur"}
+}
diff --git a/src/pages/certification/exploitations/index.test.js b/src/pages/certification/exploitations/index.test.js
new file mode 100644
index 00000000..6b692c44
--- /dev/null
+++ b/src/pages/certification/exploitations/index.test.js
@@ -0,0 +1,149 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import { createTestingPinia } from "@pinia/testing"
+import axios, { AxiosError } from 'axios'
+
+import { useUserStore } from '@/stores/index.js'
+
+import records from '../../__fixtures__/search-records.json' assert { type: 'json' }
+import userFixture from '../../__fixtures__/user.json' assert { type: 'json' }
+
+import Page from './index.vue'
+
+const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+const user = useUserStore(pinia)
+
+beforeEach(() => user.user = userFixture)
+afterEach(() => user.$reset())
+
+describe("certification/exploitations", () => {
+  it("should display a page with a warning because of no results", async () => {
+    axios.__createMock.post.mockResolvedValueOnce({
+      data: {
+        pagination: {
+          total: 0,
+          page: 1,
+          page_max: 1
+        },
+        records: []
+      }
+    })
+
+    const wrapper = mount(Page)
+
+    expect(wrapper.find('tbody').text()).toContain('Chargement des données…')
+
+    await flushPromises()
+    expect(wrapper.find('.fr-alert__title').text()).toContain('Aucune exploitation trouvée')
+  })
+
+  it("should display a page with 2 results and 2 pages", async () => {
+    axios.__createMock.post.mockResolvedValueOnce({
+      data: {
+        pagination: {
+          total: 4,
+          page: 1,
+          page_max: 2
+        },
+        records: records.slice(0, 2)
+      }
+    })
+
+    const wrapper = mount(Page)
+
+    await flushPromises()
+    expect(axios.__createMock.post).toHaveBeenCalled(1)
+    expect(wrapper.findAll('.operator-record')).toHaveLength(2)
+    expect(wrapper.find('.results-total').text()).toEqual('2 sur 4 résultats')
+    expect(wrapper.find('.pagination-page-previous').attributes('disabled')).toEqual('')
+    expect(wrapper.find('.pagination-page-next').attributes('disabled')).toBeUndefined()
+
+    // navigate to next page
+    axios.__createMock.post.mockResolvedValue({
+      data: {
+        pagination: {
+          total: 4,
+          page: 2,
+          page_max: 2
+        },
+        records: records.slice(2, 4)
+      }
+    })
+
+    await wrapper.find('.pagination-page-next').trigger('click')
+    await wrapper.setProps({ page: '2' })   // workaround vue-router not picking up above change
+    await flushPromises()
+
+    expect(axios.__createMock.post).toHaveBeenCalled(2)
+    expect(wrapper.find('.pagination-page-previous').attributes('disabled')).toBeUndefined()
+    expect(wrapper.find('.pagination-page-next').attributes('disabled')).toEqual('')
+
+    await wrapper.find('#search-results-page-selector').setValue('1')
+    wrapper.setProps({ page: '1' })   // workaround vue-router not picking up above change
+    expect(wrapper.emitted()).toHaveProperty('change')
+    await flushPromises()
+    expect(axios.__createMock.post).toHaveBeenCalled(3)
+  })
+
+  it("should search, sort then reset filters", async () => {
+    axios.__createMock.post.mockResolvedValue({
+      data: {
+        pagination: {
+          total: 4,
+          page: 1,
+          page_max: 1
+        },
+        records
+      }
+    })
+
+    const wrapper = mount(Page, {
+      props: { search: 'ferme', page: '2', sort: 'nom', order: 'asc' }
+    })
+
+    await flushPromises()
+    expect(wrapper.findAll('.operator-record')).toHaveLength(4)
+    expect(wrapper.findAll('thead [aria-sort]')).toHaveLength(1)
+    expect(wrapper.find('.table-header-nom').attributes()).toHaveProperty('aria-sort', 'ascending')
+    expect(wrapper.find('.table-header-nom button').attributes()).toHaveProperty('aria-pressed', 'true')
+
+    // // change search to nothing
+    // // it should reset the filters
+    await wrapper.find('#search-input').setValue('')
+    await wrapper.find('form').trigger('submit')
+
+    // todo: rather test against a router that works in tests, outside of components
+    await wrapper.setProps({ search: '', page: '1' })
+    await flushPromises()
+
+    expect(axios.__createMock.post).toHaveBeenLastCalledWith('/v2/certification/search', { input: '', page: 1, sort: 'audit_date', order: 'desc' })
+    expect(wrapper.find('.table-header-audit_date').attributes()).toHaveProperty('aria-sort', 'descending')
+    expect(wrapper.find('.table-header-audit_date button').attributes()).toHaveProperty('aria-pressed', 'true')
+  })
+
+  it('should respond with an error in case server is unreachable', async () => {
+    const error = new AxiosError('Network Error', 'ERR_NETWORK')
+    axios.__createMock.post.mockRejectedValueOnce(error)
+
+    const wrapper = mount(Page)
+    await flushPromises()
+
+    expect(wrapper.find('tbody').text()).toContain('Une erreur de réseau est survenue')
+  })
+
+  it('should throw an error when uncaught', () => {
+    const error = new AxiosError('Server is down')
+    error.response = { status: 500 }
+    axios.__createMock.post.mockRejectedValueOnce(error)
+
+    const wrapper = mount(Page, {
+      global: {
+        config: {
+          errorHandler (error) {
+            expect(error.message).toBe('Server is down')
+          }
+        }
+      }
+    })
+  })
+})
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index 725379ee..7c4bcfca 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -11,54 +11,102 @@ meta:
       <div class="fr-col-12">
         <h1 class="fr-h6">Exploitations {{ user.organismeCertificateur.nom }}</h1>
 
-        <form @submit.prevent="updateQuery" class="fr-search-bar fr-search-bar--lg" id="header-search" role="search">
+        <form @submit.prevent="updateQuery({ search: userInput, page: 1 })" class="fr-search-bar fr-search-bar--lg" id="header-search" role="search">
           <label class="fr-label" for="search-input">
-            Recherche
+            Recherche par nom d'exploitation, SIRET ou numéro bio
           </label>
-          <input class="fr-input" placeholder="Chercher par nom d'opérateur, SIRET ou numéro bio…" minlength="1" autocomplete="cartobio-operator" v-model="operatorName" required autofocustype="search" id="search-input">
-          <button class="fr-btn" title="Rechercher" :disabled="isSearching">
+          <input class="fr-input" placeholder="Chercher par nom d'opérateur, SIRET ou numéro bio…" minlength="1" autocomplete="cartobio-operator" v-model.trim="userInput" autofocustype="search" id="search-input">
+          <button class="fr-btn" type="submit" title="Rechercher" :disabled="isSearching">
             Rechercher
           </button>
         </form>
       </div>
 
       <div class="fr-col-12">
-        <div v-if="operators.length && !isSearching" class="fr-table fr-table--bordered">
-          <h2 class="fr-text--mention fr-text--md fr-text--regular results-title" v-if="!route.query.search">Dernières exploitations modifiées</h2>
+        <div class="fr-table fr-table--bordered">
           <table>
             <colgroup>
-              <col width="50%" />
+              <col width="45%" />
               <col width="15%" />
-              <col width="35%" />
+              <col width="15%" />
+              <col width="30%" />
             </colgroup>
             <thead>
-              <th scope="col">Exploitation</th>
-              <th scope="col" class="fr-text--align-right">Date de début de conversion</th>
-              <th scope="col" class="fr-text--align-right">Statut</th>
+              <th scope="col" :aria-sort="sortAttribute('nom')" class="table-header-nom"><TableSort :show-control="showOptionalControl" code="nom" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Exploitation</TableSort></th>
+              <th scope="col" :aria-sort="sortAttribute('engagement_date')" class="table-header-engagement_date fr-text--align-right"><TableSort :show-control="showOptionalControl" code="engagement_date" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Début de conversion</TableSort></th>
+              <th scope="col" :aria-sort="sortAttribute('audit_date')" class="table-header-audit_date fr-text--align-right"><TableSort code="audit_date" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Date de l'audit</TableSort></th>
+              <th scope="col" :aria-sort="sortAttribute('statut')" class="table-header-statut fr-text--align-right"><TableSort code="statut" v-model="sortOrder" @update:modelValue="v => updateQuery({ ...v, page: 1 })">Statut</TableSort></th>
             </thead>
             <tbody>
-              <tr v-for="{ record_id, ...operator } in operators" :key="record_id" class="fr-enlarge-link">
+              <tr v-if="isSearching">
+                <td colspan="4" class="center">
+                  <Spinner>Chargement des données…</Spinner>
+                </td>
+              </tr>
+              <tr v-else-if="error">
+                <td colspan="4">
+                  <div class="fr-alert fr-alert--warning" role="alert">
+                    <p>{{ error }}</p>
+                  </div>
+                </td>
+              </tr>
+              <tr v-else-if="!isSearching && searchRecords.length === 0">
+                <td colspan="4">
+                  <div class="fr-alert fr-alert--warning" role="alert">
+                    <h3 class="fr-alert__title">Aucune exploitation trouvée</h3>
+
+                    <p>Est-ce qu'elle est déclarée sous ce nom sur le portail de notification de l'Agence Bio ?</p>
+                  </div>
+                </td>
+              </tr>
+              <tr v-for="{ record_id, audit_date, certification_date_debut, certification_date_fin, certification_state, ...operator } in searchRecords" :key="record_id" class="operator-record fr-enlarge-link">
                 <td>
                   <router-link :to="`/exploitations/${operator.numeroBio}`" class="fr-link">
                     {{ operator.nom }}
                   </router-link><br/>
                   <span class="fr-hint-text">{{ operator.commune }}, {{ operator.codePostal }}</span>
                 </td>
-                <td class="fr-text--align-right">{{ monthYearDateFormat(operator.dateEngagement) || '-' }}</td>
+                <td class="fr-text--align-right">
+                  <time :datetime="operator.dateEngagement" v-if="operator.dateEngagement">{{ monthYearDateFormat(operator.dateEngagement) }}</time>
+                  <span aria-hidden v-else>-</span>
+                </td>
+                <td class="fr-text--align-right">
+                  <time :datetime="audit_date" v-if="audit_date">{{ monthYearDateFormat(audit_date) }}</time>
+                  <span aria-hidden v-else>-</span>
+                </td>
                 <td class="fr-text--align-right badges">
-                  <ParcellaireState :record="operator" />
+                  <ParcellaireState :record="{ certification_date_debut, certification_state, audit_date }" :show-date="false" />
+                  <span v-if="certification_date_fin" class="fr-hint-text">
+                    Du {{ dateFormat(certification_date_debut) }} au {{ dateFormat(certification_date_fin) }}
+                  </span>
                   <span aria-hidden class="fr-ml-1w fr-icon-arrow-right-line fr-icon--sm" />
                 </td>
               </tr>
             </tbody>
+            <tfoot v-if="!isSearching && hasResults">
+              <tr>
+                <td colspan="3" class="results-total">{{ searchRecords.length }} sur {{ pagination.total }} résultats</td>
+                <td>
+                  <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline fr-btns-group--pagination results-page-selector">
+                    <li class="fr-mr-2v">
+                      <div class="fr-select-group fr-select-group--inline">
+                        <select class="fr-select" id="search-results-page-selector" name="page" :value="page" @change="$event => updateQuery({ page: $event.target.value })">
+                          <option value="" disabled hidden>Sélectionner un numéro de pagination</option>
+                          <option :value="page" :key="page" v-for="page in pagination.page_max">{{ page }}</option>
+                        </select>
+                        <label class="fr-label" for="search-results-page-selector">
+                          sur {{ pagination.page_max }} pages
+                        </label>
+                      </div>
+                    </li>
+                    <li><button class="fr-btn fr-btn--tertiary-no-outline fr-icon-arrow-left-s-line pagination-page-previous" :disabled="!hasPagination || currentPage === 1" @click="updateQuery({ page: currentPage-1 })">Page précédente</button></li>
+                    <li><button class="fr-btn fr-btn--tertiary-no-outline fr-icon-arrow-right-s-line pagination-page-next" :disabled="!hasPagination || currentPage === pagination.page_max" @click="updateQuery({ page: currentPage+1 })">Page suivante</button></li>
+                  </ul>
+                </td>
+              </tr>
+            </tfoot>
           </table>
 
-          <router-link
-              v-if="route.query.search"
-              :to="startPage"
-              class="fr-link fr-icon-arrow-left-fill fr-link--icon-left"
-          >Revenir aux exploitations</router-link>
-
           <p class="fr-mt-3w">
             <span class="fr-icon fr-icon-questionnaire-fill fr-mr-1w" aria-hidden />
 
@@ -67,78 +115,194 @@ meta:
             de l'Agence Bio.
           </p>
         </div>
-
-        <div class="fr-alert fr-alert--info fr-alert--waiting" v-else-if="isSearching" role="alert">
-          <p><em>Recherche en cours</em></p>
-        </div>
-
-        <div class="fr-alert fr-alert--warning" v-else-if="route.query.search && operators.length === 0" role="alert">
-          <h3 class="fr-alert__title">Aucune exploitation trouvée</h3>
-          <p>Est-ce qu'elle est déclarée sous ce nom sur le portail de notification de l'Agence Bio ?</p>
-        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, watch, ref, readonly } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
+import { AxiosError } from 'axios'
 
 import ParcellaireState from '@/components/Certification/State.vue'
-import { monthYearDateFormat } from '@/components/dates.js'
+import Spinner from '@/components/Spinner.vue'
+import TableSort from '@/components/Certification/TableSort.vue'
+import { monthYearDateFormat, dateFormat } from '@/components/dates.js'
 
-import { searchOperators as search, fetchLatestOperators } from '@/cartobio-api.js'
+import { searchOperators } from '@/cartobio-api.js'
 import { useUserStore } from '@/stores/index.js'
 
+const props = defineProps({
+  search: {
+    type: String,
+    default: ''
+  },
+  page: {
+    type: String,
+    default: '1',
+    validator: (value) => parseInt(value, 10) > 0
+  },
+  sort: {
+    type: String,
+    default: 'audit_date',
+    validator: (value) => ['nom', 'engagement_date', 'audit_date', 'statut'].includes(value)
+  },
+  order: {
+    type: String,
+    default: 'desc',
+    validator: (value) => ['asc', 'desc'].includes(value)
+  }
+})
+
+
 const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
 
 const { startPage, user } = storeToRefs(userStore)
 
-const operatorName = ref()
+const error = ref('')
 const isSearching = ref(false)
-const defaultOperators = readonly(await fetchLatestOperators())
-const searchOperators = ref([])
+const searchRecords = ref([])
 
-const operators = computed(() => route.query.search ? searchOperators.value : defaultOperators)
+// controlled by the form
+const userInput = ref(props.search)
+const searchInput = computed(() => props.search ?? '')
+const currentPage = computed(() => parseInt(props.page, 10))
+const sortOrder = ref({
+  sort: props.sort,
+  order: props.order
+})
 
-watch(() => route.query.search, async (name, previousName) => {
-  operatorName.value = name
+const pagination = ref({
+  total: 0,
+  page: props.page,
+  page_max: 1
+})
 
-  if (!name) {
-    searchOperators.value = []
-    isSearching.value = false
-    return
-  }
+const showOptionalControl = computed(() => Boolean(searchInput.value))
+const hasResults = computed(() => searchRecords.value.length > 0)
+const hasPagination = computed(() => searchRecords.value.length && searchRecords.value.length < pagination.value.total)
 
-  if (name !== previousName) {
-    await doSearch()
+const sortAttribute = (sort) => {
+  if (sort !== sortOrder.value.sort) {
+    return null
   }
-}, { immediate: true })
 
-function updateQuery () {
-  router.push({
+  return sortOrder.value.order === 'asc' ? 'ascending' : 'descending'
+}
+
+function updateQuery (query) {
+  router.replace({
     path: startPage.value,
-    query: { search: operatorName.value },
+    query: {
+      ...route.query,
+      ...Object.entries(query)
+        .filter(([, value]) => value !== undefined)
+        .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {}),
+    },
   })
 }
 
-async function doSearch () {
+/**
+ * @param {Error} error
+ * @return {Boolean}
+ */
+function isNetworkError (error) {
+  return error.name === "AxiosError" &&
+    [
+      AxiosError.ETIMEDOUT,
+      AxiosError.ECONNABORTED,
+      AxiosError.ERR_NETWORK
+    ].includes(error.code)
+}
+
+async function doSearch (input, page, sort, order) {
+  error.value = ''
   isSearching.value = true
-  const { operators: results } = await search(operatorName.value.trim())
+  searchRecords.value = []
+
+  try {
+    const results = await searchOperators({ input: input.trim(), page, sort, order })
+
+    pagination.value = results.pagination
+    searchRecords.value = results.records
+  }
+  catch (e) {
+    pagination.value = {
+      total: 0,
+      page: props.page,
+      page_max: 1
+    }
 
-  searchOperators.value = results
-  isSearching.value = false
+    if (isNetworkError(e)) {
+      error.value = 'Une erreur de réseau est survenue. Vérifiez votre connexion internet.'
+    }
+    else {
+      throw e
+    }
+  }
+  finally {
+    isSearching.value = false
+  }
 }
+
+watch([searchInput, currentPage, sortOrder], () =>  doSearch(searchInput.value, currentPage.value, sortOrder.value.sort, sortOrder.value.order), { immediate: true })
+watch(() => route.query.sort, (v) => sortOrder.value.sort = v ?? 'audit_date')
+watch(() => route.query.order, (v) => sortOrder.value.order = v ?? 'desc')
+watch(() => route.query.search, (search) => {
+  userInput.value = (search || '').trim()
+
+  if (!searchInput.value && ['nom', 'engagement_date'].includes(sortOrder.value.sort)) {
+    sortOrder.value = { sort: 'audit_date', order: 'desc' }
+  }
+}, { immediate: true })
 </script>
 
 <style scoped>
+.center {
+  text-align: center;
+}
+
+.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 */
+  }
+}
+
 .fr-table table {
   display: table;
   margin-bottom: 1.5rem;
+
+  thead th {
+    white-space: nowrap;
+  }
+
+  tfoot {
+    background-color: var(--background-alt-grey);
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position: top;
+    background-image: linear-gradient(0deg, #3a3a3a, #3a3a3a);
+  }
 }
 
 .fr-enlarge-link:hover {
diff --git a/vite.config.js b/vite.config.js
index e01679b3..d0fc8889 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -22,7 +22,16 @@ export default defineConfig(({ mode }) => {
       legacy({
         modernPolyfills: ['es.object.has-own', 'es.array.at']
       }),
-      Pages({ extensions: ['vue'] }),
+      Pages({
+        extensions: ['vue'],
+        extendRoute (route) {
+          if (route.name === 'certification-exploitations') {
+            route.props = (route) => ({ ...route.query })
+          }
+
+          return route
+        }
+      }),
     ],
 
     resolve: {