Feat: default month and list display

src/components/CreateMonth.vue

@@ -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>

src/components/MonthForm.vue

@@ -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>

src/components/MonthPresentation.vue

@@ -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>

src/components/MonthsUl.vue

@@ -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>

src/store/travail/index.js

@@ -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: {
     }

src/views/home.vue

@@ -1,24 +1,33 @@
 <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 {}
         },
-  computed: {
-    ...mapGetters({
-        state: "datas/count",
-    })
-  },
-  methods: {
-    ...mapActions({
-    })
+    computed: {
+        ...mapGetters({
+            state: "datas/count",
+        })
+      },
+      methods: {
+        ...mapActions({
+        })
       },
 }
 </script>