# Fonctions réutilisables

**Résumé Express :** Organisez une logique complexe en créant des fonctions réutilisables pour un code plus propre.

---

## Problème : Logique complexe et répétitive

Tout comme les éléments visuels avec des composants, nous devons organiser les éléments algorithmiques avec des **fonctions**. Cela rend la logique plus propre et permet de réutiliser certaines fonctionnalités, comme « obtenir le nombre de tâches terminées ».

## 1. Créer un script de fonction

### Nouveau script
1. Clic droit sur **Nouveau script**
2. Nommez le script « fonction » ou « functions »
3. **Important** : Changez la portée en **Frontend**

### Les trois portées disponibles
- **Frontend** : logique de l'interface utilisateur côté client
- **Backend** : logique côté serveur
- **Shared** : fonctions utilisables partout (frontend + backend)

### Pourquoi ne pas tout mettre en Shared ?
- **Performances** : l'utilisateur charge uniquement le client, pas le serveur
- **Sécurité** : certaines logiques (connexion, etc.) ne doivent pas être exposées côté client
- **Architecture** : éviter les dépendances circulaires

## 2. Créer la fonction getTotalTasks

### Configuration de la fonction
1. Nommez la fonction **getTotalTasks**
2. Cochez **Exporter** pour l'importer ailleurs
3. **Attention** : ne cochez Exporter que si nécessaire (éviter les dépendances circulaires)

### Migration de la logique
1. Depuis la page principale, copiez toute la logique de calcul des tâches totales :
- get store → spread → get property (cards) → Map → Sum
2. Collez le tout dans la fonction getTotalTasks
3. Connectez **input** au début de la chaîne (map)
4. Ajoutez une **output** nommée « totalTasks » de type **number**
5. Connectez le résultat (sum) à la sortie

## 3. Créer la fonction getFinishTasks

### Même principe
1. Créer la fonction **getFinishTasks**
2. Vérifier **Exporter**
3. Migrer la logique de calcul des tâches terminées :
- obtenir le magasin → propagation → obtenir la propriété (cartes) → Filtre → chapeau[0] → obtenir la propriété (tâches) → obtenir la longueur

### Configurer les entrées/sorties
1. Connecter **entrée** au filtre
2. Ajouter « finishTasks » **sortie** de type **nombre**
3. Connecter le résultat à la sortie

## 4. Utiliser les fonctions dans la page principale

### Nettoyer l'ancienne logique
1. Retourner à la page principale
2. Supprimer tous les blocs de calcul complexes
3. Conserver uniquement les blocs de division, de multiplication et d'arrondi

### Importer et utiliser de nouvelles fonctions
1. Ajouter **getTotalTasks** à la logique
2. Ajouter **getFinishTasks** à la logique
3. Connecter l'exécution : calculé → getTotalTasks → getFinishTasks
4. Connecter les résultats :
- totalTasks → entrée « total » de la division
- finishTasks → Saisie « terminée » de la division

## Avantages de cette approche

### Code plus propre
- Logique principale lisible et concise
- Séparation des responsabilités
- Noms de fonctions explicites

### Réutilisabilité
- Fonctions disponibles dans toute l'application
- Évite la duplication de code
- Maintenance centralisée

### Performances
- Chargement optimisé par portée
- Évite les dépendances inutiles

### Bonnes pratiques

### Quand utiliser l'exportation ?
- Uniquement si la fonction est réutilisée ailleurs
- Éviter l'exportation systématique pour ne pas surcharger l'application

### Organisation de la portée
- **Frontend** : calculs d'interface, formatage, validations côté client
- **Backend** : authentification, base de données, logique métier sensible
- **Partagé** : utilitaires communs, constantes, aides

### Structure de la fonction
1. **Entrée** : paramètres d'entrée
2. **Logique** : traitement des données
3. **Sortie** : résultat typé et nommé

## Résultat final

Le pourcentage fonctionne toujours parfaitement, mais avec un code beaucoup plus organisé et maintenable. Les fonctions peuvent désormais être réutilisées dans d'autres parties de l'application.

## Tests et validation

1. **Tester les fonctions indépendamment** : chaque fonction peut être testée individuellement.
2. **Vérifier la réutilisabilité** : importer des fonctions dans d'autres composants.
3. **Performances** : chargement optimisé grâce à des portées appropriées.

## Résumé de l'architecture

### Structure finale du projet
- **Pages** : interface utilisateur et logique d'affichage.
- **Composants** : éléments réutilisables avec propriétés.
- **Scripts/Fonctions** : logique métier organisée par portée.
- **Types** : définitions des structures de données.
- **Store** : état global de l'application.

---

*Félicitations ! Vous disposez désormais d'une application Trello fonctionnelle, avec une architecture claire et maintenable.*