Charger tâches utilisateur

Maintenant que l'utilisateur est connecté, et que l'on a récupérer un token valide, on peut demander à l'API de nous retourner toutes les tâches de l'utilisateur.

Pour ce faire, nous allons créer une action getTachesApi qui va :

• récupérer les tâches en questionnant l'API : GET /taches

• commiter la mutation setTaches, qui remplacera le tableau des tâches actuelles par celles de la réponse.

L'action getTachesApi sera appelée dans le magasin Auth par l'action setUser. Ainsi les tâches seront chargées depuis l'API juste après la connexion de l'utilisateur.

Il ne faudra pas oublier de vider le tableau des tâches lors de la déconnexion de l'utilisateur.

Récupérer les tâches d'un utilisateur

GET /taches

Le token passé dans l'entête de la requête permet d'authentifier l'utilisateur et de récupérer uniquement ses tâches.

Headers

Name	Type	Description
Authorization	string	Exemple de valeur : 'Authorization: Bearer 1Fa...3'

200

[
    {
        "id": 3,
        "nom": "Manger des oranges",
        "terminee": 1,
        "dateFin": "2020-06-05",
        "heureFin": "17:00:00",
        "user_id": 2
    },
    {
        "id": 5,
        "nom": "Acheter des oranges",
        "terminee": 0,
        "dateFin": "2020-06-07",
        "heureFin": "21:30:00",
        "user_id": 2
    }
]

401

Magasin taches

Nous devons donc créer :

• une mutation setTaches pour modifier toutes les taches

• une action getTachesApi pour récupérer les tâches de l'utilisateur depuis l'API

• une action viderTaches qui permet de remettre à zéro la liste des tâches

Résultat

• 1 : importation d'axios

• 6-26 : mise en commentaires des tâches de test

• 54-56 : Création de la mutation setTaches

• 83-97 : Création de l'action getTachesApi

  • 83 : Récupération en paramètre de rootState

    • C'est le magasin Vuex, on pourra ainsi atteindre un autre module depuis rootState

    • Par exemple pour accéder au state token du magasin Auth : rootState.auth.token

  • 84-86 : Création de la config axios avec une token de type Bearer

  • 87 : Envoi de la requête GET /taches avec la configuration config.

  • 88 : En cas de succès, on appelle la mutation setTaches en lui passant le tableau des tâches retournées par l'API.

  • 91-96 : En cas d'erreur, on affiche un message à l'utilisateur

• 98 : Création de l'action viderTaches qui vide la liste des tâches en passant un tableau vide à la mutation setTaches.

src/store/store-taches.js

import { api } from 'boot/axios'
import { afficherMessageErreur } from 'src/functions/message-erreur'

// State : données du magasin
const state = {
  taches: [
    /* {
      id: 1,
      nom: 'Acheter des oranges',
      terminee: false,
      dateFin: '06.06.2020',
      heureFin: '12:00'
    },
    {
      id: 2,
      nom: 'Manger des oranges',
      terminee: false,
      dateFin: '15.06.2020',
      heureFin: '22:00'
    },
    {
      id: 3,
      nom: 'Digérer des oranges',
      terminee: false,
      dateFin: '16.06.2020',
      heureFin: '14:00'
    } */
  ]
}

/*
Mutations : méthode qui manipulent les données
Les mutations ne peuvent pas être asynchrones !!!
 */
const mutations = {
  modifierTache (state, payload) {
    // Recherche la tâche et retourne sa position dans le tableau, son index
    const index = state.taches.findIndex(el => el.id === payload.id)

    // Si une tâche a été trouvée
    if (index !== -1) {
      // Modifie l'objet trouvé avec les nouvelles valeurs
      Object.assign(state.taches[index], payload.updates)
    }
  },
  supprimerTache (state, id) {
    // Filtre les données du tableau
    // et garde les tâches dont l'id est différent de celui à supprimer
    state.taches = state.taches.filter(el => el.id !== id)
  },
  ajouterTache (state, tache) {
    // Ajout de la tâche à fin du tableau
    state.taches.push(tache)
  },
  setTaches (state, taches) {
    state.taches = taches
  }
}
/*
Actions : méthodes du magasin qui font appel aux mutations
Elles peuvent être asynchrones !
 */
