Liste des tâches

Stockage des tâches

Pour commencer, nous allons créer un tableau d'objets tâches (id, nom, terminée) dans les données de la page des tâches.

Résultat

• 10-26 : Création du tableau des tâches

  • Chaque tâche possède les propriétés suivantes :

    • id : (Number) identifiant unique d'une tâche

    • nom : (String) nom de la tâche

    • terminee : (Boolean) indique si la tâche est terminée ou non.

pages/PageTaches.vue

<template>
  <q-page padding>
    <h1>Taches</h1>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const taches = ref([
  {
    id: 1,
    nom: 'Acheter des oranges',
    terminee: false
  },
  {
    id: 2,
    nom: 'Manger des oranges',
    terminee: false
  },
  {
    id: 3,
    nom: 'Digérer des oranges',
    terminee: false
  }
])
</script>

<style scoped lang="scss">

</style>

Affichage des tâches

Pour afficher les tâches nous utiliserons un liste Quasar <q-list> avec cases à cocher <q-checkbox />

List and List Items | Quasar FrameworkQuasar Framework

Code d'exemple Quasar

<q-list bordered padding>
  <q-item tag="label" v-ripple>
    <q-item-section side top>
      <q-checkbox v-model="check1" />
    </q-item-section>

    <q-item-section>
      <q-item-label>Notifications</q-item-label>
      <q-item-label caption>
        Notify me about updates to apps or games that I downloaded
      </q-item-label>
    </q-item-section>
  </q-item>
</q-list>

Nous allons retirer tout ce qui n'est pas nécessaire :

• attribut padding de <q-list>

• attribut tag="label" dans <q-item>

• Le 2e composant <q-item-label caption>

    <q-list bordered>
      <q-item v-ripple>
        <q-item-section side top>
          <q-checkbox v-model="check1" />
        </q-item-section>

        <q-item-section>
          <q-item-label>Notifications</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

Prochaines opérations :

• Répéter le composant <q-item> pour chaque taches du tableau avec v-for et :key

• Injecter le nom de la tâche parcourue {{ tache.nom }} dans <q-item-label>

• Lier la case à cocher <q-checkbox /> avec la propriété "terminee" de la tâche : v-model="tache.terminee"

<q-item
  v-for="tache in taches"
  :key="tache.id"
  v-ripple
>
  <q-item-section side top>
    <q-checkbox v-model="tache.terminee" />
  </q-item-section>

  <q-item-section>
    <q-item-label>{{ tache.nom }}</q-item-label>
  </q-item-section>
</q-item>

Si l'on clique sur la case à cocher, et qu'on inspecter le tableau des tâches avec Vue DevTools, on remarque que la valeur de la propriété "terminee" passe de flase à true.

Problème de la portée du clic

Pour l'instant il faut cliquer sur la case à cocher <q-checkbox /> pour valider la tâche.

Nous allons ajouter un événement @click à <q-item>, ainsi on pourra cliquer sur toute la tâche pour changer son état.

Pour rendre un élément <q-item> cliquable, il faut lui ajouter l'attribut clickable.

<q-item
  v-for="tache in taches"
  :key="tache.id"
  @click="tache.terminee = !tache.terminee"
  clickable
  v-ripple
>
  <q-item-section side top>
    <q-checkbox :checked="tache.terminee" />
  </q-item-section>

  <q-item-section>
    <q-item-label>{{ tache.nom }}</q-item-label>
  </q-item-section>
</q-item>

Résultat

pages/PageTaches.vue

<template>
  <q-page padding>
    <q-list bordered>
      <q-item
        v-for="tache of taches"
        :key="tache.id"
        @click="() => tache.terminee = !tache.terminee"
        clickable
        v-ripple
      >
        <q-item-section side top>
          <q-checkbox v-model="tache.terminee" />
        </q-item-section>

        <q-item-section>
          <q-item-label>{{ tache.nom }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const taches = ref([
  {
    id: 1,
    nom: 'Acheter des oranges',
    terminee: false
  },
  {
    id: 2,
    nom: 'Manger des oranges',
    terminee: false
  },
  {
    id: 3,
    nom: 'Digérer des oranges',
    terminee: false
  }
])
</script>

<style scoped lang="scss">

</style>

Date et heure de fin des tâches

Nous allons ajouter et afficher une date et une heure d'échéance aux tâches : dateFin, heureFin

Ajout dans les données

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

Affichage dans <q-item>

Nous allons nous inspirer de cet exemple pour afficher la date et l'heure à droite du <q-item>.

List and List Items | Quasar FrameworkQuasar Framework

Code d'exemple Quasar

<q-item-section side top>
  <q-item-label caption>Voted!</q-item-label>
</q-item-section>

Nous utiliserons le <q-item-label> pour y afficher la date et ajouterons et un deuxième <q-item-label> pour l'heure, en la mettant dans un élément <small> pour la rendre plus petite.

Pour terminer, nous ajouterons une icône à droite de la date et de l'heure.

<q-item
  v-for="tache in taches"
  :key="tache.id"
  @click="tache.terminee = !tache.terminee"
  clickable
  v-ripple
>
  <q-item-section side top>
    <q-checkbox v-model="tache.terminee" />
  </q-item-section>

  <q-item-section>
    <q-item-label>{{ tache.nom }}</q-item-label>
  </q-item-section>

  <q-item-section side top>
    <q-icon name="event" />
    <q-item-label caption>
      {{ tache.dateFin }}
    </q-item-label>
    <q-item-label caption>
      <small>{{ tache.heureFin}}</small>
    </q-item-label>
  </q-item-section>
</q-item>

Ce qui donne le résultat suivant :

Nous allons corriger l'affichage en :

• 8, 16: supprimant l'attribut top des <q-item-section> ce qui alignera verticalement leur contenu au milieu de l'élément.

• 17-42: créant une grille de deux colonnes pour le dernier <q-item-section>. Une colonne pour l'icône et une autre qui contiendra la date et l'heure.

  • Doc sur les grilles avec Flex et Qusar : https://quasar.dev/layout/grid/introduction-to-flexbox

  • Autres doc de base sur Flex en CSS :

    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    • https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox

• alignant verticalement au milieu le contenu de la colonne de l'cône

• donnant un taille de à l’icône size="18px" et en y ajoutant une petite marge à droite class="q-mr-xs"

  • Doc gestion des marges Quasar : https://quasar.dev/style/spacing

• en alignant à droite le texte de la date et de l'heure.

<q-item
  v-for="tache in taches"
  :key="tache.id"
  @click="tache.terminee = !tache.terminee"
  clickable
  v-ripple
>
  <q-item-section side>
    <q-checkbox v-model="tache.terminee" />
  </q-item-section>

  <q-item-section>
    <q-item-label>{{ tache.nom }}</q-item-label>
  </q-item-section>

  <q-item-section 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>

Résultat

src/pages/PageTaches.vue

<template>
  <q-page padding>
    <q-list bordered>
      <q-item
        v-for="tache in taches"
        :key="tache.id"
        @click="tache.terminee = !tache.terminee"
        clickable
        v-ripple
      >
        <q-item-section side>
          <q-checkbox v-model="tache.terminee" />
        </q-item-section>

        <q-item-section>
          <q-item-label>{{ tache.nom }}</q-item-label>
        </q-item-section>

        <q-item-section 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>
    </q-list>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from "vue";

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'
  }
])
</script>

<style scoped>

</style>

Un peu de style

• Ajouter un séparateur aux éléments de la liste avec l'attribut separator : <q-list separator>

• Ajout d'un fond vert aux tâches terminées, et orange aux autres en utilisant :class , l'opérateur ternaire et les "helpers" bg-green-1 et bg-orange-1.

• Barré le nom de la tâche si terminée

  • Créer une classe CSS .text-barre

  • Utiliser :class pour attribuer la classe CSS

Résultat

src/pages/PageTaches.vue

<template>
  <q-page padding>
    <q-list separator bordered>
      <q-item
        v-for="tache in taches"
        :key="tache.id"
        @click="tache.terminee = !tache.terminee"
        clickable
        v-ripple
        :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
      >
        <q-item-section side>
          <q-checkbox v-model="tache.terminee" />
        </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 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>
    </q-list>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from "vue"

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'
  }
])
</script>

<style scoped lang="scss">
.text-barre {
  text-decoration: line-through
}
</style>

Télécharger le code complet du chapitre

• Télécharger et extraire l'archive (zip)

• Depuis le terminal :

  • Aller dans le dossier du projet

  • Taper la commande : npm install

  • Taper la commande : quasar dev

294KB

todo-liste-des-taches.zip

archive

Ouvrir