Compare commits
No commits in common. "7b742d599a0ee25647aafc8a1157d37f6e5793ca" and "6a0b0b9c6ec7c48e7583928da19fda17e27a20ff" have entirely different histories.
7b742d599a
...
6a0b0b9c6e
@ -14,7 +14,6 @@
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"date-fns": "^2.23.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.8",
|
||||
"vuex": "^4.0.2"
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<h2>Période</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="month" v-model="range.start">
|
||||
<input type="month" v-model="range.end">
|
||||
</li>
|
||||
<li>
|
||||
<button @click="setRange6months" :active='selected=="month"'>6 mois</button>
|
||||
<button @click="setRange1year" :active='selected=="year"'>1 an</button>
|
||||
<button @click="setRangeAll" :active='selected=="all"'>Tout</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import { addMonths, format, parseISO } from 'date-fns'
|
||||
|
||||
const today = new Date();
|
||||
|
||||
export default {
|
||||
name: 'MonthSelector',
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
range: "Range",
|
||||
monthsDate: "MonthsDate",
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
setRange: "setRange",
|
||||
}),
|
||||
setRange6months: function () {
|
||||
const start = addMonths(new Date(), -6)
|
||||
const range = {
|
||||
start: format(start, 'yyyy-MM'),
|
||||
end: format(today, 'yyyy-MM'),
|
||||
}
|
||||
this.selected = "month"
|
||||
this.setRange(range)
|
||||
},
|
||||
setRange1year: function () {
|
||||
const start = addMonths(new Date(), -12)
|
||||
const range = {
|
||||
start: format(start, 'yyyy-MM'),
|
||||
end: format(today, 'yyyy-MM'),
|
||||
}
|
||||
this.selected = "year"
|
||||
this.setRange(range)
|
||||
},
|
||||
setRangeAll: function () {
|
||||
const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
|
||||
const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
|
||||
const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
|
||||
const range = {
|
||||
start: format(start, 'yyyy-MM'),
|
||||
end: format(end, 'yyyy-MM'),
|
||||
}
|
||||
this.selected = "all"
|
||||
this.setRange(range)
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
|
||||
}
|
||||
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>
|
||||
@ -60,23 +60,14 @@ const travail = {
|
||||
remumeration: 2800, // rémunération décidée
|
||||
},
|
||||
},
|
||||
range: {
|
||||
start: "2021-01",
|
||||
end: "2021-08",
|
||||
},
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
Count (state) {return state.months.length},
|
||||
TheEmptyMonth (state) {return {...state.empty}},
|
||||
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()
|
||||
},
|
||||
MonthsAllDate (state) {
|
||||
// Get all the months
|
||||
return Object.keys(state.months).sort().reverse()
|
||||
return Object.keys(state.months).sort()
|
||||
//return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||
},
|
||||
getMonth: (state) => (date) => {
|
||||
return state.months[date]
|
||||
@ -89,14 +80,9 @@ const travail = {
|
||||
createMonth (state, {date, month}) {
|
||||
state.months[date] = month
|
||||
},
|
||||
setRange (state, range) {
|
||||
state.range = range
|
||||
},
|
||||
|
||||
},
|
||||
actions: {
|
||||
updateMonth (context, {date, month}) {
|
||||
// update month's datas
|
||||
if (date in context.state.months) {
|
||||
context.commit('updateMonth', {date, month})
|
||||
} else {
|
||||
@ -104,7 +90,6 @@ const travail = {
|
||||
}
|
||||
},
|
||||
createMonth (context, {date, month}) {
|
||||
// Create a new month
|
||||
if (!(date in context.state.months)) {
|
||||
console.log(date)
|
||||
context.commit('createMonth', {date, month})
|
||||
@ -113,10 +98,6 @@ const travail = {
|
||||
console.log("This month already exists")
|
||||
}
|
||||
},
|
||||
setRange (context, range) {
|
||||
context.commit("setRange", range)
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@ button {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
}
|
||||
.validate {
|
||||
background-color: green;
|
||||
|
||||
@ -1,41 +1,28 @@
|
||||
<template>
|
||||
<h1>Home</h1>
|
||||
<section id="selector">
|
||||
<month-selector>
|
||||
</month-selector>
|
||||
</section>
|
||||
<div id="content">
|
||||
<section id="months">
|
||||
<section id="months">
|
||||
<h2> Mois </h2>
|
||||
<create-month></create-month>
|
||||
<months-list></months-list>
|
||||
</section>
|
||||
<section id="stats">
|
||||
<h2>Résumé</h2>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import MonthsList from '../components/MonthsUl.vue'
|
||||
import CreateMonth from '../components/CreateMonth.vue'
|
||||
import MonthSelector from '../components/monthSelector.vue'
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
MonthsList: MonthsList,
|
||||
CreateMonth: CreateMonth,
|
||||
MonthSelector: MonthSelector,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
count: "datas/count",
|
||||
state: "datas/count",
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -46,16 +33,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#content {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: red;
|
||||
margin: 0;
|
||||
}
|
||||
#content > * {
|
||||
margin: 10px;
|
||||
}
|
||||
#months {
|
||||
flex-basis: 60%;
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3450,11 +3450,6 @@ dashdash@^1.12.0:
|
||||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
date-fns@^2.23.0:
|
||||
version "2.23.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
|
||||
integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
|
||||
|
||||
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user