betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

La navigation par tag est améliorée

pull/1/head
Mael Thomas 2016-07-28 16:01:25 +02:00
parent 1018808f20
commit 8e53a90f4f
17 changed files with 558 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
actions.js
View File

@ -1,9 +1,17 @@
/* TAGS */
export let SELECT_TAG = 'SELECT_TAG'
export function selectTag(tagName, tagValue) {
return {type: SELECT_TAG, tagName, tagValue}
}
export let RESET_TAGS = 'RESET_TAGS'
export function resetTags() {
return {type: RESET_TAGS}
}
/* VARIBALES */
export let SELECT_VARIABLE = 'SELECT_VARIABLE'
export function selectVariable(name) {

43
components/TagNavigation.js
View File

@ -3,23 +3,29 @@ import React from 'react'
export default class TagNavigation extends React.Component {
render(){
let {tagsToSelect, selectedTags, selectTag} = this.props
let {tagsToSelect, selectedTags, selectTag, resetTags} = this.props
return (
<section id="tag-navigation">
{selectedTags.length > 0 &&
<ul id="selected">
{selectedTags.map(([name, value]) => <li key={name}>
{name + ': ' + value}
</li>)
}
<h2>☛ Explorez par catégorie</h2>
<div className="content">
{selectedTags.length > 0 &&
<div id="selected">
<ul>
{selectedTags.map(([name, value]) => <li key={name}>
<span>{name}</span>:
<span className="tag-value">{value}</span>
</li>)
}
</ul>
<button onClick={resetTags}>Effacer ma sélection ✕</button>
</div>
}
<ul id="to-select">
{tagsToSelect.map(tag =>
<Tag selectTag={selectTag} key={tag.name} tag={tag} />
)}
</ul>
}
<ul id="to-select">
{tagsToSelect.map(tag =>
<Tag selectTag={selectTag} key={tag.name} tag={tag} />
)}
</ul>
</div>
</section>
)
}
@ -29,10 +35,15 @@ class Tag extends React.Component {
render(){
let {tag: {name, choices, number}, selectTag} = this.props
return (<li>
<span className="name">{`${name} (${number} variables)`}</span>
<span className="name">
{name}
<span className="nb">
({number} variables)
</span>
</span>
<ul className="choices">
{[...choices].map(c =>
<li key={c} onClick={() => selectTag(name, c)}>
<li className="tag-value" key={c} onClick={() => selectTag(name, c)}>
{c}
</li>
)}

1
components/Variables.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import SelectedVariable from './SelectedVariable'
import colors from './variable-colors.yaml'
console.log(colors.length);
import R from 'ramda'
function convertHex(hex,opacity){

473
components/variable-colors.yaml
View File

@ -1,9 +1,464 @@
- 2ecc71
- e74c3c
- 3498db
- 9b59b6
- f1c40f
- 1abc9c
- e67e22
- 95a5a6
- 7f8c8d
- 4C2F27
- 0048BA
- B0BF1A
- 7CB9E8
- B284BE
- 5D8AA8
- 00308F
- 72A0C1
- AF002A
- 84DE02
- E32636
- C46210
- E52B50
- 9F2B68
- F19CBB
- AB274F
- D3212D
- 3B7A57
- 00C4B0
- FFBF00
- FF7E00
- FF033E
- 9966CC
- A4C639
- F2F3F4
- CD9575
- 665D1E
- 915C83
- 841B2D
- FAEBD7
- 008000
- 8DB600
- FBCEB1
- 00FFFF
- 7FFFD4
- D0FF14
- 4B5320
- 3B444B
- 8F9779
- E9D66B
- B2BEB5
- 87A96B
- FF9966
- A52A2A
- FDEE00
- 6E7F80
- 568203
- FF2052
- C39953
- 007FFF
- F0FFFF
- F0FFFF
- DBE9F4
- 2E5894
- 89CFF0
- A1CAF1
- F4C2C2
- FEFEFA
- FF91AF
- 21ABCD
- FAE7B5
- FFE135
- 006A4E
- E0218A
- 7C0A02
- 1DACD6
- 848482
- 98777B
- BCD4E6
- 9F8170
- FA6E79
- F5F5DC
- 9C2542
- E88E5A
- FFE4C4
- 3D2B1F
- 967117
- CAE00D
- BFFF00
- FE6F5E
- BF4F51
- 000000
- 3D0C02
- 54626F
- 253529
- 3B3C36
- BFAFB2
- FFEBCD
- A57164
- 318CE7
- ACE5EE
- FAF0BE
- 0000FF
- 1F75FE
- 0093AF
- 0087BD
- 0018A8
- 333399
- 0247FE
- A2A2D0
- 00B9FB
- 5DADEC
- ACE5EE
- 126180
- 5072A7
- 6699CC
- 0D98BA
- 553592
- 8A2BE2
- 4F86F7
- 1C1CF0
- DE5D83
- 79443B
- 0095B6
- E3DAC9
- DDE26A
- CC0000
- 006A4E
- 873260
- 0070FF
- B5A642
- CB4154
- 1DACD6
- 66FF00
- BF94E4
- D891EF
- C32148
- 1974D2
- FF007F
- 08E8DE
- D19FE8
- FFAA1D
- 3399FF
- F4BBFF
- FF55A3
- FB607F
- 004225
- CD7F32
- 737000
- 964B00
- A52A2A
- AF6E4D
- cc9966
- 6B4423
- 1B4D3E
- FFC1CC
- E7FEFF
- 7BB661
- F0DC82
- 480607
- 800020
- DEB887
- A17A74
- CC5500
- E97451
- 8A3324
- BD33A4
- 702963
- 536872
- 5F9EA0
- 91A3B0
- 006B3C
- ED872D
- E30022
- FFF600
- A67B5B
- 4B3621
- 1E4D2B
- A3C1AD
- C19A6B
- EFBBCC
- 78866B
- FFFF99
- FFEF00
- FF0800
- E4717A
- 00BFFF
- 592720
- C41E3A
- 00CC99
- 960018
- D70040
- EB4C42
- FF0038
- FFA6C9
- B31B1B
- 56A0D3
- ED9121
- 00563F
- 062A78
- 703642
- C95A49
- 92A1CF
- ACE1AF
- 007BA7
- 2F847C
- B2FFFF
- 4997D0
- DE3163
- EC3B83
- 007BA7
- 2A52BE
- 6D9BC3
- 007AA5
- E03C31
- A0785A
- F7E7CE
- F1DDCF
- 36454F
- 232B2B
- E68FAC
- DFFF00
- 7FFF00
- DE3163
- FFB7C5
- 954535
- DE6FA1
- A8516E
- AA381E
- 856088
- 4AFF00
- 7B3F00
- D2691E
- FFA700
- 98817B
- E34234
- CD607E
- D2691E
- E4D00A
- 9FA91F
- 7F1734
- FBCCE7
- 0047AB
- D2691E
- 965A3E
- 6F4E37
- C4D8E2
- F88379
- 002E63
- 8C92AC
- B87333
- DA8A67
- AD6F69
- CB6D51
- 996666
- FF3800
- FF7F50
- F88379
- FF4040
- FD7C6E
- 893F45
- FBEC5D
- B31B1B
- 6495ED
- FFF8DC
- 2E2D88
- FFF8E7
- FFBCD9
- 81613C
- FFFDD0
- DC143C
- BE0032
- 990000
- F5F5F5
- 00FFFF
- 00B7EB
- 4E82B4
- 28589C
- 188BC2
- 4682BF
- 58427C
- FFD300
- F56FA1
- FFFF31
- F0E130
- 00008B
- 666699
- 654321
- 88654E
- 5D3954
- A40000
- 08457E
- 986960
- CD5B45
- 008B8B
- 536878
- B8860B
- A9A9A9
- 013220
- 006400
- 1F262A
- 00416A
- 00147E
- 1A2421
- BDB76B
- 483C32
- 734F96
- 534B4F
- 543D37
- 8B008B
- A9A9A9
- 003366
- 4A5D23
- 556B2F
- FF8C00
- 9932CC
- 779ECB
- 03C03C
- 966FD6
- C23B22
- E75480
- 003399
- 4F3A3C
- 301934
- 872657
- 8B0000
- E9967A
- 560319
- 8FBC8F
- 3C1414
- 8CBED6
- 483D8B
- 2F4F4F
- 177245
- 918151
- FFA812
- 483C32
- CC4E5C
- 00CED1
- D1BEA8
- 9400D3
- 9B870C
- 00703C
- 555555
- D70A53
- 40826D
- A9203E
- EF3038
- E9692C
- DA3287
- FAD6A5
- B94E48
- 704241
- C154C1
- 056608
- 0E7C61
- 004B49
- 333366
- F5C71A
- 9955BB
- CC00CC
- 820000
- D473D4
- 355E3B
- FFCBA4
- FF1493
- A95C68
- 850101
- 843F5B
- FF9933
- 00BFFF
- 4A646C
- 556B2F
- 7E5E60
- 66424D
- 330066
- BA8759
- 1560BD
- 2243B6
- 669999
- C19A6B
- EDC9AF
- EA3C53
- B9F2FF
- 696969
- C53151
- 9B7653
- 1E90FF
- D71868
- 85BB65
- 828E84
- 664C28
- 967117
- 00009C
- E5CCC9
- EFDFBB
- E1A95F
- 555D50
- C2B280
- 1B1B1B
- 614051
- F0EAD6
- 1034A6
- 7DF9FF
- FF003F
- 00FFFF
- 00FF00
- 6F00FF
- F4BBFF
- CCFF00
- BF00FF
- 3F00FF
- 8F00FF
- FFFF33
- 50C878
- 6C3082
- 1B4D3E
- B48395
- AB4B52
- CC474B
- 563C5C
- 96C8A2
- 44D7A8
- C19A6B
- 801818
- B53389
- DE5285
- F400A1
- E5AA70
- 4D5D53
- FDD5B1
- 4F7942
- FF2800
- 6C541E
- FF5470
- CE2029
- B22222
- E25822
- FC8EAC
- 6B4423
- F7E98E
- EEDC82
- A2006D
- FFFAF0
- FFBF00
- FF1493
- CCFF00
- FF004F
- 014421
- 228B22
- A67B5B
- 856D4D
- 0072BB
- FD3F92
- 86608E
- 9EFD38
- D473D4
- FD6C9E
- 811453
- 4E1609
- C72C48
- F64A8A
- 77B5FE
- 8806CE
- AC1E44
- A6E7FF
- E936A7
- FF00FF
- C154C1
- FF77FF
- CC397B
- C74375
- E48400
- CC6666

51
containers/App.css
View File

@ -20,14 +20,26 @@ li {
}
#tag-navigation {
text-transform: capitalize;
font-size: 140%;
font-size: 130%;
font-weight: 300;
width: 20%;
border-right: 1px solid #ccc;
padding: 1em;
display: inline-block;
}
#tag-navigation h2 {
font-size: 120%;
font-weight: 300;
margin-top: 0;
opacity: .65;
padding-bottom: .3em;
border-bottom: 1px solid #ccc;
margin-bottom: 0
}
#tag-navigation .content {
padding-top: 1.5em;
border-right: 1px solid #ccc;
}
#to-select > li {
margin-bottom: 1.5em;
@ -36,23 +48,44 @@ li {
.choices {
margin-top: .6em;
}
.choices li {
.tag-value {
font-size: 75%;
font-weight: 400;
display: inline-block;
text-align: right;
margin-right: 1em;
background: #16a085;
color: white;
color: #2980b9;
border: 1px solid #2980b9;
padding: .05em .6em;
cursor: pointer;
border-radius: .1em
}
#to-select span.nb {
font-size: 60%;
margin-left: 2em;
}
#selected {
border-bottom: 1px solid #ccc;
padding-bottom: .6em;
margin-bottom: 2em;
padding-bottom: 1em;
margin-bottom: 1em;
font-weight: 500;
color: #16a085;
}
#selected .tag-value {
margin-left: 1em;
border: 1px solid #16a085;
color: #16a085;
margin-bottom: .5em;
}
#selected button {
background: none;
border: none;
float: right;
cursor: pointer;
color: #16a085;
}
#variables {
@ -71,11 +104,11 @@ li {
margin-right: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
}
.variable h3 {
font-weight: 400;
font-size: 120%;
text-transform: capitalize;
}
.variable ul {

4
containers/Explorer.js
View File

@ -9,11 +9,11 @@ import {tagsToSelectSelector, variablesSelector} from '../selectors'
class Explorer extends React.Component {
render() {
let {variables, selectedTags, selectedVariable, tagsToSelect, actions: {selectTag, selectVariable}} = this.props
let {variables, selectedTags, selectedVariable, tagsToSelect, actions: {selectTag, resetTags, selectVariable}} = this.props
return (
<div>
<h1>Les prélèvements sociaux sur les salaires en France</h1>
<TagNavigation selectedTags={selectedTags} tagsToSelect={tagsToSelect} selectTag={selectTag}/>
<TagNavigation selectedTags={selectedTags} tagsToSelect={tagsToSelect} selectTag={selectTag} resetTags={resetTags}/>
<Variables variables={variables}
selectedTags={selectedTags} selectedVariable={selectedVariable}
selectVariable={selectVariable}/>

4
entry.js
View File

@ -25,9 +25,7 @@ sagaMiddleware.run(rootSaga)
let anchor = document.querySelector('#js')
render(
<AppContainer>
<App store={store}/>
</AppContainer>,
<App store={store}/>,
anchor
)

2
load-parameters.js
View File

@ -1,7 +1,7 @@
/* Load all yaml files in a dir */
let requireContext = require.context(
'./parameters/prélèvements-sociaux-activité/cotisations', false,
/(agff|agirc|ags|apec|arrco|chomage|vieillesse|contribution_solidarité_autonomie|cotisation_exceptionnelle_temporaire).yaml$/)
/.yaml$/)
export default requireContext.keys()
.map( requireContext )
//flatten

1
model.js
View File

@ -73,6 +73,7 @@ let calculableItems =
)(mergedItemsByVariable),
mergedItems = R.values(mergedItemsByVariable)
console.log('LA', mergedItems)
export {
groupedItemsByVariable,
calculableItems,

4
parameters/prélèvements-sociaux-activité/cotisations/CSG.yaml
View File

@ -1,5 +1,7 @@
- variable: CSG
description: Contribution sociale généralisée. Prélèvement obligatoire qui participe au financement de la sécurité sociale.
description: |
Contribution sociale généralisée.
Prélèvement obligatoire qui participe au financement de la sécurité sociale.
tags:
déductible: non
calc:

1
parameters/prélèvements-sociaux-activité/cotisations/afaire.CSG.yaml
View File

@ -1 +0,0 @@
#

0
parameters/prélèvements-sociaux-activité/cotisations/afaire.gmp.yaml → parameters/prélèvements-sociaux-activité/cotisations/gmp.yaml.afaire
View File

3
parameters/prélèvements-sociaux-activité/cotisations/maladie.yaml
View File

@ -40,6 +40,7 @@
1994-01-01: .0386
1993-07-01: .03770
# TODO pourquoi pas "s'ajoute à : maladie" ?
- variable: maladie
complément: oui
# Ceci signifie que cette spécification ne remplace pas
@ -67,7 +68,7 @@
1994-01-01: 1
1989-09-01: 0.75
- variable: maladie alsace moselle
- variable: maladie
complément: oui
tags:
dû par: salarié

2
parameters/prélèvements-sociaux-activité/cotisations/participation_effort_construction.yaml
View File

@ -6,7 +6,7 @@
référence: https://www.service-public.fr/professionnels-entreprises/vosdroits/F22583
# TODO c'est une cotisation à versement particulier : plusieurs possibilités
tags:
branche: ?
branche: aucune idée
dû par: employeur
conditions:
- redevable effort construction

2
parameters/prélèvements-sociaux-activité/cotisations/taxe_apprentissage.yaml
View File

@ -2,7 +2,7 @@
description: Taxes d'apprentissage
référence: https://www.service-public.fr/professionnels-entreprises/vosdroits/F22574
tags:
branche: ?
branche: aucune idée
conditions:
entreprise_est_association_non_lucrative: non
linear:

4
reducers.js
View File

@ -1,11 +1,13 @@
import { combineReducers } from 'redux'
import { SELECT_TAG, SELECT_VARIABLE} from './actions'
import { SELECT_TAG, SELECT_VARIABLE, RESET_TAGS} from './actions'
function selectedTags(state = [], {type, tagName, tagValue}) {
switch (type) {
case SELECT_TAG:
return [...state, [tagName, tagValue]]
case RESET_TAGS:
return []
default:
return state
}

2
selectors.js
View File

@ -51,7 +51,7 @@ export let variablesSelector = createSelector(
selectedTags => R.filter(
({tags}) =>
R.all(
([tag, value]) => R.contains(value, tags[tag]),
([tag, value]) => tags[tag] && R.contains(value, tags[tag]),
)(selectedTags)
)(mergedItems)
)