feat: Evolution API cartobio

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(search, limit, offset) {
+  const { data } = await apiClient.get(`/v2/operators`, { params: { limit, offset, search } });
 
   return data;
 }

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);
         }

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"
       />

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">
@@ -39,7 +57,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">
@@ -54,68 +72,107 @@ 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>
-
-        <Pagination
-          v-if="!isLoading && maxPage > 1"
-          :currentPage
-          :maxPage
-          @change-page="(page) => (currentPage = page)"
-        />
+          </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, watch } 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 currentPage = ref(1);
+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 { user, isOc } = useUserStore();
-
-watch(currentPage, () => loadOperators());
-
-onMounted(async () => {
-  await loadOperators();
-});
+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 }), {}),
+    },
+  });
+}
 
-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(RESULTS_PER_PAGE, (currentPage.value - 1) * RESULTS_PER_PAGE);
   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.certificats.length > 0) {
-      e.certificats = filterAndSortNotifications(e.certificats);
+    if (e.notifications && e.notifications.length > 0) {
+      e.notifications = filterAndSortNotifications(e.notifications);
     }
   });
   isLoading.value = false;

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));
   }

src/utils/__fixtures__/operator.json

@@ -14,7 +14,7 @@
       "codeCommune": "42271"
     }
   ],
-  "certificats": [],
+  "notifications": [],
   "organismeCertificateur": {
     "id": 1
   }

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 });
           }