From 6a0b0b9c6ec7c48e7583928da19fda17e27a20ff Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Mon, 2 Aug 2021 15:09:54 +0200
Subject: [PATCH] Feat: ajout d'un nouveau mois

---
 src/components/CreateMonth.vue | 124 +++++++++++++++++++++++++--------
 src/store/travail/index.js     |  34 ++++++---
 2 files changed, 121 insertions(+), 37 deletions(-)

diff --git a/src/components/CreateMonth.vue b/src/components/CreateMonth.vue
index c76fd02..d145a61 100644
--- a/src/components/CreateMonth.vue
+++ b/src/components/CreateMonth.vue
@@ -1,21 +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 class="validate"> Valider </button>
-    <button class="cancel"> Annuler </button>
-  </div>
+<div id="create-month" >
+    <div class="month-presentation" id="new-month">
+      <div class="date">
+          <input type="month" v-model="monthDate">
+      </div>
+      <div class="datas">
+        <ul>
+            <li> 
+                <label for="ca-theo">CA théorique</label>
+                <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" >
+            </li>
+            <li> 
+                <label for="ca-retro">CA rétrocession</label>
+                <input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" >
+            </li>
+            <li> 
+                <label for="ca-react">CA réactualisé</label>
+                <input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" >
+            </li>
+            <li> 
+                <label for="nbr-seances">Nombre de séances effectuées</label>
+                <input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" >
+            </li>
+            <li> 
+                <label for="retro">Montant de la rétrocession</label>
+                <input type="number" v-model="monthCopy.retro" id="retro" class="value" >
+            </li>
+            <li> 
+                <label for="remumeration">Rémunération effectuée</label>
+                <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value">
+            </li>
+        </ul>
+      </div>
+      <div class="actions">
+        <button class="validate" @click="save"> Valider </button>
+        <button class="cancel" @click="cancel"> Annuler </button>
+      </div>
+    </div>
 </div>
 </template>
 
 <script>
-import MonthForm from "./MonthForm"
-
+import { mapGetters, mapActions } from 'vuex'
 const today = new Date();
 function formatDate(date) {
     var y = ''+date.getFullYear()
@@ -29,34 +55,76 @@ export default {
   props: {
   },
   components: {
-      MonthForm: MonthForm,
   },
   data () {
       return {
             monthDate: formatDate(today),
+            monthCopy: Object,
           }
   },
+  mounted () {
+      this.monthCopy = this.theEmptyMonth
+  },
   computed: {
+    ...mapGetters('travail', {
+        'theEmptyMonth': 'TheEmptyMonth',
+    }),
+  },
+  methods: {
+    ...mapActions('travail', {
+        'createMonth': 'createMonth',
+    }),
+    save: function () {
+        console.log("save")
+        console.log(this.monthCopy)
+        this.createMonth({date: this.monthDate, month: this.monthCopy})
+    },
+    cancel: function () {
+      this.monthCopy = this.theEmptyMonth
+    },
   },
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.month-presentation {
-    display: inline-flex;
-    flex-direction: row;
-    background-color: palegreen;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 10px;
-    width: 100%;
+    .month-presentation {
+        display: inline-flex;
+        flex-direction: row;
+        background-color: palegreen;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 10px;
+        width: 100%;
+        }
+    .month-presentation > * {
+        margin: 20px;
     }
-.month-presentation > * {
-    margin: 20px;
-}
-.date > input {
-    width: 150px;
-}
 
+    .date > input {
+        font-size: 1.2em;
+        font-weight: bold;
+        display: inline-flex;
+        width: 6rem;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
 </style>
diff --git a/src/store/travail/index.js b/src/store/travail/index.js
index 6fce0ab..c5dcccc 100644
--- a/src/store/travail/index.js
+++ b/src/store/travail/index.js
@@ -11,7 +11,7 @@ const travail = {
                 remumeration: 0, // rémunération décidée
             },
             months: { 
-                "2021/01": {
+                "2021-01": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 6747, // ca au moment de la rétrocession
@@ -19,7 +19,7 @@ const travail = {
                     retro: 893, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                "2021/02": {
+                "2021-02": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5183, // ca au moment de la rétrocession
@@ -27,7 +27,7 @@ const travail = {
                     retro: 665, // montant de la rétrocession
                     remumeration: 1500, // rémunération décidée
                 },
-                "2021/03": {
+                "2021-03": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 7088, // ca au moment de la rétrocession
@@ -35,7 +35,7 @@ const travail = {
                     retro: 855, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                "2021/04": {
+                "2021-04": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 4194, // ca au moment de la rétrocession
@@ -43,7 +43,7 @@ const travail = {
                     retro: 627, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                "2021/05": {
+                "2021-05": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5564, // ca au moment de la rétrocession
@@ -51,7 +51,7 @@ const travail = {
                     retro: 699, // montant de la rétrocession
                     remumeration: 2800, // rémunération décidée
                 },
-                "2021/06": {
+                "2021-06": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
                     nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5442, // ca au moment de la rétrocession
@@ -64,7 +64,7 @@ const travail = {
     },
     getters: {
         Count (state) {return state.months.length},
-        TheEmptyMonth (state) {return state.empty},
+        TheEmptyMonth (state) {return {...state.empty}},
         MonthsDate (state) {
             return Object.keys(state.months).sort()
             //return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
@@ -76,11 +76,27 @@ const travail = {
     mutations: {
         updateMonth (state, {date, month}) {
             state.months[date] = month
-        }
+        },
+        createMonth (state, {date, month}) {
+            state.months[date] = month
+        },
     },
     actions: {
         updateMonth (context, {date, month}) {
-            context.commit('updateMonth', {date, month})
+            if (date in context.state.months) {
+                context.commit('updateMonth', {date, month})
+            } else {
+                console.log("This month does not exists")
+            }
+        },
+        createMonth (context, {date, month}) {
+            if (!(date in context.state.months)) {
+                console.log(date)
+                context.commit('createMonth', {date, month})
+                console.log(context.state.months)
+            } else {
+                console.log("This month already exists")
+            }
         },
     },
 }