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.

triangle-exclamation

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'

[
    {
        "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
    }
]

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.

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()

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.

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.

State tachesChargees

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

Mutation setTachesChargees

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

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.

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

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.

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

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.

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

triangle-exclamation

Résultat

Mis à jour

Ce contenu vous a-t-il été utile ?