Supprimer tâche

Bouton supprimer

Pour la suppression d'une tâche, nous allons ajouter une bouton "supprimer" tout à droite du composant TaskComponent.vue.

Button | Quasar FrameworkQuasar Framework

1. Créer une nouvelle section <q-item-section side> avant la fermeture </q-item>

2. Ajouter le code du bouton <q-btn ... />

3. Personnaliser le bouton

   • Ajouter dense pour rendre le bouton le plus petit possible.

   • Utiliser la couleur negative du thème

   • Choisir l’icône delete

4. Ajouter une événement click qui appellera la méthode confirmerSuppression et lui passer l'id de la tâche à supprimer.

src/components/Taches/Tache.vue | ligne 57

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

Boîte de dialogue

La méthode confirmerSuppression va afficher une boîte de dialogue qui permettra à l'utilisateur de confirmer ou annuler la suppression de la tâche.

Quasar fournit un plugin Dialog :

Dialog Plugin | Quasar FrameworkQuasar Framework

Installer le plugin Dialog

Contrairement aux composants Quasar, les plugins Quasar ne sont pas automatiquement ajouter à l'application.

Il faut donc ajouter le plugin en modifiant le fichier quasar.config.js qui se trouve à la racine du projet.

quasar.confing.js

module.exports = configure(function (/* ctx */) {
  return {
    // ...
    framework: {
      // ...
      // Quasar plugins
      plugins: [
        'Dialog'
      ]
    }
  }
})

Afficher la boîte de dialogue

Créer la méthode confirmerSuppression et y copier le code d'exemple du bouton confirm de la doc Quasar.

Dialog permet de gérer différentes réactions, on ne va garder que le premier onOk() qui se produira si le visiteur clique le bouton "OK" et affichera 'Supprimer !' dans la console.

src/components/Taches/Tache.vue | ligne 81

import { Dialog } from "quasar"

// ...

const confirmerSuppression = (id) => {
  Dialog.create({
    title: 'Suppression',
    message: 'Êtes-vous sûr de vouloir supprimer cette tâche ?',
    cancel: true,
    persistent: true
  }).onOk(() => {
    console.log('Suppression de la tâche', id)
  })
}

1. En cliquant sur un des boutons supprimer, la fenêtre s'affiche

2. En cliquant sur le bouton "OK" de la fenêtre, le message 'Supprimer !' est affiché dans la console.

Problème de clic !

Si on regarde bien, lorsqu’on clique sur le bouton supprimer, cela va également changer l'état de la tâche.

Pour que le click du bouton "supprimer" ne se propage pas à son parent <q-item> on va explicitement stopper la propagation en ajoutant .stop après le nom de l'événement :

<q-btn @click.stop="confirmerSuppression(tache.id)">

Suppression de la tâche

Action

Nous devons créer une nouvelle action supprimerTache qui recevra l'id de la tâche à supprimer en paramètre et qui retirera l'élément avec l'id correspondant du tableau

src/store/store-taches.js

export const useTachesStore = defineStore('taches', () => {
    // ...
    const supprimerTache = (id: number) => {
        const index = taches.value.findIndex((tache) => tache.id === id)
        taches.value.splice(index, 1)
    }
    
    return {
        // ...
        supprimerTache
    }
})

Appel et personnalisation Dialog

Il ne reste plus qu'à déclencher l'action sur validation de la boite de dialogue onOk().

On en profite pour personnaliser le titre, le message et le texte des boutons CANCEL et OK de de la boite de dialogue.

src/components/Taches/Tache.vue

confirmerSuppression (id) {
  Dialog.create({
    title: 'Suppression',
    message: 'Êtes-vous sûr de vouloir supprimer cette tâche ?',
    cancel: true,
    persistent: true
  }).onOk(() => {
    store.supprimerTache(id)
  })
}

Résultat

store-taches.js

store-taches.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTachesStore = defineStore('taches', () => {
  const taches = ref([
    {
      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'
    }
  ])

  const modifierTache = (id) => {
    const index = taches.value.findIndex((tache) => tache.id === id)
    taches.value[index].terminee = !taches.value[index].terminee
  }

  const supprimerTache = (id) => {
    const index = taches.value.findIndex((tache) => tache.id === id)
    taches.value.splice(index, 1)
  }

  return {
    taches,
    modifierTache,
    supprimerTache
  }
})

TaskComponent.vue

quasar.conf.js