From 309609725d1f0d8f3edf0f3ef62f6798c62a0742 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@assemblee-nationale.fr>
Date: Mon, 10 Mar 2025 10:38:27 +0100
Subject: [PATCH] =?UTF-8?q?Modifie=20la=20div=20g=C3=A9n=C3=A9rale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../compare_mode/PaySlipCompareView.svelte | 796 +++++++++---------
1 file changed, 421 insertions(+), 375 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 9243424b9..162b81f26 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
@@ -6,9 +6,10 @@
import { goto } from "$app/navigation"
import { page } from "$app/stores"
import Tooltip from "$lib/components/ui_transverse_components/Tooltip.svelte"
- import type {
- EvaluationByName,
- VisibleDecompositionForComparison,
+ import {
+ type EvaluationByName,
+ type VisibleDecompositionForComparison,
+ isChildOrDescendant,
} from "$lib/decompositions"
import { buildVisibleDecompositionsForComparison } from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays"
@@ -153,257 +154,258 @@
</div>
</div>
<!-- Labels and compared amounts of decompositions -->
- <div>
- {#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index}
- <!-- Decomposition label -->
- <div class="flex h-7 items-center whitespace-nowrap">
- {#if trunk}
- <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
+ <!-- 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}
+ >
+ <!-- "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}
- <!-- 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"
- >
- <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"
+ {#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="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}
- </div>
+ <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"
+ >
+ <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}
+ </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}
+ <!-- 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({
+ {#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,
- }),
- { noScroll: true },
- )
- })}
- data-sveltekit-noscroll
- >{decomposition.short_label ?? decomposition.label}</a
- >
+ })}
+ 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}
- {/if}
- {/if}
- </div>
+ </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">
-
+ {#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>
- {/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
- ? 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
- >
- {:else}
- <div class="flex w-full justify-center">
- <div class="mx-4 w-1/2">
+ {/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-right text-sm {calculationName ===
+ class="text-sm {calculationName ===
firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
@@ -425,112 +427,97 @@
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}
+ {: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="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
+ class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
>
- </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-->
- {:else}
- <span
- 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'}"
- >{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"
- >
- <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 dispositifs-->
- {:else}
- <div class="flex w-full justify-center">
- <div class="mx-4 w-1/2">
+ <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-->
+ {:else}
<span
class="text-base font-bold {calculationName ===
firstCalculationName
@@ -552,37 +539,96 @@
: 'bg-le-jaune'}"
>{deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span
>
- </div>
- <div class="mx-4 w-1/2">
- <span
- 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'}"
- >{deltaFormatter(deltaAtVectorIndexArray[1] ?? 0)}</span
- >
- </div>
- </div>
- {/if}
- {/if}
- </div>
- </div>
- {/if}
+ {/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"
+ >
+ <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 dispositifs-->
+ {:else}
+ <div class="flex w-full justify-center">
+ <div class="mx-4 w-1/2">
+ <span
+ 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'}"
+ >{deltaFormatter(
+ deltaAtVectorIndexArray[0] ?? 0,
+ )}</span
+ >
+ </div>
+ <div class="mx-4 w-1/2">
+ <span
+ 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'}"
+ >{deltaFormatter(
+ deltaAtVectorIndexArray[1] ?? 0,
+ )}</span
+ >
+ </div>
+ </div>
+ {/if}
+ {/if}
+ </div>
+ </div>
+ {/if}
+ {/each}
+ </div>
{/each}
- {/each}
+ </div>
</div>
{/if}
--
GitLab