Skip to content
Snippets Groups Projects
Unverified Commit 0ea9f794 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 30960972
No related branches found
No related tags found
1 merge request!302Resolve "Appliquer la nouvelle feuille de paie au mode comparaison"
This commit is part of merge request !302. Comments created here will be created in the context of that merge request.
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 @ 0ea9f794
......@@ -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,18 +168,15 @@
</label>
</div>
</div>
<!-- Labels and compared amounts of decompositions -->
<!-- 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}
<!-- 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="flex min-h-8 border-t border-gray-200 px-4"
class:border-gray-300={trunk && index !== 0}
class:fond={decomposition.name ===
displayMode.parametersVariableName ||
class:fond={decomposition.name === displayMode.parametersVariableName ||
(displayMode.parametersVariableName &&
isChildOrDescendant(
shared.decompositionByName,
......@@ -173,50 +185,60 @@
))}
class:text-lg={decomposition.name ===
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" -->
<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}
<!--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="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
class="flex w-full items-center"
class:whitespace-nowrap={decomposition.name !==
displayMode.parametersVariableName}
>
{:else}
<!-- Trunk decomposition node with parameters, in parameters mode => link -->
<!-- Nom de la variable tronc, cliquable -->
<a
class="cursor-pointer text-base hover:underline"
href={newSimulationUrl({
...displayMode,
mobileLaw: true,
parametersVariableName: decomposition.name,
})}
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
>
{/if}
</div>
{:else}
{#each [...iterToDepth(depth)] as _level}
<div class="ml-2 h-full border-l border-le-gris-dispositif">
&nbsp;
</div>
{/each}
{#if visibleChildren === undefined}
<!-- Leaf node (except the first one, that belongs to trunk) -->
<div class="ml-4">
{: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}
......@@ -225,7 +247,7 @@
initialPlacement="bottom"
>
<iconify-icon
class="mr-1 shadow-none {decomposition.obsolete
class="mr-0.5 shadow-none {decomposition.obsolete
? 'text-[#FF4133]'
: 'text-[#FFAC33]'}"
icon="material-symbols:warning-rounded"
......@@ -262,261 +284,201 @@
{/snippet}
</Tooltip>
{/if}
</div>
{#if displayMode.edit !== undefined}
<!-- Leaf decomposition node in variable inputs mode => link -->
<!-- Nom de la variable non-trunk, leaf, cliquable -->
<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,
})}
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
>
{/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>
</div>
{: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}
<!-- 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-->
{#if displayMode.edit !== undefined}
<!-- Non-lead decomposition node in variable inputs mode => no-link -->
<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 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={() => {
// Non-leaf decomposition node in variable inputs mode => no-link
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)
// Leaf decomposition node with parameters in parameters mode => link
if (displayMode.edit === undefined) {
goto(getCorrectSimulationUrl(decomposition.name), {
noScroll: true,
})
}
goto(
newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
}),
{ noScroll: true },
)
})}
}}
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}
</div>
{/if}
{/if}
{/each}
</div>
<!-- "Valeur du dispositif"-->
<div class="flex w-full flex-col items-stretch">
{#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"
>
&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-->
<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="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
{#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="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>
{/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<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>
{/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}
<!--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="text-sm {calculationName ===
firstCalculationName
class={calculationName === firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
(row) => row.calculationName === "bill",
) === undefined
? rows.find(
(row) => row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? 'text-gray-500'
: 'text-gray-500 line-through-amendment'
: 'text-gray-500 line-through-bill'
: calculationName === 'bill'
? "text-gray-500"
: "text-gray-500 line-through-amendment"
: "text-gray-500 line-through-bill"
: calculationName === "bill"
? rows.find(
(row) => row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}"
>{deltaFormatter(
deltaAtVectorIndexArray[0] ?? 0,
)}</span
? "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}
<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 ===
class="font-bold {calculationName ===
firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
) === undefined
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === 'amendment',
) === undefined
? 'text-gray-500'
: 'text-gray-500 line-through-amendment'
: 'text-gray-500 line-through-bill'
? ''
: 'line-through-amendment'
: 'line-through-bill'
: calculationName === 'bill'
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === 'amendment',
) === undefined
? '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}
</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 decomposition.open && trunk}
<span class="mx-2 text-gray-500">=</span>
{/if}
{#if trunk && index !== 0}
<span
class="text-left text-sm {calculationName ===
firstCalculationName
class={calculationName === firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
(row) => row.calculationName === "bill",
) === undefined
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? 'text-gray-500'
: 'text-gray-500 line-through-amendment'
: 'text-gray-500 line-through-bill'
: calculationName === 'bill'
? "text-gray-500"
: "text-gray-500 line-through-amendment"
: "text-gray-500 line-through-bill"
: calculationName === "bill"
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}"
? "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,
deltaAtVectorIndexArray[0] ?? 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-->
{:else}
<span
class="text-base font-bold {calculationName ===
......@@ -537,63 +499,46 @@
? '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"
>{#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}
<!--Valeur dispositifs-->
{:else}
<div class="flex w-full justify-center">
</div>
<div class="mx-4 w-1/2">
{#if trunk && index !== 0}
<span
class="text-base font-bold {calculationName ===
firstCalculationName
class={calculationName === firstCalculationName
? rows.find(
(row) => row.calculationName === 'bill',
(row) => row.calculationName === "bill",
) === undefined
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? ''
: 'line-through-amendment'
: 'line-through-bill'
: calculationName === 'bill'
? "text-gray-500"
: "text-gray-500 line-through-amendment"
: "text-gray-500 line-through-bill"
: calculationName === "bill"
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === "amendment",
) === undefined
? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}"
? "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,
deltaAtVectorIndexArray[1] ?? 0,
)}</span
>
</div>
<div class="mx-4 w-1/2">
{:else}
<span
class="text-base font-bold {calculationName ===
firstCalculationName
......@@ -601,34 +546,39 @@
(row) => row.calculationName === 'bill',
) === undefined
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === 'amendment',
) === undefined
? ''
: 'line-through-amendment'
: 'line-through-bill'
: calculationName === 'bill'
? rows.find(
(row) =>
row.calculationName === 'amendment',
(row) => row.calculationName === 'amendment',
) === undefined
? 'text-le-rouge-bill'
: 'text-le-rouge-bill line-through-amendment'
: 'bg-le-jaune'}"
>{deltaFormatter(
>{#if trunk && index === 0}={:else if deltaAtVectorIndexArray[1] < 0}-{:else if deltaAtVectorIndexArray[1] > 0}+{/if}{deltaFormatter(
deltaAtVectorIndexArray[1] ?? 0,
)}</span
>
</div>
</div>
{/if}
{/if}
</div>
</div>
{/if}
{/each}
</div>
{/each}
</div>
</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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment