Compare commits
No commits in common. "da5f53c267ddbe4015666d91945170b4709c954c" and "e22445646a3ab85998de26da97142f0ef6ddad0f" have entirely different histories.
da5f53c267
...
e22445646a
@ -1,13 +1,6 @@
|
||||
<template>
|
||||
<nav>
|
||||
<h1><router-link to="/"> Sous Margot </router-link></h1>
|
||||
<h2>
|
||||
<ul id="years">
|
||||
<li v-for="year in years" :key="year">
|
||||
<span @click="selectYear(year)" :class="{selected_year:year==selected_year}">{{ year }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</h2>
|
||||
<div class="nav-link">
|
||||
<router-link to="/edit">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
|
||||
@ -25,63 +18,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mapActions } from 'vuex'
|
||||
import { getYear } from 'date-fns'
|
||||
const today = new Date()
|
||||
export default {
|
||||
name: 'Nav',
|
||||
data () {
|
||||
return {
|
||||
current_year: getYear(today),
|
||||
selected_year: getYear(today),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
available_years: "travail/years",
|
||||
}),
|
||||
years: function () {
|
||||
return [...this.available_years, this.current_year].filter((v, i, a) => a.indexOf(v) === i)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
'setRange': 'setRange',
|
||||
}),
|
||||
selectYear: function (year) {
|
||||
this.selected_year=year
|
||||
this.setRange({
|
||||
start: `${this.current_year}-01`,
|
||||
end: `${this.current_year}-12`
|
||||
})
|
||||
}
|
||||
props: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
|
||||
#years {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#years > * {
|
||||
margin: 3px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.selected_year {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
@ -55,17 +55,12 @@ const travail = {
|
||||
return state.months
|
||||
},
|
||||
getMonth: (state) => (date) => {
|
||||
// Get a month by its date
|
||||
return state.months[date]
|
||||
},
|
||||
count: (state, getters) => {
|
||||
// Amount of mounts
|
||||
return Object.keys(getters.months).length
|
||||
},
|
||||
years: (state) => {
|
||||
// list of years with data
|
||||
return Object.keys(state.months).map(k => k.slice(0,4)).filter((v, i, a) => a.indexOf(v) === i)
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
cleanMonths (state) {
|
||||
|
Loading…
Reference in New Issue
Block a user