Olá @kaikcreator ,

obrigado por propor este pedido, pensamos que este é um recurso útil para o campo de filtro. Você estaria disposto a contribuir com isso?

Para que o escolhido crie este recurso, aqui está o que você precisa para prosseguir.

Primeiro, descubra uma Proposta de API que explique como você construirá o recurso 😉.
O que você precisa para conseguir esse recurso e o que vai mudar basicamente. O campo de filtro não é para almas fracas, então prepare-se para lidar com isso com confiança e pensamento crítico 😄.
Algumas questões surgem em relação a alguns casos extremos. O que acontece quando nenhuma caixa é marcada e quando muitas caixas são marcadas.

NOTA: Use nosso componente de caixa de seleção de barista para implementar esse recurso. Não gostamos de ver ajustes de estilo, pois a caixa de seleção em suas capturas de tela já parece diferente da nossa.

Olá @ rowa-audil, sim. Talvez não eu, mas alguém da nossa equipe contribuirá com esse recurso, com certeza.
Forneceremos uma API o mais rápido possível, mas primeiro precisamos entender um pouco melhor como a opção de intervalo é implementada, porque pensamos que deveríamos seguir uma abordagem semelhante. Alguma sugestão aqui @tomheller @ ffriedl89 ?

@kaikcreator , o campo de filtro está em seu estado atual não muito extensível, é por isso que o intervalo também está muito entrelaçado com o campo de filtro em geral. Há muitas coisas que determinam o que _overlay_ deve abrir.
Eu acho que você deve seguir a abordagem do intervalo, mas existem algumas armadilhas que podem precisar ser levadas em consideração.

Tipo de dados

O intervalo define seu próprio tipo de dados dentro das definições de fonte de dados do campo de filtro (incluindo algumas funções auxiliares, que ajudam a identificar se o nó é um nó de intervalo ou não e também a comparar nós). Definitivamente, você precisará de funções semelhantes como essa.

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

Representação visual

O intervalo implementa sua própria versão do comportamento de preenchimento automático dentro de seu componente e acho que essa seria definitivamente uma boa abordagem aqui também.
A sobreposição e o gatilho são sempre criados quando o campo de filtro é criado, os _overlays_ são abertos programaticamente pelo campo de filtro. (se a sobreposição não for exibida, eles são desativados no gatilho para evitar que apareçam visualmente).

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

Lidando com o modo de edição

O modo de edição dentro do campo de filtro é um pouco complicado no que diz respeito ao gerenciamento de estado, pois você precisa restaurar o filtro de edição como o filtro atual. Você provavelmente precisará de algumas edições nesta função para fazer isso corretamente para a seleção múltipla.

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

Obrigado @tomheller , isso certamente nos ajudará muito !!!

Pensando em grupos possíveis, seria bom adotar opções de preenchimento automático e grupos

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

Atualize DtNodeFlags com um novo tipo

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

Entradas

| Nome | Tipo | Descrição |
| - | - | - |
| optionsOrGroups | DtNodeDef<OpGr>[] | Opções já selecionadas |

Saídas

| Nome | Emite | Descrição |
| - | - | - |
| aberto | void | O painel é aberto |
| fechado | void | O painel está fechado |
| optionsSubmitted | DtNodeDef<OpGr>[] | Opções selecionadas pelo usuário |

DtFilterFieldMultiSelectTrigger

Entradas

| Nome | Tipo | Descrição |
| - | - | - |
| dtFilterFieldMultiSelect | DtFilterFieldMultiSelect | O painel de seleção múltipla do campo de filtro a ser anexado a este acionador.
| dtFilterFieldMultiSelectDisabled | boolean | Se o painel de seleção múltipla do campo de filtro deve ser desabilitado. |

@tomheller , vou começar na próxima semana

Para a lista de caixas de seleção que estou pensando em usar o ReactiveFormsModule, mas vejo que não o estamos usando em nenhum lugar do filtro. Existe uma razão para que eu deva evitá-lo ou posso usá-lo? @thomaspink @tomheller

Você pode usá-lo se quiser, ou criar seu próprio modelo de seleção de cdk como @ dt-mafe faz em seu pr sobre as linhas selecionáveis ​​# 1052

Não em nosso roteiro.