Feat: ajout d'un nouveau mois
This commit is contained in:
parent
5e241dadb8
commit
6a0b0b9c6e
@ -1,21 +1,47 @@
|
||||
<template>
|
||||
<div class="month-presentation" id="new-month">
|
||||
<div class="date">
|
||||
<input type="month" v-model="monthDate">
|
||||
</div>
|
||||
<div class="infos">
|
||||
<month-form></month-form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="validate"> Valider </button>
|
||||
<button class="cancel"> Annuler </button>
|
||||
</div>
|
||||
<div id="create-month" >
|
||||
<div class="month-presentation" id="new-month">
|
||||
<div class="date">
|
||||
<input type="month" v-model="monthDate">
|
||||
</div>
|
||||
<div class="datas">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="ca-theo">CA théorique</label>
|
||||
<input type="number" v-model="monthCopy.ca_theo" id="ca-theo" class="value" >
|
||||
</li>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MonthForm from "./MonthForm"
|
||||
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
const today = new Date();
|
||||
function formatDate(date) {
|
||||
var y = ''+date.getFullYear()
|
||||
@ -29,34 +55,76 @@ export default {
|
||||
props: {
|
||||
},
|
||||
components: {
|
||||
MonthForm: MonthForm,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
monthDate: formatDate(today),
|
||||
monthCopy: Object,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.monthCopy = this.theEmptyMonth
|
||||
},
|
||||
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>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.month-presentation {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: palegreen;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
.month-presentation {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: palegreen;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
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>
|
||||
|
||||
@ -11,7 +11,7 @@ const travail = {
|
||||
remumeration: 0, // rémunération décidée
|
||||
},
|
||||
months: {
|
||||
"2021/01": {
|
||||
"2021-01": {
|
||||
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
|
||||
ca_retro: 6747, // ca au moment de la rétrocession
|
||||
@ -19,7 +19,7 @@ const travail = {
|
||||
retro: 893, // montant de la rétrocession
|
||||
remumeration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021/02": {
|
||||
"2021-02": {
|
||||
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
|
||||
ca_retro: 5183, // ca au moment de la rétrocession
|
||||
@ -27,7 +27,7 @@ const travail = {
|
||||
retro: 665, // montant de la rétrocession
|
||||
remumeration: 1500, // rémunération décidée
|
||||
},
|
||||
"2021/03": {
|
||||
"2021-03": {
|
||||
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
|
||||
ca_retro: 7088, // ca au moment de la rétrocession
|
||||
@ -35,7 +35,7 @@ const travail = {
|
||||
retro: 855, // montant de la rétrocession
|
||||
remumeration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021/04": {
|
||||
"2021-04": {
|
||||
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
|
||||
ca_retro: 4194, // ca au moment de la rétrocession
|
||||
@ -43,7 +43,7 @@ const travail = {
|
||||
retro: 627, // montant de la rétrocession
|
||||
remumeration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021/05": {
|
||||
"2021-05": {
|
||||
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
|
||||
ca_retro: 5564, // ca au moment de la rétrocession
|
||||
@ -51,7 +51,7 @@ const travail = {
|
||||
retro: 699, // montant de la rétrocession
|
||||
remumeration: 2800, // rémunération décidée
|
||||
},
|
||||
"2021/06": {
|
||||
"2021-06": {
|
||||
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
|
||||
ca_retro: 5442, // ca au moment de la rétrocession
|
||||
@ -64,7 +64,7 @@ const travail = {
|
||||
},
|
||||
getters: {
|
||||
Count (state) {return state.months.length},
|
||||
TheEmptyMonth (state) {return state.empty},
|
||||
TheEmptyMonth (state) {return {...state.empty}},
|
||||
MonthsDate (state) {
|
||||
return Object.keys(state.months).sort()
|
||||
//return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||
@ -76,11 +76,27 @@ const travail = {
|
||||
mutations: {
|
||||
updateMonth (state, {date, month}) {
|
||||
state.months[date] = month
|
||||
}
|
||||
},
|
||||
createMonth (state, {date, month}) {
|
||||
state.months[date] = month
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
updateMonth (context, {date, month}) {
|
||||
context.commit('updateMonth', {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")
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user