147 lines
3.6 KiB
Vue
147 lines
3.6 KiB
Vue
<template>
|
|
<div class="month-presentation">
|
|
<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 descHightlights" :key='cara.name'>
|
|
<label :for='cara.name'>{{ cara.label }}</label>
|
|
<span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
|
|
</div>
|
|
</div>
|
|
<div id="edit" v-show="editing">
|
|
<div v-for="cara in descEditable" :key='cara.name' class="cara">
|
|
<label :for='cara.name'>{{ cara.label }}</label>
|
|
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
import { parseISO, format } from 'date-fns'
|
|
import frLocal from 'date-fns/locale/fr'
|
|
export default {
|
|
name: 'MonthPresentation',
|
|
props: {
|
|
TheDate: String,
|
|
TheMonth: {
|
|
type: Object,
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
editing: false,
|
|
monthCopy: Object,
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.monthCopy = {...this.TheMonth}
|
|
},
|
|
computed: {
|
|
...mapGetters('config', {
|
|
'descHightlights': 'monthHightlightDesc',
|
|
'descEditable': 'descEditable',
|
|
}),
|
|
rawDate: function () {
|
|
return parseISO(this.TheDate, "yyyy-MM", new Date())
|
|
},
|
|
theMonth: function () {
|
|
return format(this.rawDate, "MMM", {locale: frLocal})
|
|
},
|
|
theYear: function () {
|
|
return format(this.rawDate, "YYY", )
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions('travail', {
|
|
'updateMonth': 'updateMonth',
|
|
}),
|
|
...mapActions('config', {
|
|
'writeData': 'writeData',
|
|
}),
|
|
toggleEdit: function () {
|
|
this.editing = !this.editing
|
|
},
|
|
save: function () {
|
|
this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
|
|
this.writeData()
|
|
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: grid;
|
|
grid-template-columns: 140px 1fr;
|
|
}
|
|
.month-presentation > * {
|
|
margin: 20px;
|
|
}
|
|
|
|
#date {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
border-right: 1px solid black;
|
|
}
|
|
.month{
|
|
font-size: 2em;
|
|
}
|
|
|
|
#display {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
#display > * {
|
|
margin: 3px;
|
|
width: 80px;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
label{
|
|
text-align: right;
|
|
font-size: 0.8em;
|
|
}
|
|
.value {
|
|
font-size: 1.5em;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.novisible {
|
|
display: None;
|
|
}
|
|
button {
|
|
margin-top: 5px;
|
|
padding: 4px;
|
|
font-size: 0.8em;
|
|
width: auto;
|
|
}
|
|
.cara {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
</style>
|