const actions = {
  modifierTache ({ commit }, payload) {
    // Valide la mutation et y passe les données
    commit('modifierTache', payload)
  },
  supprimerTache ({ commit }, id) {
    commit('supprimerTache', id)
  },
  ajouterTache ({ commit }, tache) {
    let uId = 1
    // Si le tableau contient des éléments
    if (state.taches.length) {
      // Récupère l'id MAX et lui ajoute 1
      uId = Math.max(...state.taches.map(tache => tache.id)) + 1
    }
    // Ajoute le nouvel id à la tache
    tache.id = uId
    // Commite l'ajout
    commit('ajouterTache', tache)
  },
  getTachesApi ({ commit, rootState }) {
    const config = {
      headers: { Authorization: 'Bearer ' + rootState.auth.token }
    }
    api.get('/taches', config)
      .then(function (response) {
        commit('setTaches', response.data)
      })
      .catch(function (error) {
        afficherMessageErreur(
          'Erreur lors de la récupération des tâches !'
        )
        throw error
      })
  },
  viderTaches ({ commit }) {
    commit('setTaches', [])
  }
}

/*
Getters : retourne les données du magasin
Fonctionne comme les propriétés calculées
Sert à calculer, trier, filtrer ou formater les donneés
 */
const getters = {
  // Prend le state comme 1er paramètre
  taches: (state) => {
    return state.taches
  }
}

/*
Exporte les constantes, variables du fichier
On pourra ainsi les récupérer, les importer dans un autre fichier JS.

namespace: true, ajoute un namespace à notre objet retourné.
 */
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

Magasin Auth

Dans le magasin Auth nous de devons :

• Appeler getTachesApi du magasin Taches dans l'action setUser

• Appeler viderTaches du magasin Taches dans l'action deconnecterUtilisateur

Résultat

• 59 : On passe la méthode dispatch à l'action ce qui nous permettra d'appeler une action d'un autre magasin.

• 67 : Déclenche l’action getTachesApi du magasin Auth grâce à dispactch()

• 73 : On passe la méthode dispatch à l'action.

• 95 : Déclenche l'action viderTaches du magasin Auth grâce à dispactch()

src/store/store-auth.js

import { api } from 'boot/axios'
import { afficherMessageErreur } from 'src/functions/message-erreur'
import { Loading, LocalStorage } from 'quasar'

// State : données du magasin
const state = {
  user: null,
  token: null
}

/*
Mutations : méthode qui manipulent les données
Les mutations ne peuvent pas être asynchrones !!!
 */
const mutations = {
  setUser (state, user) {
    state.user = user
  },
  setToken (state, token) {
    state.token = token
  }
}

/*
Actions : méthodes du magasin qui font appel aux mutations
Elles peuvent être asynchrones !
 */
const actions = {
  enregistrerUtilisateur ({ commit, dispatch }, payload) {
    Loading.show()
    api.post('/register', payload)
      .then(function (response) {
        dispatch('setUser', response.data)
      })
      .catch(function (error) {
        Loading.hide()
        afficherMessageErreur(
          'Création du compte impossible !',
          Object.values(error.response.data)
        )
        throw error
      })
  },
  connecterUtilisateur ({ commit, dispatch }, payload) {
    Loading.show()
    api.post('/login', payload)
      .then(function (response) {
        dispatch('setUser', response.data)
      })
      .catch(function (error) {
        Loading.hide()
        afficherMessageErreur(
          'Connexion impossible !',
          Object.values(error.response.data)
        )
        throw error
      })
  },
  setUser ({ commit, dispatch, state }, data) {
    // Sauvegarde, commite, les données dans le magasin
    commit('setUser', data.user)
    commit('setToken', data.access_token)
    // Sauvegarde les données de l'utilisateur dans le localStorage
    LocalStorage.set('user', state.user)
    LocalStorage.set('token', state.token)
    // Récupération des tâches de l'utilisateur
    dispatch('taches/getTachesApi', null, { root: true })
    // Redirige l'utilisateur vers la page des tâches
    this.$router.push('/')
    // Cache la fenêtre de chargement
    Loading.hide()
  },
  deconnecterUtilisateur ({ commit, state, dispatch }) {
    Loading.show()
    const that = this
    // Configuration du header avec token
    const config = {
      headers: { Authorization: 'Bearer ' + state.token }
    }
    // Déconnexion de l'API
    api.post('/logout', {}, config)
      .catch(function (error) {
        afficherMessageErreur(
          'Erreur lors de la déconnexion'
        )
        throw error
      })
      .finally(function () {
        // Réinitialise user et token
        commit('setUser', null)
        commit('setToken', null)
        // Vide le locaStorage
        LocalStorage.clear()
        // Vide la liste des tâches
        dispatch('taches/viderTaches', null, { root: true })
        // Redirige l'utilisateur vers la page de connexion
        that.$router.push('/connexion')
        // location.reload() // recharge la page du navigateur
        Loading.hide()
      })
  }
}

