Discussion :

[amira]

Bonjour

Je travaille sur un projet et sur un formulaire nous avons 5 boutons qui peuvent être cliquables ou non en fonction de multiples conditiions.
Typiquement :

-En arrivant sur le formulaire le bouton "rechercher" et "Effacer" sont non-cliquables
-en saisissant un champ non obligatoire "rechercher" est non-cliquable mais effacer l'est
-en saisissant un champ obligatoire "rechercher" est cliquable de même que "effacer".

Bref, je pense que vous avez saisi l'idée, sauf que à l'heure actuelle je dois ajouter 3 autres boutons qui interagissent en plus.
La solution basique a été de gérer des flags avec de multiples if/else à tout bout de champ.

En pseudo-code ça donnerait qq chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
if( isInit && isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
   boutonRecherche = ACTIF;
   boutonEffacer = ACTIF;
   boutonContacterServeur = INACTIF;
   boutonEnvoyerMail = ACTIF;
}
 
if( !isInit && isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
   ...
}
 
if( isInit && !isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
   ...
}
 
if( isInit && isServerOk && !isMailEnabled && nom.value !== '' && prenom.value !== '') {
   ...
}
 
if( isInit && isServerOk && isMailEnabled && (nom.value === '' || prenom.value === '')) {
   ...
}
 
...

Je souhaiterais savoir s'il y a une manière plus simple et plus élégante de gérer ça ?

Merci à vous

[krakatoa]

il existe pas mal de techniques différentes, voici l'une d'entre elle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<input #inputSearch type="text"/>
 
<button [disabled]="inputSearch.value">...</button>

[amira]

Je voulais dire, je sais comment désactiver un bouton, mais c'est plutôt une manière élégante de gérer de multiples paramètres qui peuvent être changeants.

En pseudo-code ça donnerait qq chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if( isInit && isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
boutonRecherche = ACTIF;
boutonEffacer = ACTIF;
boutonContacterServeur = INACTIF;
boutonEnvoyerMail = ACTIF;
}
 
if( !isInit && isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
...
}
 
if( isInit && !isServerOk && isMailEnabled && nom.value !== '' && prenom.value !== '') {
...
}
 
if( isInit && isServerOk && !isMailEnabled && nom.value !== '' && prenom.value !== '') {
...
}
 
if( isInit && isServerOk && isMailEnabled && (nom.value === '' || prenom.value === '')) {
...
}
 
...

Bref comme tu peux le voir, avec genre de règles, dès qu'on ajoute un paramètre, le nombre de règles explose. Je cherche un moyen permettant de gérer ça de façon plus simple.

[krakatoa]

avec un peu de code on comprends mieux


models

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
export interface data {
  isInit: boolean;
  isServerOk: boolean;
  isMailEnabled: boolean;
  nom: boolean;
  prenom: boolean;
}
 
export interface buttons{
  boutonRecherche: boolean;
  boutonEffacer: boolean;
  boutonContacterServeur: boolean;
  boutonEnvoyerMail: boolean;
}

mettre le code métier dans un service
et la logique doit se faire de façon isoler, par bouton
du coup, tes conditions auront certainement des ET et des OU


XXXXservice

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
export class .......
 
  isBoutonRecherche(data: ModeleData) {
 
     return data.isInit && data.isServerOk && data.isMailEnabled && data.nom && data.prenom;
  }
 
  isBoutonEffacer(data: ModeleData) {
 
     return data.isInit && data.isServerOk && data.isMailEnabled && data.nom && data.prenom;
  }
 
  isBouton.....
     ...
 
  getUpdatedButtons(data: modeleData): modeleButtons {
     const buttons: ModeleButtons = {
        boutonRecherche:  this.isBoutonRecherche(data),
        boutonEffacer:  this.isBoutonEffacer(data),
        ...
        ...
     };
    return buttons;
  }
}

le composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
// la vue :
 
  ... [disabled]="buttons?.boutonRecherche"
 
 
// dans le composant
  data: ModeleData;
  buttons: ModeleButton;
 
ngOnInit() {
  // initialiser data avec les valeurs par defaut
  this.data = {  isInit: false, isServerOk: false, isMailEnabled: false, nom: false,  prenom: false };
  // initialiser les boutons pour la vue
  this.buttons = this.XXXservide.getUpdatedButtons(data);
}
 
 
 
par exemple, si le champs nom est modifié
 
     ...
     // met à jour data
     this.data.nom =    true ou false;
 
     // met à jour les boutons 
     this.buttons= this.XXXXXservice.getUpdatedButtons(data);
     ...

ainsi, si tu ajoutes un bouton, tu auras a créer qu'une fonction dans le service sans modifier le reste du code.
les models et le typage te permettent de limiter les erreurs et les oublies.
te reste aussi à bien renommer l'ensemble.
de plus si tu fais du TDD, ton code est prêt pour ça.

le seul petit inconvénient est que l'écriture des conditions est un peu plus complexe



autres points :
- tu peux factoriser certains bouts de conditions (cela demande d'élaborer une stratégie)
- pour des performances au top, on peux calculer les buttons uniquement si le data à changé
en effet quand tu tapes un texte dans le nom ou prénom, si tu tapes 'al' ou 'alb' le prénom est dans les 2 cas à TRUE donc inutile de tout recalculer

composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
...
...
par exemple, si le champs nom est modifié
     ...
     // met à jour data
 
    const isNom = ....  true ou false;
    if ( isNom !== this.data.nom) {    // on lance les calculs uniquement si ça change
 
        this.data.nom = isNom;
        // met à jour les boutons 
        this.buttons= this.XXXXXservice.getUpdatedButtons(data);
        ...
    }
...
...

ou alors même mieux, histoire de réduire le code dans le composant :

XXXXservice

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
...
buttonsMem: ModeleButtons = {};
...
...
  resolveButtons(data: ModelData, prev: boolean, next: boolean): ModelButtons {
    if ( prev != next) {        // on lance les calculs uniquement si les valeurs concernés ont changées                                                        
        this.buttonsMem = this.getUpdatedButtons(data);      
    }
    return this.buttonsMem;
  }
...
...

composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
...
...
par exemple, si le champs nom est modifié
     ...
     // met à jour data
 
 
        const prev = this.data.nom;
        this.data.nom = true ou false;
        this.buttons= this.XXXXXservice.resolvebuttons(data, prev, this.data.nom);
        ...
 
...
...