Fix: Update month input when clicking on preselected ranges
This commit is contained in:
parent
4d77e61b25
commit
b266e9de9b
@ -4,12 +4,12 @@
|
||||
<h2>Période</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="month" v-model="range.start">
|
||||
<input type="month" v-model="range.end">
|
||||
<input type="month" @input="updateStart" v-model="start">
|
||||
<input type="month" @input="updateEnd" v-model="end">
|
||||
</li>
|
||||
<li>
|
||||
<button @click="setRange6months" :active='selected=="month"'>6 mois</button>
|
||||
<button @click="setRange1year" :active='selected=="year"'>1 an</button>
|
||||
<button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
|
||||
<button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
|
||||
<button @click="setRangeAll" :active='selected=="all"'>Tout</button>
|
||||
</li>
|
||||
</ul>
|
||||
@ -19,7 +19,7 @@
|
||||
<script>
|
||||
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import { addMonths, format, parseISO } from 'date-fns'
|
||||
import { setMonth, addMonths, format, parseISO } from 'date-fns'
|
||||
|
||||
const today = new Date();
|
||||
|
||||
@ -30,25 +30,46 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
selected: "",
|
||||
start: "",
|
||||
end: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
range: "Range",
|
||||
range: "range",
|
||||
monthsDate: "MonthsDate",
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
range: function (newRange, oldRange) {
|
||||
this.start = this.range.start
|
||||
this.end = this.range.end
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.setRangeFromJanuary()
|
||||
this.start = this.range.start
|
||||
this.end = this.range.end
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
setRange: "setRange",
|
||||
}),
|
||||
setRange6months: function () {
|
||||
const start = addMonths(new Date(), -6)
|
||||
updateStart: function () {
|
||||
this.selected = "custom"
|
||||
this.setRange({start: this.start, end: this.end})
|
||||
},
|
||||
updateEnd: function () {
|
||||
this.selected = "custom"
|
||||
this.setRange({start: this.start, end: this.end})
|
||||
},
|
||||
setRangeFromJanuary: function () {
|
||||
const start = setMonth(today, 0)
|
||||
const range = {
|
||||
start: format(start, 'yyyy-MM'),
|
||||
end: format(today, 'yyyy-MM'),
|
||||
}
|
||||
this.selected = "month"
|
||||
this.selected = "january"
|
||||
this.setRange(range)
|
||||
},
|
||||
setRange1year: function () {
|
||||
@ -76,40 +97,39 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
ul > * {
|
||||
margin-top: 10px;
|
||||
}
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
ul > * {
|
||||
margin-top: 10px;
|
||||
}
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
flex-basis: 33%;
|
||||
height: 3rem;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
flex-basis: 33%;
|
||||
height: 3rem;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
@ -76,7 +76,7 @@ const travail = {
|
||||
},
|
||||
getters: {
|
||||
TheEmptyMonth(state) { return { ...state.empty } },
|
||||
Range(state) { return state.range },
|
||||
range(state) { return state.range },
|
||||
MonthsDate(state) {
|
||||
// Get months inside the range
|
||||
return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
|
||||
|
Loading…
Reference in New Issue
Block a user