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

Modifie la div générale

parent 420d5f8b
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
+ 421
− 375
View file @ 909175eb
...@@ -6,9 +6,10 @@ ...@@ -6,9 +6,10 @@
import { goto } from "$app/navigation" import { goto } from "$app/navigation"
import { page } from "$app/stores" import { page } from "$app/stores"
import Tooltip from "$lib/components/ui_transverse_components/Tooltip.svelte" import Tooltip from "$lib/components/ui_transverse_components/Tooltip.svelte"
import type { import {
EvaluationByName, type EvaluationByName,
VisibleDecompositionForComparison, type VisibleDecompositionForComparison,
isChildOrDescendant,
} from "$lib/decompositions" } from "$lib/decompositions"
import { buildVisibleDecompositionsForComparison } from "$lib/decompositions" import { buildVisibleDecompositionsForComparison } from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays" import type { DisplayMode } from "$lib/displays"
...@@ -153,11 +154,31 @@ ...@@ -153,11 +154,31 @@
</div> </div>
</div> </div>
<!-- Labels and compared amounts of decompositions --> <!-- Labels and compared amounts of decompositions -->
<div> <!-- Feuille de paie-->
<div class="flex justify-between">
<div class="w-3/5 flex-auto">
{#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index} {#each visibleDecompositions as { decomposition, depth, rows, trunk, visibleChildren }, index}
<!-- Decomposition label --> <!-- 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"> <div class="flex h-7 items-center whitespace-nowrap">
{#if trunk} {#if trunk && index !== 0}
<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="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} class:border-t={index !== 0}
...@@ -222,12 +243,16 @@ ...@@ -222,12 +243,16 @@
⚠️ Ce dispositif n'est peut-être pas à jour ⚠️ Ce dispositif n'est peut-être pas à jour
</h3> </h3>
</div> </div>
<div class="px-3 py-2 text-sm font-light text-gray-500"> <div
class="px-3 py-2 text-sm font-light text-gray-500"
>
Dernière relecture : Dernière relecture :
{#if decomposition.last_value_still_valid_on === undefined} {#if decomposition.last_value_still_valid_on === undefined}
date indéterminée date indéterminée
{:else}{dateFormatter( {:else}{dateFormatter(
new Date(decomposition.last_value_still_valid_on), new Date(
decomposition.last_value_still_valid_on,
),
)} )}
{/if} {/if}
{#if decomposition.obsolete} {#if decomposition.obsolete}
...@@ -332,7 +357,9 @@ ...@@ -332,7 +357,9 @@
{#if !decomposition.open && !trunk} {#if !decomposition.open && !trunk}
<div class="absolute"> <div class="absolute">
{#each iterToDepth(depth)} {#each iterToDepth(depth)}
<div class="ml-2 h-full border-l border-le-gris-dispositif"> <div
class="ml-2 h-full border-l border-le-gris-dispositif"
>
&nbsp; &nbsp;
</div> </div>
{/each} {/each}
...@@ -378,9 +405,11 @@ ...@@ -378,9 +405,11 @@
<span class="mx-2 text-gray-500">=</span> <span class="mx-2 text-gray-500">=</span>
{/if} {/if}
<span <span
class="text-sm {calculationName === firstCalculationName class="text-sm {calculationName ===
? rows.find((row) => row.calculationName === 'bill') === firstCalculationName
undefined ? rows.find(
(row) => row.calculationName === 'bill',
) === undefined
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) => row.calculationName === 'amendment',
) === undefined ) === undefined
...@@ -394,7 +423,9 @@ ...@@ -394,7 +423,9 @@
? '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 >{deltaFormatter(
deltaAtVectorIndexArray[0] ?? 0,
)}</span
> >
{:else} {:else}
<div class="flex w-full justify-center"> <div class="flex w-full justify-center">
...@@ -409,14 +440,16 @@ ...@@ -409,14 +440,16 @@
(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'
...@@ -437,14 +470,16 @@ ...@@ -437,14 +470,16 @@
(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'
...@@ -486,8 +521,9 @@ ...@@ -486,8 +521,9 @@
<span <span
class="text-base font-bold {calculationName === class="text-base font-bold {calculationName ===
firstCalculationName firstCalculationName
? rows.find((row) => row.calculationName === 'bill') === ? rows.find(
undefined (row) => row.calculationName === 'bill',
) === undefined
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) => row.calculationName === 'amendment',
) === undefined ) === undefined
...@@ -538,19 +574,23 @@ ...@@ -538,19 +574,23 @@
(row) => row.calculationName === 'bill', (row) => row.calculationName === 'bill',
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) =>
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.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'}"
>{deltaFormatter(deltaAtVectorIndexArray[0] ?? 0)}</span >{deltaFormatter(
deltaAtVectorIndexArray[0] ?? 0,
)}</span
> >
</div> </div>
<div class="mx-4 w-1/2"> <div class="mx-4 w-1/2">
...@@ -561,19 +601,23 @@ ...@@ -561,19 +601,23 @@
(row) => row.calculationName === 'bill', (row) => row.calculationName === 'bill',
) === undefined ) === undefined
? rows.find( ? rows.find(
(row) => row.calculationName === 'amendment', (row) =>
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.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'}"
>{deltaFormatter(deltaAtVectorIndexArray[1] ?? 0)}</span >{deltaFormatter(
deltaAtVectorIndexArray[1] ?? 0,
)}</span
> >
</div> </div>
</div> </div>
...@@ -583,6 +627,8 @@ ...@@ -583,6 +627,8 @@
</div> </div>
{/if} {/if}
{/each} {/each}
</div>
{/each} {/each}
</div> </div>
</div>
{/if} {/if}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment