Feat: remove css

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.8"
+        "vue-router": "^4.0.8",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -18390,6 +18391,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -33116,6 +33128,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.8"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/CreateMonth.vue

@@ -0,0 +1,62 @@
+<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>
+</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>
+.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;
+}
+.date > input {
+    width: 150px;
+}
+
+</style>

src/components/MonthForm.vue

@@ -0,0 +1,68 @@
+<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 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 effectuées</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>
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+}
+li {
+    margin: 3px;
+    width: 30%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+li > label {
+    font-size: 0.8em;
+}
+input {
+    width: 4em;
+    font-size: 1.5em;
+}
+
+</style>

src/components/MonthPresentation.vue

@@ -0,0 +1,72 @@
+<template>
+<div class="month-presentation">
+  <div class="date">
+    {{ month.date }}
+  </div>
+  <div class="infos">
+    <ul>
+        <li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
+        <li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
+        <li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
+        <li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
+        <li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
+        <li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
+    </ul>
+  </div>
+  <div class="actions">
+    <button class="edit"> É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>
+.month-presentation {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: mintcream;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    border-radius: 10px;
+    }
+.month-presentation > * {
+    margin: 20px;
+}
+
+.date {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+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>

src/components/MonthsUl.vue

@@ -0,0 +1,41 @@
+<template>
+<ul>
+    <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>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    padding-bottom: 10px;
+}
+
+li:last-of-type {
+    padding-bottom: 0;
+    }
+
+</style>

src/main.js

@@ -1,8 +1,11 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
+import store from '@/store'
+import '@/style.css'
 
 
 const app = createApp(App)
 app.use(router)
+app.use(store)
 app.mount('#app')

src/store/index.js

@@ -0,0 +1,11 @@
+import { createStore } from 'vuex'
+import travailStore from "./travail"
+
+// Create a new store instance.
+const store = createStore({
+    modules:{
+        travail: travailStore,
+    }
+})
+
+export default store

src/store/travail/index.js

@@ -0,0 +1,84 @@
+const travail = {
+    namespaced: true,
+    state () {
+        return {
+            empty: {
+                date: "", 
+                ca_theo: null, // ca théorique basé sur les séances effectuées
+                nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                ca_retro: null, // ca au moment de la rétrocession
+                ca_react: null, // ca réactualisé
+                retro: 0, // montant de la rétrocession
+                remumeration: 0, // rémunération décidée
+            },
+            months: [
+                {
+                    date: "2021/01", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 6747, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 893, // montant de la rétrocession
+                    remumeration: 2000, // rémunération décidée
+                },
+                {
+                    date: "2021/02", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5183, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 665, // montant de la rétrocession
+                    remumeration: 1500, // rémunération décidée
+                },
+                {
+                    date: "2021/03", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 7088, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 855, // montant de la rétrocession
+                    remumeration: 2000, // rémunération décidée
+                },
+                {
+                    date: "2021/04", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 4194, // ca au moment de la rétrocession
+                    ca_react: 5630, // ca réactualisé
+                    retro: 627, // montant de la rétrocession
+                    remumeration: 2000, // rémunération décidée
+                },
+                {
+                    date: "2021/05", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5564, // ca au moment de la rétrocession
+                    ca_react: 6335, // ca réactualisé
+                    retro: 699, // montant de la rétrocession
+                    remumeration: 2800, // rémunération décidée
+                },
+                {
+                    date: "2021/06", 
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5442, // ca au moment de la rétrocession
+                    ca_react: 6335, // ca réactualisé
+                    retro: 638, // montant de la rétrocession
+                    remumeration: 2800, // rémunération décidée
+                },
+            ],
+        }
+    },
+    getters: {
+        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: {
+    }
+}
+
+export default travail
+

src/style.css

@@ -0,0 +1,26 @@
+
+.actions {
+    display: inline-flex;
+    flex-direction: column;
+    width: 120px;
+}
+
+button {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+  border-radius: 5px;
+    }
+.validate {
+  background-color: green;
+}
+.cancel {
+  background-color: red;
+}
+.edit {
+  background-color: orange;
+}

src/views/home.vue

@@ -1,3 +1,39 @@
 <template>
 <h1>Home</h1>
+<section id="months">
+    <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: {
+        MonthsList: MonthsList,
+        CreateMonth: CreateMonth,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters({
+            state: "datas/count",
+        })
+      },
+      methods: {
+        ...mapActions({
+        })
+      },
+}
+</script>
+
+<style scoped>
+#months {
+    width: 70%;
+}
+</style>