Ajouter une tâche

Pour ajouter la tâche via l'API il faut utiliser la route POST /taches et y passer les données de la tâche.

/taches

POST /taches

Headers

Name	Type	Description
Authorization	string	Token de type Bearer Exemple : "Bearer eyJ0eXAiOiJ..."

Request Body

Name	Type	Description
nom	string
terminee	integer	Booléen au format entier Valeurs possibles : 0 ou 1
dateFin	string	Format Y-M-D
heureFin	string	Format HH:MM

200

201

401

Format des dates

Comme on peut le lire dans la description des paramètres de la requête qui contient le formulaire d'ajout et de modification des tâches formate la date en POST /taches, il faut respecter le format des dates Y-M-D.

Actuellement, le composant FormTache.vue affiche la date au format D.M.Y et non en Y-M-D.

Nous allons modifier FormTache.vue pour qu'il continue d'afficher la date au format D.M.Y tout en la sauvegardant dans le format Y-M-D.

Première chose paramétrer le <q-date> pour qu'il retourne la date au format Y-M-D.

• 3 : Changement du masque en "YYYY-MM-DD"

<q-date
  v-model="tache.dateFin"
  mask="YYYY-MM-DD"
  @input="() => $refs.qDateProxy.hide()"
/>

Si l'on sélectionne une date dans le calendrier, elle s'affiche au format Y-M-D dans le formulaire, et si on inspecte notre composant FormTache.vue la donnée tache.dateFin est dans le même format.

Comment faire pour que la date s'affiche dans un autre format ?

Le date picker <q-date> et le champs de formulaire <q-input> sont indépendant. Ils affichent la même valeur car il sout tout deux lié à tache.dateFin avec une directive v-model.

Nous allons laisser <q-date> lié à tache.dateFin ainsi la date sera au format de l'API, et nous allons créer une propriété calculée dateFinLocale qui reformatera la date pour le <q-input>.

Mais nous ne pouvons plus utiliser la directive v-model, car les donnée n'iront que dans un sens, on ne pourrat pas modifier la date directement dans le champs. On va donc utiliser :value à la place de v-model et passer le champ en mode lecture readonly.

Outil date de Quasar

Pour changer le format d'une date, nous aurons besoin de l'outil date de Qasar :

Date Utils | Quasar FrameworkQuasar Framework

// importation de l'outils date de Quasar
import { date } from 'quasar'
// Création d'une date avec le constructeur JavaScript Date()
let nouvelleDate = new Date('2020-01-31')
// Formate la date au format DD.MM.YY avec l'outils date de Quasae
nouvelleDate =  date.formatDate(nouvelleDate, 'DD.MM.YY') 

console.log(nouvelleDate) // '31.01.20'

Résultat

• 30 : Ajout du mode readonly au champ date

• 31 : Remplace v-model par :value et affecte la valeur de la propriété calculée dateFinLocale

• 41 : Modifie le masque de la date retournée par le date picker : mask="YYYY-MM-DD"

• 95 : Importation de l'outil date de Quasar

• 119-124 : Création de la nouvelle propriété calculée dateFinLocale

  • 121 : Création d'une nouvelle date JavaScript

  • 122 : Retourne le date au format D.M.Y

src/components/Taches/Dialog/FormTache.vue

<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6"><slot></slot></div>
      <q-space />
      <q-btn
        dense
        flat
        round
        icon="close"
        v-close-popup
      />
    </q-card-section>
    <q-form
      @submit="formSubmit"
    >
      <q-card-section class="q-pt-none">
        <!-- NOM -->
        <q-input
          outlined
          v-model="tache.nom"
          label="Nom"
          :rules="[val => !!val || 'Le nom est obligatoire']"
          autofocus
          clearable
        />
        <!-- DATE -->
        <q-input
          outlined
          readonly
          :value="dateFinLocale"
          label="Date"
          class="q-mt-sm"
          clearable
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                <q-date
                  v-model="tache.dateFin"
                  mask="YYYY-MM-DD"
                  @input="() => $refs.qDateProxy.hide()"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <!-- HEURE -->
        <q-input
          v-if="tache.dateFin"
          outlined
          v-model="tache.heureFin"
          label="Heure"
          class="q-mt-sm"
          clearable
        >
          <template v-slot:append>
            <q-icon name="access_time" class="cursor-pointer">
              <q-popup-proxy
                @before-show="heureTemp = tache.heureFin"
                transition-show="scale"
                transition-hide="scale"
              >
                <q-time v-model="heureTemp">
                  <div class="row items-center justify-end q-gutter-sm">
                    <q-btn label="Cancel" color="primary" flat v-close-popup />
                    <q-btn
                      label="OK"
                      color="primary"
                      flat
                      @click="tache.heureFin = heureTemp"
                      v-close-popup
                    />
                  </div>
                </q-time>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          type="submit"
          :label="bouton"
          color="primary"
        />
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<script>
import { mapActions } from 'vuex'
import { date } from 'quasar'

