From 0ea9f794d322a1ab1a989bbc75df02d15e76ba8c Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@assemblee-nationale.fr>
Date: Mon, 10 Mar 2025 13:49:21 +0100
Subject: [PATCH] =?UTF-8?q?Applique=20la=20structure=20de=20la=20nouvelle?=
=?UTF-8?q?=20PaySlip=20au=20mode=20compar=C3=A9,=20en=20gardant=20le=20pr?=
=?UTF-8?q?incipe=20de=20l'affichage=20des=20montants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../compare_mode/PaySlipCompareView.svelte | 818 ++++++++----------
1 file changed, 384 insertions(+), 434 deletions(-)
diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
index 162b81f26..fa7b9c557 100644
--- a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
+++ b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
@@ -95,6 +95,21 @@
}
}
+ function getCorrectSimulationUrl(variableName: string) {
+ const newDisplayMode =
+ displayMode.edit !== undefined
+ ? {
+ ...displayMode,
+ variableName: variableName,
+ }
+ : {
+ ...displayMode,
+ mobileLaw: true,
+ parametersVariableName: variableName,
+ }
+ return newSimulationUrl(newDisplayMode)
+ }
+
function zoomIn(index: number) {
let visibleDecomposition = visibleDecompositions[index]
if (
@@ -134,7 +149,7 @@
{#if visibleDecompositions.length > 0}
<div>
- <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent" />
+ <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent"></div>
<!--Montants-nuls-->
<div class="mx-1 mb-3 flex justify-start">
<label class="inline-flex cursor-pointer items-center">
@@ -153,373 +168,252 @@
</label>
</div>
</div>
- <!-- Labels and compared amounts of decompositions -->
<!-- Feuille de paie-->
- <div class="flex justify-between">
- <div class="w-3/5 flex-auto">
- {#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index}
- <!-- Ligne de la feuille de paie-->
- <div
- class="flex min-h-8 flex-col items-stretch justify-between border-t border-gray-200 px-4"
- class:bg-gray-100={trunk && index !== 0}
- class:border-gray-300={trunk && index !== 0}
- class:fond={decomposition.name ===
- displayMode.parametersVariableName ||
- (displayMode.parametersVariableName &&
- isChildOrDescendant(
- shared.decompositionByName,
- decomposition.name,
- displayMode.parametersVariableName,
- ))}
- class:text-lg={decomposition.name ===
- displayMode.parametersVariableName}
- class:items-start={decomposition.name ===
- displayMode.parametersVariableName}
- >
+
+ <div class="flex-auto">
+ {#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index}
+ <!-- Ligne de la feuille de paie-->
+ <div
+ class="flex min-h-8 border-t border-gray-200 px-4"
+ class:border-gray-300={trunk && index !== 0}
+ class:fond={decomposition.name === displayMode.parametersVariableName ||
+ (displayMode.parametersVariableName &&
+ isChildOrDescendant(
+ shared.decompositionByName,
+ decomposition.name,
+ displayMode.parametersVariableName,
+ ))}
+ class:text-lg={decomposition.name ===
+ displayMode.parametersVariableName}
+ >
+ {#each iterToDepth(depth)}
+ <div
+ class={`min-h-full border-l-2 pr-3 ${
+ decomposition.name !== displayMode.parametersVariableName &&
+ !(
+ displayMode.parametersVariableName &&
+ isChildOrDescendant(
+ shared.decompositionByName,
+ decomposition.name,
+ displayMode.parametersVariableName,
+ )
+ )
+ ? "border-gray-400"
+ : "border-black"
+ }`}
+ >
+
+ </div>
+ {/each}
+ <div class="flex w-full flex-col">
<!-- "Nom du dispositif" -->
- <div class="flex h-7 items-center whitespace-nowrap">
- {#if trunk && index !== 0}
- <div
- class="ml-2 mt-2 w-full overflow-x-hidden text-ellipsis border-gray-300 text-left text-base text-gray-500 hover:z-20 hover:overflow-x-visible"
- class:border-t={index !== 0}
- >
- {#if displayMode.edit !== undefined}
- <!-- Trunk decomposition node, in variable inputs mode => link -->
- <a
- class="cursor-pointer text-base hover:underline"
- href={newSimulationUrl({
- ...displayMode,
- variableName: decomposition.name,
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
- {:else}
- <!-- Trunk decomposition node with parameters, in parameters mode => link -->
- <a
- class="cursor-pointer text-base hover:underline"
- href={newSimulationUrl({
- ...displayMode,
- mobileLaw: true,
- parametersVariableName: decomposition.name,
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
- {/if}
- </div>
- {:else}
- {#each [...iterToDepth(depth)] as _level}
- <div class="ml-2 h-full border-l border-le-gris-dispositif">
-
- </div>
- {/each}
- {#if visibleChildren === undefined}
- <!-- Leaf node (except the first one, that belongs to trunk) -->
- <div class="ml-4">
- {#if decomposition.obsolete || decomposition.last_value_still_valid_on === undefined || decomposition.last_value_still_valid_on < (new Date().getFullYear() - 2).toString()}
- <Tooltip
- allowFlip={false}
- arrowClass="bg-gray-100"
- widthClass="w-80"
- initialPlacement="bottom"
+ <div class="flex-1 overflow-x-hidden">
+ {#each rows as { calculationName }}
+ {#if calculationName === firstCalculationName}
+ <div class="flex h-full w-full items-center">
+ {#if trunk && index !== 0}
+ <!--Les class permettent que le nom de la variable soit caché avec "..." et rendu visible au survol. Le comportement est différent si la variable est sélectionnée-->
+ <div
+ class="flex w-full items-center"
+ class:whitespace-nowrap={decomposition.name !==
+ displayMode.parametersVariableName}
>
- <iconify-icon
- class="mr-1 shadow-none {decomposition.obsolete
- ? 'text-[#FF4133]'
- : 'text-[#FFAC33]'}"
- icon="material-symbols:warning-rounded"
- width="16"
- height="16"
- ></iconify-icon>
- {#snippet tooltip()}
- <div
- class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-2xl"
+ <!-- Nom de la variable tronc, cliquable -->
+ <a
+ class="cursor-pointer overflow-x-hidden text-ellipsis text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white hover:bg-opacity-90 hover:pr-1 hover:text-le-gris-dispositif-dark hover:underline"
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:hover:absolute={decomposition.name !==
+ displayMode.parametersVariableName}
+ href={getCorrectSimulationUrl(decomposition.name)}
+ data-sveltekit-noscroll
+ >{decomposition.short_label ?? decomposition.label}</a
+ >
+ </div>
+ {:else if visibleChildren === undefined}
+ <!--Si c'est une variable Non-trunk, leaf-variable : La variable n'a pas de variables enfants et elle n'est pas une variable tronc -->
+
+ <div
+ class="flex h-full w-full items-center"
+ class:whitespace-nowrap={decomposition.name !==
+ displayMode.parametersVariableName}
+ >
+ <!--Si la variable est obsolète, ou que sa date de relecture est inconnue ou trop ancienne, un picto attention est affiché -->
+ {#if decomposition.obsolete || decomposition.last_value_still_valid_on === undefined || decomposition.last_value_still_valid_on < (new Date().getFullYear() - 2).toString()}
+ <Tooltip
+ allowFlip={false}
+ arrowClass="bg-gray-100"
+ widthClass="w-80"
+ initialPlacement="bottom"
>
- <div
- class="border-b border-gray-200 bg-gray-100 px-3 py-2"
- >
- <h3 class="font-semibold text-gray-900">
- ⚠️ Ce dispositif n'est peut-être pas à jour
- </h3>
- </div>
- <div
- class="px-3 py-2 text-sm font-light text-gray-500"
- >
- Dernière relecture :
- {#if decomposition.last_value_still_valid_on === undefined}
- date indéterminée
- {:else}{dateFormatter(
- new Date(
- decomposition.last_value_still_valid_on,
- ),
- )}
- {/if}
- {#if decomposition.obsolete}
- ; Obsolète !{/if}
- </div>
- </div>
- {/snippet}
- </Tooltip>
+ <iconify-icon
+ class="mr-0.5 shadow-none {decomposition.obsolete
+ ? 'text-[#FF4133]'
+ : 'text-[#FFAC33]'}"
+ icon="material-symbols:warning-rounded"
+ width="16"
+ height="16"
+ ></iconify-icon>
+ {#snippet tooltip()}
+ <div
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-2xl"
+ >
+ <div
+ class="border-b border-gray-200 bg-gray-100 px-3 py-2"
+ >
+ <h3 class="font-semibold text-gray-900">
+ ⚠️ Ce dispositif n'est peut-être pas à jour
+ </h3>
+ </div>
+ <div
+ class="px-3 py-2 text-sm font-light text-gray-500"
+ >
+ Dernière relecture :
+ {#if decomposition.last_value_still_valid_on === undefined}
+ date indéterminée
+ {:else}{dateFormatter(
+ new Date(
+ decomposition.last_value_still_valid_on,
+ ),
+ )}
+ {/if}
+ {#if decomposition.obsolete}
+ ; Obsolète !{/if}
+ </div>
+ </div>
+ {/snippet}
+ </Tooltip>
+ {/if}
+ <!-- Nom de la variable non-trunk, leaf, cliquable -->
+ <a
+ class="cursor-pointer overflow-x-hidden text-ellipsis font-serif hover:z-20 hover:overflow-x-visible hover:bg-white hover:bg-opacity-90 hover:pr-1 hover:text-le-gris-dispositif-dark hover:underline"
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:hover:text-wrap={decomposition.name !==
+ displayMode.parametersVariableName}
+ href={getCorrectSimulationUrl(decomposition.name)}
+ data-sveltekit-noscroll
+ >{decomposition.short_label ?? decomposition.label}</a
+ >
+ </div>
+ {:else}
+ <!-- Si c'est une variable Non-trunk, Non-leaf : La variable a des variables enfants et n'est pas une variable tronc | une flèche à droite permet d'ouvrir les variables enfants-->
+
+ <div
+ class="flex h-full w-full items-center justify-start"
+ class:whitespace-nowrap={decomposition.name !==
+ displayMode.parametersVariableName}
+ >
+ <button
+ class="cursor-pointer overflow-x-hidden text-ellipsis text-left font-serif hover:z-20 hover:overflow-x-visible hover:bg-white hover:bg-opacity-90 hover:text-le-gris-dispositif-dark hover:underline"
+ class:hover:text-wrap={decomposition.name !==
+ displayMode.parametersVariableName}
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ onclick={() => {
+ // Non-leaf decomposition node in variable inputs mode => no-link
+ if (decomposition.open) {
+ zoomOut(index)
+ } else {
+ zoomIn(index)
+ }
+ // Leaf decomposition node with parameters in parameters mode => link
+ if (displayMode.edit === undefined) {
+ goto(getCorrectSimulationUrl(decomposition.name), {
+ noScroll: true,
+ })
+ }
+ }}
+ data-sveltekit-noscroll
+ >{decomposition.short_label ??
+ decomposition.label}</button
+ >
+ <button
+ class="text-black"
+ aria-label={decomposition.open
+ ? "Ouvrir variables enfants"
+ : "Fermer"}
+ onclick={() =>
+ decomposition.open ? zoomOut(index) : zoomIn(index)}
+ >
+ <iconify-icon
+ class="align-[-0.25rem] text-lg hover:text-le-gris-dispositif"
+ icon={decomposition.open
+ ? "ri-arrow-down-s-line"
+ : "ri-arrow-right-s-line"}
+ ></iconify-icon>
+ </button>
+ </div>
{/if}
</div>
-
- {#if displayMode.edit !== undefined}
- <!-- Leaf decomposition node in variable inputs mode => link -->
- <a
- class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
- href={newSimulationUrl({
- ...displayMode,
- variableName: decomposition.name,
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
- {:else}
- <!-- Leaf decomposition node with parameters in parameters mode => link -->
- <a
- class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
- href={newSimulationUrl({
- ...displayMode,
- mobileLaw: true,
- parametersVariableName: decomposition.name,
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
- {/if}
- {:else}
- <!-- Non-trunk, non-leaf variablev-->
- {#if decomposition.open}
- <button class="p-0 text-black" onclick={() => zoomOut(index)}>
- <iconify-icon
- class="align-[-0.2rem] text-lg"
- icon="ri-arrow-up-s-line"
- ></iconify-icon>
- </button>
- {:else}
- <button class="p-0 text-black" onclick={() => zoomIn(index)}>
- <iconify-icon
- class="align-[-0.2rem] text-lg"
- icon="ri-arrow-right-s-line"
- ></iconify-icon>
- </button>
- {/if}
-
- {#if displayMode.edit !== undefined}
- <!-- Non-lead decomposition node in variable inputs mode => no-link -->
- <button
- class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base text-black hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-black hover:underline"
- onclick={() => {
- if (decomposition.open) {
- zoomOut(index)
- } else {
- zoomIn(index)
- }
- }}
- >
- {decomposition.short_label ?? decomposition.label}
- </button>
- {:else}
- <!-- Leaf decomposition node with parameters in parameters mode => link -->
- <a
- class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
- href={newSimulationUrl({
- ...displayMode,
- parametersVariableName: decomposition.name,
- })}
- onclick={preventDefault(() => {
- if (decomposition.open) {
- zoomOut(index)
- } else {
- zoomIn(index)
- }
- goto(
- newSimulationUrl({
- ...displayMode,
- parametersVariableName: decomposition.name,
- }),
- { noScroll: true },
- )
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
- {/if}
{/if}
- {/if}
+ {/each}
</div>
- {#each rows as { calculationName, deltaAtVectorIndexArray }}
- <!-- Decomposition compared amounts -->
- {#if !decomposition.open || trunk || index === 0}
- <div class="relative flex items-center whitespace-nowrap">
- {#if !decomposition.open && !trunk}
- <div class="absolute">
- {#each iterToDepth(depth)}
- <div
- class="ml-2 h-full border-l border-le-gris-dispositif"
- >
-
- </div>
- {/each}
- </div>
- {/if}
- <div
- class="justify-center {decomposition.open &&
- trunk &&
- visibleChildren.length > 1 &&
- calculationName === firstCalculationName
- ? ''
- : ' border-none'} {calculationName === firstCalculationName
- ? ''
- : '-mt-1 mb-1'} flex w-full text-sm"
- >
- {#if decomposition.open || index === 0}
- <!---Composant loader pour les valeurs intermédiaires-->
- {#if showLoader && runningCalculationNames.length > 0}
- {#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- {#if runningCalculationNames.includes("bill")}
- <span
- class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- {#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
- <span
- class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- <!--Valeurs du waterfall des montants intermédiaires -->
- {:else if trunk || index === 0}
- {#if deltaAtVectorIndexArray[0] === deltaAtVectorIndexArray[1]}
- {#if decomposition.open && trunk}
- <span class="mx-2 text-gray-500">=</span>
- {/if}
- <span
- class="text-sm {calculationName ===
- firstCalculationName
+ <!-- "Valeur du dispositif"-->
+
+ <div class="flex w-full flex-col items-stretch">
+ {#each rows as { calculationName, deltaAtVectorIndexArray }}
+ <div class="h-full justify-center pl-1 text-sm">
+ <!--Si la valeur charge, alors un squelette est affiché -->
+ {#if showLoader && runningCalculationNames.length > 0}
+ {#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}
+ <span
+ class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
+ >
+ <span class="text-white blur">value €</span>
+ </span>
+ {/if}
+ {#if runningCalculationNames.includes("bill")}
+ <span
+ class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
+ >
+ <span class="text-white blur">value €</span>
+ </span>
+ {/if}
+ {#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
+ <span
+ class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
+ >
+ <span class="text-white blur">value €</span>
+ </span>
+ {/if}
+ <!--Si la valeur du cas type 0 est égale à la valeur du cas type 1 : Une seule valeur est alors affichée -->
+ {:else if deltaAtVectorIndexArray[0] === deltaAtVectorIndexArray[1]}
+ <div class="flex w-full justify-center">
+ {#if trunk && index !== 0}
+ <span
+ class={calculationName === firstCalculationName
+ ? rows.find(
+ (row) => row.calculationName === "bill",
+ ) === undefined
? rows.find(
- (row) => row.calculationName === 'bill',
+ (row) => row.calculationName === "amendment",
) === undefined
- ? rows.find(
- (row) => row.calculationName === 'amendment',
- ) === undefined
- ? 'text-gray-500'
- : 'text-gray-500 line-through-amendment'
- : 'text-gray-500 line-through-bill'
- : calculationName === 'bill'
- ? rows.find(
- (row) => row.calculationName === 'amendment',
- ) === undefined
- ? 'text-le-rouge-bill'
- : 'text-le-rouge-bill line-through-amendment'
- : 'bg-le-jaune'}"
- >{deltaFormatter(
- deltaAtVectorIndexArray[0] ?? 0,
- )}</span
- >
- {:else}
- <div class="flex w-full justify-center">
- <div class="mx-4 w-1/2">
- {#if decomposition.open && trunk}
- <span class="mx-2 text-gray-500">=</span>
- {/if}
- <span
- class="text-right text-sm {calculationName ===
- firstCalculationName
- ? rows.find(
- (row) => row.calculationName === 'bill',
- ) === undefined
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-gray-500'
- : 'text-gray-500 line-through-amendment'
- : 'text-gray-500 line-through-bill'
- : calculationName === 'bill'
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-le-rouge-bill'
- : 'text-le-rouge-bill line-through-amendment'
- : 'bg-le-jaune'}"
- >{deltaFormatter(
- deltaAtVectorIndexArray[0] ?? 0,
- )}</span
- >
- </div>
- <div class="mx-4 w-1/2">
- {#if decomposition.open && trunk}
- <span class="mx-2 text-gray-500">=</span>
- {/if}
- <span
- class="text-left text-sm {calculationName ===
- firstCalculationName
- ? rows.find(
- (row) => row.calculationName === 'bill',
- ) === undefined
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-gray-500'
- : 'text-gray-500 line-through-amendment'
- : 'text-gray-500 line-through-bill'
- : calculationName === 'bill'
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-le-rouge-bill'
- : 'text-le-rouge-bill line-through-amendment'
- : 'bg-le-jaune'}"
- >{deltaFormatter(
- deltaAtVectorIndexArray[1] ?? 0,
- )}</span
- >
- </div>
- </div>
- {/if}
- {/if}
- <!--Montant des dispositifs-->
- {:else if deltaAtVectorIndexArray[0] === deltaAtVectorIndexArray[1]}
- <!---Composant loader pour la valeur suivante-->
- {#if showLoader && runningCalculationNames.length > 0}
- {#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- {#if runningCalculationNames.includes("bill")}
- <span
- class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- {#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
- <span
- class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
- >
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- <!--Valeur-->
+ ? "text-gray-500"
+ : "text-gray-500 line-through-amendment"
+ : "text-gray-500 line-through-bill"
+ : calculationName === "bill"
+ ? rows.find(
+ (row) => row.calculationName === "amendment",
+ ) === undefined
+ ? "text-le-rouge-bill"
+ : "text-le-rouge-bill line-through-amendment"
+ : "bg-le-jaune text-gray-500"}
+ class:text-base={decomposition.name !==
+ displayMode.parametersVariableName}
+ class:text-2xl={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ ><span
+ class="content-center pr-1 font-normal text-gray-500"
+ >=</span
+ >{deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span
+ >
{:else}
<span
- class="text-base font-bold {calculationName ===
+ class="font-bold {calculationName ===
firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
@@ -537,98 +431,154 @@
? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}"
- >{deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span
+ class:opacity-20={decomposition.open}
+ class:text-base={decomposition.name !==
+ displayMode.parametersVariableName}
+ class:text-3xl={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:font-semibold={decomposition.name ===
+ displayMode.parametersVariableName}
+ >{#if index !== 0}{#if deltaAtVectorIndexArray[0] < 0}-{:else if deltaAtVectorIndexArray[0] > 0}+{/if}{/if}
+ {deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span
>
{/if}
- {:else}
- <!---Composant loader pour la valeur suivante-->
- {#if showLoader && runningCalculationNames.length > 0}
- {#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
+ </div>
+ <!--Si la valeur du cas type 0 est DIFFÉRENTE de la valeur du cas type 1 : les deux valeurs sont affichées côte à côte -->
+ {:else}
+ <div class="flex w-full text-center">
+ <div class="mx-4 w-1/2">
+ {#if trunk && index !== 0}
+ <span
+ class={calculationName === firstCalculationName
+ ? rows.find(
+ (row) => row.calculationName === "bill",
+ ) === undefined
+ ? rows.find(
+ (row) => row.calculationName === "amendment",
+ ) === undefined
+ ? "text-gray-500"
+ : "text-gray-500 line-through-amendment"
+ : "text-gray-500 line-through-bill"
+ : calculationName === "bill"
+ ? rows.find(
+ (row) => row.calculationName === "amendment",
+ ) === undefined
+ ? "text-le-rouge-bill"
+ : "text-le-rouge-bill line-through-amendment"
+ : "bg-le-jaune text-gray-500"}
+ class:text-base={decomposition.name !==
+ displayMode.parametersVariableName}
+ class:text-2xl={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ ><span
+ class="content-center pr-1 font-normal text-gray-500"
+ >=</span
+ >{deltaFormatter(
+ deltaAtVectorIndexArray[0] ?? 0,
+ )}</span
>
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- {#if runningCalculationNames.includes("bill")}
+ {:else}
<span
- class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
+ class="text-base font-bold {calculationName ===
+ firstCalculationName
+ ? rows.find(
+ (row) => row.calculationName === 'bill',
+ ) === undefined
+ ? rows.find(
+ (row) => row.calculationName === 'amendment',
+ ) === undefined
+ ? ''
+ : 'line-through-amendment'
+ : 'line-through-bill'
+ : calculationName === 'bill'
+ ? rows.find(
+ (row) => row.calculationName === 'amendment',
+ ) === undefined
+ ? 'text-le-rouge-bill'
+ : 'text-le-rouge-bill line-through-amendment'
+ : 'bg-le-jaune'}"
+ >{#if trunk && index === 0}={:else if deltaAtVectorIndexArray[0] < 0}-{:else if deltaAtVectorIndexArray[0] > 0}+{/if}{deltaFormatter(
+ deltaAtVectorIndexArray[0] ?? 0,
+ )}</span
>
- <span class="text-white blur">value €</span>
- </span>
{/if}
- {#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
+ </div>
+ <div class="mx-4 w-1/2">
+ {#if trunk && index !== 0}
<span
- class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
+ class={calculationName === firstCalculationName
+ ? rows.find(
+ (row) => row.calculationName === "bill",
+ ) === undefined
+ ? rows.find(
+ (row) => row.calculationName === "amendment",
+ ) === undefined
+ ? "text-gray-500"
+ : "text-gray-500 line-through-amendment"
+ : "text-gray-500 line-through-bill"
+ : calculationName === "bill"
+ ? rows.find(
+ (row) => row.calculationName === "amendment",
+ ) === undefined
+ ? "text-le-rouge-bill"
+ : "text-le-rouge-bill line-through-amendment"
+ : "bg-le-jaune text-gray-500"}
+ class:text-base={decomposition.name !==
+ displayMode.parametersVariableName}
+ class:text-2xl={decomposition.name ===
+ displayMode.parametersVariableName}
+ class:font-bold={decomposition.name ===
+ displayMode.parametersVariableName}
+ ><span
+ class="content-center pr-1 font-normal text-gray-500"
+ >=</span
+ >{deltaFormatter(
+ deltaAtVectorIndexArray[1] ?? 0,
+ )}</span
>
- <span class="text-white blur">value €</span>
- </span>
- {/if}
- <!--Valeur dispositifs-->
- {:else}
- <div class="flex w-full justify-center">
- <div class="mx-4 w-1/2">
- <span
- class="text-base font-bold {calculationName ===
- firstCalculationName
+ {:else}
+ <span
+ class="text-base font-bold {calculationName ===
+ firstCalculationName
+ ? rows.find(
+ (row) => row.calculationName === 'bill',
+ ) === undefined
? rows.find(
- (row) => row.calculationName === 'bill',
+ (row) => row.calculationName === 'amendment',
) === undefined
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? ''
- : 'line-through-amendment'
- : 'line-through-bill'
- : calculationName === 'bill'
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-le-rouge-bill'
- : 'text-le-rouge-bill line-through-amendment'
- : 'bg-le-jaune'}"
- >{deltaFormatter(
- deltaAtVectorIndexArray[0] ?? 0,
- )}</span
- >
- </div>
- <div class="mx-4 w-1/2">
- <span
- class="text-base font-bold {calculationName ===
- firstCalculationName
+ ? ''
+ : 'line-through-amendment'
+ : 'line-through-bill'
+ : calculationName === 'bill'
? rows.find(
- (row) => row.calculationName === 'bill',
+ (row) => row.calculationName === 'amendment',
) === undefined
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? ''
- : 'line-through-amendment'
- : 'line-through-bill'
- : calculationName === 'bill'
- ? rows.find(
- (row) =>
- row.calculationName === 'amendment',
- ) === undefined
- ? 'text-le-rouge-bill'
- : 'text-le-rouge-bill line-through-amendment'
- : 'bg-le-jaune'}"
- >{deltaFormatter(
- deltaAtVectorIndexArray[1] ?? 0,
- )}</span
- >
- </div>
- </div>
- {/if}
- {/if}
- </div>
+ ? 'text-le-rouge-bill'
+ : 'text-le-rouge-bill line-through-amendment'
+ : 'bg-le-jaune'}"
+ >{#if trunk && index === 0}={:else if deltaAtVectorIndexArray[1] < 0}-{:else if deltaAtVectorIndexArray[1] > 0}+{/if}{deltaFormatter(
+ deltaAtVectorIndexArray[1] ?? 0,
+ )}</span
+ >
+ {/if}
+ </div>
+ </div>
+ {/if}
</div>
- {/if}
- {/each}
+ {/each}
+ </div>
</div>
- {/each}
- </div>
+ </div>
+ {/each}
</div>
{/if}
+
+<style lang="postcss">
+ .fond {
+ background-color: #ffffff;
+ /* Polka dots - Heropatterns.com échelle réduite */
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23A0A0A0' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+ }
+</style>
--
GitLab