Améliorations

Notre projet est fonctionnel, mais nous pouvons améliorer les points suivants :

Formulaire d'ajout
- Donner le focus au champ nom lors de l’affichage du formulaire d'ajout
- Ajout d'un bouton pour vider les champs du formulaire
- Masquer la sélection de l'heure si la date est vide.
Liste des tâches
- Masquer la liste si pas de tâches.
Dans une tâche de la liste, masquer la section avec la date et l'heure si la date est vide.

Formulaire d'ajout

Autofocus

Input | Quasar FrameworkQuasar Framework

Ajouter la directive autofocus au <q-input> pour le nom de la tâche.

<!-- NOM -->
<q-input
  outlined
  v-model="tache.nom"
  label="Nom"
  :rules="[val => !!val || 'Le nom est obligatoire']"
  autofocus
/>

Bouton vider le champs

Ajouter l'attribut clearable à tous les <q-input> du formulaire d'ajout.

<q-input clearable />

Masquer l'heure si date vide

Ajout d'une directive v-if surveillant la date de la tâche au <q-input> de l'heure.

<!-- HEURE -->
<q-input
  v-if="tache.dateFin"
  outlined
  v-model="tache.heureFin"
  label="Heure"
  class="q-mt-sm"
  clearable
>

Liste des tâches

Masquer la liste des tâches si vide

Dans PageTaches.vue, ajouter un v-if à la <q-list> basé sur la taille du tableau.

<q-list
  v-if="taches.length"
  separator
  bordered
>
  <tache
    v-for="tache in taches"
    :key="tache.id"
    :tache="tache"
  >
  </tache>
</q-list>

Masquer section date si vide

Dans TaskComponent.vue cacher la section contenant la date et l'heure si la date est vide.

<q-item-section
  v-if="tache.dateFin"
  side
>

Résultat

<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6">Ajouter une tâche</div>
      <q-space/>
      <q-btn
        dense
        flat
        round
        icon="close"
        v-close-popup
      />
    </q-card-section>

    <q-form
      @submit="formSubmit"
    >
      <q-card-section class="q-pt-none">
        <q-input
          outlined
          v-model="tache.nom"
          label="Nom"
          :rules="[val => !!val || 'Le nom est obligatoire']"
          autofocus
          clearable
        />

        <q-input
          outlined
          v-model="tache.dateFin"
          label="Date"
          class="q-mt-sm"
          clearable
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                <q-date
                  v-model="tache.dateFin"
                  mask="D.M.YYYY"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>

        <q-input
          label="Heure"
          outlined
          v-model="tache.heureFin"
          class="q-mt-sm"
          clearable
          v-if="tache.dateFin !== ''"
        >
          <template v-slot:append>
            <q-icon name="access_time" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
                @before-show="() => heureTemp = tache.heureFin"
              >
                <q-time v-model="heureTemp">
                  <div class="row items-center justify-end q-gutter-sm">
                    <q-btn label="Annuler" color="primary" flat v-close-popup />
                    <q-btn
                      label="OK"
                      color="primary"
                      flat
                      @click="() => tache.heureFin = heureTemp"
                      v-close-popup
                    />
                  </div>
                </q-time>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn label="Ajouter" color="primary" type="submit" />
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'
import { useTachesStore } from 'stores/store-taches'

const store = useTachesStore()

const heureTemp = ref('')

const tache = ref({
  nom: '',
  dateFin: '',
  heureFin: '',
  terminee: false
})

const emit = defineEmits(['close'])

const formSubmit = () => {
  store.ajouterTache(tache.value)
  emit('close')
}
</script>

<style scoped lang="scss">
.q-card {
  max-width: 80vw;
  width: 400px;
}
</style>

<template>
  <q-page padding>
    <q-list
      v-if="store.taches.length > 0"
      separator
      bordered
    >
      <Task
        v-for="(tache, index) in store.taches"
        :key="tache.id"
        :tache="tache"
        @toggle="() => store.taches[index].terminee = !store.taches[index].terminee"
      />
    </q-list>
    <q-page-sticky position="bottom" class="q-mb-lg">
      <q-btn
        @click="() => afficherTaskDialog = true"
        fab
        icon="add"
        color="primary" />
    </q-page-sticky>
    <q-dialog v-model="afficherTaskDialog">
      <TaskDialog
        @close="() => afficherTaskDialog = false"
      />
    </q-dialog>
  </q-page>
</template>

<script setup>
import { useTachesStore } from 'stores/store-taches'
import Task from 'components/TaskComponent.vue'
import { ref } from 'vue'
import TaskDialog from 'components/TaskDialog.vue'

const store = useTachesStore()

const afficherTaskDialog = ref(false)
</script>

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

<template>
  <q-item
    @click="() => store.modifierTache(tache.id)"
    clickable
    v-ripple
    :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
  >
    <q-item-section side>
      <q-checkbox
        :modelValue="tache.terminee"
        @update:modelValue="() => store.modifierTache(tache.id)"
      />
    </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="() => confirmerSuppression(tache.id)"
        dense
        flat
        round
        color="negative"
        icon="delete"
      />
    </q-item-section>
  </q-item>
</template>

<script setup>
import { useTachesStore } from 'stores/store-taches'
import { Dialog } from "quasar"

const { tache } = defineProps({ tache: Object })

const store = useTachesStore()

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

<style scoped lang="scss">

</style>

PrécédentAjouter une tâche SuivantModifier tâche

Mis à jour il y a 2 ans

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

hashtagFormulaire d'ajout

hashtagAutofocus

hashtagBouton vider le champs

hashtagMasquer l'heure si date vide

hashtagListe des tâches

hashtagMasquer la liste des tâches si vide

hashtagMasquer section date si vide

hashtagRésultat