/*
Getters : retourne les données du magasin
Fonctionne comme les propriétés calculées
Sert à calculer, trier, filtrer ou formater les donneés
 */
const getters = {

}

/*
Exporte les constantes, variables du fichier
On pourra ainsi les récupérer, les importer dans un autre fichier JS.

namespace: true, ajoute un namespace à notre objet retourné.
 */
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

Ajustements des données

Il y a une petite différence entre les données de l'API et les données de notre application. La propriété terminée de notre application utilise de booléens (true/false) alors que l'API utlise des entiers (1/0).

Nous allons résliser les ajustements suivants pour que notre application soit compatible avec l'API.

Modifier les codes suivants dans les fichier Tache.vue et FormTache.vue

• Tache.vue

  • 7 : Ajouter une ternaire pour retourner 1 ou 0.

  • 17 : Ajout de la double négation pour transformer un entier un booléen.

    • !!0 => false et !!1 => true

• FormTache.vue

  • 112 : Initialisé la propriété terminee avec 0.

Tache.vue

src/components/Taches/Tache.vue

<template>
  <q-item
    @click="modifierTache(
      {
        id: tache.id,
        updates: {
          terminee: tache.terminee === 0 ? 1 : 0
        }
      }
    )"
    clickable
    v-ripple
    :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
  >
    <q-item-section side>
      <q-checkbox
        :value="!!tache.terminee"
        class="no-pointer-events"
      />
    </q-item-section>

    <q-item-section>
      <q-item-label
        :class="{ 'text-barre': tache.terminee }"
      >{{ tache.nom }}</q-item-label>
    </q-item-section>

    <q-item-section
      v-if="tache.dateFin"
      side
    >
      <!-- Création d'une ligne Flex -->
      <div class="row">
        <!-- Création d'une colonne Flex -->
        <div class="column justify-center">
          <q-icon
            size="18px"
            name="event"
            class="q-mr-xs"
          />
        </div>
        <!-- Création d'une colonne Flex -->
        <div class="column">
          <q-item-label
            class="text-right"
            caption
          >
            {{ tache.dateFin }}
          </q-item-label>
          <q-item-label
            class="text-right"
            caption
          >
            <small>{{ tache.heureFin}}</small>
          </q-item-label>
        </div>
      </div>
    </q-item-section>

    <q-item-section side>
      <q-btn
        @click.stop="afficherFormTache = true"
        dense
        flat
        round
        color="primary"
        icon="edit" />
    </q-item-section>

    <q-item-section side>
      <q-btn
        @click.stop="confirmerSuppression(tache.id)"
        dense
        flat
        round
        color="negative"
        icon="delete" />
    </q-item-section>

    <q-dialog
      v-model="afficherFormTache"
      persistent
    >
      <form-tache
        @fermer="afficherFormTache = false"
        :tacheAModifier="tache"
        bouton="Modifier"
      >
        Modifier une tâche
      </form-tache>
    </q-dialog>
  </q-item>
</template>

<script>
// importation des fonctions utilitaires
import { mapActions } from 'vuex'

export default {
  name: 'Tache',
  props: {
    tache: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      afficherFormTache: false
    }
  },
  methods: {
    // Mappage des actions ('nomNamespace', ['nomGetter'])
    ...mapActions('taches', ['modifierTache', 'supprimerTache']),
    // Ouvre une boite de dialog pour confirmer la suppression
    confirmerSuppression (id) {
      this.$q.dialog({
        title: 'Supprimer tâche',
        message: 'Voulez-vous vraiement supprimer cette tâche ?',
        cancel: 'Annuler',
        ok: 'Supprimer',
        persistent: true
      }).onOk(() => {
        this.supprimerTache(id)
      })
    }
  },
  components: {
    'form-tache': require('components/Taches/Dialog/FormTache').default
  }
}
</script>

