Show/hide edited scales & values.

src/lib/components/parameters/ScaleEdit.svelte

@@ -25,6 +25,7 @@
   import ReferencesEdit from "$lib/components/parameters/ReferencesEdit.svelte"
   import ScaleAtInstantEdit from "$lib/components/parameters/ScaleAtInstantEdit.svelte"
   import { errorAsKeyValueDictionary, iterArrayWithErrors } from "$lib/errors"
+  import { iterToLimit } from "$lib/iterators"
   import { labelFromScaleType, labelFromUnit } from "$lib/parameters"
 
   let globalErrors: { [key: string]: unknown }
@@ -41,6 +42,7 @@
   let errors = globalErrors
   let instantReferencesAndScaleArray =
     buildInstantReferencesAndScaleArray(parameter)
+  let showAll = false
   const useBase = false
 
   $: metadata = $session.metadata
@@ -298,7 +300,7 @@
     >Ajouter une date
   </button>
   <dl>
-    {#each [...iterArrayWithErrors(instantReferencesAndScaleArray, errors)] as [{ instant, references, scaleAtInstant }, error], index}
+    {#each [...iterToLimit(iterArrayWithErrors(instantReferencesAndScaleArray, errors), showAll ? null : 3)] as [{ instant, references, scaleAtInstant }, error], index}
       <dt class="mt-4">
         <input
           max="{new Date().getFullYear() + 20}-01-01"
@@ -348,4 +350,12 @@
       </dd>
     {/each}
   </dl>
+  {#if instantReferencesAndScaleArray.length > 3}
+    <button
+      class="inline-flex items-center bg-le-bleu text-white shadow-md hover:bg-blue-900 px-5 rounded p-2 uppercase text-sm"
+      on:click={() => (showAll = !showAll)}
+      type="button"
+      >{#if showAll}Masquer{:else}Montrer tous les barèmes{/if}</button
+    >
+  {/if}
 </div>

src/lib/components/parameters/ValueEdit.svelte

@@ -11,6 +11,7 @@
   import ReferencesEdit from "$lib/components/parameters/ReferencesEdit.svelte"
   import ValueAtInstantEdit from "$lib/components/parameters/ValueAtInstantEdit.svelte"
   import { errorAsKeyValueDictionary, iterArrayWithErrors } from "$lib/errors"
+  import { iterToLimit } from "$lib/iterators"
   import { labelFromValueType, labelFromUnit } from "$lib/parameters"
 
   let globalErrors: { [key: string]: unknown }
@@ -27,6 +28,7 @@
   let errors = globalErrors
   let instantReferencesAndValueArray =
     buildInstantReferencesAndValueArray(parameter)
+  let showAll = false
 
   $: metadata = $session.metadata
 
@@ -163,7 +165,7 @@
     <!--Colonne 1 présentant les valeurs-->
     <div>
       <dl class="flex-col mb-10">
-        {#each [...iterArrayWithErrors(instantReferencesAndValueArray, errors)] as [{ instant, references, valueAtInstant }, error], index}
+        {#each [...iterToLimit(iterArrayWithErrors(instantReferencesAndValueArray, errors), showAll ? null : 3)] as [{ instant, references, valueAtInstant }, error], index}
           <div class="flex items-center">
             <dt class="mt-4">
               <input
@@ -216,6 +218,14 @@
           </div>
         {/each}
       </dl>
+      {#if instantReferencesAndValueArray.length > 3}
+        <button
+          class="inline-flex items-center bg-le-bleu text-white shadow-md hover:bg-blue-900 px-5 rounded p-2 uppercase text-sm"
+          on:click={() => (showAll = !showAll)}
+          type="button"
+          >{#if showAll}Masquer{:else}Montrer toutes les valeurs{/if}</button
+        >
+      {/if}
     </div>
     <!--Colonne 2 pour ajouter un paramètre ou valider les dernières valeurs-->
     <div>

src/lib/iterators.ts

+export function* iterToLimit<T>(
+  value: Iterable<T>,
+  limit?: number | undefined | null,
+): Generator<T, void, unknown> {
+  let index = 0
+  for (const item of value) {
+    if (limit != null && index >= limit) {
+      break
+    }
+    yield item
+    index++
+  }
+}