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

Compare commits

base: lafrite:6a0b0b9c6ec7c48e7583928da19fda17e27a20ff
Branches Tags
lafrite:master
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
..
compare: lafrite:091cee308a26a2ab19c0445bde93daab201b6b68
Branches Tags
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
lafrite:master

No commits in common. "6a0b0b9c6ec7c48e7583928da19fda17e27a20ff" and "091cee308a26a2ab19c0445bde93daab201b6b68" have entirely different histories.
6a0b0b9c6e ... 091cee308a

5 changed files with 125 additions and 272 deletions
Show Stats Expand all files Collapse all files

124
src/components/CreateMonth.vue
View File

@ -1,47 +1,21 @@
<template> <template>
<div id="create-month" > <div class="month-presentation" id="new-month">
<div class="month-presentation" id="new-month"> <div class="date">
<div class="date"> <input type="month" v-model="monthDate">
<input type="month" v-model="monthDate"> </div>
</div> <div class="infos">
<div class="datas"> <month-form></month-form>
<ul> </div>
<li> <div class="actions">
<label for="ca-theo">CA théorique</label> <button class="validate"> Valider </button>
<input type="number" v-model="monthCopy.ca_theo" id="ca-theo" class="value" > <button class="cancel"> Annuler </button>
</li> </div>
<li>
<label for="ca-retro">CA rétrocession</label>
<input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" >
</li>
<li>
<label for="ca-react">CA réactualisé</label>
<input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" >
</li>
<li>
<label for="nbr-seances">Nombre de séances effectuées</label>
<input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" >
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<input type="number" v-model="monthCopy.retro" id="retro" class="value" >
</li>
<li>
<label for="remumeration">Rémunération effectuée</label>
<input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value">
</li>
</ul>
</div>
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import MonthForm from "./MonthForm"
const today = new Date(); const today = new Date();
function formatDate(date) { function formatDate(date) {
var y = ''+date.getFullYear() var y = ''+date.getFullYear()
@ -55,76 +29,34 @@ export default {
props: { props: {
}, },
components: { components: {
MonthForm: MonthForm,
}, },
data () { data () {
return { return {
monthDate: formatDate(today), monthDate: formatDate(today),
monthCopy: Object,
} }
}, },
mounted () {
this.monthCopy = this.theEmptyMonth
},
computed: { computed: {
...mapGetters('travail', {
'theEmptyMonth': 'TheEmptyMonth',
}),
},
methods: {
...mapActions('travail', {
'createMonth': 'createMonth',
}),
save: function () {
console.log("save")
console.log(this.monthCopy)
this.createMonth({date: this.monthDate, month: this.monthCopy})
},
cancel: function () {
this.monthCopy = this.theEmptyMonth
},
}, },
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.month-presentation { .month-presentation {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
background-color: palegreen; background-color: palegreen;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
}
.month-presentation > * {
margin: 20px;
} }
.month-presentation > * {
margin: 20px;
}
.date > input {
width: 150px;
}
.date > input {
font-size: 1.2em;
font-weight: bold;
display: inline-flex;
width: 6rem;
flex-wrap: wrap;
align-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
.value {
font-size: 1.5em;
font-weight: bold;
}
</style> </style>

53
src/components/MonthForm.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<form> <form>
<ul> <ul>
<li> <li>
<label for="ca-theo">CA théorique</label> <label for="ca-theo">CA théorique</label>
<input type="number" id="ca-theo"> <input type="number" id="ca-theo">
</li> </li>
<li> <li>
<label for="ca-retro">CA rétrocession</label> <label for="ca-retro">CA rétrocession</label>
<input type="number" id="ca-retro"> <input type="number" id="ca-retro">
</li> </li>
<li> <li>
<label for="ca-react">CA réactualisé</label> <label for="ca-react">CA réactualisé</label>
<input type="number" id="ca-react"> <input type="number" id="ca-react">
</li> </li>
<li> <li>
<label for="nbr-seance">Nombre de séances effectuées</label> <label for="nbr-seance">Nombre de séances effectuées</label>
<input type="number" id="nbr-seance"> <input type="number" id="nbr-seance">
</li> </li>
<li> <li>
<label for="retro">Montant de la rétrocession</label> <label for="retro">Montant de la rétrocession</label>
<input type="number" id="retro"> <input type="number" id="retro">
</li> </li>
<li> <li>
<label for="remumeration">Rémunération effectuée</label> <label for="remumeration">Rémunération effectuée</label>
<input type="number" id="remumeration"> <input type="number" id="remumeration">
</li> </li>
</ul> </ul>
</form> </form>
</template> </template>
@ -34,7 +34,6 @@ import { mapGetters } from 'vuex'
export default { export default {
name: 'MonthForm', name: 'MonthForm',
props: { props: {
editMonth: {}
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({

138
src/components/MonthPresentation.vue
View File

@ -1,128 +1,72 @@
<template> <template>
<div class="month-presentation"> <div class="month-presentation">
<div class="date"> <div class="date">
{{ TheDate }} {{ month.date }}
</div> </div>
<div id="display"> <div class="infos">
<ul> <ul>
<li> <li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
<label for="ca-theo">CA théorique</label> <li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
<span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span> <li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
<input type="number" v-model="monthCopy.ca_theo" id="ca-theo" class="value" v-show="editing"> <li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
</li> <li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
<li> <li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></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> </ul>
</div> </div>
<div class="actions"> <div class="actions">
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button> <button class="edit"> Éditer </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex'
export default { export default {
name: 'MonthPresentation', name: 'MonthPresentation',
props: { props: {
TheDate: String, month: {
TheMonth: {
type: Object, type: Object,
} }
}, },
data () {
return {
editing: false,
monthCopy: Object,
}
},
mounted: function () {
this.monthCopy = {...this.TheMonth}
},
computed: { 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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.month-presentation { .month-presentation {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
background-color: mintcream; background-color: mintcream;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
}
.month-presentation > * {
margin: 20px;
} }
.month-presentation > * {
margin: 20px;
}
.date { .date {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
} }
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
li { li {
margin: 3px; margin: 3px;
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.value { .value {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
} }
.novisible {
display: None;
}
</style> </style>

7
src/components/MonthsUl.vue
View File

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

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

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