146 lines
3.5 KiB
Vue
146 lines
3.5 KiB
Vue
<template>
|
|
<div class="toolbar">
|
|
<button v-show='!addingMonth' @click='toggleAdding'>
|
|
Ajouter {{ formatedDate }}
|
|
</button>
|
|
</div>
|
|
<div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
|
|
<div class="date">
|
|
<div class="month">
|
|
{{ theMonth }}
|
|
</div>
|
|
<div class="year">
|
|
{{ theYear }}
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="validate" @click="save"> Valider </button>
|
|
<button class="cancel" @click="cancel"> Annuler </button>
|
|
</div>
|
|
</div>
|
|
<div class="datas">
|
|
<li v-for="cara in description" :key='cara.name'>
|
|
<label :for='cara.name'>{{ cara.label }}</label>
|
|
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import { parseISO, addMonths, format } from 'date-fns'
|
|
import frLocal from 'date-fns/locale/fr'
|
|
|
|
export default {
|
|
name: 'NewMonth',
|
|
props: {
|
|
},
|
|
components: {
|
|
},
|
|
data () {
|
|
return {
|
|
monthDate: new Date(),
|
|
monthCopy: Object,
|
|
addingMonth: false,
|
|
}
|
|
},
|
|
mounted () {
|
|
this.monthCopy = this.theEmptyMonth
|
|
},
|
|
watch: {
|
|
lastMonthDate: function () {
|
|
if (this.lastMonthDate) {
|
|
this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
|
|
} else {
|
|
this.monthDate = new Date()
|
|
}
|
|
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters('travail', {
|
|
'theEmptyMonth': 'TheEmptyMonth',
|
|
'lastMonthDate': 'lastMonthDate',
|
|
}),
|
|
...mapGetters('config', {
|
|
'description': 'descEditable',
|
|
}),
|
|
formatedDate: function () {
|
|
return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
|
|
},
|
|
theMonth: function () {
|
|
return format(this.monthDate, "MMM", {locale: frLocal})
|
|
},
|
|
theYear: function () {
|
|
return format(this.monthDate, "YYY", {locale: frLocal})
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions('travail', {
|
|
'createMonth': 'createMonth',
|
|
}),
|
|
...mapActions('config', {
|
|
'writeData': 'writeData',
|
|
}),
|
|
toggleAdding: function () {
|
|
this.addingMonth = !this.addingMonth
|
|
},
|
|
save: function () {
|
|
console.log("save")
|
|
console.log(this.monthCopy)
|
|
this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
|
|
this.toggleAdding()
|
|
this.writeData()
|
|
},
|
|
cancel: function () {
|
|
this.toggleAdding()
|
|
this.monthCopy = this.theEmptyMonth
|
|
},
|
|
},
|
|
}
|
|
</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 > 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;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
label{
|
|
text-align: right;
|
|
font-size: 0.8em;
|
|
}
|
|
.value {
|
|
font-weight: bold;
|
|
}
|
|
.toolbar {
|
|
text-align: center;
|
|
}
|
|
</style>
|