Skip to content
Snippets Groups Projects
Unverified Commit 56048dde authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Applique la structure de la nouvelle PaySlip au mode comparé, en gardant le... 

Applique la structure de la nouvelle PaySlip au mode comparé, en gardant le principe de l'affichage des montants
parent ee57853f
No related branches found
No related tags found
No related merge requests found
Pipeline #19676 passed
Stage: build
Show whitespace changes
Inline Side-by-side
src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
+ 384
− 434
View file @ 56048dde
...@@ -95,6 +95,21 @@ ...@@ -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) { function zoomIn(index: number) {
let visibleDecomposition = visibleDecompositions[index] let visibleDecomposition = visibleDecompositions[index]
if ( if (
...@@ -134,7 +149,7 @@ ...@@ -134,7 +149,7 @@
{#if visibleDecompositions.length > 0} {#if visibleDecompositions.length > 0}
<div> <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--> <!--Montants-nuls-->
<div class="mx-1 mb-3 flex justify-start"> <div class="mx-1 mb-3 flex justify-start">
<label class="inline-flex cursor-pointer items-center"> <label class="inline-flex cursor-pointer items-center">
...@@ -153,18 +168,15 @@ ...@@ -153,18 +168,15 @@
</label> </label>
</div> </div>
</div> </div>
<!-- Labels and compared amounts of decompositions -->
<!-- Feuille de paie--> <!-- Feuille de paie-->
<div class="flex justify-between">
<div class="w-3/5 flex-auto"> <div class="flex-auto">
{#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index} {#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index}
<!-- Ligne de la feuille de paie--> <!-- Ligne de la feuille de paie-->
<div <div
class="flex min-h-8 flex-col items-stretch justify-between border-t border-gray-200 px-4" class="flex min-h-8 border-t border-gray-200 px-4"
class:bg-gray-100={trunk && index !== 0}
class:border-gray-300={trunk && index !== 0} class:border-gray-300={trunk && index !== 0}
class:fond={decomposition.name === class:fond={decomposition.name === displayMode.parametersVariableName ||
displayMode.parametersVariableName ||
(displayMode.parametersVariableName && (displayMode.parametersVariableName &&
isChildOrDescendant( isChildOrDescendant(
shared.decompositionByName, shared.decompositionByName,
...@@ -173,50 +185,60 @@ ...@@ -173,50 +185,60 @@
))} ))}
class:text-lg={decomposition.name === class:text-lg={decomposition.name ===
displayMode.parametersVariableName} displayMode.parametersVariableName}
class:items-start={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"
}`}
>
&nbsp;
</div>
{/each}
<div class="flex w-full flex-col">
<!-- "Nom du dispositif" --> <!-- "Nom du dispositif" -->
<div class="flex h-7 items-center whitespace-nowrap"> <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} {#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 <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="flex w-full items-center"
class:border-t={index !== 0} class:whitespace-nowrap={decomposition.name !==
> displayMode.parametersVariableName}
{#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} <!-- Nom de la variable tronc, cliquable -->
<!-- Trunk decomposition node with parameters, in parameters mode => link -->
<a <a
class="cursor-pointer text-base hover:underline" 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"
href={newSimulationUrl({ class:font-bold={decomposition.name ===
...displayMode, displayMode.parametersVariableName}
mobileLaw: true, class:hover:absolute={decomposition.name !==
parametersVariableName: decomposition.name, displayMode.parametersVariableName}
})} href={getCorrectSimulationUrl(decomposition.name)}
data-sveltekit-noscroll data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a >{decomposition.short_label ?? decomposition.label}</a
> >
{/if}
</div> </div>
{:else} {:else if visibleChildren === undefined}
{#each [...iterToDepth(depth)] as _level} <!--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="ml-2 h-full border-l border-le-gris-dispositif">
&nbsp; <div
</div> class="flex h-full w-full items-center"
{/each} class:whitespace-nowrap={decomposition.name !==
{#if visibleChildren === undefined} displayMode.parametersVariableName}
<!-- Leaf node (except the first one, that belongs to trunk) --> >
<div class="ml-4"> <!--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()} {#if decomposition.obsolete || decomposition.last_value_still_valid_on === undefined || decomposition.last_value_still_valid_on < (new Date().getFullYear() - 2).toString()}
<Tooltip <Tooltip
allowFlip={false} allowFlip={false}
...@@ -225,7 +247,7 @@ ...@@ -225,7 +247,7 @@
initialPlacement="bottom" initialPlacement="bottom"
> >
<iconify-icon <iconify-icon
class="mr-1 shadow-none {decomposition.obsolete class="mr-0.5 shadow-none {decomposition.obsolete
? 'text-[#FF4133]' ? 'text-[#FF4133]'
: 'text-[#FFAC33]'}" : 'text-[#FFAC33]'}"
icon="material-symbols:warning-rounded" icon="material-symbols:warning-rounded"
...@@ -262,261 +284,201 @@ ...@@ -262,261 +284,201 @@
{/snippet} {/snippet}
</Tooltip> </Tooltip>
{/if} {/if}
</div> <!-- Nom de la variable non-trunk, leaf, cliquable -->
{#if displayMode.edit !== undefined}
<!-- Leaf decomposition node in variable inputs mode => link -->
<a <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" 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"
href={newSimulationUrl({ class:font-bold={decomposition.name ===
...displayMode, displayMode.parametersVariableName}
variableName: decomposition.name, class:hover:text-wrap={decomposition.name !==
})} displayMode.parametersVariableName}
data-sveltekit-noscroll href={getCorrectSimulationUrl(decomposition.name)}
>{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 data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a >{decomposition.short_label ?? decomposition.label}</a
> >
{/if} </div>
{: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} {:else}
<button class="p-0 text-black" onclick={() => zoomIn(index)}> <!-- 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-->
<iconify-icon
class="align-[-0.2rem] text-lg"
icon="ri-arrow-right-s-line"
></iconify-icon>
</button>
{/if}
{#if displayMode.edit !== undefined} <div
<!-- Non-lead decomposition node in variable inputs mode => no-link --> class="flex h-full w-full items-center justify-start"
class:whitespace-nowrap={decomposition.name !==
displayMode.parametersVariableName}
>
<button <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" 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={() => { onclick={() => {
// Non-leaf decomposition node in variable inputs mode => no-link
if (decomposition.open) { if (decomposition.open) {
zoomOut(index) zoomOut(index)
} else { } else {
zoomIn(index) zoomIn(index)
} }
}} // Leaf decomposition node with parameters in parameters mode => link
> if (displayMode.edit === undefined) {
{decomposition.short_label ?? decomposition.label} goto(getCorrectSimulationUrl(decomposition.name), {
</button> noScroll: true,
{: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 data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a >{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} {/if}
</div>
{/if} {/if}
{/if} {/each}
</div> </div>
<!-- "Valeur du dispositif"-->
<div class="flex w-full flex-col items-stretch">
{#each rows as { calculationName, deltaAtVectorIndexArray }} {#each rows as { calculationName, deltaAtVectorIndexArray }}
<!-- Decomposition compared amounts --> <div class="h-full justify-center pl-1 text-sm">
{#if !decomposition.open || trunk || index === 0} <!--Si la valeur charge, alors un squelette est affiché -->
<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"
>
&nbsp;
</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 showLoader && runningCalculationNames.length > 0}
{#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span {#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}
class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs" <span
class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
> >
<span class="text-white blur">value €</span> <span class="text-white blur">value €</span>
</span> </span>
{/if} {/if}
{#if runningCalculationNames.includes("bill")} {#if runningCalculationNames.includes("bill")}
<span <span
class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs" class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
> >
<span class="text-white blur">value €</span> <span class="text-white blur">value €</span>
</span> </span>
{/if} {/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0} {#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span <span
class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs" class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
> >
<span class="text-white blur">value €</span> <span class="text-white blur">value €</span>
</span> </span>
{/if} {/if}
<!--Valeurs du waterfall des montants intermédiaires --> <!--Si la valeur du cas type 0 est égale à la valeur du cas type 1 : Une seule valeur est alors affichée -->
{:else if trunk || index === 0} {:else if deltaAtVectorIndexArray[0] === deltaAtVectorIndexArray[1]}
{#if deltaAtVectorIndexArray[0] === deltaAtVectorIndexArray[1]} <div class="flex w-full justify-center">
{#if decomposition.open && trunk} {#if trunk && index !== 0}
<span class="mx-2 text-gray-500">=</span>
{/if}
<span <span
class="text-sm {calculationName === class={calculationName === firstCalculationName
firstCalculationName
? rows.find( ? rows.find(
(row) => row.calculationName === 'bill', (row) => row.calculationName === "bill",
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) => row.calculationName === "amendment",
) === undefined ) === undefined
? 'text-gray-500' ? "text-gray-500"
: 'text-gray-500 line-through-amendment' : "text-gray-500 line-through-amendment"
: 'text-gray-500 line-through-bill' : "text-gray-500 line-through-bill"
: calculationName === 'bill' : calculationName === "bill"
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) => row.calculationName === "amendment",
) === undefined ) === undefined
? 'text-le-rouge-bill' ? "text-le-rouge-bill"
: 'text-le-rouge-bill line-through-amendment' : "text-le-rouge-bill line-through-amendment"
: 'bg-le-jaune'}" : "bg-le-jaune text-gray-500"}
>{deltaFormatter( class:text-base={decomposition.name !==
deltaAtVectorIndexArray[0] ?? 0, displayMode.parametersVariableName}
)}</span 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} {: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 <span
class="text-right text-sm {calculationName === class="font-bold {calculationName ===
firstCalculationName firstCalculationName
? rows.find( ? rows.find(
(row) => row.calculationName === 'bill', (row) => row.calculationName === 'bill',
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === 'amendment',
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-gray-500' ? ''
: 'text-gray-500 line-through-amendment' : 'line-through-amendment'
: 'text-gray-500 line-through-bill' : 'line-through-bill'
: calculationName === 'bill' : calculationName === 'bill'
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === 'amendment',
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-le-rouge-bill' ? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment' : 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}" : 'bg-le-jaune'}"
>{deltaFormatter( class:opacity-20={decomposition.open}
deltaAtVectorIndexArray[0] ?? 0, class:text-base={decomposition.name !==
)}</span 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}
</div> </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"> <div class="mx-4 w-1/2">
{#if decomposition.open && trunk} {#if trunk && index !== 0}
<span class="mx-2 text-gray-500">=</span>
{/if}
<span <span
class="text-left text-sm {calculationName === class={calculationName === firstCalculationName
firstCalculationName
? rows.find( ? rows.find(
(row) => row.calculationName === 'bill', (row) => row.calculationName === "bill",
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === "amendment",
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-gray-500' ? "text-gray-500"
: 'text-gray-500 line-through-amendment' : "text-gray-500 line-through-amendment"
: 'text-gray-500 line-through-bill' : "text-gray-500 line-through-bill"
: calculationName === 'bill' : calculationName === "bill"
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === "amendment",
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-le-rouge-bill' ? "text-le-rouge-bill"
: 'text-le-rouge-bill line-through-amendment' : "text-le-rouge-bill line-through-amendment"
: 'bg-le-jaune'}" : "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( >{deltaFormatter(
deltaAtVectorIndexArray[1] ?? 0, deltaAtVectorIndexArray[0] ?? 0,
)}</span )}</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-->
{:else} {:else}
<span <span
class="text-base font-bold {calculationName === class="text-base font-bold {calculationName ===
...@@ -537,63 +499,46 @@ ...@@ -537,63 +499,46 @@
? 'text-le-rouge-bill' ? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment' : 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}" : 'bg-le-jaune'}"
>{deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span >{#if trunk && index === 0}={:else if deltaAtVectorIndexArray[0] < 0}-{:else if deltaAtVectorIndexArray[0] > 0}+{/if}{deltaFormatter(
> deltaAtVectorIndexArray[0] ?? 0,
{/if} )}</span
{: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} {/if}
<!--Valeur dispositifs--> </div>
{:else}
<div class="flex w-full justify-center">
<div class="mx-4 w-1/2"> <div class="mx-4 w-1/2">
{#if trunk && index !== 0}
<span <span
class="text-base font-bold {calculationName === class={calculationName === firstCalculationName
firstCalculationName
? rows.find( ? rows.find(
(row) => row.calculationName === 'bill', (row) => row.calculationName === "bill",
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === "amendment",
row.calculationName === 'amendment',
) === undefined ) === undefined
? '' ? "text-gray-500"
: 'line-through-amendment' : "text-gray-500 line-through-amendment"
: 'line-through-bill' : "text-gray-500 line-through-bill"
: calculationName === 'bill' : calculationName === "bill"
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === "amendment",
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-le-rouge-bill' ? "text-le-rouge-bill"
: 'text-le-rouge-bill line-through-amendment' : "text-le-rouge-bill line-through-amendment"
: 'bg-le-jaune'}" : "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( >{deltaFormatter(
deltaAtVectorIndexArray[0] ?? 0, deltaAtVectorIndexArray[1] ?? 0,
)}</span )}</span
> >
</div> {:else}
<div class="mx-4 w-1/2">
<span <span
class="text-base font-bold {calculationName === class="text-base font-bold {calculationName ===
firstCalculationName firstCalculationName
...@@ -601,34 +546,39 @@ ...@@ -601,34 +546,39 @@
(row) => row.calculationName === 'bill', (row) => row.calculationName === 'bill',
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === 'amendment',
row.calculationName === 'amendment',
) === undefined ) === undefined
? '' ? ''
: 'line-through-amendment' : 'line-through-amendment'
: 'line-through-bill' : 'line-through-bill'
: calculationName === 'bill' : calculationName === 'bill'
? rows.find( ? rows.find(
(row) => (row) => row.calculationName === 'amendment',
row.calculationName === 'amendment',
) === undefined ) === undefined
? 'text-le-rouge-bill' ? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment' : 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}" : 'bg-le-jaune'}"
>{deltaFormatter( >{#if trunk && index === 0}={:else if deltaAtVectorIndexArray[1] < 0}-{:else if deltaAtVectorIndexArray[1] > 0}+{/if}{deltaFormatter(
deltaAtVectorIndexArray[1] ?? 0, deltaAtVectorIndexArray[1] ?? 0,
)}</span )}</span
> >
</div>
</div>
{/if}
{/if} {/if}
</div> </div>
</div> </div>
{/if} {/if}
{/each}
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
</div>
{/each}
</div>
{/if} {/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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment