107 lines
2.3 KiB
JavaScript
107 lines
2.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import './SelectedVariable.css'
|
|
import TagMap from './TagMap'
|
|
import R from 'ramda'
|
|
|
|
export default class SelectedVariable extends Component {
|
|
render() {
|
|
let {
|
|
variable: {
|
|
name,
|
|
first: {
|
|
description
|
|
},
|
|
tags,
|
|
calculable
|
|
},
|
|
selectedTags
|
|
} = this.props,
|
|
|
|
tagsList = R.pluck('tags', calculable),
|
|
commonTags = R.tail(tagsList).reduce(
|
|
(result, next) => R.intersection(result, R.toPairs(next)),
|
|
R.toPairs(R.head(tagsList))
|
|
),
|
|
itemsWithUniqueTags = R.map(item => [item, R.fromPairs(R.difference(R.toPairs(item.tags), commonTags))], calculable)
|
|
|
|
|
|
return (
|
|
<section id="selected-variable">
|
|
<h1>{name}</h1>
|
|
<p>{description}</p>
|
|
<TagMap data={commonTags} />
|
|
{/*
|
|
<ul>
|
|
{Object.keys(tags)
|
|
.filter(name => !selectedTags.find(([n]) => name == n))
|
|
.map(name =>
|
|
<li key={name}>
|
|
{name + ': ' + tags[name]}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
*/}
|
|
<Items itemsWithUniqueTags={itemsWithUniqueTags}/>
|
|
</section>)
|
|
}
|
|
}
|
|
|
|
class Items extends Component {
|
|
render() {
|
|
let {itemsWithUniqueTags} = this.props
|
|
|
|
return (
|
|
<ul id="calculable-items">
|
|
{itemsWithUniqueTags.map(([item, tags], i) =>
|
|
<Item key={i} item={item} tags={tags}/>
|
|
)}
|
|
</ul>
|
|
)
|
|
}
|
|
}
|
|
|
|
let Item = ({item: {linear, marginalRateTaxScale}, tags}) =>
|
|
<li className="item">
|
|
<div className="left">
|
|
<TagMap data={tags} />
|
|
</div>
|
|
<div className="right">
|
|
{ linear && <Linear data={linear}/>
|
|
|| marginalRateTaxScale && <TaxScale data={marginalRateTaxScale}/>
|
|
}
|
|
</div>
|
|
</li>
|
|
|
|
|
|
let Linear = ({data: {
|
|
base,
|
|
limit,
|
|
historique
|
|
}}) => <div className="calc">
|
|
<h3>Calcul linéaire</h3>
|
|
<div className="linear">
|
|
<div className="base">
|
|
<div className="label">base</div>
|
|
<div className="value">{base}</div>
|
|
</div>
|
|
<span className="operator">
|
|
✕
|
|
</span>
|
|
<div className="rate">
|
|
<div className="label">Taux</div>
|
|
<div className="value">{
|
|
historique[(Object.keys(historique).sort()[0])]
|
|
}</div>
|
|
</div>
|
|
{ limit != null && <div className="limit">
|
|
<span className="label">dans la limite de : </span>
|
|
<span className="value"> {limit}</span>
|
|
</div> }
|
|
</div>
|
|
</div>
|
|
|
|
let TaxScale = ({data}) => <div className="calc tax-scale">
|
|
<h3>Règle de calcul: barème</h3>
|
|
{JSON.stringify(data)}
|
|
</div>
|