<style>

</style>

FormTache.vue

Loader

Le chargement des tâches pouvant prendre un certain, temps nous allons afficher un spinner à la place de la liste des tâches durant ce laps de temps.

Nous utiliserons un composant QSpinner de Quasar.

Spinners | Quasar FrameworkQuasar Framework

<!-- Exemple d'un QSpinner -->
<q-spinner-radio color="primary" size="2em" />

State tachesChargees

Pour ce faire, nous allons créer une état, state, tachesChargees initialisé à false dans le magasin des tâches.

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

// State : données du magasin
const state = {
  taches: [],
  tachesChargees: false
}

Mutation setTachesChargees

Il faudra également créer une mutation setTachesChargee permettant de le modifier l'état tachesChargees.

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

setTachesChargees (state, valeur) {
  state.tachesChargees = valeur
}

Action getTachesApi

Dans l'action getTachesApi nous allons mettre à false l'état tachesChargees avant d'appeler l'API et la remettrons à true lorsque les tâches auront été récupérées avec succès.

• 2 : mets setTachesChargees à false avant de questionner l'API.

• 2 : mets setTachesChargees à true en cas de succès uniquement.

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

getTachesApi ({ commit, rootState }) {
  commit('setTachesChargees', false)
  const config = {
    headers: { Authorization: 'Bearer ' + rootState.auth.token }
  }
  api.get('/taches', config)
    .then(function (response) {
      commit('setTaches', response.data)
      commit('setTachesChargees', true)
    })
    .catch(function (error) {
      afficherMessageErreur(
        'Erreur lors de la récupération des tâches !'
      )
      throw error
    })
},

Action viderTaches

Il faudra également remettre tachesChargees à false lors de la déconnexion de l'utilisateur.

Pour ce faire, nous alons modifier l'action viderTaches appelée lors de la déconnexion.

• 3 : remets à false l'état setTachesChargees

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

viderTaches ({ commit }) {
  commit('setTaches', [])
  commit('setTachesChargees', false)
}

Inspecter l'état du magasin Vuex avec Vue DevTool, connectez-vous et déconnectez-vous.

Vous devriez constater le résultat ci-apèrs. Assurez vous que setTachesChargees reçoit succèsivement en payload les valeurs false, true et false.

PageTaches

Dans la page des tâches, il faut récupérer la valeur de l'état, state, tachesChargees du magasin des tâches. En fonction de son état on affichera le spinner ou la liste des tâches.

Mappage de l'état tacheChargees

Pour accéder à l'état tacheChargees nous allons utiliser l'outils mapState pour le mapper dans les propriétés calculées, computed, de PageTaches.vue.

src/pages/PageTaches.vue | ligne 37

<script>
// importation des fonctions utilitaires
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'PageTaches',
  data () {
    return {
      afficherFormTache: false
    }
  },
  computed: {
    // Mappage des getters ('nomNamespace', ['nomGetter'])
    ...mapGetters('taches', ['taches']),
    ...mapState('taches', ['tachesChargees'])
  },
  components: {
    tache: require('components/Taches/Tache').default,
    'form-tache': require('components/Taches/Dialog/FormTache').default
  }
}
</script>

Nous pouvons maintenant accéder a tacheChargees et l'utiliser pour afficher et cacher le spinner et la liste des tâches.

• 4-9 : <div> contenant le spinner,

  • 5 : S'affichera si tachesChargees est à false.

  • 6 : Ajoute une marge intérieure (padding) large et centre le contenu horizontalement.

  • 8 : Spinner Quasar

• 11-15 : liste qui contient les tâches

  • 12 : S'affiche uniquement s’il y a des taches et qu'elles sont chargées

src/pages/PageTaches.vue | ligne 1

<template>
  <q-page padding>
    <!-- Spinner -->
    <div
      v-if="!tachesChargees"
      class="q-pa-lg text-center"
    >
      <q-spinner-radio color="primary" size="4em" />
    </div>
    <!-- Liste des tâches -->
    <q-list
      v-if="taches.length && !tachesChargees"
      separator
      bordered
    >

