Sousmargot/src/components/MonthPresentation.vue

<template>
<div class="month-presentation">
  <div class="date">
    <div class="month">
       {{ theMonth }} 
    </div> 
    <div class="year">
       {{ theYear }} 
    </div> 
      <div>
        <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
        <button class="validate" @click="save" v-show="editing"> Valider </button>
        <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
      </div>
  </div>
  <div id="display">
    <ul>
        <li> 
            <label for="ca-theo">CA "Séances effectuées"</label>
            <span class="value" v-show="!editing">{{ TheMonth.caTheo ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.caTheo"  id="ca-theo" class="value" v-show="editing">
        </li>
        <li> 
            <label for="ca-retro">CA "Séances facturées"</label>
            <span class="value" v-show="!editing">{{ TheMonth.caRetro ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.caRetro" id="ca-retro" class="value" v-show="editing">
        </li>
        <li> 
            <label for="ca-react">CA "Séances facturées" réactualisé</label>
            <span class="value" v-show="!editing">{{ TheMonth.caReact ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.caReact" id="ca-react" class="value" v-show="editing">
        </li>
        <li> 
            <label for="nbr-seances">Nombre de séances effectuées</label>
            <span class="value" v-show="!editing">{{ TheMonth.sessionQty ?? "∅"}}</span>
            <input type="number" v-model.number="monthCopy.sessionQty" id="nbr-seances" class="value" v-show="editing">
        </li>
        <li> 
            <label for="retro">Montant de la rétrocession</label>
            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
        </li>
        <li> 
            <label for="remuneration">Rémunération </label>
            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
        </li>
    </ul>
  </div>
</div>
</template>

<script>
import { mapActions } from 'vuex'
import {  parseISO, format } from 'date-fns'
export default {
  name: 'MonthPresentation',
  props: {
      TheDate: String,
      TheMonth: {
          type: Object,
      }
  },
  data () {
      return {
          editing: false,
          monthCopy: Object,
      }
  },
  mounted: function () {
        this.monthCopy =  {...this.TheMonth}
      },
  computed: {
      rawDate: function () {
            return parseISO(this.TheDate, "yyyy-MM", new Date())
      },
      theMonth: function () {
          return format(this.rawDate, "MMM", )
      },
      theYear: function () {
          return format(this.rawDate, "YYY", )
      },
  },
  methods: {
    ...mapActions('travail', {
        'updateMonth': 'updateMonth',
    }),
    ...mapActions('config', {
        'writeData': 'writeData',
    }),
      toggleEdit: function () {
          this.editing = !this.editing
          },
      save: function () {
          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
          this.writeData()
          this.toggleEdit()
          },
      cancel: function () {
          this.monthCopy =  {...this.TheMonth}
          this.toggleEdit()
          },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .month-presentation {
        display: grid;
        grid-template-columns: 140px 1fr;
        }
    .month-presentation > * {
        margin: 20px;
    }

    .date {
        font-size: 1em;
        font-weight: bold;
        border-right: 1px solid black;
    }
    .month{
        font-size: 2em;
    }

    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;
    }

    .novisible {
        display: None;
    }
    button {
        margin-top: 5px;
        padding: 4px;
        font-size: 0.8em;
        width: auto;

    }
</style>