From 2c41720e5ac4cac4a72ac9df7cf609baa3b077c2 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@assemblee-nationale.fr>
Date: Wed, 5 Feb 2025 10:34:17 +0100
Subject: [PATCH] =?UTF-8?q?Supprime=20les=20r=C3=A9f=C3=A9rences=20=C3=A0?=
=?UTF-8?q?=20la=20tab=20"dispositif"=20et=20r=C3=A9cup=C3=A8re=20le=20tic?=
=?UTF-8?q?ket=20carburant=20pour=20le=20waterfall=20concern=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/lib/components/WaterfallView.svelte | 131 +++++++----
.../test_cases/OilSpendingBill.svelte | 9 +-
.../components/test_cases/TestCaseView.svelte | 218 +++++-------------
src/routes/accueil/+page.svelte | 1 -
4 files changed, 152 insertions(+), 207 deletions(-)
diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte
index 9d40a15d8..7069e5147 100644
--- a/src/lib/components/WaterfallView.svelte
+++ b/src/lib/components/WaterfallView.svelte
@@ -2,6 +2,7 @@
import type { VariableByName } from "@openfisca/json-model"
import { goto } from "$app/navigation"
+ import OilSpendingBill from "$lib/components/test_cases/OilSpendingBill.svelte"
import TestCaseGraph from "$lib/components/test_cases/TestCaseGraph.svelte"
import Tooltip from "$lib/components/Tooltip.svelte"
import ValueChange from "$lib/components/ValueChange.svelte"
@@ -29,9 +30,10 @@
} from "$lib/situations"
import { newSimulationUrl } from "$lib/urls"
import { removeNegativeZero } from "$lib/values"
- import type {
- ValuesByCalculationNameByVariableName,
- VariableValue,
+ import {
+ oilTypes,
+ type ValuesByCalculationNameByVariableName,
+ type VariableValue,
} from "$lib/variables"
interface Props {
@@ -80,6 +82,15 @@
const householdEntity = entityByKey[householdEntityKey]
const personEntity = entityByKey[personEntityKey]
+ const oilSpendings = oilTypes.map((name) => ({
+ depenseTtcVariableName: `depense_${name}_ttc`,
+ nombreLitresVariableName: `nombre_litres_${name}`,
+ // prixTtcLitreVariableName: `prix_${name}_hors_remise_ttc_sortie`,
+ prixTtcLitreVariableName: `prix_${name}_ttc`,
+ ticpeVariableName: `${name}_ticpe`,
+ tvaVariableName: `tva_sur_${name}`,
+ }))
+
let useRevaluationInsteadOfLaw = $derived(revaluationName !== undefined)
let firstCalculationName = $derived(
@@ -333,7 +344,7 @@
<!--Ce composant se découpe en 3 zones :
- ZONE 1 : FEUILLE DE PAIE
- ZONE 2 : VARIALBES COMPLÉMENTAIRES À LA FEUILLE DE PAIE
-- ZONE 3 : GRAPHIQUE DES CAS TYPES
+- ZONE 3 : TICKET DE CARBURANT & GRAPHIQUE DES CAS TYPES
-->
{#if visibleDecompositions.length > 0}
@@ -776,52 +787,70 @@
</div>
{/if}
- <!--ZONE 3 : GRAPHIQUE DES CAS TYPES-->
- {#if firstPersonActivity !== "inactif"}
- <button
- class="mt-10 flex w-full items-center gap-2 border-b px-4 py-2 text-start text-neutral-600 transition-all hover:bg-neutral-100 active:bg-neutral-200"
- onclick={() => {
- if (situation.slider === undefined) {
- requestAxesCalculation()
- trackTestCaseGraph(firstPersonActivity)
- } else {
- removeSituationSlider()
- }
- }}
- >
- <iconify-icon class="text-lg" icon="ri-line-chart-fill"></iconify-icon>
- <span class="flex-1 font-bold">
- Voir ce cas type sur un graphique faisant évoluer {#if firstPersonActivity === "actif"}
- le salaire
- {:else if firstPersonActivity === "retraite"}
- la retraite
- {:else if firstPersonActivity === "chomeur"}
- le chômage
- {:else}
- le revenu
- {/if}
- :
- </span>
- <iconify-icon
- class="text-3xl"
- icon={situation.slider !== undefined
- ? "ri-arrow-drop-down-line"
- : "ri-arrow-drop-right-line"}
- ></iconify-icon>
- </button>
- <TestCaseGraph
- {displayMode}
- {evaluationByName}
- evaluationByNameArray={shared.evaluationByNameArray}
- {situation}
- {situationIndex}
- {useRevaluationInsteadOfLaw}
- {valuesByCalculationNameByVariableName}
- {variableSummaryByName}
- vectorLength={shared.vectorLength}
- waterfall={shared.waterfall}
- {year}
- />
+ <!--ZONE 3.A : TICKET DE CARBURANT-->
+ {#if shared.waterfall.name === "disponible_to_disponible_apres_taxes_carburant"}
+ {#each oilSpendings as { depenseTtcVariableName, nombreLitresVariableName, prixTtcLitreVariableName, ticpeVariableName, tvaVariableName }}
+ <OilSpendingBill
+ {depenseTtcVariableName}
+ {nombreLitresVariableName}
+ {prixTtcLitreVariableName}
+ on:changeTestCaseToEditIndex
+ {situation}
+ {situationIndex}
+ {ticpeVariableName}
+ {tvaVariableName}
+ {valuesByCalculationNameByVariableName}
+ {year}
+ />
+ {/each}
+ {:else}
+ <!--ZONE 3.B : GRAPHIQUE DES CAS TYPES-->
+ {#if firstPersonActivity !== "inactif"}
+ <button
+ class="mt-10 flex w-full items-center gap-2 border-b px-4 py-2 text-start text-neutral-600 transition-all hover:bg-neutral-100 active:bg-neutral-200"
+ onclick={() => {
+ if (situation.slider === undefined) {
+ requestAxesCalculation()
+ trackTestCaseGraph(firstPersonActivity)
+ } else {
+ removeSituationSlider()
+ }
+ }}
+ >
+ <iconify-icon class="text-lg" icon="ri-line-chart-fill"></iconify-icon>
+ <span class="flex-1 font-bold">
+ Voir ce cas type sur un graphique faisant évoluer {#if firstPersonActivity === "actif"}
+ le salaire
+ {:else if firstPersonActivity === "retraite"}
+ la retraite
+ {:else if firstPersonActivity === "chomeur"}
+ le chômage
+ {:else}
+ le revenu
+ {/if}
+ :
+ </span>
+ <iconify-icon
+ class="text-3xl"
+ icon={situation.slider !== undefined
+ ? "ri-arrow-drop-down-line"
+ : "ri-arrow-drop-right-line"}
+ ></iconify-icon>
+ </button>
+ <TestCaseGraph
+ {displayMode}
+ {evaluationByName}
+ evaluationByNameArray={shared.evaluationByNameArray}
+ {situation}
+ {situationIndex}
+ {useRevaluationInsteadOfLaw}
+ {valuesByCalculationNameByVariableName}
+ {variableSummaryByName}
+ vectorLength={shared.vectorLength}
+ waterfall={shared.waterfall}
+ {year}
+ />
+ {/if}
{/if}
{/if}
@@ -829,6 +858,6 @@
.fond {
background-color: #ffffff;
/* Polka dots - Heropatterns.com échelle réduite */
- background-image: url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C0C0C0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
+ 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>
diff --git a/src/lib/components/test_cases/OilSpendingBill.svelte b/src/lib/components/test_cases/OilSpendingBill.svelte
index 1a6bb4869..d63251c3e 100644
--- a/src/lib/components/test_cases/OilSpendingBill.svelte
+++ b/src/lib/components/test_cases/OilSpendingBill.svelte
@@ -168,7 +168,7 @@
nombreLitres,
depenseTtcVariable.name,
)}
- <div class=" bg-slate-100 p-2 pb-4 shadow-md">
+ <div class="fond m-4 max-w-md border bg-gray-50 p-2 pb-4 shadow-md">
<h3
class="mb-2 border-b border-black pb-2 text-center font-black uppercase"
>
@@ -290,3 +290,10 @@
{/if}
</div>
{/if}
+
+<style lang="postcss">
+ .fond {
+ background-color: #ffffff;
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C0C0C0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+ }
+</style>
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 89a1d0f43..70d91c3b3 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -1,13 +1,8 @@
<script lang="ts">
- import { getContext } from "svelte"
- import type { Writable } from "svelte/store"
-
import SourcesMethodTooltip from "$lib/components/SourcesMethodTooltip.svelte"
- import OilSpendingBill from "$lib/components/test_cases/OilSpendingBill.svelte"
import TestCaseSummary from "$lib/components/test_cases/TestCaseSummary.svelte"
import WaterfallView from "$lib/components/WaterfallView.svelte"
- import WaterfallViewFocusDispositif from "$lib/components/WaterfallViewFocusDispositif.svelte"
import { waterfalls } from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays"
import type { Situation } from "$lib/situations"
@@ -36,7 +31,6 @@
highlightDecomposition = false,
situation,
situationIndex,
- tabsConfig,
valuesByCalculationNameByVariableName,
year,
}: Props = $props()
@@ -51,12 +45,10 @@
}))
let evaluationByName = $derived(shared.evaluationByNameArray[situationIndex])
-
- const showNulls = getContext("showNulls") as Writable<boolean>
</script>
<div
- class="mx-0 place-self-start overflow-hidden rounded-lg border border-gray-200 shadow-md md:mb-5"
+ class="mx-0 place-self-start overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md md:mb-5"
id="situation_{situationIndex}"
>
{#if displayMode.edit === undefined}
@@ -73,157 +65,75 @@
{year}
/>
</div>
- <!--
+ </div>
+ {/if}
+
+ {#if variableSummaryByName !== undefined}
+ {@const completeVariableSummaryByName =
+ billName === undefined
+ ? variableSummaryByName
+ : variableSummaryByNameByReformName[billName]}
+ <div class="flex w-full justify-between bg-gray-200">
+ <!--Impacts et waterfall-->
<div
- class="flex w-full overflow-hidden bg-gray-100 shadow-inner"
- id="situations_{situationIndex}_tabs"
+ class="relative w-10/12 bg-white py-4 md:w-11/12"
+ id="situation_{situationIndex}_waterfall"
>
- {#each tabsConfig.tabs as tabData}
- <TestCaseTab
+ <WaterfallView
+ {displayMode}
+ {evaluationByName}
+ {highlightDecomposition}
+ {situation}
+ {situationIndex}
+ variableSummaryByName={completeVariableSummaryByName}
+ {valuesByCalculationNameByVariableName}
+ {year}
+ />
+ </div>
+ <!--Onglets-->
+ <div
+ class="flex h-screen w-2/12 flex-col justify-start bg-gray-200 md:w-1/12"
+ id="situation_{situationIndex}_Employeur"
+ >
+ {#each waterfalls as { icon, label, name }}
+ <a
+ class="group flex h-[9em] shrink items-center justify-center shadow-inner"
+ class:bg-white={name === shared.waterfall.name}
+ class:hover:bg-gray-300={name !== shared.waterfall.name}
+ class:border-le-bleu={name === shared.waterfall.name}
+ class:border-r-4={name === shared.waterfall.name}
+ class:border-l={name !== shared.waterfall.name}
+ class:border-gray-300={name !== shared.waterfall.name}
+ class:shadow-none={name === shared.waterfall.name}
href={newSimulationUrl({
...displayMode,
- tab: tabData.tab,
+ waterfallName: name,
})}
- icon={tabData.icon}
- picto={tabData.picto}
- text={tabData.title}
- isActive={displayMode.tab === tabData.tab ||
- (tabData.tab === tabsConfig.defaultTab &&
- displayMode.tab === undefined)}
- isDisabled={tabData?.disabled ?? false}
- />
- {/each}
- </div>-->
- </div>
- {/if}
-
- {#if displayMode.tab === "dispositif" || (displayMode.tab === undefined && tabsConfig.defaultTab === "dispositif")}
- <div class="relative w-full bg-white px-8 py-5">
- {#if displayMode.parametersVariableName !== undefined}
- <div class="flex gap-5">
- <WaterfallViewFocusDispositif {displayMode} {situationIndex} />
-
- <!--TICKET DE CARBURANT-->
- {#if displayMode.parametersVariableName === "taxes_tous_carburants" || (displayMode.parametersVariableName !== undefined && oilTypes.some( (oilType) => displayMode.parametersVariableName?.includes(oilType), ))}
- {#each oilSpendings as { depenseTtcVariableName, nombreLitresVariableName, prixTtcLitreVariableName, ticpeVariableName, tvaVariableName }}
- <OilSpendingBill
- {depenseTtcVariableName}
- {nombreLitresVariableName}
- {prixTtcLitreVariableName}
- on:changeTestCaseToEditIndex
- {situation}
- {situationIndex}
- {ticpeVariableName}
- {tvaVariableName}
- {valuesByCalculationNameByVariableName}
- {year}
- />
- {/each}
- {/if}
- </div>
- <div
- class="mt-5 flex justify-start"
- id="situation_{situationIndex}_waterfall_showall"
- >
- <label class="inline-flex cursor-pointer items-center">
- <input
- type="checkbox"
- value=""
- class="peer sr-only"
- bind:checked={$showNulls}
- />
- <div
- class="peer relative h-6 w-11 shrink-0 rounded-full bg-gray-400 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-le-bleu peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0"
- ></div>
- <span class="ml-2"
- >Montrer tous les dispositifs, y compris si leur montant est à 0€.</span
- >
- </label>
- </div>
- {:else}
- <p>Aucun dispositif sélectionné.</p>
- <!-- <br/>-->
- <!-- <p>Choissez-en un</p>-->
- <!-- <ul>-->
- <!-- <li>- parmi ceux proposés à gauche, ou</li>-->
- <!-- <li>- dans la fiche de paie, ou</li>-->
- <!-- <li>- en lançant une recherche.</li>-->
- <!-- </ul>-->
- {/if}
- </div>
- {/if}
-
- {#if displayMode.tab === "fiche_de_paie" || (displayMode.tab === undefined && tabsConfig.defaultTab === "fiche_de_paie")}
- <div class="">
- {#if variableSummaryByName !== undefined}
- {@const completeVariableSummaryByName =
- billName === undefined
- ? variableSummaryByName
- : variableSummaryByNameByReformName[billName]}
- <div class="flex w-full justify-between bg-gray-200">
- <!--Impacts et waterfall-->
- <div
- class="relative w-10/12 bg-white py-4 md:w-11/12"
- id="situation_{situationIndex}_waterfall"
+ data-sveltekit-noscroll
>
- <WaterfallView
- {displayMode}
- {evaluationByName}
- {highlightDecomposition}
- {situation}
- {situationIndex}
- variableSummaryByName={completeVariableSummaryByName}
- {valuesByCalculationNameByVariableName}
- {year}
- />
- </div>
- <!--Onglets-->
- <div
- class="flex h-screen w-2/12 flex-col justify-start bg-gray-200 md:w-1/12"
- id="situation_{situationIndex}_Employeur"
- >
- {#each waterfalls as { icon, label, name }}
- <a
- class="group flex h-[9em] shrink items-center justify-center shadow-inner"
- class:bg-white={name === shared.waterfall.name}
- class:hover:bg-gray-300={name !== shared.waterfall.name}
- class:border-le-bleu={name === shared.waterfall.name}
- class:border-r-4={name === shared.waterfall.name}
- class:border-l={name !== shared.waterfall.name}
- class:border-gray-300={name !== shared.waterfall.name}
- class:shadow-none={name === shared.waterfall.name}
- href={newSimulationUrl({
- ...displayMode,
- waterfallName: name,
- })}
- data-sveltekit-noscroll
- >
- <div class="origin-center rotate-90">
- <div class="mr-6 flex">
- {#if icon !== undefined}
- <img
- class="block origin-center -rotate-90"
- alt="Icone pour {label}"
- src={icon}
- />
- {/if}
- <span
- class="ml-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
- class:text-le-bleu={name === shared.waterfall.name}
- class:group-hover:text-black={name !==
- shared.waterfall.name}
- class:font-bold={name === shared.waterfall.name}
- >
- {label}
- </span>
- </div>
- </div>
- </a>
- {/each}
- </div>
- </div>
- <SourcesMethodTooltip {displayMode} />
- {/if}
+ <div class="origin-center rotate-90">
+ <div class="mr-6 flex">
+ {#if icon !== undefined}
+ <img
+ class="block origin-center -rotate-90"
+ alt="Icone pour {label}"
+ src={icon}
+ />
+ {/if}
+ <span
+ class="ml-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
+ class:text-le-bleu={name === shared.waterfall.name}
+ class:group-hover:text-black={name !== shared.waterfall.name}
+ class:font-bold={name === shared.waterfall.name}
+ >
+ {label}
+ </span>
+ </div>
+ </div>
+ </a>
+ {/each}
+ </div>
</div>
+ <SourcesMethodTooltip {displayMode} />
{/if}
</div>
diff --git a/src/routes/accueil/+page.svelte b/src/routes/accueil/+page.svelte
index a2fdc37df..ffcd192a0 100644
--- a/src/routes/accueil/+page.svelte
+++ b/src/routes/accueil/+page.svelte
@@ -251,7 +251,6 @@
class="flex w-full flex-col px-8 py-3 hover:bg-[#EEEDE1] active:bg-[#E2E1CD] 2xl:py-4"
href={newSimulationUrl({
...displayMode,
- tab: "dispositif",
parametersVariableName: variable.name,
})}
onclick={() => {
--
GitLab