Test avec setTimeout

Afin de tester le chargement, on peut ajouter un timer qui attendra 3 secondes avant de retourner le tâches.

Modifier l'action getTachesApi du magasin des tâches :

• 9-13 : Ajout d'un timer avec setTimeout.

• 13 : Durée du timer en millisecondes.

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

getTachesApi ({ commit, rootState }) {
    commit('setTachesChargees', false)
    const config = {
      headers: { Authorization: 'Bearer ' + rootState.auth.token }
    }
    api.get('/taches', config)
      .then(function (response) {
        // AJOUT TIMER **************************************
        setTimeout(() => {
          commit('setTaches', response.data)
          commit('setTachesChargees', true)
        }
        , 3000)
        // FIN TIMER ****************************************
      })
      .catch(function (error) {
        afficherMessageErreur(
          'Erreur lors de la récupération des tâches !'
        )
        throw error
      })
  },

La partie chargement de nos tâches est terminée.

Ne pas oublier d'enlever le timer après avoir tester votre application.

Résultat

store-taches.js

src/store/store-taches.js

import { api } from 'boot/axios'
import { afficherMessageErreur } from 'src/functions/message-erreur'

// State : données du magasin
const state = {
  taches: [],
  tachesChargees: false
}

/*
Mutations : méthode qui manipulent les données
Les mutations ne peuvent pas être asynchrones !!!
 */
const mutations = {
  modifierTache (state, payload) {
    // Recherche la tâche et retourne sa position dans le tableau, son index
    const index = state.taches.findIndex(el => el.id === payload.id)

    // Si une tâche a été trouvée
    if (index !== -1) {
      // Modifie l'objet trouvé avec les nouvelles valeurs
      Object.assign(state.taches[index], payload.updates)
    }
  },
  supprimerTache (state, id) {
    // Filtre les données du tableau
    // et garde les tâches dont l'id est différent de celui à supprimer
    state.taches = state.taches.filter(el => el.id !== id)
  },
  ajouterTache (state, tache) {
    // Ajout de la tâche à fin du tableau
    state.taches.push(tache)
  },
  setTaches (state, taches) {
    state.taches = taches
  },
  setTachesChargees (state, valeur) {
    state.tachesChargees = valeur
  }
}
/*
Actions : méthodes du magasin qui font appel aux mutations
Elles peuvent être asynchrones !
 */
const actions = {
  modifierTache ({ commit }, payload) {
    // Valide la mutation et y passe les données
    commit('modifierTache', payload)
  },
  supprimerTache ({ commit }, id) {
    commit('supprimerTache', id)
  },
  ajouterTache ({ commit }, tache) {
    let uId = 1
    // Si le tableau contient des éléments
    if (state.taches.length) {
      // Récupère l'id MAX et lui ajoute 1
      uId = Math.max(...state.taches.map(tache => tache.id)) + 1
    }
    // Ajoute le nouvel id à la tache
    tache.id = uId
    // Commite l'ajout
    commit('ajouterTache', tache)
  },
  getTachesApi ({ commit, rootState }) {
    commit('setTachesChargees', false)
    const config = {
      headers: { Authorization: 'Bearer ' + rootState.auth.token }
    }
    api.get('/taches', config)
      .then(function (response) {
        commit('setTaches', response.data)
        commit('setTachesChargees', true)
      })
      .catch(function (error) {
        afficherMessageErreur(
          'Erreur lors de la récupération des tâches !'
        )
        throw error
      })
  },
  viderTaches ({ commit }) {
    commit('setTaches', [])
    commit('setTachesChargees', false)
  }
}

/*
Getters : retourne les données du magasin
Fonctionne comme les propriétés calculées
Sert à calculer, trier, filtrer ou formater les donneés
 */
const getters = {
  // Prend le state comme 1er paramètre
  taches: (state) => {
    return state.taches
  }
}

/*
Exporte les constantes, variables du fichier
On pourra ainsi les récupérer, les importer dans un autre fichier JS.

namespace: true, ajoute un namespace à notre objet retourné.
 */
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

PageTaches.vue