Feat: computed attributes for months

This commit is contained in:
Bertrand Benjamin 2021-08-13 10:19:26 +02:00
parent 9cf4cf934b
commit 5eb9837e1c
2 changed files with 93 additions and 37 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="month-presentation"> <div class="month-presentation">
<div class="date"> <div id="date">
<div class="month"> <div class="month">
{{ theMonth }} {{ theMonth }}
</div> </div>
@ -13,19 +13,17 @@
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button> <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div> </div>
</div> </div>
<div id="display"> <div id="display" v-show="!editing">
<ul v-show="!editing"> <div class="hightlight" v-for="cara in monthDesc" :key='cara.name'>
<li v-for="cara in monthDesc" :key='cara.name'>
<label :for='cara.name'>{{ cara.desc }}</label> <label :for='cara.name'>{{ cara.desc }}</label>
<span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span> <span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
</li> </div>
</ul> </div>
<ul v-show="editing"> <div id="edit" v-show="editing">
<li v-for="cara in monthDesc" :key='cara.name'> <div v-for="cara in monthDesc" :key='cara.name'>
<label :for='cara.name'>{{ cara.desc }}</label> <label :for='cara.name'>{{ cara.desc }}</label>
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value"> <input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
</li> </div>
</ul>
</div> </div>
</div> </div>
</template> </template>
@ -98,7 +96,7 @@ export default {
margin: 20px; margin: 20px;
} }
.date { #date {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
border-right: 1px solid black; border-right: 1px solid black;
@ -107,18 +105,24 @@ export default {
font-size: 2em; font-size: 2em;
} }
ul { #display {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: center;
justify-content: space-around;
} }
li { #display > * {
margin: 3px; margin: 3px;
width: 30%; width: 80px;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
label{
text-align: right;
font-size: 0.8em;
}
.value { .value {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
@ -133,4 +137,5 @@ export default {
font-size: 0.8em; font-size: 0.8em;
width: auto; width: auto;
} }
</style> </style>

View File

@ -1,6 +1,13 @@
import path from 'path' import path from 'path'
import Papa from 'papaparse' import Papa from 'papaparse'
import { writeFile } from 'fs' import { writeFile } from 'fs'
import {
ca,
notInvoiced,
caPro,
caPerso,
caPersoUntouch,
} from '../../lib/months.js'
const config = { const config = {
namespaced: true, namespaced: true,
@ -12,68 +19,112 @@ const config = {
caProPercentage: 0.5, caProPercentage: 0.5,
monthDesc : [ monthDesc : [
{ {
name: 'caTheo',
color: '', color: '',
desc: 'CA "scéances effectuées"', desc: 'CA "scéances effectuées"',
type: 'base', type: 'base',
name: 'caTheo',
unit: '€', unit: '€',
hightlight: true, hightlight: false,
output: month => month.caTheo, output: month => month.caTheo,
}, },
{ {
name: 'caRetro',
color: '', color: '',
desc: 'CA "Séances facturées"', desc: 'CA "Séances facturées"',
type: 'base', type: 'base',
name: 'caRetro',
unit: '€', unit: '€',
hightlight: false, hightlight: false,
output: month => month.caRetro, output: month => month.caRetro,
}, },
{ {
name: 'caReact',
color: '', color: '',
desc: 'CA "Séances facturées" réactualisé', desc: 'CA "Séances facturées" réactualisé',
type: 'base', type: 'base',
name: 'caReact',
unit: '€', unit: '€',
hightlight: true, hightlight: false,
output: month => month.caReact, output: month => month.caReact,
}, },
{ {
name: 'sessionQty',
color: '', color: '',
desc: 'Nombre de séances effectuées', desc: 'Nombre de séances effectuées',
type: 'base',
name: 'sessionQty',
unit: '', unit: '',
hightlight: false, hightlight: false,
output: month => month.sessionQty, output: month => month.sessionQty,
}, },
{ {
name: 'retro',
color: '', color: '',
desc: 'Montant de la rétrocession', desc: 'Montant de la rétrocession',
type: 'base', type: 'base',
name: 'retro',
unit: '€', unit: '€',
hightlight: false, hightlight: false,
output: month => month.retro, output: month => month.retro,
}, },
{ {
name: 'remuneration',
color: '', color: '',
desc: 'Rémuneration', desc: 'Rémuneration',
type: 'base', type: 'base',
name: 'remuneration',
unit: '€', unit: '€',
hightlight: true, hightlight: true,
output: month => month.remuneration, output: month => month.remuneration,
}, },
{ {
name: 'proPercentage',
color: '', color: '',
desc: 'Pourcentage du CA pour la partie pro', desc: 'Pourcentage du CA pour la partie pro',
type: 'base', type: 'base',
name: 'proPercentage',
unit: '%', unit: '%',
hightlight: false, hightlight: false,
output: month => month.proPercentage, output: month => month.proPercentage,
}, },
{
name: 'ca',
color: '',
desc: 'ca',
type: 'compute',
unit: '€',
hightlight: true,
output: month => ca(month),
},
{
name: 'notInvoiced',
color: '',
desc: 'Non facturé',
type: 'compute',
unit: '€',
hightlight: true,
output: month => notInvoiced(month),
},
{
name: 'caPro',
color: '',
desc: 'CA pour le partie pro',
type: 'compute',
unit: '€',
hightlight: false,
output: month => caPro(month),
},
{
name: 'caPerso',
color: '',
desc: 'CA destiné à la rémuneration',
type: 'compute',
unit: '€',
hightlight: false,
output: month => caPerso(month),
},
{
name: 'caPersoUntouch',
color: '',
desc: 'CA destiné à la rémuneration non reversé',
type: 'compute',
unit: '€',
hightlight: false,
output: month => caPersoUntouch(month),
},
], ],
} }
}, },