Barista: Combo : Nouveau composant

Créé le 2 mars 2020 · 8Commentaires · Source: dynatrace-oss/barista

Demande de fonctionnalité

Résumé

Ajoutez un composant combobox à la bibliothèque.

Description des fonctions

Nous traitons beaucoup de données. Notre dt-select ne fonctionne pas vraiment avec un grand nombre d'options. La fonctionnalité de recherche pour le dt-select est la même que dans la sélection native. Par conséquent, un utilisateur ne peut accéder qu'à une option commençant par la touche sur laquelle l'utilisateur a appuyé.
Cela est vraiment limitatif dans les cas d'utilisation avec de grands ensembles de données.
Un composant combobox qui peut être construit à partir d'une entrée avec un dt-autocomplete attaché peut nous y aider.

L'entrée doit afficher un texte d'espace réservé.
Combobox

La liste déroulante doit utiliser les mêmes styles que le dt-select.

Comportement

Au clic, la liste déroulante ouvre une liste de plusieurs éléments parmi lesquels l'utilisateur peut choisir et le curseur est placé dans le champ de saisie. Dès que les utilisateurs commencent à taper, la liste déroulante doit émettre un événement anti-rebond et afficher un indicateur de chargement à l'intérieur de l'entrée similaire à celui que nous avons déjà dans le champ de filtre.

Une fois qu'un élément est sélectionné, la liste déroulante se ferme et le champ de saisie est mis à jour en conséquence.

Combobox on click

Pour la première version de la combobox, je suggère de ne pas se soucier du défilement virtuel. On peut s'attendre à ce que le filtrage des éléments se fasse côté serveur. Les éléments renseignés sur le client peuvent être rendus. Nous pouvons améliorer la gestion des grands ensembles de données dans une deuxième version.
Pour la première version, je suggérerais d'utiliser le dt-autocomplete, mais nous devrions envisager de créer une liste déroulante simplifiée avec une liste de données.

[ ] Rédiger une proposition d'API
[ ] Créer une bibliothèque et une démo
[ ] Ajoutez une liste déroulante et créez des styles supplémentaires pour avoir le caret à l'intérieur du dtInput.
[ ] Ajout d'un événement d'entrée anti-rebond + indicateur de chargement
[ ] Ajouter des tests unitaires
[ ] Ajouter des tests e2e

Pièces jointes

P2 feature help wanted new component

Source

ffriedl89

Commentaire le plus utile

Je propose l'ajout de deux entrées supplémentaires :
| Nom | Type | Valeur par défaut | Descriptif |
| --- | --- | --- | --- |
| chargement | boolean | false | Lorsqu'il est défini sur true, un indicateur de chargement s'affiche pour indiquer à l'utilisateur que les données sont actuellement chargées/filtrées |
| afficherAvec | (value: T) => string | (value: T) => ${valeur}`` | Une fonction renvoyant un nom d'affichage pour un objet donné qui représente une option de la liste déroulante |

La fonction displayWith est pertinente pour utiliser la combobox avec des objets et un indicateur de chargement semble justifié pour un composant qui - dans la plupart des cas - déchargera le filtrage du côté serveur.

heartdisease le 15 mai 2020

👍2

Tous les 8 commentaires

En tant que référence d'accessibilité, veuillez considérer la recommandation des meilleures pratiques de la liste déroulante WAI-ARIA avec liste déroulante.

tomheller le 2 mars 2020

Zone de liste déroulante de proposition d'API

Structure avancée

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

Contributions

Les sorties

| Nom | Type | Descriptif |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | Evénement émis lorsqu'une nouvelle valeur a été sélectionnée |
| filterChanges | EventEmitter<string> | Evénement émis lors du changement de filtre |

Projection de contenu
option dt
dt-optgroup

Liste de contrôle

[ ] prise en charge correcte du clavier (flèche : haut bas)
[ ] WAI-ARIA
[ ] considérer la compatibilité ngForms
[ ] envisager la validation

lukett89 le 13 avr. 2020

🚀1 👍1

Salut @lukett89 , merci pour la proposition d'API. Vraiment un excellent point de départ.
Je pense que nous aurions besoin des mêmes entrées que dans le dt-select .

j'ajouterais
| Nom | Type | Descriptif |
| ------------- | ------------- | ------------- |
| id | string | Identifiant de la sélection |
| compareWith | (v1: T, v2: T) => boolean | Fonction pour comparer les valeurs des options avec les valeurs sélectionnées |
| required | boolean | Si l'entrée est requise |
| panelClass | string | Classe ajoutée à la liste déroulante |

Nous devrions également envisager d'ajouter des getters pour l'état ouvert comme "opened" et des sorties lorsque cet état change.
Je pense que ce serait bénéfique si nous pouvions nous en tenir à l'API la plus proche possible de la sélection pour rendre le basculement entre l'un ou l'autre aussi facile que possible.

ffriedl89 le 14 avr. 2020

Merci pour votre réponse @ffriedl89.
Nous prendrons en compte toutes les entrées/sorties que vous avez mentionnées pour la première version du composant.

lukett89 le 14 avr. 2020

Liste déroulante de la proposition finale de l'API

Structure avancée

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

Contributions

| Nom | Type | Descriptif |
| ------------- | ------------- | ------------- |
| value | string \| undefined | Valeur initiale pour l'entrée |
| placeholder | string \| undefined | Espace réservé pour l'entrée |
| id | chaîne | Identifiant de la sélection |
| compareWith | (v1: T, v2: T) => boolean | Fonction pour comparer les valeurs des options avec les valeurs sélectionnées |
| required | boolean | Si l'entrée est requise |
| panelClass | string | Classe ajoutée à la liste déroulante |

Les sorties

Projection de contenu
option dt
dt-optgroup

Liste de contrôle

[ ] prise en charge correcte du clavier (flèche : haut bas)
[ ] WAI-ARIA
[ ] considérer la compatibilité ngForms
[ ] envisager la validation

lukett89 le 14 avr. 2020

J'aimerais m'occuper de la mise en œuvre de cette fonctionnalité dans les 2 prochaines semaines. Pourriez-vous m'attribuer le problème s'il vous plaît?

heartdisease le 15 avr. 2020

En synchronisation et après discussion avec @heartdisease et @lukett89 , j'ai réaffecté le problème.

tomheller le 15 avr. 2020