lafrite/Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Feat: presentation and edit months

Browse Source
This commit is contained in:
Bertrand Benjamin 2021-08-02 14:23:00 +02:00
parent 091cee308a
commit 5e241dadb8
4 changed files with 159 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/MonthForm.vue
View File

@ -34,6 +34,7 @@ import { mapGetters } from 'vuex'
export default {
name: 'MonthForm',
props: {
editMonth: {}
},
computed: {
...mapGetters({

76
src/components/MonthPresentation.vue
View File

@ -1,34 +1,87 @@
<template>
<div class="month-presentation">
<div class="date">
{{ month.date }}
{{ TheDate }}
</div>
<div class="infos">
<div id="display">
<ul>
<li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
<li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
<li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
<li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
<li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
<li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
<li>
<label for="ca-theo">CA théorique</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
<input type="number" v-model="monthCopy.ca_theo" id="ca-theo" class="value" v-show="editing">
</li>
<li>
<label for="ca-retro">CA rétrocession</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
<input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
</li>
<li>
<label for="ca-react">CA réactualisé</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
<input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
</li>
<li>
<label for="nbr-seances">Nombre de séances effectuées</label>
<span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
<input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
<input type="number" v-model="monthCopy.retro" id="retro" class="value" v-show="editing">
</li>
<li>
<label for="remumeration">Rémunération effectuée</label>
<span class="value" v-show="!editing">{{ TheMonth.remumeration ?? "∅"}}€</span>
<input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value" v-show="editing">
</li>
</ul>
</div>
<div class="actions">
<button class="edit"> Éditer </button>
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'MonthPresentation',
props: {
month: {
TheDate: String,
TheMonth: {
type: Object,
}
},
data () {
return {
editing: false,
monthCopy: Object,
}
},
mounted: function () {
this.monthCopy = {...this.TheMonth}
},
computed: {
},
methods: {
...mapActions('travail', {
'updateMonth': 'updateMonth',
}),
toggleEdit: function () {
this.editing = !this.editing
},
save: function () {
this.updateMonth({date: this.TheDate, month: this.monthCopy})
this.toggleEdit()
},
cancel: function () {
this.monthCopy = {...this.TheMonth}
this.toggleEdit()
},
}
}
</script>
@ -69,4 +122,7 @@ li {
font-weight: bold;
}
.novisible {
display: None;
}
</style>

7
src/components/MonthsUl.vue
View File

@ -1,7 +1,7 @@
<template>
<ul>
<li v-for="month in months" :key="month.date">
<month-presentation :month=month></month-presentation>
<li v-for="date in dates" :key="date">
<month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
</li>
</ul>
@ -19,7 +19,8 @@ export default {
},
computed: {
...mapGetters({
months: "travail/Months",
dates: "travail/MonthsDate",
getMonth: "travail/getMonth",
})
},
}

55
src/store/travail/index.js
View File

@ -3,81 +3,86 @@ const travail = {
state () {
return {
empty: {
date: "",
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: null, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 0, // montant de la rétrocession
remumeration: 0, // rémunération décidée
},
months: [
{
date: "2021/01",
months: {
"2021/01": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 6747, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 893, // montant de la rétrocession
remumeration: 2000, // rémunération décidée
},
{
date: "2021/02",
"2021/02": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5183, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 665, // montant de la rétrocession
remumeration: 1500, // rémunération décidée
},
{
date: "2021/03",
"2021/03": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 7088, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 855, // montant de la rétrocession
remumeration: 2000, // rémunération décidée
},
{
date: "2021/04",
"2021/04": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 4194, // ca au moment de la rétrocession
ca_react: 5630, // ca réactualisé
retro: 627, // montant de la rétrocession
remumeration: 2000, // rémunération décidée
},
{
date: "2021/05",
"2021/05": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5564, // ca au moment de la rétrocession
ca_react: 6335, // ca réactualisé
retro: 699, // montant de la rétrocession
remumeration: 2800, // rémunération décidée
},
{
date: "2021/06",
"2021/06": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: 0, // Nombre de séances effectuées sur le mois
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5442, // ca au moment de la rétrocession
ca_react: 6335, // ca réactualisé
retro: 638, // montant de la rétrocession
remumeration: 2800, // rémunération décidée
},
],
},
}
},
getters: {
cCount (state) {return state.months.length},
Count (state) {return state.months.length},
TheEmptyMonth (state) {return state.empty},
Months (state) {
return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
MonthsDate (state) {
return Object.keys(state.months).sort()
//return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
},
getMonth: (state) => (date) => {
return state.months[date]
},
},
mutations: {
updateMonth (state, {date, month}) {
state.months[date] = month
}
},
actions: {
updateMonth (context, {date, month}) {
context.commit('updateMonth', {date, month})
},
},
}
export default travail