Add period (/an) to variable inputs

src/lib/components/test_cases/TestCaseEdit.svelte

@@ -27,6 +27,7 @@
   import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
   import { variableSummaryByName } from "$lib/variables"
 
+  export let date: string
   export let inputInstantsByVariableName: {
     [name: string]: Set<string>
   }
@@ -718,6 +719,7 @@
           class="my-4 flex-col items-baseline rounded bg-gray-200 p-1 py-1 text-base text-black md:p-2"
         >
           <VariableInput
+            {date}
             bind:inputInstantsByVariableName
             bind:situation
             {situationIndex}

src/lib/components/variables/FormulaView.svelte

@@ -19,6 +19,7 @@
   import { variableSummaryByName } from "$lib/variables"
   import type { WebSocketByName, WebSocketOpenByName } from "$lib/websockets"
 
+  export let date: string
   export let formula: Formula
   export let inputInstantsByVariableName: {
     [name: string]: Set<string>
@@ -187,6 +188,7 @@
           class="my-2 mb-4 flex-col items-baseline overflow-x-auto break-all rounded-b border-t-2 bg-gray-100 py-1 px-2 text-base text-black"
         >
           <VariableInput
+            {date}
             bind:inputInstantsByVariableName
             bind:situation
             {situationIndex}

src/lib/components/variables/VariableInput.svelte

@@ -18,11 +18,13 @@
     getSituationVariableValue,
     setSituationVariableValue,
   } from "$lib/situations"
+  import { getUnitShortLabel } from "$lib/units"
   import type {
     ValuesByCalculationNameByVariableName,
     VariableValue,
   } from "$lib/variables"
 
+  export let date: string
   export let inputInstantsByVariableName: {
     [name: string]: Set<string>
   }
@@ -426,8 +428,8 @@
                   )}
                 />
               {:else if ["float", "int"].includes(variable.value_type)}
-                <!-- Input Montant avec slider-->
                 {#if situation.slider !== undefined && situation.slider.entity === variable.entity && situation.slider.id === populationId && situation.slider.name === variable.name}
+                  <!-- Input Montant avec slider-->
                   <input
                     class="my-1 w-full rounded bg-gray-100 p-1"
                     disabled
@@ -441,8 +443,9 @@
                       ),
                     )}
                   />
+                  {getUnitShortLabel(variable.unit, date)}
                 {:else}
-                  <!-- Input Montant avec slider-->
+                  <!-- Input Montant sans slider-->
                   <input
                     class="my-1 w-full rounded bg-gray-100 p-1 focus:border-le-bleu focus:text-le-bleu"
                     on:change={(event) => changeValue(event, populationId)}
@@ -456,6 +459,9 @@
                       ),
                     )}
                   />
+                  {getUnitShortLabel(variable.unit, date, {
+                    periodUnit: variable.definition_period,
+                  })}
                 {/if}
                 <!--Composant slider-->
                 {#if situation.sliders?.find((slider) => slider.entity === variable.entity && slider.id === populationId && slider.name === variable.name) !== undefined}

src/lib/components/variables/VariableReferredInputs.svelte

@@ -93,6 +93,7 @@
               class="my-4 flex-col items-baseline rounded bg-gray-200 p-1 py-1 text-base text-black md:p-2"
             >
               <VariableInput
+                {date}
                 bind:inputInstantsByVariableName
                 bind:situation
                 {situationIndex}
@@ -145,6 +146,7 @@
               class="my-4 flex-col items-baseline rounded bg-gray-200 p-1 py-1 text-base text-black md:p-2"
             >
               <VariableInput
+                {date}
                 bind:inputInstantsByVariableName
                 bind:situation
                 {situationIndex}

src/lib/components/variables/VariableView.svelte

@@ -11,11 +11,11 @@
   import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
   import { buildInstantFormulaAndReferencesArray } from "$lib/variables"
 
+  export let date: string
   export let editable: boolean
   export let inputInstantsByVariableName: {
     [name: string]: Set<string>
   }
-  export let date: string
   export let situation: Situation
   export let situationIndex: number
   export let valuesByCalculationNameByVariableName: ValuesByCalculationNameByVariableName
@@ -73,6 +73,7 @@
             </h2>
 
             <VariableInput
+              {date}
               bind:inputInstantsByVariableName
               bind:situation
               {situationIndex}
@@ -206,6 +207,7 @@
                   <i>Aucune formule à partir de cette date</i>
                 {:else}
                   <FormulaView
+                    {date}
                     {formula}
                     bind:inputInstantsByVariableName
                     bind:situation

src/lib/units.ts

@@ -4,6 +4,7 @@ import unitsUnknown from "@leximpact/socio-fiscal-openfisca-json/units.yaml"
 import {
   getUnitLabel as getUnitLabelOriginal,
   getUnitShortLabel as getUnitShortLabelOriginal,
+  type PeriodUnit,
   type Unit,
 } from "@openfisca/json-model"
 
@@ -14,25 +15,41 @@ const unitByName = Object.fromEntries(units.map((unit) => [unit.name, unit]))
 export function getUnitLabel(
   name: string | undefined | null,
   date: string,
-  value = 123,
+  { periodUnit, value = 123 }: { periodUnit?: PeriodUnit; value?: number } = {},
 ): string {
-  return getUnitLabelOriginal(
+  const unitLabel = getUnitLabelOriginal(
     unitByName,
     name,
     date,
     frenchPluralRules.select(value ?? 0),
   )
+  if (
+    unitLabel === "" ||
+    periodUnit === undefined ||
+    !["day", "month", "year"].includes(periodUnit)
+  ) {
+    return unitLabel
+  }
+  return `${unitLabel}/an`
 }
 
 export function getUnitShortLabel(
   name: string | undefined | null,
   date: string,
-  value = 123,
+  { periodUnit, value = 123 }: { periodUnit?: PeriodUnit; value?: number } = {},
 ): string {
-  return getUnitShortLabelOriginal(
+  const unitShortLabel = getUnitShortLabelOriginal(
     unitByName,
     name,
     date,
     frenchPluralRules.select(value ?? 0),
   )
+  if (
+    unitShortLabel === "" ||
+    periodUnit === undefined ||
+    !["day", "month", "year"].includes(periodUnit)
+  ) {
+    return unitShortLabel
+  }
+  return `${unitShortLabel}/an`
 }

src/routes/+page.svelte

@@ -1195,6 +1195,7 @@
 
         <div class="overflow-y-auto md:h-[calc(100vh-5.7rem)]">
           <TestCaseEdit
+            date={$date}
             inputInstantsByVariableName={$inputInstantsByVariableNameArray[
               displayMode.edit
             ]}