From 6a2b860fea73bcfdb580b7dfe7c7852b57ddc148 Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Mon, 10 Feb 2025 10:16:23 +0100
Subject: [PATCH 1/2] feat: Evolution API cartobio

---
 src/cartobio-api.js                           |  4 +--
 .../certification/exploitations/index.vue     |  3 --
 src/pages/exploitations/[numeroBio]/index.vue |  2 +-
 src/pages/exploitations/index.vue             | 28 ++++---------------
 src/stores/operator.js                        |  4 ++-
 src/utils/__fixtures__/operator.json          |  2 +-
 6 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/cartobio-api.js b/src/cartobio-api.js
index 11d93dff..45281d7e 100644
--- a/src/cartobio-api.js
+++ b/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(limit, offset) {
-  const { data } = await apiClient.get(`/v2/operators`, { params: { limit, offset } });
+export async function getUserOperators() {
+  const { data } = await apiClient.get(`/v2/operators`);
 
   return data;
 }
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index e5775d71..f98b9ae1 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -293,9 +293,6 @@ const searchResults = ref([]);
 const operators = computed(() => {
   const res = isOnline.value
     ? searchResults.value.map((e) => {
-        if (e.certificats) {
-          e.certificats = filterAndSortNotifications(e.certificats);
-        }
         if (e.notifications) {
           e.notifications = filterAndSortNotifications(e.notifications);
         }
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index b10fe747..744a4002 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -20,7 +20,7 @@ meta:
     </h1>
     <div class="header fr-mb-8v">
       <NotificationState
-        v-if="operatorStore.operator.certificats && operatorStore.operator.certificats.length > 0"
+        v-if="operatorStore.operator.notifications && operatorStore.operator.notifications.length > 0"
         :operator="operatorStore.operator"
         :text="true"
       />
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
index 47ba828d..46091a80 100644
--- a/src/pages/exploitations/index.vue
+++ b/src/pages/exploitations/index.vue
@@ -39,7 +39,7 @@ meta:
                       </ul>
                     </div>
                     <div class="fr-card__start" v-if="!isLoading">
-                      <NotificationState v-if="operator.certificats.length > 0" :text="true" :operator="operator" />
+                      <NotificationState v-if="operator.notifications.length > 0" :text="true" :operator="operator" />
                     </div>
                   </div>
                   <div class="fr-card__footer">
@@ -62,44 +62,29 @@ meta:
             </p>
           </div>
         </section>
-
-        <Pagination
-          v-if="!isLoading && maxPage > 1"
-          :currentPage
-          :maxPage
-          @change-page="(page) => (currentPage = page)"
-        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { getUserOperators } from "@/cartobio-api.js";
 import { useRouter } from "vue-router";
 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 RESULTS_PER_PAGE = 12;
-
 const router = useRouter();
 const isLoading = ref(true);
 const operators = ref([]);
-const nbTotal = ref(0);
-const currentPage = ref(1);
 
 const hasOperators = computed(() => Boolean(operators.value.length));
-const maxPage = computed(() => Math.ceil(nbTotal.value / RESULTS_PER_PAGE));
 
 const { user, isOc } = useUserStore();
 
-watch(currentPage, () => loadOperators());
-
 onMounted(async () => {
   await loadOperators();
 });
@@ -107,15 +92,14 @@ onMounted(async () => {
 async function loadOperators() {
   isLoading.value = true;
 
-  const res = await getUserOperators(RESULTS_PER_PAGE, (currentPage.value - 1) * RESULTS_PER_PAGE);
-  if (res.nbTotal === 1 && res.operators.length === 1) {
+  const res = await getUserOperators();
+  if (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.certificats.length > 0) {
-      e.certificats = filterAndSortNotifications(e.certificats);
+    if (e.notifications && e.notifications.length > 0) {
+      e.notifications = filterAndSortNotifications(e.notifications);
     }
   });
   isLoading.value = false;
diff --git a/src/stores/operator.js b/src/stores/operator.js
index b99eef6d..6f91c67a 100644
--- a/src/stores/operator.js
+++ b/src/stores/operator.js
@@ -84,7 +84,9 @@ export const useOperatorStore = defineStore("operator", () => {
           : serverR,
       );
     }
-    operatorData.certificats = filterAndSortNotifications(operatorData.certificats);
+    if (operatorData.notifications && operatorData.notifications.length > 0) {
+      operatorData.notifications = filterAndSortNotifications(operatorData.notifications);
+    }
     operator.value = operatorData;
     records.value = recordsData.sort((recordA, recordB) => date(recordB) - date(recordA));
   }
diff --git a/src/utils/__fixtures__/operator.json b/src/utils/__fixtures__/operator.json
index c5a98fbb..b5ec8698 100644
--- a/src/utils/__fixtures__/operator.json
+++ b/src/utils/__fixtures__/operator.json
@@ -14,7 +14,7 @@
       "codeCommune": "42271"
     }
   ],
-  "certificats": [],
+  "notifications": [],
   "organismeCertificateur": {
     "id": 1
   }

From 9529c311bf45ce41399ea84a8a4d801e7b5b2404 Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Tue, 11 Feb 2025 11:15:43 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20remettre=20pagination=20liste=20op?=
 =?UTF-8?q?=C3=A9rateur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cartobio-api.js               |   4 +-
 src/pages/exploitations/index.vue | 119 ++++++++++++++++++++++++------
 vite.config.js                    |   2 +-
 3 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/src/cartobio-api.js b/src/cartobio-api.js
index 45281d7e..3928117d 100644
--- a/src/cartobio-api.js
+++ b/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;
 }
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
index 46091a80..060ac419 100644
--- a/src/pages/exploitations/index.vue
+++ b/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);
diff --git a/vite.config.js b/vite.config.js
index b591324d..bc86c8bf 100644
--- a/vite.config.js
+++ b/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 });
           }