# Modifier tâche
Un des objectifs du développement par composant est de rendre les composants le plus autonomes possible.
Afin de respecter cette bonne pratique, nous allons déléguer la modification d'une tâche au composant `Tache.vue`.
Ainsi `Tache.vue` regroupera toutes les fonctionnalités d'une tâche existante :
* Afficher les données de la tâche (nom, date, heure et état)
* Changer l'état d'une tâche (terminée / à faire)
* Supprimer une tâche
* Modifier les données de la tâche (nom, heure, date)
La page des tâches, `PageTaches.vue`, s'occupe de lister et d'ajouter des tâches.
## Formulaire tâche
Le formulaire de modification d'une tâche étant presque le même que celui d'ajout, nous allons modifier le composant `TaskDialog.vue` pour qu'il puisse être utilisé pour ces deux opérations.
### Titre du formulaire
Nous allons ajouter une **zone de distribution de contenu appelée *****Slot**,* `` qui nous permettra de personnaliser le titre du formulaire.
On remplace donc le texte `Ajouter une tâche` par `` :
{% code title="TaskDialog.vue" %}
```markup
```
{% endcode %}
L'élément `` sera ensuite remplacé par le contenu saisi lors de l'utilisation du composant `TaskComponent.vue` entre sa balise d'ouverture et de fermeture :
```markup
Mon titre custom!
```
On peut maintenant l'utiliser dans `PageTaches.vue` pour définir le titre du formulaire :
{% code title="PageTaches.vue" %}
```markup
Ajouter une tâche
```
{% endcode %}
### Texte du bouton
Pour le label du bouton, nous allons créer une propriété `bouton` avec `"OK"` comme valeur par défaut.
{% code title="TaskDialog.vue" %}
```javascript
const { bouton } = defineProps({
bouton: {
type: String,
default: 'Ok'
}
})
```
{% endcode %}
Ne pas oublier de le lier au texte du bouton!
{% code title="TaskDialog.vue" %}
```markup
```
{% endcode %}
On peut maintenant le configurer dans `PageTaches.vue` :
{% code title="PageTaches.vue" %}
```markup
Ajouter une tâche
```
{% endcode %}
### Intégrer le formulaire à `Tache.vue`
Nous pouvons maintenant ajouter le formulaire au composant `TaskComponent.vue` en l'incluant dans une *dialog*, tout comme nous l'avons fait pour `PageTaches.vue`.
Placer ce code juste avant la fermeture `` de `Tache.vue` :
{% code title="TaskComponent.vue" %}
```markup
Modifier la tâche
```
{% endcode %}
#### Ref `afficherTaskDialog`
Il faut encore ajouter la ref `afficherTaskDialog` au composant, pour gérer l'affichage de la *dialog*.
{% code title="src/components/Taches/Tache.vue | Ligne 70" %}
```javascript
import { ref } from 'vue'
//...
const afficherTaskDialog = ref(false)
```
{% endcode %}
## Bouton modifier une tâche
Prochaine étape, ajouter un bouton "Modifier" avant le bouton "Supprimer" de dans le composant `TaskComponent.vue`.
Pour ce faire, simplement copier la section `` contenant le bouton de suppression et la coller juste avant.
* Changer l'icône `"delete"` par `"edit"` et utiliser la couleur `"primary"`.
* Au clic, stopper la propagation et afficher le formulaire : `afficherTaskDialog = true`
{% code title="TaskComponent.vue" %}
```markup
```
{% endcode %}
Cool, maintenant si on clique sur un bouton de modification, le formulaire s'affiche avec le titre "Modifier une tâche" et un bouton "Modifier".
## Passer la propriété au formulaire
Il faut maintenant que notre formulaire récupère les données actuelles de la tâche pour les afficher dans les champs du formulaire.
On va ajouter une propriété `tacheAModifier` au composant `TaskDialog.vue`. Le composant `TaskComponent.vue` pourra ainsi passer la tâche au formulaire via cette propriété.
{% code title="TaskDialog.vue" %}
```javascript
const { tacheAModifier, bouton } = defineProps({
tacheAModifier: {
type: Object
},
bouton: {
type: String,
default: 'Ok'
}
})
```
{% endcode %}
### Copie des propriétés et valeurs de la tâche à modifier
Après le chargement de `TaskDialog.vue`, si une `tacheAModifier` existe, on copie ses propriétés et valeurs dans la donnée `tache` du composant. Donnée `tache` qui est liée aux éléments du formulaire.
Cela affichera instantanément les valeurs de la tâche à modifier dans les champs de saisie.
{% hint style="danger" %}
On doit utiliser `Object.assign(destination, source)` pour faire une **copie par valeur** !
En faisant une affectation classique `obj1 = obj2`, on fait une **copie par référence**.
Dans notre cas, le formulaire ne modifierait pas les valeurs de son propre objet, mais celui du composant parent, ce qui passerait outre l'action d'enregistrer
{% endhint %}
{% code title="TaskDialog.vue" %}
```javascript
import { onMounted } from 'vue'
onMounted(() => {
if (tacheAModifier) {
Object.assign(tache.value, tacheAModifier)
}
})
```
{% endcode %}
Pour garder de la consistance dans la structure de notre ref tache, on va l'initialiser avec un champ id initialisé à `undefined`:
```javascript
const tache = ref({
id: undefined,
nom: '',
dateFin: '',
heureFin: '',
terminee: false
})
```
Notre formulaire de modification affiche les données de la tâche à modifier :beers:.
## Sauver les modifications
Actuellement, si l’on clique sur le bouton "Modifier", cela ajoute une nouvelle tâche au magasin.
Nous allons modifier la méthode `formSubmit` du composant `Tache.vue` pour qu'il modifie la tâche.
Pour se faire, il suffit de tester si la tâche actuelle possède un id :
* **Avec id :** **Modification** de la tâche dans le magasin.
* **Sans id :** **Ajout** d'une nouvelle tâche dans le magasin.
Pour modifier la tâche dans le magasin, nous allons modifier l'action `modifierTache` que nous avions créée pour changer l'état d'une tâche (terminée, à faire).
Il faut donc modifier pour pouvoir changer n'importe quelle valeur; on change sa signature afin qu'elle prenne en paramètre un `id`, ainsi qu'un `payload` avec la structure suivante:
```typescript
{
nom: string,
dateFin: string,
heureFin: string,
terminee: boolean
}
```
Toutes les propriétés de notre payload sont optionnelles, afin qu'on puisse ne passer que celles qui nous intéressent. On va itérer sur toutes les données passées, et les affecter à notre tache.
Modifier `store-taches.js` en conséquence:
```javascript
const modifierTache = (id, payload) => {
const index = taches.value.findIndex((tache) => tache.id === id)
for (const key in payload) {
taches.value[index][key] = payload[key]
}
}
```
### méthode `formSubmit()`
Nous pouvons maintenant modifier le code de `formSubmit()` pour modifier ou ajouter une tâche.
{% code title="TaskDialog.vue" %}
```javascript
const formSubmit = () => {
if (tache.value.id) {
const { value: payload } = tache // destructuration de la tache
store.modifierTache(tache.value.id, payload);
} else {
store.ajouterTache(tache.value)
}
emit('close')
}
```
{% endcode %}
## Résultat
{% tabs %}
{% tab title="TaskDialog.vue" %}
```markup