Bonjour @kaikcreator ,

merci d'avoir proposé cette demande, nous pensons que c'est une fonctionnalité utile pour le champ de filtre. Seriez-vous prêt à y contribuer vous-même ?

Pour que l'élu crée cette fonctionnalité, voici ce dont vous aurez besoin pour procéder.

Tout d'abord, déterminez une proposition d'API qui explique comment vous allez créer la fonctionnalité 😉.
De quoi aurez-vous besoin pour réaliser cette fonctionnalité et ce qui changera fondamentalement. Le champ de filtrage n'est pas pour les âmes faibles alors préparez-vous à y faire face avec une confiance critique .
Certaines questions se posent concernant certains cas limites. Que se passe-t-il lorsqu'aucune case n'est cochée et lorsque de nombreuses cases sont cochées.

REMARQUE : utilisez notre composant de case à cocher barista pour implémenter cette fonctionnalité. Nous n'aimons pas voir les ajustements de style puisque la case à cocher dans vos captures d'écran est déjà différente de la nôtre.

Salut @rowa-audil, oui. Peut-être pas moi, mais quelqu'un dans notre équipe contribuera certainement à cette fonctionnalité.
Nous fournirons une API dès que possible, mais nous devons d'abord comprendre un peu mieux comment l'option de plage est implémentée, car nous avons pensé que nous devrions suivre une approche similaire. Une suggestion ici @tomheller @ffriedl89 ?

@kaikcreator , le champ de filtre est dans son état actuel pas très extensible, c'est pourquoi la plage est également très imbriquée avec le champ de filtre en général. Il y a beaucoup de choses qui déterminent quel _overlay_ doit s'ouvrir.
Je suppose que vous devriez suivre l'approche de la gamme, mais il y a quelques pièges dont il faudra peut-être tenir compte.

Type de données

La plage définit son propre type de données dans les définitions de source de données du filterfield (y compris quelques fonctions d'assistance, qui aident à identifier si le nœud est un nœud de plage ou non et également à comparer les nœuds). Vous aurez certainement besoin de fonctions similaires comme celle-ci.

https://github.com/dynatrace-oss/barista/blob/f8a00b33ec830fcf8db65ce16b4809c61b09115b/libs/barista-components/filter-field/src/types.ts#L83 -L151

https://github.com/dynatrace-oss/barista/blob/f8a00b33ec830fcf8db65ce16b4809c61b09115b/libs/barista-components/filter-field/src/filter-field-util.ts#L491 -L502

Représentation visuelle

La gamme implémente sa propre version du comportement de saisie semi -
La superposition et le déclencheur sont toujours créés lorsque le champ de filtre est créé, les _overlays_ sont ouverts par programme par le champ de filtre. (si la superposition ne doit pas être affichée, elles sont désactivées sur le déclencheur pour éviter qu'elles n'apparaissent visuellement).

https://github.com/dynatrace-oss/barista/blob/f8a00b33ec830fcf8db65ce16b4809c61b09115b/libs/barista-components/filter-field/src/filter-field.html#L85 -L92

https://github.com/dynatrace-oss/barista/blob/f8a00b33ec830fcf8db65ce16b4809c61b09115b/libs/barista-components/filter-field/src/filter-field.ts#L434 -L474

Gérer le mode édition

Le mode d'édition dans le champ de filtre est un peu délicat en ce qui concerne la gestion des états, car vous devez restaurer le filtre d'édition en tant que filtre actuel. Vous aurez probablement besoin de quelques modifications dans cette fonction pour le faire correctement pour la sélection multiple.

https://github.com/dynatrace-oss/barista/blob/f8a00b33ec830fcf8db65ce16b4809c61b09115b/libs/barista-components/filter-field/src/filter-field.ts#L664 -L709

Merci @tomheller , cela va certainement nous aider beaucoup !!!

En pensant aux groupes possibles, il serait bon d'adopter des options et des groupes de saisie semi-automatique

ts export interface DtMultiSelectDef<OpGr = unknown> { optionsOrGroups: DtNodeDef<OpGr>[]; }

Mettre DtNodeFlags jour

ts export enum DtNodeFlags { None = 0, TypeAutocomplete = 1 << 0, TypeFreeText = 1 << 1, TypeOption = 1 << 2, TypeGroup = 1 << 3, TypeRange = 1 << 4, TypeMultiSelect = 1 << 5, RenderTypes = TypeAutocomplete | TypeFreeText | TypeRange | TypeMultiSelect, Types = TypeAutocomplete | TypeFreeText | TypeOption | TypeGroup, }

ts export function isDtMultiSelectDef<D = unknown>( def: DtNodeDef<D> | null, ): def is DtNodeDef<D> & DtMultiSelectDef { return isDtNodeDef(def) && !!(def.nodeFlags & DtNodeFlags.TypeMultiSelect); }

DtFilterFieldMultiSelect

Contributions

|Nom|Type|Description|
|-|-|-|
|optionsOuGroupes| DtNodeDef<OpGr>[] | Options déjà sélectionnées|

Les sorties

|Nom|Émet|Description|
|-|-|-|
| ouvert | void | Le panneau est ouvert|
|fermé| void | Le panneau est fermé|
| optionsSoumis | DtNodeDef<OpGr>[] | Options sélectionnées par l'utilisateur|

DtFilterFieldMultiSelectTrigger

Contributions

|Nom|Type|Description|
|-|-|-|
|dtFilterFieldMultiSelect| DtFilterFieldMultiSelect |Le panneau de sélection multiple des champs de filtre à attacher à ce déclencheur.|
|dtFilterFieldMultiSelectDisabled| boolean |Si le panneau de sélection multiple des champs de filtre doit être désactivé.|

@tomheller je vais commencer par ça la semaine prochaine

Pour la liste des cases à cocher, je pense utiliser le ReactiveFormsModule, mais je vois que nous ne l'utilisons nulle part sur le filtre. Y a-t-il une raison à cela alors je devrais l'éviter ou puis-je l'utiliser ? @thomaspink @tomheller

Vous pouvez l'utiliser si vous le souhaitez, ou créer votre propre selectionModel à partir de cdk comme @dt-mafe le fait dans son pr à propos des lignes sélectionnables #1052

Pas sur notre feuille de route.