export default {
  name: 'FormTache',
  props: {
    tacheAModifier: {
      type: Object
    },
    bouton: {
      type: String,
      default: 'OK'
    }
  },
  data () {
    return {
      tache: {
        nom: '',
        dateFin: '',
        heureFin: '',
        terminee: 0
      },
      heureTemp: ''
    }
  },
  computed: {
    dateFinLocale () {
      const dateLocale = new Date(this.tache.dateFin)
      return date.formatDate(dateLocale, 'DD.MM.YY')
    }
  },
  methods: {
    // Mappage des actions ('nomNamespace', ['nomGetter'])
    ...mapActions('taches', ['ajouterTache', 'modifierTache']),
    formSubmit () {
      // Si la tache a un id, c'est une modification sinon ajout
      if (this.tache.id) {
        // Construction du payload
        const payload = {
          id: this.tache.id,
          updates: this.tache // Passe toutes les proprités de la tache actuelle
        }
        // Appel l'action modifierTache et lui passe le payload
        this.modifierTache(payload)
      } else {
        // Appel l'action ajouterTache et lui passe la tache
        this.ajouterTache(this.tache)
      }

      // Demande la fermeture de la dialog au parent
      this.$emit('fermer')
    }
  },
  mounted () {
    if (this.tacheAModifier) {
      // Copie les propriétés de tacheAModifier dans un nouvel objet vide
      this.tache = Object.assign({}, this.tacheAModifier)
    }
  }
}
</script>

<style>
  .q-card {
    width: 400px;
    max-width: 80vw;
}
</style>

Variante avec filtre global

Depuis Vue 3, il est déconseiller d'utiliser les filtres globaux !

Vous pouvez donc ignorer ce chapitre.

On préférera l'utilisation des getters ou méthodes globales.

Autre possibilité, créer un filtre global dmy en le déclarant dans un fichier de boot src/boot/filters.js.

src/boot/filters.js

import { date } from 'quasar'
import { boot } from 'quasar/wrappers'

// https://v3.vuejs.org/guide/migration/filters.html#_3-x-update

export default boot(async ({ app }) => {
  app.config.globalProperties.$filters = {
    dmy (value) {
      if (date.isValid(value)) {
        const dateLocale = new Date(value)
        return date.formatDate(dateLocale, 'DD.MM.YYYY')
      }
      // Si date invalide on retourne la valeur sans modification
      return value
    }
  }
})

Ajout du fichier au boot

quasar.conf.js | Ligne 15

boot: [
  'axios',
  'navigation-guards',
  'filters'
],

Exemples d'utilisation

<q-input :value="$filters.dmy(tache.dateFin)">

 <p>{{ $filters.dmy(tache.dateFin) }}</p>

Ajouter un tâche

Pour ajouter la tâche avec l'API, nous allons modifier l'action existant ajouterTache du magasin des tâches. Il faudra réaliser les opérations suivantes :

• 1 : Récupération de :

  • commit pour accéder aux mutations

  • rootState pour accéder au token du magasin Auth

  • tache données de la nouvelle tâches envoyée par le formulaire

• 2 : Démarrer Loader

• 4-20 Créer la requête API d'ajout POST /taches

  • 4 : Création de l'entête d'authentification avec token de type bearer

  • 8: Appel de la requête POST /taches en y passant :

    • tache les données de la nouvelle tâche

    • config l'entête d'authorisation avec token

  • 9-12 : En cas de succès de la requête

  • • Récupérer les données de la réponse response.data et les sauvegarder dans le magasin

    • Note : Plus besoin de générer un ID, nous récupérons celui créé par l'API.

  • 13-19: En cas d'échec : Afficher un message d'erreur

  • 20 : Dans tous les cas : Fermer loader

src/store/store-taches.js | Ligne 27

ajouterTache ({ commit, rootState }, tache) {
  Loading.show()
  // Configuration du header avec token
  const config = {
    headers: { Authorization: 'Bearer ' + rootState.auth.token }
  }
  // API : POST /taches
  api.post('/taches', tache, config)
    .then(function (response) {
      // Ajoute la tache retournée par l'API au magasin
      commit('ajouterTache', response.data)
    })
    .catch(function (error) {
      afficherMessageErreur(
        'Création tâche impossible !',
        Object.values(error.response.data)
      )
      throw error
    })
    .finally(Loading.hide())
},

Ajouter l’importation de Loading au début du magasin

src/store/store-taches.js | Ligne 4

import { Loading } from 'quasar'