Feat: computed attributes for months
This commit is contained in:
parent
9cf4cf934b
commit
5eb9837e1c
@ -1,32 +1,30 @@
|
||||
<template>
|
||||
<div class="month-presentation">
|
||||
<div class="date">
|
||||
<div class="month">
|
||||
{{ theMonth }}
|
||||
</div>
|
||||
<div class="year">
|
||||
{{ theYear }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
|
||||
<button class="validate" @click="save" v-show="editing"> Valider </button>
|
||||
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="display">
|
||||
<ul v-show="!editing">
|
||||
<li v-for="cara in monthDesc" :key='cara.name'>
|
||||
<div id="date">
|
||||
<div class="month">
|
||||
{{ theMonth }}
|
||||
</div>
|
||||
<div class="year">
|
||||
{{ theYear }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
|
||||
<button class="validate" @click="save" v-show="editing"> Valider </button>
|
||||
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="display" v-show="!editing">
|
||||
<div class="hightlight" v-for="cara in monthDesc" :key='cara.name'>
|
||||
<label :for='cara.name'>{{ cara.desc }}</label>
|
||||
<span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-show="editing">
|
||||
<li v-for="cara in monthDesc" :key='cara.name'>
|
||||
</div>
|
||||
</div>
|
||||
<div id="edit" v-show="editing">
|
||||
<div v-for="cara in monthDesc" :key='cara.name'>
|
||||
<label :for='cara.name'>{{ cara.desc }}</label>
|
||||
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -98,7 +96,7 @@ export default {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.date {
|
||||
#date {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
border-right: 1px solid black;
|
||||
@ -107,18 +105,24 @@ export default {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
#display {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
li {
|
||||
#display > * {
|
||||
margin: 3px;
|
||||
width: 30%;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
label{
|
||||
text-align: right;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.value {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
@ -133,4 +137,5 @@ export default {
|
||||
font-size: 0.8em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import path from 'path'
|
||||
import Papa from 'papaparse'
|
||||
import { writeFile } from 'fs'
|
||||
import {
|
||||
ca,
|
||||
notInvoiced,
|
||||
caPro,
|
||||
caPerso,
|
||||
caPersoUntouch,
|
||||
} from '../../lib/months.js'
|
||||
|
||||
const config = {
|
||||
namespaced: true,
|
||||
@ -12,68 +19,112 @@ const config = {
|
||||
caProPercentage: 0.5,
|
||||
monthDesc : [
|
||||
{
|
||||
name: 'caTheo',
|
||||
color: '',
|
||||
desc: 'CA "scéances effectuées"',
|
||||
type: 'base',
|
||||
name: 'caTheo',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
hightlight: false,
|
||||
output: month => month.caTheo,
|
||||
},
|
||||
{
|
||||
name: 'caRetro',
|
||||
color: '',
|
||||
desc: 'CA "Séances facturées"',
|
||||
type: 'base',
|
||||
name: 'caRetro',
|
||||
unit: '€',
|
||||
hightlight: false,
|
||||
output: month => month.caRetro,
|
||||
},
|
||||
{
|
||||
name: 'caReact',
|
||||
color: '',
|
||||
desc: 'CA "Séances facturées" réactualisé',
|
||||
type: 'base',
|
||||
name: 'caReact',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
hightlight: false,
|
||||
output: month => month.caReact,
|
||||
},
|
||||
{
|
||||
name: 'sessionQty',
|
||||
color: '',
|
||||
desc: 'Nombre de séances effectuées',
|
||||
type: 'base',
|
||||
name: 'sessionQty',
|
||||
unit: '',
|
||||
hightlight: false,
|
||||
output: month => month.sessionQty,
|
||||
},
|
||||
{
|
||||
name: 'retro',
|
||||
color: '',
|
||||
desc: 'Montant de la rétrocession',
|
||||
type: 'base',
|
||||
name: 'retro',
|
||||
unit: '€',
|
||||
hightlight: false,
|
||||
output: month => month.retro,
|
||||
},
|
||||
{
|
||||
name: 'remuneration',
|
||||
color: '',
|
||||
desc: 'Rémuneration',
|
||||
type: 'base',
|
||||
name: 'remuneration',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
output: month => month.remuneration,
|
||||
},
|
||||
{
|
||||
name: 'proPercentage',
|
||||
color: '',
|
||||
desc: 'Pourcentage du CA pour la partie pro',
|
||||
type: 'base',
|
||||
name: 'proPercentage',
|
||||
unit: '%',
|
||||
hightlight: false,
|
||||
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),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user