From bcb251923cdf2c9bbf437076cfff5ca79c5e27ea Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 16 Oct 2019 17:11:27 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Meilleur=20affichage=20des=20mul?= =?UTF-8?q?tiplicateurs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Affichage des multiplicateurs directement au niveau des tranches et supprime l'affichage du label "multiplicateur" qui était difficile à comprendre. Ajout d'un attribut de règle "acronyme", utilisé pour afficher un nom de règle plus court au niveau des tranches d'un barème. --- source/components/RuleLink.js | 1 + source/components/rule/Header.js | 6 +- source/components/rule/Rule.js | 3 +- source/engine/mecanismViews/Barème.js | 97 +++++++++++++++----- source/engine/mecanismViews/BarèmeContinu.js | 44 ++++++++- source/règles/base.yaml | 2 + 6 files changed, 122 insertions(+), 31 deletions(-) diff --git a/source/components/RuleLink.js b/source/components/RuleLink.js index 48c57b067..54c4bb8c4 100644 --- a/source/components/RuleLink.js +++ b/source/components/RuleLink.js @@ -29,6 +29,7 @@ const RuleLink = ({ {children || title || nameLeaf(dottedName)} diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js index 5d7cb1a85..b90e88adb 100644 --- a/source/components/rule/Header.js +++ b/source/components/rule/Header.js @@ -16,6 +16,7 @@ let RuleHeader = withColours( question, flatRule, flatRules, + acronyme, name, title, icon, @@ -26,9 +27,12 @@ let RuleHeader = withColours(
- +

{title || capitalise0(name)} + {acronyme && <> ({acronyme})}

{icon && {emoji(icon)}} diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js index db64448d2..98daa45bb 100644 --- a/source/components/rule/Rule.js +++ b/source/components/rule/Rule.js @@ -57,7 +57,7 @@ export default compose( const { t } = useTranslation() let flatRule = findRuleByDottedName(flatRules, dottedName) - let { type, name, title, description, question, icon } = flatRule, + let { type, name, acronyme, title, description, question, icon } = flatRule, namespaceRules = findRuleByNamespace(flatRules, dottedName) let displayedRule = analysedExample || analysedRule @@ -116,6 +116,7 @@ export default compose( flatRule, flatRules, name, + acronyme, title, icon, valuesToShow diff --git a/source/engine/mecanismViews/Barème.js b/source/engine/mecanismViews/Barème.js index ec9286fa0..9771e1d1b 100644 --- a/source/engine/mecanismViews/Barème.js +++ b/source/engine/mecanismViews/Barème.js @@ -1,5 +1,6 @@ import classNames from 'classnames' import { ShowValuesContext } from 'Components/rule/ShowValuesContext' +import RuleLink from 'Components/RuleLink' import { numberFormatter } from 'Engine/format' import { trancheValue } from 'Engine/mecanisms/barème' import { inferUnit, serialiseUnit } from 'Engine/units' @@ -10,27 +11,31 @@ import { makeJsx } from '../evaluation' import './Barème.css' import { Node, NodeValuePointer } from './common' -export let BarèmeAttributes = ({ explanation, lazyEval = identity }) => ( - <> -
  • - - assiette:{' '} - - {makeJsx(lazyEval(explanation.assiette))} -
    • - {explanation['multiplicateur'] && - explanation['multiplicateur'].nodeValue !== 1 && ( -
  • - - multiplicateur:{' '} - - - {makeJsx(lazyEval(explanation['multiplicateur']))} - -
    • - )} - -) +export let BarèmeAttributes = ({ explanation, lazyEval = identity }) => { + const multiplicateur = lazyEval(explanation['multiplicateur']) + const multiplicateurAcronym = multiplicateur?.explanation?.acronyme + + return ( + <> +
  • + + assiette:{' '} + + {makeJsx(lazyEval(explanation.assiette))} +
    • + {explanation['multiplicateur'] && + explanation['multiplicateur'].nodeValue !== 1 && + !multiplicateurAcronym && ( +
  • + + multiplicateur:{' '} + + {makeJsx(multiplicateur)} +
    • + )} + + ) +} let Component = function Barème({ language, @@ -41,6 +46,7 @@ let Component = function Barème({ unit }) { const showValues = useContext(ShowValuesContext) + const multiplicateur = lazyEval(explanation?.multiplicateur) return ( { - const trancheFormatter = numberFormatter({ - language, - style: serialiseUnit(tranchesUnit) === '€' ? 'currency' : undefined - }) + const trancheFormatter = value => ( + + ) + let activated = trancheValue > 0 return ( @@ -177,6 +193,37 @@ let Tranche = ({ ) } +function TrancheFormatter({ + language, + tranchesUnit, + resultUnit, + multiplicateur, + value +}) { + const multiplicateurAcronym = multiplicateur?.explanation?.acronyme + if (!multiplicateurAcronym) { + return numberFormatter({ + language, + style: serialiseUnit(tranchesUnit) === '€' ? 'currency' : undefined + })(value) + } else { + return ( + <> + {value}  + + {multiplicateurAcronym} + {' '} + + + ) + } +} + //eslint-disable-next-line export default barèmeType => ( nodeValue, diff --git a/source/engine/mecanismViews/BarèmeContinu.js b/source/engine/mecanismViews/BarèmeContinu.js index 19d17d243..952c91204 100644 --- a/source/engine/mecanismViews/BarèmeContinu.js +++ b/source/engine/mecanismViews/BarèmeContinu.js @@ -1,11 +1,12 @@ import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext' -import { formatPercentage } from 'Engine/format' +import RuleLink from 'Components/RuleLink' +import { formatPercentage, formatValue } from 'Engine/format' import { sortObjectByKeys } from 'Engine/mecanismViews/common' import React from 'react' -import { Trans } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { BarèmeAttributes } from './Barème' import './Barème.css' -import { Node } from './common' +import { Node, NodeValuePointer } from './common' let Comp = function Barème({ nodeValue, explanation, unit }) { return ( @@ -33,7 +34,14 @@ let Comp = function Barème({ nodeValue, explanation, unit }) { {sortObjectByKeys(explanation.points).map(([seuil, taux]) => ( - {seuil} + + + {taux} ))} @@ -60,6 +68,34 @@ let Comp = function Barème({ nodeValue, explanation, unit }) { ) } +function SeuilFormatteur({ value, multiplicateur }) { + const { language } = useTranslation().i18n + if (value === 0) { + return '0' + } else { + return ( + <> + {formatValue({ + value, + language + })} + {multiplicateur && ( + <> +   + + {multiplicateur.acronyme} + + + )}{' '} + + + ) + } +} + //eslint-disable-next-line export default (nodeValue, explanation, _, unit) => ( diff --git a/source/règles/base.yaml b/source/règles/base.yaml index f0d7c4140..bd7c741f5 100644 --- a/source/règles/base.yaml +++ b/source/règles/base.yaml @@ -1022,6 +1022,7 @@ contrat salarié . statut cadre . choix statut cadre: plafond sécurité sociale temps plein: description: Le plafond de Sécurité sociale est le montant maximum des rémunérations à prendre en compte pour le calcul de certaines cotisations. période: mois + acronyme: PSS formule: 3377 unité: € références: @@ -1030,6 +1031,7 @@ plafond sécurité sociale temps plein: contrat salarié . plafond sécurité sociale: période: flexible + acronyme: PSS formule: plafond sécurité sociale temps plein * temps de travail . quotité de travail contrat salarié . SMIC temps plein: