Pull to refresh

Pull to refresh | Quasar FrameworkQuasar Framework

Nous allons ajouter un composant "Pull to refresh" à notre comosant PageTaches.vue, qui nous permettra, comme son nom le suggère, de rafraichir, recharger les tâches, en "tirant vers le bas".

Pour ce faire, nous allons envelopper notre liste dans un composant <q-pull-to-refresh @refresh="refresh"> et créer une méthode refresh qui rechargera les tâches de notre magasin des tâches.

Résultat

• 11 : Ouverture du pull to refresh avec appel de la méthdoe refresh

• 26 : Fermeture du pull to refresh

• 51 : Importation de l'outil mapActions

• 66 : Importation de l'action getTachesApi du magasin des tâches

• 67 : Création de la méthode refresh qui appelle l'action getTachesApi du magasin des tâches

src/pages/PageTaches.vue

<template>
  <q-page padding>
    <!-- Spinner -->
    <div
      v-if="!tachesChargees"
      class="q-pa-lg text-center"
    >
      <q-spinner-radio color="primary" size="4em" />
    </div>

    <q-pull-to-refresh @refresh="refresh">
      <!-- Liste des tâches -->
      <q-list
        v-if="taches.length && tachesChargees"
        separator
        bordered
      >
        <tache
          v-for="tache in taches"
          :key="tache.id"
          :tache="tache"
        >
        </tache>

      </q-list>
    </q-pull-to-refresh>

    <q-page-sticky position="bottom" class="q-mb-lg">
      <q-btn @click="afficherFormTache = true"
             fab
             icon="add"
             color="primary" />
    </q-page-sticky>

    <q-dialog
      v-model="afficherFormTache"
      persistent
    >
      <form-tache
        @fermer="afficherFormTache = false"
        bouton="Ajouter"
      >
        Ajouter une tâche
      </form-tache>
    </q-dialog>
  </q-page>
</template>

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

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

<style>
  .text-barre {
    text-decoration: line-through;
  }
</style>