Recherche de structures par le nom pour les admins et managers

front/src/lib/components/forms/fields/select-field.svelte

@@ -18,6 +18,9 @@
 
   // Spécifique du select
   export let choices: Choice[];
+  export let searchFunction:
+    | ((searchText: string) => Promise<Choice[]>)
+    | undefined = undefined;
   export let sort = false;
   export let onChange = undefined;
   export let placeholderMulti = "Choisir";
@@ -47,6 +50,7 @@
       {id}
       {choices}
       {sort}
+      {searchFunction}
       bind:value
       on:blur={onBlur}
       {onChange}

front/src/lib/components/inputs/select/select.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import AutoComplete from "./simple-autocomplete.svelte";
 
+  type Choice = { value: string | number; label: string };
+
   export let id: string;
-  export let choices: { value: string | number; label: string }[] | undefined =
-    undefined;
+  export let choices: Choice[] | undefined = undefined;
   export let fixedItemsValues: string[] = [];
   export let sort = false;
   export let value: string | number | string[] | number[] | undefined =
@@ -15,7 +16,9 @@
   export let placeholderMulti = "";
   export let multiple = false;
   export let hideArrow = false;
-  export let searchFunction = undefined;
+  export let searchFunction:
+    | ((searchTxt: string) => Promise<Choice[]>)
+    | undefined = undefined;
   export let delay = undefined;
   export let localFiltering = undefined;
   export let minCharactersToSearch = undefined;

front/src/lib/components/inputs/select/simple-autocomplete.svelte

@@ -17,7 +17,9 @@
   export let fixedItemsValues: string[] = [];
 
   // function to use to get all items (alternative to providing items)
-  export let searchFunction = null;
+  export let searchFunction:
+    | ((searchText: string) => Promise<any[]>)
+    | undefined = undefined;
 
   export let textCleanFunction = function (userEnteredText) {
     return userEnteredText;

front/src/lib/requests/structures.ts

@@ -60,8 +60,11 @@ export async function siretWasAlreadyClaimed(siret: string) {
   return result;
 }
 
-export async function getManagedStructures(): Promise<ShortStructure[]> {
-  const url = `${getApiURL()}/structures/?managed=1`;
+export async function getManagedStructures(
+  searchText?: string
+): Promise<ShortStructure[]> {
+  const searchParam = searchText ? `&search=${searchText}` : "";
+  const url = `${getApiURL()}/structures/?managed=1${searchParam}`;
   return (await fetchData<ShortStructure[]>(url)).data;
 }
 

front/src/lib/utils/misc.ts

@@ -217,3 +217,25 @@ export function clickOutside(node: HTMLElement) {
     },
   };
 }
+
+// Helper type pour aplatir les promesses
+type Awaited<T> = T extends PromiseLike<infer U> ? U : T;
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay = 300
+): (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>> {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return (...args: Parameters<T>) => {
+    return new Promise<Awaited<ReturnType<T>>>((resolve) => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      } // Réinitialiser le timeout s'il existe déjà
+      timeoutId = setTimeout(() => {
+        const result = func(...args);
+        resolve(result); // Résout avec le résultat, qui peut être une promesse ou une valeur simple
+      }, delay);
+    });
+  };
+}

front/src/routes/(modeles-services)/_common/fields-structure.svelte

@@ -2,17 +2,20 @@
   import FieldSet from "$lib/components/display/fieldset.svelte";
   import SelectField from "$lib/components/forms/fields/select-field.svelte";
   import { getModel, getServicesOptions } from "$lib/requests/services";
-  import { getStructure } from "$lib/requests/structures";
+  import { getManagedStructures, getStructure } from "$lib/requests/structures";
   import type {
+    Choice,
     Model,
     Service,
     ServicesOptions,
     ShortStructure,
   } from "$lib/types";
+  import { debounce } from "$lib/utils/misc";
   import { onMount } from "svelte";
 
   export let servicesOptions: ServicesOptions;
   export let service: Service;
+  export let managedStructureSearchMode = false;
   export let structures: ShortStructure[];
   export let structure: ShortStructure | undefined;
   export let isModel = false;
@@ -100,8 +103,20 @@
     }
   }
 
+  async function searchFunction(searchText: string): Promise<Choice[]> {
+    if (searchText.length < 3) {
+      return [];
+    }
+    return (await getManagedStructures(searchText)).map((struct) => ({
+      value: struct.slug,
+      label: struct.name,
+    }));
+  }
+
   // Il s'agit d'une édition de service existant
-  const showStructures = service.structure ? false : structures.length > 1;
+  const showStructures = service.structure
+    ? false
+    : structures.length > 1 || managedStructureSearchMode;
 
   onMount(() => {
     if (structure && service.structure) {
@@ -120,7 +135,13 @@
     }))}
     onChange={handleStructureChange}
     sort
+    searchFunction={managedStructureSearchMode
+      ? debounce(searchFunction)
+      : undefined}
     disabled={!showStructures}
     placeholder="Sélectionnez la structure…"
+    description={managedStructureSearchMode
+      ? "Tapez au moins 3 lettres pour lancer la recherche."
+      : ""}
   />
 </FieldSet>

front/src/routes/(modeles-services)/services/creer/+page.svelte

@@ -12,7 +12,7 @@
   <CenteredGrid>
     <h1>Création d’un service</h1>
 
-    {#if !data.structures.length}
+    {#if !data.managedStructureSearchMode && !data.structures.length}
       <Notice title="Impossible de créer un nouveau service" type="error">
         <p class="text-f14">Vous n’êtes rattaché à aucune structure.</p>
       </Notice>
@@ -22,6 +22,7 @@
   <ServiceEditionForm
     service={data.service}
     servicesOptions={data.servicesOptions}
+    managedStructureSearchMode={data.managedStructureSearchMode}
     structures={data.structures}
     structure={data.structure}
     model={data.model}

front/src/routes/(modeles-services)/services/creer/+page.ts

@@ -2,7 +2,7 @@ import { getNewService } from "$lib/utils/forms";
 import { getModel, getServicesOptions } from "$lib/requests/services";
 import { userInfo } from "$lib/utils/auth";
 import { get } from "svelte/store";
-import { getStructure, getManagedStructures } from "$lib/requests/structures";
+import { getStructure } from "$lib/requests/structures";
 import type { PageLoad } from "./$types";
 import type { Model, Service, ShortStructure } from "$lib/types";
 import { error } from "@sveltejs/kit";
@@ -22,6 +22,8 @@ export const load: PageLoad = async ({ url, parent }) => {
     return {};
   }
 
+  const managedStructureSearchMode = user.isStaff || user.isManager;
+
   let structures: ShortStructure[] = user.structures;
   let service: Service;
   let model: Model | undefined = undefined;
@@ -49,8 +51,8 @@ export const load: PageLoad = async ({ url, parent }) => {
       error(404, "Page Not Found");
     }
   } else {
-    if (user.isStaff || user.isManager) {
-      structures = await getManagedStructures();
+    if (managedStructureSearchMode) {
+      structures = [];
     } else {
       structures = user.structures;
     }
@@ -67,6 +69,7 @@ export const load: PageLoad = async ({ url, parent }) => {
     noIndex: true,
     title: "Création d’un service | DORA",
     servicesOptions: await getServicesOptions(),
+    managedStructureSearchMode,
     structures,
     structure,
     service,

front/src/routes/(modeles-services)/services/service-edition-form.svelte

@@ -38,6 +38,7 @@
 
   export let service: Service;
   export let servicesOptions: ServicesOptions;
+  export let managedStructureSearchMode = false;
   export let structures: ShortStructure[];
   export let structure: ShortStructure | undefined;
   export let model: Model | undefined;
@@ -165,13 +166,14 @@
       </div>
     {/if}
 
-    {#if structures.length}
+    {#if managedStructureSearchMode || structures.length}
       <div class="lg:w-2/3">
         <FieldsStructure
           bind:structure
           bind:service
           bind:servicesOptions
           bind:model
+          {managedStructureSearchMode}
           {structures}
         />
       </div>