Compare commits

...

3 Commits

6 changed files with 189 additions and 12 deletions

View File

@ -0,0 +1,47 @@
<template>
<div class="month-presentation" id="new-month">
<div class="date">
<input type="month" v-model="monthDate">
</div>
<div class="infos">
<month-form></month-form>
</div>
<div class="actions">
<button> Valider </button>
<button> Annuler </button>
</div>
</div>
</template>
<script>
import MonthForm from "./MonthForm"
const today = new Date();
function formatDate(date) {
var y = ''+date.getFullYear()
var m = ''+(date.getMonth()+1)
if (m.length < 2) { m = '0'+m}
return [y, m].join('-')
}
export default {
name: 'NewMonth',
props: {
},
components: {
MonthForm: MonthForm,
},
data () {
return {
monthDate: formatDate(today),
}
},
computed: {
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View File

@ -0,0 +1,49 @@
<template>
<form>
<ul>
<li>
<label for="ca-theo">CA théorique</label>
<input type="number" id="ca-theo">
</li>
<li>
<label for="ca-retro">CA au moment de la rétrocession</label>
<input type="number" id="ca-retro">
</li>
<li>
<label for="ca-react">CA réactualisé</label>
<input type="number" id="ca-react">
</li>
<li>
<label for="nbr-seance">Nombre de séances</label>
<input type="number" id="nbr-seance">
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<input type="number" id="retro">
</li>
<li>
<label for="remumeration">Rémunération effectuée</label>
<input type="number" id="remumeration">
</li>
</ul>
</form>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'MonthForm',
props: {
},
computed: {
...mapGetters({
TheEmpty: "travail/TheEmptyMonth",
})
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View File

@ -0,0 +1,38 @@
<template>
<div class="month-presentation">
<div class="date">
{{ month.date }}
</div>
<div class="infos">
<ul>
<li> CA théorique {{ month.ca_theo ?? "∅"}}</li>
<li> CA à la rétrocession {{ month.ca_retro ?? "∅"}}</li>
<li> CA réactualisé {{ month.ca_react ?? "∅"}}</li>
<li> Nombre de séances {{ month.nbr_seances ?? "∅"}}</li>
<li> Montant de la rétrocession {{ month.retro ?? "∅"}}</li>
<li> Rémunération effectuée {{ month.remumeration ?? "∅"}}</li>
</ul>
</div>
<div class="actions">
<button> Éditer </button>
</div>
</div>
</template>
<script>
export default {
name: 'MonthPresentation',
props: {
month: {
type: Object,
}
},
computed: {
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View File

@ -0,0 +1,31 @@
<template>
<ul id="months">
<li v-for="month in months" :key="month.date">
<month-presentation :month=month></month-presentation>
</li>
</ul>
</template>
<script>
import { mapGetters } from 'vuex'
import MonthPresentation from "./MonthPresentation"
export default {
name: 'Months',
components: {
MonthPresentation: MonthPresentation
},
props: {
},
computed: {
...mapGetters({
months: "travail/Months",
})
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View File

@ -70,8 +70,11 @@ const travail = {
}
},
getters: {
count (state) {return state.months.length},
months (state) {return state.months},
cCount (state) {return state.months.length},
TheEmptyMonth (state) {return state.empty},
Months (state) {
return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
},
},
mutations: {
}

View File

@ -1,13 +1,22 @@
<template>
<h1>Home</h1>
<p> {{ state }} </p>
<section>
<h2> Mois </h2>
<create-month></create-month>
<months-list></months-list>
</section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue'
export default {
name: 'home',
components: {},
components: {
MonthsList: MonthsList,
CreateMonth: CreateMonth,
},
data () {
return {}
},