Travail sur la documentation dans la simulation
Ajout de titres
🐛 certaines documentation de variables ne s'affichaient pas
etc.
+ Résolution bug evaluateVariable
pull/6/head
mama
parent
55ac04ccb5
commit
268d721364
1152
maison2.svg
1152
maison2.svg
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 780 KiB After Width: | Height: | Size: 824 KiB |
|
|
@ -52,7 +52,7 @@
|
|||
- maintenant : Les congés peuvent être pris dès l’embauche [...]
|
||||
|
||||
|
||||
references:
|
||||
références:
|
||||
Fiche service-public.gouv.fr: https://www.service-public.fr/particuliers/vosdroits/F2931
|
||||
Code du travail - Article L3141-24: https://www.legifrance.gouv.fr/affichCodeArticle.do?cidTexte=LEGITEXT000006072050&idArticle=LEGIARTI000006902661&dateTexte=&categorieLien=cid
|
||||
Congés payés et contrat CDD: https://www.easycdd.com/LEGISLATION-CDD/L-embauche-le-suivi-du-contrat-CDD-les-incidents-frequents/Conges-payes-et-contrat-CDD
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
- espace: contrat salarié . CDD . motif
|
||||
nom: contrat aidé
|
||||
titre: Contrat aidé
|
||||
# Voir le TODO de contrat salarié . CDD . événement . CDD poursuivi en CDI
|
||||
# formule:
|
||||
# une possibilité:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
- espace: contrat salarié . CDD
|
||||
nom: motif
|
||||
nom complet: motif de recours
|
||||
titre: Motif de recours
|
||||
question: Quel est le motif de recours au CDD ?
|
||||
description: |
|
||||
Le CDD est un contrat d'exception: son recours doit être autorisé par l'un des motifs spécifiés dans la loi.
|
||||
|
|
@ -49,11 +49,11 @@
|
|||
Nous regroupons dans cette catégorie les cas suivants.
|
||||
|
||||
- Remplacement d'un salarié en cas :
|
||||
a) D'absence ;
|
||||
b) De passage provisoire à temps partiel, conclu par avenant à son contrat de travail ou par échange écrit entre ce salarié et son employeur ;
|
||||
c) De suspension de son contrat de travail ;
|
||||
d) De départ définitif précédant la suppression de son poste de travail après consultation du comité d'entreprise ou, à défaut, des délégués du personnel, s'il en existe ;
|
||||
e) D'attente de l'entrée en service effective du salarié recruté par contrat à durée indéterminée appelé à le remplacer ;
|
||||
- D'absence ;
|
||||
- De passage provisoire à temps partiel, conclu par avenant à son contrat de travail ou par échange écrit entre ce salarié et son employeur ;
|
||||
- De suspension de son contrat de travail ;
|
||||
- De départ définitif précédant la suppression de son poste de travail après consultation du comité d'entreprise ou, à défaut, des délégués du personnel, s'il en existe ;
|
||||
- D'attente de l'entrée en service effective du salarié recruté par contrat à durée indéterminée appelé à le remplacer ;
|
||||
|
||||
- Remplacement d'un chef d'entreprise artisanale, industrielle ou commerciale, d'une personne exerçant une profession libérale, de son conjoint participant effectivement à l'activité de l'entreprise à titre professionnel et habituel ou d'un associé non salarié d'une société civile professionnelle, d'une société civile de moyens d'une société d'exercice libéral ou de toute autre personne morale exerçant une profession libérale ;
|
||||
|
||||
|
|
@ -67,9 +67,9 @@
|
|||
|
||||
Recrutement d'ingénieurs et de cadres, au sens des conventions collectives, en vue de la réalisation d'un objet défini lorsqu'un accord de branche étendu ou, à défaut, un accord d'entreprise le prévoit et qu'il définit :
|
||||
|
||||
a) Les nécessités économiques auxquelles ces contrats sont susceptibles d'apporter une réponse adaptée ;
|
||||
b) Les conditions dans lesquelles les salariés sous contrat à durée déterminée à objet défini bénéficient de garanties relatives à l'aide au reclassement, à la validation des acquis de l'expérience, à la priorité de réembauche et à l'accès à la formation professionnelle continue et peuvent, au cours du délai de prévenance, mobiliser les moyens disponibles pour organiser la suite de leur parcours professionnel ;
|
||||
c) Les conditions dans lesquelles les salariés sous contrat à durée déterminée à objet défini ont priorité d'accès aux emplois en contrat à durée indéterminée dans l'entreprise.
|
||||
- Les nécessités économiques auxquelles ces contrats sont susceptibles d'apporter une réponse adaptée ;
|
||||
- Les conditions dans lesquelles les salariés sous contrat à durée déterminée à objet défini bénéficient de garanties relatives à l'aide au reclassement, à la validation des acquis de l'expérience, à la priorité de réembauche et à l'accès à la formation professionnelle continue et peuvent, au cours du délai de prévenance, mobiliser les moyens disponibles pour organiser la suite de leur parcours professionnel ;
|
||||
- Les conditions dans lesquelles les salariés sous contrat à durée déterminée à objet défini ont priorité d'accès aux emplois en contrat à durée indéterminée dans l'entreprise.
|
||||
|
||||
- espace: contrat salarié . CDD . motif . classique
|
||||
nom: usage
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
alias: motif extra
|
||||
description: Emplois pour lesquels, dans certains secteurs d'activité définis par décret ou par convention ou accord collectif de travail étendu, il est d'usage constant de ne pas recourir au contrat de travail à durée indéterminée en raison de la nature de l'activité exercée et du caractère par nature temporaire de ces emplois ;
|
||||
références:
|
||||
service-public.fr: https://www.service-public.fr/professionnels-entreprises/vosdroits/F33693
|
||||
Embauche en contrat d'extra : https://www.service-public.fr/professionnels-entreprises/vosdroits/F33693
|
||||
|
||||
formule-futur: #TODO intégrer ça dans le formulaire. Comment ?
|
||||
contrainte:
|
||||
|
|
@ -107,9 +107,10 @@
|
|||
- espace: contrat salarié . CDD . motif
|
||||
nom: complément formation
|
||||
titre: Complément de formation professionnelle assuré par l'employeur
|
||||
description: l'employeur s'engage, pour une durée et dans des conditions déterminées par décret, à assurer un complément de formation professionnelle au salarié.
|
||||
description: L'employeur s'engage, pour une durée et dans des conditions déterminées par décret, à assurer un complément de formation professionnelle au salarié.
|
||||
références:
|
||||
Code du travail - Article L1242-3 : https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=714D2E2B814371F4F1D5AA88472CD621.tpdila20v_1?idArticle=LEGIARTI000006901196&cidTexte=LEGITEXT000006072050&dateTexte=20170420
|
||||
Code du travail - Décret D1242-3 : https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000018537448&cidTexte=LEGITEXT000006072050
|
||||
|
||||
|
||||
- espace: contrat salarié . CDD . motif
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
- espace: contrat salarié
|
||||
nom: CDD
|
||||
nom complet: CDD
|
||||
titre: Contrat à durée déterminée
|
||||
description: Contrat de travail pour lequel un employeur peut recruter un salarié pour une durée déterminée, car la cause de cette détermination, de la date ou échéance de fin de contrat est prévue explicitement par le Code du travail.
|
||||
référence: https://fr.wikipedia.org/wiki/Contrat_de_travail_%C3%A0_dur%C3%A9e_d%C3%A9termin%C3%A9e_en_France
|
||||
# # TODO: règle de type : il faut q'un motif et une durée soient sélectionnés pour qu'un contrat soit un CDD. Cela revient à dire que les variables CDD et motif sont obligatoires *dans le contexte* de leur attache
|
||||
|
|
@ -35,6 +35,7 @@
|
|||
|
||||
- espace: contrat salarié . CDD
|
||||
nom: congés non pris
|
||||
titre: Congés non pris
|
||||
question: Combien de jours de congés ne seront pas pris ?
|
||||
description: Combien de jours de congés ne pourront être pris par l'employé, du fait de la durée de son CDD. En jours ouvrés, par rapport aux 25 jours de congés légaux annuels.
|
||||
format: nombre positif
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
titre: Événement de contrat
|
||||
question: Pensez-vous être confronté à l'un de ces événements au cours du contrat ?
|
||||
description: |
|
||||
Certains de ces événements impactent fortement les résultats de la simulation, et peuvent donc la racourcir.
|
||||
Par exemple, dans l'hypothèse d'un CDD poursuivi en CDI, aucune majoration ou indemnité ne sera à verser !
|
||||
Certains événements impactent fortement les résultats de la simulation, et peuvent donc la racourcir.
|
||||
|
||||
> Par exemple, dans l'hypothèse d'un CDD poursuivi en CDI, aucune majoration ou indemnité ne sera à verser !
|
||||
formule:
|
||||
une possibilité:
|
||||
- CDD poursuivi en CDI
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
- espace: contrat salarié . CDD . événement
|
||||
nom: CDD poursuivi en CDI
|
||||
titre: Le CDD est poursuivi en CDI
|
||||
description: En fin de contrat, le CDD est reconduit en CDI sans interruption.
|
||||
# TODO quand cette variable est appelée par une autre variable,
|
||||
# on devrait pouvoir poser la question, puis proposer un bouton qui permette d'aider l'utilisateur à
|
||||
# y répondre, en lui expliquant la formule suivante :
|
||||
|
|
@ -26,7 +28,6 @@
|
|||
# - embauche en CDI suivant le CDD
|
||||
# - CDD requalifié en CDI # quand ça arrive ?
|
||||
|
||||
|
||||
- espace: contrat salarié . CDD . événement
|
||||
nom: refus CDI avantageux
|
||||
titre: Refus d'un CDI avantageux
|
||||
|
|
|
|||
|
|
@ -32,8 +32,14 @@
|
|||
|
||||
- espace: contrat salarié
|
||||
nom: salaire brut
|
||||
titre: Salaire brut
|
||||
question: Quel est le salaire brut ?
|
||||
description: Le salaire brut peut être vu comme la somme du salaire net et des cotisations sociales salariales retenues sur le bulletin de paie d'un salarié, ou comme les sommes perçues par le salarié au titre de son contrat de travail, avant retenues sociales et fiscales.
|
||||
description: |
|
||||
C'est le salaire de négociation du contrat de travail en France.
|
||||
|
||||
Il peut être vu comme :
|
||||
- la somme du salaire net et des cotisations sociales salariales retenues sur le bulletin de paie d'un salarié
|
||||
- ou comme les sommes perçues par le salarié au titre de son contrat de travail, avant retenues sociales et fiscales.
|
||||
format: nombre positif
|
||||
# TODO En attendant que l'UI devienne plus intelligente, c'est confondu avec le salaire de base.
|
||||
# intelligente : il faudrait demander : `salaire brut`, puis un bouton `qu'est-ce que c'est` pour nous guider et décortiquer la formule
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
titre: Votre obligation
|
||||
|
||||
action:
|
||||
texte: Répondez à quelques questions pour estimer le montant des 4 obligations du CDD.
|
||||
texte: Découvrez en quelques clics le montant des 4 obligations du CDD.
|
||||
bouton: C'est parti !
|
||||
objectif: surcoût CDD
|
||||
conclusion: |
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
Cliquez sur les obligations en bas pour comprendre vos résultats.
|
||||
|
||||
Une remarque ? [Écrivez-nous](mailto:contact@embauche.beta.gouv.fr) !
|
||||
Une remarque ? [Écrivez-nous](/contact) !
|
||||
# <i
|
||||
# style={{cursor: 'pointer'}}
|
||||
# className="fa fa-envelope-o"
|
||||
|
|
|
|||
|
|
@ -1,22 +1,28 @@
|
|||
|
||||
#sim #help {
|
||||
box-shadow: -1px 1px 15px 1px #eee;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
border-color: #ccc;
|
||||
font-style: italic;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: .3em;
|
||||
margin: 3em;
|
||||
padding: 1em;
|
||||
min-width: 30%;
|
||||
padding: .6em 1em;
|
||||
width: 35%;
|
||||
color: #444;
|
||||
transition: opacity .4s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#sim #help blockquote {
|
||||
font-style: italic;
|
||||
font-size: 90%;
|
||||
border-left: 4px solid #eee;
|
||||
margin-left: .6em;
|
||||
padding-left: .6em;
|
||||
}
|
||||
|
||||
#sim #help.active {
|
||||
opacity: 1
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sim #help i.fa-info-circle {
|
||||
|
|
@ -38,3 +44,7 @@
|
|||
right: .6em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sim #help h3 {
|
||||
margin: .3em 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React, {Component} from 'react'
|
||||
import {connect} from 'react-redux'
|
||||
import {findRuleByName} from '../engine/rules'
|
||||
import {findRuleByDottedName} from '../engine/rules'
|
||||
import './Aide.css'
|
||||
import {EXPLAIN_VARIABLE} from '../actions'
|
||||
import References from './References'
|
||||
import marked from '../engine/marked'
|
||||
|
||||
@connect(
|
||||
state =>
|
||||
|
|
@ -14,13 +15,16 @@ import References from './References'
|
|||
})
|
||||
)
|
||||
export default class Aide extends Component {
|
||||
renderExplanationMarkdown(explanation, term) {
|
||||
return marked(`### ${term} \n\n${explanation}`)
|
||||
}
|
||||
render() {
|
||||
let {explained, stopExplaining} = this.props
|
||||
|
||||
if (!explained) return <section id="help" />
|
||||
|
||||
let rule = findRuleByName(explained),
|
||||
text = rule.description || rule.titre,
|
||||
let rule = findRuleByDottedName(explained),
|
||||
text = rule.description,
|
||||
refs = rule.références
|
||||
|
||||
let possibilities = rule['choix exclusifs']
|
||||
|
|
@ -31,10 +35,10 @@ export default class Aide extends Component {
|
|||
<i
|
||||
className="fa fa-times-circle"
|
||||
onClick={stopExplaining} ></i>
|
||||
<p>
|
||||
{text}
|
||||
<p
|
||||
dangerouslySetInnerHTML={{__html: this.renderExplanationMarkdown(text, rule.titre)}}>
|
||||
</p>
|
||||
{ possibilities &&
|
||||
{/* { possibilities &&
|
||||
<p>
|
||||
{possibilities.length} possibilités :
|
||||
<ul>
|
||||
|
|
@ -43,7 +47,7 @@ export default class Aide extends Component {
|
|||
)}
|
||||
</ul>
|
||||
</p>
|
||||
}
|
||||
} */}
|
||||
{refs && <div>
|
||||
<p>Pour en savoir plus: </p>
|
||||
<References refs={refs} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import R from 'ramda'
|
||||
import marked from '../engine/marked'
|
||||
|
||||
// On ajoute à la section la possibilité d'ouvrir un panneau d'explication des termes.
|
||||
// Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX
|
||||
export let AttachDictionary = dictionary => Decorated =>
|
||||
class extends React.Component {
|
||||
state = {
|
||||
term: null,
|
||||
explanation: null
|
||||
}
|
||||
componentDidMount() {
|
||||
let decoratedNode = ReactDOM.findDOMNode(this.decorated)
|
||||
decoratedNode.addEventListener('click', e => {
|
||||
let term = e.target.dataset['termDefinition'],
|
||||
explanation = R.path([term, 'description'], dictionary)
|
||||
this.setState({explanation, term})
|
||||
})
|
||||
}
|
||||
renderExplanationMarkdown(explanation, term) {
|
||||
return marked(`### Mécanisme: ${term}\n\n${explanation}`)
|
||||
}
|
||||
render(){
|
||||
let {explanation, term} = this.state
|
||||
return (
|
||||
<div className="dictionaryWrapper">
|
||||
<Decorated ref={decorated => this.decorated = decorated} {...this.props} explain={this.explain}/>
|
||||
{explanation &&
|
||||
<div className="dictionaryPanelWrapper" onClick={() => this.setState({term: null, explanation: null})}>
|
||||
<div className="dictionaryPanel"
|
||||
onClick={e => {e.preventDefault(); e.stopPropagation()}}
|
||||
dangerouslySetInnerHTML={{__html: this.renderExplanationMarkdown(explanation, term)}}>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -40,6 +40,6 @@ p {
|
|||
}
|
||||
|
||||
#questions-answers {
|
||||
min-width: 55%;
|
||||
min-width: 50%;
|
||||
transition: width 1s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
#simulateurIntro {
|
||||
background: radial-gradient(ellipse at center, #4A89DC -160%,#333350 100%);
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#simulateurIntro h1 {
|
||||
margin-top: 3%;
|
||||
text-align: center;
|
||||
font-size: 350%;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#simulateurIntro .subtitle {
|
||||
text-align: center;
|
||||
font-size: 110%;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#simulateurIntro {
|
||||
margin-top: 4%;
|
||||
}
|
||||
|
||||
#simulateurIntro p {
|
||||
font-size: 120%;
|
||||
color: white;
|
||||
opacity: .9;
|
||||
width: 45%;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
#simulateurIntro #introduction .insist {
|
||||
font-weight: 600;
|
||||
/*font-style: italic;*/
|
||||
}
|
||||
|
||||
|
||||
#simulateurIntro #action {
|
||||
color: white;
|
||||
margin-top: 3%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#simulateurIntro #action button {
|
||||
color: inherit;
|
||||
background: #4A89DC;
|
||||
padding: .6em 1.2em;
|
||||
font-size: 140%;
|
||||
margin: 0 1em;
|
||||
width: 12em;
|
||||
border: none;
|
||||
box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
#simulateurIntro #action button:hover {
|
||||
box-shadow: none;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import React from 'react'
|
||||
import colours from './themeColours'
|
||||
import PageTypeIcon from './PageTypeIcon'
|
||||
import './CDDIntro.css'
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
export default () => (
|
||||
<div id="CDDIntro">
|
||||
<PageTypeIcon type="simulation" />
|
||||
<h1>Simulateur CDD</h1>
|
||||
<div className="subtitle">
|
||||
Découvrir le surcoût employeur du CDD par rapport au CDI
|
||||
</div>
|
||||
<section id="introduction">
|
||||
<p>
|
||||
En France, le contrat à durée déterminée <span className="insist">est un contrat d'exception au CDI</span>
|
||||
qui apporte à l'employeur plus de souplesse dans un cadre législatif précis, comportant en particulier des contreparties financières.
|
||||
</p>
|
||||
<p>
|
||||
Ce simulateur calcule pour vous les 4 éléments de ce surcoût :
|
||||
<ul>
|
||||
<li key="1">l'indemnité de fin de contrat</li>
|
||||
<li key="2">le CIF</li>
|
||||
<li key="3">la majoration chômage</li>
|
||||
<li key="4">l'indemnité compensatrice de congés payés</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>Par simplification, ces éléments sont tous calculés par mois de contrat.</p>
|
||||
<p>
|
||||
Tout au long de la simulation, cliquez sur les chaque résultat pour <span className="insist">obtenir une explication du calcul</span>. Aussi, vous avez le droit de ne pas savoir: certains termes utilisés dans la simulation ne sont pas évidents : cliquez simplement sur le symbôle • qui les suit pour ouvrir une aide contextuelle.
|
||||
</p>
|
||||
<Link id="action" to="/cdd"><button>C'est parti !</button></Link>
|
||||
<p className="italic">
|
||||
Et n'hésitez pas à nous écrire <i style={{cursor: 'pointer'}} className="fa fa-envelope-o" /> ! La loi française est complexe, car très ciblée. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
color: inherit;
|
||||
/*text-decoration: none;*/
|
||||
}
|
||||
|
||||
.references li {
|
||||
margin-bottom: .15em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default ({refs}) => (
|
|||
</span>
|
||||
</span>
|
||||
<a href={link} target="_blank">
|
||||
{name}
|
||||
{R.head(name).toUpperCase() + R.tail(name)}
|
||||
</a>
|
||||
</li>
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
min-width: 15em;
|
||||
}
|
||||
#results li.irrelevant .rule-box {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
#results li .pointer {
|
||||
font-size: 300%;
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
display: none;
|
||||
padding-left: 1em;
|
||||
font-weight: 600;
|
||||
color: #333350;
|
||||
color: #4A89DC;
|
||||
}
|
||||
|
||||
#rule-rules.showValues .situationValue {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {capitalise0} from '../utils'
|
|||
import knownMecanisms from '../engine/known-mecanisms.yaml'
|
||||
import marked from '../engine/marked'
|
||||
import References from './References'
|
||||
import {AttachDictionary} from './AttachDictionary'
|
||||
|
||||
// situationGate function useful for testing :
|
||||
let testingSituationGate = v => // eslint-disable-line no-unused-vars
|
||||
|
|
@ -105,45 +106,6 @@ export default class Rule extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// On ajoute à la section la possibilité d'ouvrir à droite un panneau d'explication des termes.
|
||||
// Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX
|
||||
// Ne pas oublier de réduire la largeur de la section pour laisser de la place au dictionnaire.
|
||||
let AttachDictionary = dictionary => Decorated =>
|
||||
class extends React.Component {
|
||||
state = {
|
||||
term: null,
|
||||
explanation: null
|
||||
}
|
||||
componentDidMount() {
|
||||
let decoratedNode = ReactDOM.findDOMNode(this.decorated)
|
||||
decoratedNode.addEventListener('click', e => {
|
||||
let term = e.target.dataset['termDefinition'],
|
||||
explanation = R.path([term, 'description'], dictionary)
|
||||
this.setState({explanation, term})
|
||||
})
|
||||
}
|
||||
renderExplanationMarkdown(explanation, term) {
|
||||
return marked(`### Mécanisme: ${term}\n\n${explanation}`)
|
||||
}
|
||||
render(){
|
||||
let {explanation, term} = this.state
|
||||
return (
|
||||
<div className="dictionaryWrapper">
|
||||
<Decorated ref={decorated => this.decorated = decorated} {...this.props} explain={this.explain}/>
|
||||
{explanation &&
|
||||
<div className="dictionaryPanelWrapper" onClick={() => this.setState({term: null, explanation: null})}>
|
||||
<div className="dictionaryPanel"
|
||||
onClick={e => {e.preventDefault(); e.stopPropagation()}}
|
||||
dangerouslySetInnerHTML={{__html: this.renderExplanationMarkdown(explanation, term)}}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@AttachDictionary(knownMecanisms)
|
||||
class Algorithm extends React.Component {
|
||||
state = {
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default class extends React.Component {
|
|||
Pour simplifier, les résultats sont calculés par mois de contrat.
|
||||
</p>
|
||||
<p>
|
||||
N'hésitez pas à <Link to="/contact">nous écrire</Link> ! La loi française est complexe, car très ciblée. Nous pouvons la rendre plus transparente.
|
||||
N'hésitez pas à <Link to="/contact">nous écrire</Link> ! La loi française est très ciblée, et donc complexe. Nous pouvons la rendre plus transparente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import './Explicable.css'
|
|||
import HoverDecorator from '../HoverDecorator'
|
||||
import {connect} from 'react-redux'
|
||||
import {EXPLAIN_VARIABLE} from '../../actions'
|
||||
import {findRuleByName} from '../../engine/rules'
|
||||
import {findRuleByDottedName} from '../../engine/rules'
|
||||
|
||||
|
||||
@connect(state => ({explained: state.explainedVariable}), dispatch => ({
|
||||
|
|
@ -14,27 +14,31 @@ import {findRuleByName} from '../../engine/rules'
|
|||
export default class Explicable extends React.Component {
|
||||
render(){
|
||||
let {
|
||||
name, hover, label,
|
||||
dottedName, hover, label,
|
||||
explain, explained,
|
||||
lightBackground
|
||||
} = this.props,
|
||||
rule = findRuleByName(name)
|
||||
rule = findRuleByDottedName(dottedName)
|
||||
|
||||
// Rien à expliquer ici, ce n'est pas une règle
|
||||
if (!rule) return <span>{label}</span>
|
||||
|
||||
let ruleLabel = label || rule.titre || rule.name
|
||||
|
||||
// Rien à expliquer ici, il n'y a pas de champ description dans la règle
|
||||
if (!rule.description && !rule['une possibilité']) return <span>{ruleLabel}</span>
|
||||
if (!rule.description)
|
||||
return <span>{ruleLabel}</span>
|
||||
|
||||
//TODO montrer les variables de type 'une possibilité'
|
||||
|
||||
|
||||
return (
|
||||
<span
|
||||
className={classNames('explicable', {explained: name === explained, dark: lightBackground})} >
|
||||
{ruleLabel}
|
||||
className={classNames('explicable', {explained: dottedName === explained, dark: lightBackground})} >
|
||||
{ruleLabel}
|
||||
<span
|
||||
className="icon"
|
||||
onClick={e => {e.preventDefault(); e.stopPropagation(); explain(name)}}>
|
||||
onClick={e => {e.preventDefault(); e.stopPropagation(); explain(dottedName)}}>
|
||||
<i className="fa fa-info" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ export default class Question extends Component {
|
|||
{this.renderChildren({children})}
|
||||
</li>
|
||||
: <li key={name} className="variantLeaf">
|
||||
<RadioLabel {...{value: relativeDottedName(dottedName), label: titre || name, input, submit, themeColours}}/>
|
||||
<RadioLabel {...{value: relativeDottedName(dottedName), label: titre || name, dottedName, input, submit, themeColours}}/>
|
||||
</li>
|
||||
)}
|
||||
{choices.canGiveUp &&
|
||||
<li key='aucun' className="variantLeaf">
|
||||
<li key='aucun' className="variantLeaf aucun">
|
||||
<RadioLabel {...{value: false, label: 'Aucun', input, submit, themeColours}}/>
|
||||
</li>
|
||||
}
|
||||
|
|
@ -96,7 +96,7 @@ export default class Question extends Component {
|
|||
class RadioLabel extends Component {
|
||||
|
||||
render() {
|
||||
let {value, label, input, submit, hover, themeColours} = this.props,
|
||||
let {value, label, input, submit, hover, themeColours, dottedName} = this.props,
|
||||
// value = R.when(R.is(Object), R.prop('value'))(choice),
|
||||
labelStyle =
|
||||
Object.assign(
|
||||
|
|
@ -111,7 +111,7 @@ class RadioLabel extends Component {
|
|||
<input
|
||||
type="radio" {...input} onClick={submit}
|
||||
value={value} checked={value === input.value ? 'checked' : ''} />
|
||||
<Explicable name={value} label={label}/>
|
||||
<Explicable dottedName={dottedName} label={label}/>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
border: 2px solid #333350;
|
||||
color: #333350;
|
||||
display: inline-block;
|
||||
max-width: 60%;
|
||||
max-width: 75%;
|
||||
font-size: 110%;
|
||||
font-weight: 600;
|
||||
padding: .6em 1em;
|
||||
|
|
@ -157,6 +157,7 @@
|
|||
border-left: 1px dashed #ccc;
|
||||
margin-top: .6em;
|
||||
padding-left: .6em;
|
||||
padding-top: .6em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.step.question .variant > div {
|
||||
|
|
@ -180,7 +181,9 @@
|
|||
.step.question .variant .variantLeaf {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.step.question .variantLeaf.aucun label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.step label.radio,
|
||||
/* A resume of what's been answered */
|
||||
.resume {
|
||||
|
|
@ -308,7 +311,7 @@ fieldset > .ignore {
|
|||
.step .input-suggestions a:hover {
|
||||
background: #4A89DC;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.help-box {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default class Home extends Component {
|
|||
<ul>
|
||||
<li key="cdd">
|
||||
<span className="simulateur">Surcoût du CDD</span>
|
||||
<Link to="/simulateurs/cdd"><button>Essayer</button></Link>
|
||||
<Link to="/simulateurs/cdd/intro"><button>Essayer</button></Link>
|
||||
</li>
|
||||
<li key="embauche">
|
||||
<span className="simulateur">Prix global de l'embauche</span>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export let constructStepMeta = ({
|
|||
name: dottedName,
|
||||
// question: question || name,
|
||||
question: (
|
||||
<Explicable label={question || name} name={name} lightBackground={true} />
|
||||
<Explicable label={question || name} dottedName={dottedName} lightBackground={true} />
|
||||
),
|
||||
title: titre || name,
|
||||
subquestion,
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ non applicable si:
|
|||
|
||||
> Pour une cotisation sociale, cela signifie qu'elle ne me concerne pas, que je n'ai pas à la verser.
|
||||
|
||||
La formule est donc à ignorer.
|
||||
La formule de calcul peut donc être ignorée, quel que soit son montant.
|
||||
|
||||
barème:
|
||||
description: |
|
||||
|
|
|
|||
|
|
@ -456,7 +456,6 @@ let treat = (situationGate, rule) => rawNode => {
|
|||
: anyNull([taux, assiette, facteur, plafond]) ?
|
||||
null
|
||||
: mult(val(assiette), val(taux), val(facteur), val(plafond))
|
||||
|
||||
return {
|
||||
nodeValue,
|
||||
category: 'mecanism',
|
||||
|
|
|
|||
|
|
@ -23,8 +23,7 @@ let evaluateBottomUp = situationGate => startingFragments => {
|
|||
export let evaluateVariable = (situationGate, variableName, format) => {
|
||||
// test rec
|
||||
let value = situationGate(variableName)
|
||||
|
||||
return R.contains(format)(['nombre positif', 'période'])
|
||||
? value
|
||||
? (value == undefined ? null : value)
|
||||
: evaluateBottomUp(situationGate)(splitName(variableName))
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue