Affiche le spinner sur bouton estimer en cas de recalcul suite à ajout de carte communale

Et corrige la réinitialisation du champ de recherche après l'ajout de carte communale
Bug apparu au derniers commits

src/lib/components/impact/Button.svelte

@@ -8,11 +8,13 @@
   import { trackEstimation } from "$lib/matomo"
 
   let { title }: { title: string } = $props()
+
   let badgeIsVisible = $state(false)
   let runningEstimation = $state(false)
 
-  async function onEstimationButtonClick() {
+  export async function runCalculateDotation() {
     runningEstimation = true
+
     if (
       userState.amendement &&
       Object.keys(userState.amendement.dotations).length > 0
@@ -43,7 +45,7 @@
 <div class="relative my-4 inline-block">
   <button
     class="ease-out-back flex flex-row items-center gap-2 rounded border border-white bg-le-bleu px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg transition-all duration-200 hover:border-le-bleu hover:bg-gray-100 hover:text-le-bleu active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
-    onclick={() => onEstimationButtonClick()}
+    onclick={() => runCalculateDotation()}
   >
     {#if runningEstimation}
       <svg

src/lib/components/impact/CardsBoard.svelte

@@ -2,8 +2,14 @@
   /**
    * CARDS BOARD (SIMULATION IMPACTS)
    */
+
+  import {
+    getBaseCasTypes,
+    getBaseStrates,
+    getBaseTotal,
+  } from "$lib/state.svelte"
+  import type { ApiTerritoiresResponseCommune } from "$lib/territoires"
   import { type ApiCommuneResponse } from "$lib/api"
-  import { type Commune, collectCommuneInformation } from "$lib/territoires"
   import { Dotation, Trend, type DotationSummaryCommune } from "$lib/dotations"
 
   import Card from "$lib/components/impact/Card.svelte"
@@ -12,81 +18,26 @@
   import CommuneSummary from "$lib/components/impact/CommuneSummary.svelte"
   import Search from "$lib/components/impact/Search.svelte"
 
-  import {
-    amendementExists,
-    getBaseCasTypes,
-    getBaseStrates,
-    getBaseTotal,
-    updateBaseCasTypes,
-    userState,
-  } from "$lib/state.svelte"
-
-  import { tick } from "svelte"
-  import { requestCalculateDotation } from "$lib/calculate"
-
   // si critères à undefined :
   const COMMUNE_INFORMATION_DEFAULT_ERROR_VALUE_NUMBER = -1
   // const COMMUNE_INFORMATION_DEFAULT_ERROR_VALUE_STRING = "?"
   const COMMUNE_INFORMATION_DEFAULT_ERROR_VALUE_BOOLEAN = false
 
   let {
+    addCommuneCard,
     errorMessage = "",
   }: {
+    addCommuneCard: (event: ApiTerritoiresResponseCommune) => Promise<void>
     errorMessage: string
   } = $props()
 
   let inputField: HTMLInputElement | undefined = $state()
 
-  async function addCommuneCard(event: CustomEvent) {
-    /**
-     * reprend la réponse de l'API territoires
-     * pour questionner l'API leximpact-dotations-back
-     */
-    const commune = event.detail
-
-    const communeToFetch: Commune = {
-      nomCommune: commune.LIBELLE,
-      codeInseeCommune: commune.COM,
-      codeInseeDepartement: commune.DEP,
-    }
-
-    console.debug(
-      `🙌 CardBoard ${communeToFetch.nomCommune} - ${communeToFetch.codeInseeCommune}`,
-    )
-
-    console.debug("▶️ Request commune: ")
-    console.debug(communeToFetch)
-
-    let response: ApiCommuneResponse =
-      await collectCommuneInformation(communeToFetch)
-    console.debug("▶️ collectCommuneInformation response", response)
-
-    if (response.error !== undefined) {
-      errorMessage = response.error
-    }
-
-    updateBaseCasTypes([...getBaseCasTypes(), response])
-    //TODO s'il y a une réforme, ajouter le calcul des impacts pour la nouvelle commune sans avoir à cliquer sur le bouton ESTIMER + updateAmendementCasTypes ?
-
-    console.debug("🐣 Liste des communes mise à jour : ")
-    console.debug(JSON.stringify(userState.base.casTypes))
-
+  export function resetCommuneSearchInputField() {
+    // info : inputField est bindable
+    // nous n'avons donc pas besoin de déclarer en variable locale le composant Search
+    // pour mettre à jour son inputField
     inputField!.value = ""
-
-    await tick()
-
-    const cardsBoardContainer = document.getElementById("cardsboard-container")
-    if (cardsBoardContainer) {
-      cardsBoardContainer.scrollTo({
-        top: cardsBoardContainer.scrollHeight,
-        behavior: "smooth",
-      })
-    }
-    window.scrollTo(0, document.body.scrollHeight)
-
-    if (amendementExists()) {
-      await requestCalculateDotation()
-    }
   }
 
   function dotationIdfromBackToFront(backDotationName: string): Dotation {

src/lib/components/impact/ImpactArea.svelte

+<script lang="ts">
+  import { tick } from "svelte"
+
+  import { currentYear, publicPeriod } from "$lib/config"
+  import {
+    amendementExists,
+    getBaseCasTypes,
+    updateBaseCasTypes,
+    userState,
+  } from "$lib/state.svelte"
+  import {
+    type ApiTerritoiresResponseCommune,
+    type Commune,
+    collectCommuneInformation,
+  } from "$lib/territoires"
+  import type { ApiCommuneResponse } from "$lib/api"
+
+  import Button from "$lib/components/impact/Button.svelte"
+  import CardsBoard from "$lib/components/impact/CardsBoard.svelte"
+
+  let estimationButton: Button
+  let cardsBoardComponent: CardsBoard
+
+  let errorMessage = $state("")
+
+  // addCommuneCard défini ici parce qu'en cas d'ajout de carte communale
+  // si un amendement est déjà défini, on veut visualiser sur le bouton estimer
+  // qu'il y a un calcul des dotations en cours (=> spinner + await request)
+  // TODO Si la réforme n'a pas changé, le back détient déjà le calcul de l'impact pour la commune.
+  // Eviter un recalcul par le back ?
+  async function addCommuneCard(
+    event: ApiTerritoiresResponseCommune,
+  ): Promise<void> {
+    /**
+     * Reprend la réponse de l'API territoires ayant permis l'identification d'une commune
+     * pour questionner l'API leximpact-dotations-back sur les informations de la commune identifiée
+     * utiles au calcul des dotations (et affichées sur la carte communale).
+     *
+     * En cas d'existence de réforme (amendement) relance le calcul des dotations
+     * afin d'ajouter l'affichage du résultat de la réforme sur la carte de la commune.
+     */
+    const commune = event.detail
+
+    const communeToFetch: Commune = {
+      nomCommune: commune.LIBELLE,
+      codeInseeCommune: commune.COM,
+      codeInseeDepartement: commune.DEP,
+    }
+
+    console.debug(
+      `🙌 CardBoard ${communeToFetch.nomCommune} - ${communeToFetch.codeInseeCommune}`,
+    )
+
+    console.debug("▶️ Request commune: ")
+    console.debug(communeToFetch)
+
+    let response: ApiCommuneResponse =
+      await collectCommuneInformation(communeToFetch)
+    console.debug("▶️ collectCommuneInformation response", response)
+
+    if (response.error !== undefined) {
+      errorMessage = response.error
+    }
+
+    updateBaseCasTypes([...getBaseCasTypes(), response])
+    //TODO s'il y a une réforme, ajouter le calcul des impacts pour la nouvelle commune sans avoir à cliquer sur le bouton ESTIMER + updateAmendementCasTypes ?
+
+    console.debug("🐣 Liste des communes mise à jour : ")
+    console.debug(JSON.stringify(userState.base.casTypes))
+
+    if (cardsBoardComponent) {
+      cardsBoardComponent.resetCommuneSearchInputField()
+    }
+
+    await tick()
+
+    const cardsBoardContainer = document.getElementById("cardsboard-container")
+    if (cardsBoardContainer) {
+      cardsBoardContainer.scrollTo({
+        top: cardsBoardContainer.scrollHeight,
+        behavior: "smooth",
+      })
+    }
+    window.scrollTo(0, document.body.scrollHeight)
+
+    if (amendementExists()) {
+      await estimationButton.runCalculateDotation()
+    }
+  }
+</script>
+
+<!-- En-tête -->
+<header
+  class="flex w-screen items-center justify-between border-b bg-yellow-50 px-4 md:w-full"
+>
+  <h2
+    class="flex py-3 text-xl font-bold leading-8 text-black 2xl:pt-3 2xl:text-2xl"
+  >
+    {#if publicPeriod === currentYear}
+      Impact des dotations aux communes
+    {:else}
+      Impact des dotations aux communes {publicPeriod}
+    {/if}
+  </h2>
+
+  <Button title="ESTIMER LES IMPACTS" bind:this={estimationButton}>
+    <!-- INFO : le bouton adapte la requête de calcul au 'userState' courant -->
+  </Button>
+</header>
+
+<div
+  id="cardsboard-container"
+  class="mx-5 flex h-full flex-col overflow-y-scroll pb-28"
+>
+  <div class="my-3.5">
+    <span class="">Légende :</span>
+    <span class="text-sm font-bold">
+      Droit existant &nbsp;
+      <span class="z-10 bg-le-jaune"> &nbsp;Votre&nbsp;réforme&nbsp; </span>
+    </span>
+  </div>
+
+  <div>
+    <CardsBoard
+      bind:this={cardsBoardComponent}
+      {addCommuneCard}
+      {errorMessage}
+    />
+  </div>
+</div>

src/lib/components/impact/Search.svelte

@@ -22,6 +22,7 @@
   let {
     term = undefined,
     inputField = $bindable(),
+    // info : inputField peut être mis à jour par les composants parents
   }: {
     term: string | undefined
     inputField: HTMLInputElement | undefined

src/lib/territoires.ts

@@ -8,6 +8,17 @@ const DOTATIONS_BACK_API_URL_ENPOINT_COMMUNE =
   publicApiConfigLexImpactBack.endpointUrlCommune
 
 
+// API Territoires (https://git.leximpact.dev/leximpact/territoires/territoires)
+// type de la response à la recherche de commune (DGCL)
+// incomplet mais reflète l'usage de la response ici
+export type ApiTerritoiresResponseCommune = {
+  detail: {
+    LIBELLE: string
+    COM: string
+    DEP: string
+  }
+}
+
 export type Commune = {
   nomCommune: string
   codeInseeCommune: string // string pour code débutant par zéro

src/routes/+page.svelte

@@ -3,10 +3,10 @@
   import { page } from "$app/state"
 
   import RulesAccordion from "$lib/components/rules/RulesAccordion.svelte"
-  import Button from "$lib/components/impact/Button.svelte"
-  import CardsBoard from "$lib/components/impact/CardsBoard.svelte"
+
   import ModificationsPanel from "$lib/components/rules/ModificationsPanel.svelte"
   import { currentYear, publicPeriod } from "$lib/config"
+  import ImpactArea from "$lib/components/impact/ImpactArea.svelte"
 
   let mobileLaw = $state(
     page.url.searchParams.get("law") === "false" ? false : true,
@@ -138,43 +138,7 @@
         class:md:flex-[0_0_66.6%]={true}
         id="impact"
       >
-        <!-- En-tête -->
-        <header
-          class="flex w-screen items-center justify-between border-b bg-yellow-50 px-4 md:w-full"
-        >
-          <h2
-            class="flex py-3 text-xl font-bold leading-8 text-black 2xl:pt-3 2xl:text-2xl"
-          >
-            {#if publicPeriod === currentYear}
-              Impact des dotations aux communes
-            {:else}
-              Impact des dotations aux communes {publicPeriod}
-            {/if}
-          </h2>
-
-          <Button title="ESTIMER LES IMPACTS">
-            <!-- INFO : le bouton adapte la requête de calcul au 'userState' courant -->
-          </Button>
-        </header>
-
-        <div
-          id="cardsboard-container"
-          class="mx-5 flex h-full flex-col overflow-y-scroll pb-28"
-        >
-          <div class="my-3.5">
-            <span class="">Légende :</span>
-            <span class="text-sm font-bold">
-              Droit existant &nbsp;
-              <span class="z-10 bg-le-jaune">
-                &nbsp;Votre&nbsp;réforme&nbsp;
-              </span>
-            </span>
-          </div>
-
-          <div>
-            <CardsBoard errorMessage="" />
-          </div>
-        </div>
+        <ImpactArea />
       </section>
     </div>
   </div>