Skip to content
Snippets Groups Projects
Commit 7247000a authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Utilise le même composant ArticleModal pour tous les types de paramètres

parent bb1a6fcd
No related branches found
No related tags found
1 merge request!98Paramètres organisés de l'impôt sur le revenu
Pipeline #5454 passed
......@@ -53,7 +53,90 @@
<div
class="my-8 inline-block w-full max-w-6xl transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
>
{#if billParameter.name === "impot_revenu.calcul_impot_revenu.plaf_qf.general"}
{#if billParameter.name === "impot_revenu.bareme_ir_depuis_1945.bareme"}
<div class="flex justify-between text-black">
<DialogTitle
as="h3"
class="text-xl font-thin text-le-gris-dispositif-dark md:text-xl"
>
<span class="font-normal">Paramètres :</span> Barème de l'impôt sur
le revenu
</DialogTitle>
<button
class="text-gray-400 hover:text-black"
on:click={closeModal}
type="button"
>
<Icon class="ml-2 h-10 w-10" icon="ri-close-line" /></button
>
</div>
<DialogDescription
as="div"
class="mt-2 rounded-r-md border-l-4 bg-gray-50 p-3 md:mt-6"
>
<h4
class="mb-4 font-serif text-2xl italic text-gray-700 md:text-3xl"
>
<Icon
class="mr-1 inline-flex h-7 w-7 place-self-center text-le-gris-dispositif-light"
icon="ri-map-pin-2-fill"
/>
<span class="font-bold">Article 197, I.1. </span> - Code général
des impôts
</h4>
<div class=" bg-gray-50 font-serif">
<p>
I. – En ce qui concerne les contribuables visés à l'article 4
B, il est fait application des règles suivantes pour le calcul
de l'impôt sur le revenu :
<br />
<br />
1. L'impôt est calculé en appliquant à la fraction de chaque part
de revenu qui excède
<span class="bg-le-gris-dispositif-light">10 225 €</span>
le taux de :
<br />
<br />
<span class="bg-le-gris-dispositif-light">11 %</span> pour
la fraction supérieure à
<span class="bg-le-gris-dispositif-light">10 225 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">26 070 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">30 %</span> pour
la fraction supérieure à
<span class="bg-le-gris-dispositif-light">26 070 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">74 545 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">41 %</span> pour
la fraction supérieure à
<span class="bg-le-gris-dispositif-light">74 545 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">160 336 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">45 %</span> pour
la fraction supérieure à
<span class="bg-le-gris-dispositif-light">160 336 €</span>.
</p>
</div>
<div class="mt-4 text-right text-sm text-gray-500">
<p class="">Extrait d'article à jour au 07 août 2022.</p>
<span class="text-sm text-gray-500 md:text-base">
<a
class="link"
href="https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000042907517/2022-08-07/"
target="_blank">Voir l'article sur Légifrance.fr</a
>
</span>
</div>
</DialogDescription>
{:else if billParameter.name === "impot_revenu.calcul_impot_revenu.plaf_qf.general"}
<div class="flex justify-between text-black">
<DialogTitle
as="h3"
......
<script lang="ts">
import Icon from "@iconify/svelte"
import {
Dialog,
DialogDescription,
DialogOverlay,
DialogTitle,
Transition,
TransitionChild,
} from "@rgossiaux/svelte-headlessui"
export let isOpen = false
function closeModal() {
isOpen = false
}
</script>
<Transition appear show={isOpen}>
<Dialog
as="div"
class="fixed inset-0 z-20 overflow-y-auto"
on:close={closeModal}
>
<div class="min-h-screen px-4 text-center">
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<DialogOverlay
class="fixed inset-0 bg-gray-500 opacity-50 transition-opacity"
/>
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="inline-block h-[10vh]" aria-hidden="true"> &#8203; </span>
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div
class="my-8 inline-block w-full max-w-6xl transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
>
<div class="flex justify-between text-black">
<DialogTitle
as="h3"
class="text-xl font-thin text-le-gris-dispositif-dark md:text-xl"
>
<span class="font-normal">Paramètres :</span> Barème de l'impôt sur
le revenu
</DialogTitle>
<button
class="text-gray-400 hover:text-black"
on:click={closeModal}
type="button"
>
<Icon class="ml-2 h-10 w-10" icon="ri-close-line" /></button
>
</div>
<DialogDescription
as="div"
class="mt-2 rounded-r-md border-l-4 bg-gray-50 p-3 md:mt-6"
>
<h4
class="mb-4 font-serif text-2xl italic text-gray-700 md:text-3xl"
>
<Icon
class="mr-1 inline-flex h-7 w-7 place-self-center text-le-gris-dispositif-light"
icon="ri-map-pin-2-fill"
/>
<span class="font-bold">Article 197, I.1. </span> - Code général des
impôts
</h4>
<div class=" bg-gray-50 font-serif">
<p>
I. – En ce qui concerne les contribuables visés à l'article 4 B,
il est fait application des règles suivantes pour le calcul de
l'impôt sur le revenu :
<br />
<br />
1. L'impôt est calculé en appliquant à la fraction de chaque part
de revenu qui excède
<span class="bg-le-gris-dispositif-light">10 225 €</span>
le taux de :
<br />
<br />
<span class="bg-le-gris-dispositif-light">11 %</span> pour la
fraction supérieure à
<span class="bg-le-gris-dispositif-light">10 225 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">26 070 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">30 %</span> pour la
fraction supérieure à
<span class="bg-le-gris-dispositif-light">26 070 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">74 545 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">41 %</span> pour la
fraction supérieure à
<span class="bg-le-gris-dispositif-light">74 545 €</span>
et inférieure ou égale à
<span class="bg-le-gris-dispositif-light">160 336 €</span>
;
<br />
<span class="bg-le-gris-dispositif-light">45 %</span> pour la
fraction supérieure à
<span class="bg-le-gris-dispositif-light">160 336 €</span>.
</p>
</div>
<div class="mt-4 text-right text-sm text-gray-500">
<p class="">Extrait d'article à jour au 07 août 2022.</p>
<span class="text-sm text-gray-500 md:text-base">
<a
class="link"
href="https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000042907517/2022-08-07/"
target="_blank">Voir l'article sur Légifrance.fr</a
>
</span>
</div>
</DialogDescription>
</div>
</TransitionChild>
</div>
</Dialog>
</Transition>
......@@ -8,7 +8,7 @@
import { getContext } from "svelte"
import type { Writable } from "svelte/store"
import Icon from "@iconify/svelte"
import ArticleModalBaremeIR from "$lib/components/parameters/ArticleModalBaremeIR.svelte"
import ArticleModal from "$lib/components/parameters/ArticleModal.svelte"
import type { RequestedCalculationByName } from "$lib/calculations"
import { requestCalculation } from "$lib/calculations"
......@@ -197,7 +197,7 @@
icon="ri-search-line"
/><span class="">Article de loi</span></button
>
<ArticleModalBaremeIR bind:isOpen={isArticleModalOpen} />
<ArticleModal bind:isOpen={isArticleModalOpen} {billParameter} />
{/if}
{#if billReferences !== undefined && billReferences.length > 0}
......
......@@ -13,7 +13,7 @@
import type { ParametricReform, ValueParameterReform } from "$lib/reforms"
import { ParameterReformChangeType } from "$lib/reforms"
import Icon from "@iconify/svelte"
import ArticleModalPlafondQFGeneral from "$lib/components/parameters/ArticleModalPlafondQFGeneral.svelte"
import ArticleModal from "$lib/components/parameters/ArticleModal.svelte"
import VariableReferredParameterHeader from "./VariableReferredParameterHeader.svelte"
import VariableReferredValueEdit from "./VariableReferredValueEdit.svelte"
......@@ -98,7 +98,7 @@
}
</script>
<section class="ml-5 border-l-2 border-le-gris-dispositif-light pl-4 pb-4">
<section class="ml-5 border-l-2 border-le-gris-dispositif-light pl-4 pb-6">
<VariableReferredParameterHeader {depth} parameter={billParameter} />
<div
......@@ -205,10 +205,7 @@
icon="ri-search-line"
/><span class="">Article de loi</span></button
>
<ArticleModalPlafondQFGeneral
bind:isOpen={isArticleModalOpen}
{billParameter}
/>
<ArticleModal bind:isOpen={isArticleModalOpen} {billParameter} />
</div>
{/if}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment