132 lines
3.9 KiB
Vue
132 lines
3.9 KiB
Vue
<template>
|
|
<div class="month-presentation">
|
|
<div class="date">
|
|
{{ TheDate }}
|
|
</div>
|
|
<div id="display">
|
|
<ul>
|
|
<li>
|
|
<label for="ca-theo">CA "Séances effectuées"</label>
|
|
<span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
|
|
<input type="number" v-model.number="monthCopy.ca_theo" id="ca-theo" class="value" v-show="editing">
|
|
</li>
|
|
<li>
|
|
<label for="ca-retro">CA "Séances facturées"</label>
|
|
<span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
|
|
<input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
|
|
</li>
|
|
<li>
|
|
<label for="ca-react">CA "Séances facturées" réactualisé</label>
|
|
<span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
|
|
<input type="number" v-model.number="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.number="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.number="monthCopy.retro" id="retro" class="value" v-show="editing">
|
|
</li>
|
|
<li>
|
|
<label for="remuneration">Rémunération </label>
|
|
<span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
|
|
<input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="actions">
|
|
<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: {
|
|
TheDate: String,
|
|
TheMonth: {
|
|
type: Object,
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
editing: false,
|
|
monthCopy: Object,
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.monthCopy = {...this.TheMonth}
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
...mapActions('travail', {
|
|
'updateMonth': 'updateMonth',
|
|
}),
|
|
...mapActions('config', {
|
|
'loadData': 'loadData',
|
|
}),
|
|
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>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
.month-presentation {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
background-color: mintcream;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.month-presentation > * {
|
|
margin: 20px;
|
|
}
|
|
|
|
.date {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.novisible {
|
|
display: None;
|
|
}
|
|
</style>
|