diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte index f0dc3d9c662e7dbf15abc1a0285f92018ba7f061..c519be7950e2154ab038d9e924e8681ec5d980c4 100644 --- a/src/lib/components/test_cases/TestCaseView.svelte +++ b/src/lib/components/test_cases/TestCaseView.svelte @@ -29,6 +29,8 @@ } from "$lib/situations" import { retrieveVariableSummaryByName } from "$lib/variables" + import ValueChange from "./ValueChange.svelte" + export let calculationName: CalculationName export let decompositionByName: DecompositionByName export let evaluationByNameArrayByCalculationName: EvaluationByNameArrayByCalculationName @@ -459,36 +461,26 @@ Revenus disponibles du cas type /an </p> </div> - <div class="place-self-center "> + <div class="place-self-center"> <p - class=" text-2xl font-bold" + class="font-bold text-2xl" title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence" > - <span class="line-through-bill"> - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.law[situationIndex][ - rootDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - </span> - {#if $billName !== undefined} - <span class="text-le-rouge-pjl line-through-reform"> - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.bill[situationIndex][ + <ValueChange + amendmentValue={Object.keys($reform).length === 0 + ? undefined + : evaluationByNameArrayByCalculationName.amendment[situationIndex][ rootDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - </span> - {/if} - {#if Object.keys($reform).length > 0} - <span class="text-black bg-le-jaune px-1"> - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.amendment[situationIndex][ + ].deltaAtVectorIndex ?? 0} + billValue={$billName === undefined + ? undefined + : evaluationByNameArrayByCalculationName.bill[situationIndex][ rootDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - </span> - {/if} + ].deltaAtVectorIndex ?? 0} + lawValue={evaluationByNameArrayByCalculationName.law[situationIndex][ + rootDecompositionName + ].deltaAtVectorIndex ?? 0} + /> </p> </div> @@ -503,29 +495,21 @@ class="text-base" title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence" > - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.law[situationIndex][ - firstDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - {#if $billName !== undefined} - <span class="text-le-rouge-pjl"> - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.bill[situationIndex][ + <ValueChange + amendmentValue={Object.keys($reform).length === 0 + ? undefined + : evaluationByNameArrayByCalculationName.amendment[situationIndex][ firstDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - </span> - {/if} - {#if Object.keys($reform).length > 0} - <span class="text-black bg-le-jaune px-1"> - {euroAmountFormatter.format( - evaluationByNameArrayByCalculationName.amendment[situationIndex][ + ].deltaAtVectorIndex ?? 0} + billValue={$billName === undefined + ? undefined + : evaluationByNameArrayByCalculationName.bill[situationIndex][ firstDecompositionName - ].deltaAtVectorIndex ?? 0, - )} - </span> - {/if} + ].deltaAtVectorIndex ?? 0} + lawValue={evaluationByNameArrayByCalculationName.law[situationIndex][ + firstDecompositionName + ].deltaAtVectorIndex ?? 0} + /> </p> </div> @@ -542,38 +526,30 @@ class="text-base" title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence" > - {euroAmountFormatter.format( - (evaluationByNameArrayByCalculationName.law[situationIndex][ - rootDecompositionName - ].deltaAtVectorIndex ?? 0) - - (evaluationByNameArrayByCalculationName.law[situationIndex][ - firstDecompositionName - ].deltaAtVectorIndex ?? 0), - )} - {#if $billName !== undefined} - <span class="text-le-rouge-pjl"> - {euroAmountFormatter.format( - (evaluationByNameArrayByCalculationName.bill[situationIndex][ + <ValueChange + amendmentValue={Object.keys($reform).length === 0 + ? undefined + : (evaluationByNameArrayByCalculationName.amendment[situationIndex][ rootDecompositionName ].deltaAtVectorIndex ?? 0) - - (evaluationByNameArrayByCalculationName.bill[situationIndex][ - firstDecompositionName - ].deltaAtVectorIndex ?? 0), - )} - </span> - {/if} - {#if Object.keys($reform).length > 0} - <span class="text-le-rouge-pjl"> - {euroAmountFormatter.format( (evaluationByNameArrayByCalculationName.amendment[situationIndex][ + firstDecompositionName + ].deltaAtVectorIndex ?? 0)} + billValue={$billName === undefined + ? undefined + : (evaluationByNameArrayByCalculationName.bill[situationIndex][ rootDecompositionName ].deltaAtVectorIndex ?? 0) - - (evaluationByNameArrayByCalculationName.amendment[situationIndex][ - firstDecompositionName - ].deltaAtVectorIndex ?? 0), - )} - </span> - {/if} + (evaluationByNameArrayByCalculationName.bill[situationIndex][ + firstDecompositionName + ].deltaAtVectorIndex ?? 0)} + lawValue={(evaluationByNameArrayByCalculationName.law[situationIndex][ + rootDecompositionName + ].deltaAtVectorIndex ?? 0) - + (evaluationByNameArrayByCalculationName.law[situationIndex][ + firstDecompositionName + ].deltaAtVectorIndex ?? 0)} + /> </p> </div> </div> diff --git a/src/lib/components/test_cases/ValueChange.svelte b/src/lib/components/test_cases/ValueChange.svelte new file mode 100644 index 0000000000000000000000000000000000000000..43f3a0fe3172cb23cd16bb030cf9297b091ff397 --- /dev/null +++ b/src/lib/components/test_cases/ValueChange.svelte @@ -0,0 +1,65 @@ +<script lang="ts"> + const euroAmountFormatter = new Intl.NumberFormat("fr-FR", { + currency: "EUR", + maximumFractionDigits: 0, + minimumFractionDigits: 0, + style: "currency", + }) + + export let amendmentValue: number | undefined + export let billValue: number | undefined + export let lawValue: number + + $: amendmentValueFormatted = + amendmentValue === undefined + ? undefined + : euroAmountFormatter.format(amendmentValue) + + $: billValueFormatted = + billValue === undefined ? undefined : euroAmountFormatter.format(billValue) + + $: lawValueFormatted = euroAmountFormatter.format(lawValue) + + $: showAmendmentValue = mustShowAmendmentValue( + amendmentValueFormatted, + billValueFormatted, + lawValueFormatted, + ) + + $: showBillValue = + billValueFormatted !== undefined && billValueFormatted !== lawValueFormatted + + function mustShowAmendmentValue( + amendmentValueFormatted: string | undefined, + billValueFormatted: string | undefined, + lawValueFormatted: string, + ) { + if (amendmentValueFormatted === undefined) { + return false + } + if ( + billValueFormatted !== undefined && + amendmentValueFormatted !== billValueFormatted + ) { + return true + } + return amendmentValueFormatted !== lawValueFormatted + } +</script> + +<span + class={showBillValue + ? "line-through-bill" + : showAmendmentValue + ? "line-through-amendment" + : ""}>{lawValueFormatted}</span +> +{#if showBillValue} + <span + class="text-le-rouge-bill" + class:line-through-amendment={showAmendmentValue}>{billValueFormatted}</span + > +{/if} +{#if showAmendmentValue} + <span class="text-black bg-le-jaune px-1">{amendmentValueFormatted}</span> +{/if} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f12bd1f0f0c1b6bb5e93a3ad072d0b09e0e3e735..b4389fa3d91cb0ae3c41d9596821bc95fd70602a 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -13,7 +13,7 @@ const config = { "le-bleu-light": "#d2dfff", "le-jaune": "#ded500", "le-jaune-dark": "#a6a00c", - "le-rouge-pjl": "#ff6b6b", + "le-rouge-bill": "#ff6b6b", "le-gris-dispositif": "#5E709E", "le-gris-dispositif-light": "#CCD3E7", "le-gris-dispositif-dark": "#2F406A", @@ -22,9 +22,9 @@ const config = { white: colors.white, }, blur: { - xs: '1.2px', - xxs: '0.8px', - } + xs: "1.2px", + xxs: "0.8px", + }, }, fontFamily: { sans: ["Lato", "sans-serif"], @@ -35,21 +35,21 @@ const config = { extend: {}, }, plugins: [ - function ({addUtilities}) { + function ({ addUtilities }) { const extendLineThrough = { - '.line-through-bill': { - 'textDecoration': 'line-through', - 'text-decoration-color': 'rgba(255, 107, 107,0.7)', - 'text-decoration-thickness': '2px' - }, - '.line-through-reform': { - 'textDecoration': 'line-through', - 'text-decoration-color': 'rgba(222, 213, 0,0.7)', - 'text-decoration-thickness': '2px' + ".line-through-amendment": { + textDecoration: "line-through", + "text-decoration-color": "rgba(222, 213, 0,0.7)", + "text-decoration-thickness": "2px", + }, + ".line-through-bill": { + textDecoration: "line-through", + "text-decoration-color": "rgba(255, 107, 107,0.7)", + "text-decoration-thickness": "2px", }, } addUtilities(extendLineThrough) - } + }, ], }