Improve display of variables without formulas.

src/lib/components/variables/VariableReferredParameters.svelte

@@ -6,19 +6,22 @@
     mergeParameters,
     ParameterClass,
   } from "@openfisca/json-model"
+  import { getContext } from "svelte"
+  import type { Writable } from "svelte/store"
 
   import VariableReferredNodeParameter from "./VariableReferredNodeParameter.svelte"
   import VariableReferredScaleParameter from "./VariableReferredScaleParameter.svelte"
   import VariableReferredValueParameter from "./VariableReferredValueParameter.svelte"
-  import type { DecompositionCore } from "$lib/decompositions"
+  import type { Decomposition } from "$lib/decompositions"
 
   export let date: string
-  export let decompositionCore: DecompositionCore | undefined
+  export let decomposition: Decomposition | undefined
   export let parameters: Parameter[]
   export let variable: Variable | undefined
 
   const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
   let openDirectParameters = true
+  const testCaseIndex = getContext("testCaseIndex") as Writable<number>
 
   $: directParametersName = new Set(
     variable === undefined
@@ -38,13 +41,33 @@
   $: rootDirectParameterById = mergeParameters(directParameters)
 
   $: rootParameterById = mergeParameters(parameters)
+
+  $: variableName = decomposition?.name ?? variable?.name
 </script>
 
 <div class="bg-le-gris-dispositif-light px-5 py-2 shadow-inner rounded-r">
   <h1 class="text-2xl font-serif font-light">
-    {decompositionCore?.label ?? variable?.label ?? variable?.name}
+    {decomposition?.label ?? variable?.label ?? variableName}
   </h1>
-  {#if latestFormulaDate !== null}
+  {#if latestFormulaDate === null}
+    <div class="text-xs">
+      <a
+        class="underline text-gray-500 hover:text-le-bleu"
+        href="/variables/{variableName}">En savoir plus sur le dispositif</a
+      >
+    </div>
+    <p>
+      Ce dispositif n'a pas de formule. Vous pouvez modifier directement sa
+      valeur en éditant le cas type
+      <a
+        class="underline text-gray-500 hover:text-le-bleu"
+        href="/?action={encodeURIComponent(
+          `situations/${$testCaseIndex}/variables/${variableName}/inputs`,
+        )}"
+        sveltekit:noscroll>en éditant le cas type</a
+      >.
+    </p>
+  {:else}
     <div
       class="bg-white bg-opacity-40 rounded-sm flex text-xs my-2 p-2 sm:p-1 md:p-2"
     >
@@ -116,7 +139,7 @@
         <div class="text-xs">
           <a
             class="underline text-gray-500 hover:text-le-bleu"
-            href="/variables/{variable.name}">En savoir plus sur la formule</a
+            href="/variables/{variableName}">En savoir plus sur la formule</a
           >
         </div>
       </div>
@@ -171,7 +194,7 @@
   {/each}
 {/if}
 
-{#if decompositionCore?.children === undefined}
+{#if decomposition?.children === undefined}
   {#if Object.keys(rootDirectParameterById).length > 0}
     <h2
       class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"

src/lib/components/variables/VariableReferredParametersPane.svelte

@@ -10,9 +10,17 @@
 
   $: decompositionCore = decompositionCoreByName[name]
 
+  $: decomposition =
+    decompositionCore === undefined
+      ? undefined
+      : {
+          ...decompositionCore,
+          name,
+        }
+
   $: variable = variableSummaryByName[name]
 
-  $: if (decompositionCore === undefined && variable === undefined) {
+  $: if (decomposition === undefined && variable === undefined) {
     console.error(`Variable "${name}" not found`)
   }
 
@@ -20,11 +28,6 @@
     variable === undefined ? [] : [...iterVariableParameters(variable, date)]
 </script>
 
-{#if decompositionCore !== undefined || variable !== undefined}
-  <VariableReferredParameters
-    {date}
-    {decompositionCore}
-    {parameters}
-    {variable}
-  />
+{#if decomposition !== undefined || variable !== undefined}
+  <VariableReferredParameters {date} {decomposition} {parameters} {variable} />
 {/if}

src/routes/variables/[variable]/parameters/[date].svelte

 <script context="module" lang="ts">
   import type { LoadInput, LoadOutput } from "@sveltejs/kit"
 
+  import type { Decomposition } from "$lib/decompositions"
   import { decompositionCoreByName } from "$lib/decompositions"
   import { iterVariableParameters, variableSummaryByName } from "$lib/variables"
 
   export function load({ page }: LoadInput): LoadOutput {
     const { date, variable: name } = page.params
     const decompositionCore = decompositionCoreByName[name]
+    const decomposition: Decomposition =
+      decompositionCore === undefined
+        ? undefined
+        : {
+            ...decompositionCore,
+            name,
+          }
     const variable = variableSummaryByName[name]
-    if (decompositionCore === undefined && variable === undefined) {
+    if (decomposition === undefined && variable === undefined) {
       return {
         status: 404,
         error: new Error(`Variable "${name}" not found`),
@@ -19,7 +27,7 @@
 
     return {
       props: {
-        decompositionCore,
+        decomposition,
         variable,
         parameters,
       },
@@ -33,10 +41,9 @@
 
   import { page, session } from "$app/stores"
   import VariableReferredParameters from "$lib/components/variables/VariableReferredParameters.svelte"
-  import type { DecompositionCore } from "$lib/decompositions"
   import { newSelfTargetAProps } from "$lib/urls"
 
-  export let decompositionCore: DecompositionCore | undefined
+  export let decomposition: Decomposition | undefined
   export let parameters: Parameter[]
   export let variable: Variable | undefined
 
@@ -56,10 +63,5 @@
 </svelte:head>
 
 <main>
-  <VariableReferredParameters
-    {date}
-    {decompositionCore}
-    {parameters}
-    {variable}
-  />
+  <VariableReferredParameters {date} {decomposition} {parameters} {variable} />
 </main>