fix: remettre pagination liste opérateur

src/cartobio-api.js

@@ -50,8 +50,8 @@ export async function searchOperators({ input, page, sort, order }) {
  * @param {number?} offset
  * @return {Promise<AgenceBioNormalizedOperator[]>}
  */
-export async function getUserOperators() {
-  const { data } = await apiClient.get(`/v2/operators`);
+export async function getUserOperators(search, limit, offset) {
+  const { data } = await apiClient.get(`/v2/operators`, { params: { limit, offset, search } });
 
   return data;
 }

src/pages/exploitations/index.vue

@@ -10,13 +10,31 @@ meta:
     <div class="fr-grid-row">
       <div class="fr-col-12">
         <h2 class="fr-h3">Sélectionner mon exploitation</h2>
-
+        <form
+          @submit.prevent="updateQuery({ search: userInput, page: 1 })"
+          class="fr-search-bar fr-search-bar--lg fr-mb-3w"
+          id="header-search"
+          role="search"
+          v-if="isInitialized"
+        >
+          <label class="fr-label" for="search"> 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.trim="userInput"
+            autofocustype="search"
+            id="search"
+            :disabled="!isOnline"
+          />
+          <button class="fr-btn" type="submit" title="Rechercher" :disabled="isLoading || !isOnline">Rechercher</button>
+        </form>
         <div v-if="isLoading">
           <Spinner>Chargement des données…</Spinner>
         </div>
-
-        <section class="fr-grid-row fr-grid-row--gutters" v-if="!isLoading">
-          <template v-if="hasOperators">
+        <template v-if="!isLoading && hasOperators">
+          <section class="fr-grid-row fr-grid-row--gutters">
             <article class="fr-col-12 fr-col-md-4" v-for="operator in operators" :key="operator.numeroBio">
               <div class="fr-card fr-card--horizontal">
                 <div class="fr-card__body">
@@ -54,49 +72,104 @@ meta:
                 </div>
               </div>
             </article>
-          </template>
-          <div class="fr-col-12" v-else>
-            <p>
-              Votre compte n'est rattaché à aucune exploitation. Nous vous invitons à vérifier vos accès sur
-              <a href="https://notification.agencebio.org/" target="_blank">le portail de notification</a>
-            </p>
-          </div>
-        </section>
+          </section>
+
+          <Pagination
+            v-if="!isLoading && maxPage > 1"
+            :currentPage
+            :maxPage
+            @changePage="updateQuery({ page: $event })"
+          />
+        </template>
+        <div class="fr-col-12" v-else-if="!isLoading">
+          <p v-if="!search">
+            Votre compte n'est rattaché à aucune exploitation. Nous vous invitons à vérifier vos accès sur
+            <a href="https://notification.agencebio.org/" target="_blank">le portail de notification</a>
+          </p>
+          <p v-else>Aucun résultat pour cette recherche</p>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { getUserOperators } from "@/cartobio-api.js";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import { useOnline } from "@vueuse/core";
 import Spinner from "@/components/widgets/Spinner.vue";
+import Pagination from "@/components/widgets/Pagination.vue";
 import NotificationState from "@/components/records/NotificationState.vue";
 import { filterAndSortNotifications } from "@/utils/helper-notification.js";
 import { jjmmyyyy } from "@/utils/dates";
 import { useUserStore } from "@/stores/user";
 
+const props = defineProps({
+  search: {
+    type: String,
+    default: "",
+  },
+  page: {
+    type: String,
+    default: "1",
+    validator: (value) => parseInt(value, 10) > 0,
+  },
+});
+
+const RESULTS_PER_PAGE = 12;
+
 const router = useRouter();
+const route = useRoute();
+const isInitialized = ref(false);
 const isLoading = ref(true);
+const isOnline = useOnline();
 const operators = ref([]);
+const nbTotal = ref(0);
+const userInput = ref(props.search);
+const searchInput = computed(() => props.search ?? "");
+const currentPage = computed(() => parseInt(props.page, 10));
 
 const hasOperators = computed(() => Boolean(operators.value.length));
+const maxPage = computed(() => Math.ceil(nbTotal.value / RESULTS_PER_PAGE));
+
+const { startPage, user, isOc } = useUserStore();
+
+watch([searchInput, currentPage], () => loadOperators(searchInput.value, currentPage.value), { immediate: true });
+
+watch(
+  () => route.query.search,
+  (search) => {
+    userInput.value = (search || "").trim();
+  },
+  { immediate: true },
+);
+
+function updateQuery(query) {
+  router.replace({
+    path: startPage.value,
+    query: {
+      ...route.query,
+      ...Object.entries(query)
+        .filter(([, value]) => value !== undefined)
+        .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {}),
+    },
+  });
+}
 
-const { user, isOc } = useUserStore();
-
-onMounted(async () => {
-  await loadOperators();
-});
-
-async function loadOperators() {
+async function loadOperators(search, page) {
+  if (!isInitialized.value) {
+    isInitialized.value = true;
+  }
   isLoading.value = true;
+  const res = await getUserOperators(search, RESULTS_PER_PAGE, (page - 1) * RESULTS_PER_PAGE);
 
-  const res = await getUserOperators();
-  if (res.operators.length === 1) {
+  if (res.nbTotal === 1 && res.operators.length === 1) {
     await router.push(`/exploitations/${res.operators[0].numeroBio}`);
   }
+
   operators.value = res.operators;
+  nbTotal.value = res.nbTotal;
   operators.value.forEach((e) => {
     if (e.notifications && e.notifications.length > 0) {
       e.notifications = filterAndSortNotifications(e.notifications);

vite.config.js

@@ -45,7 +45,7 @@ export default defineConfig(({ mode }) => {
         extensions: ["vue"],
         importMode: "async",
         extendRoute(route) {
-          if (route.name === "certification-exploitations") {
+          if (route.name === "certification-exploitations" || route.name === "exploitations") {
             route.props = (route) => ({ ...route.query });
           }