Criação de componentes da página de pesquisa

Crie uma página de pesquisa que exiba campos configuráveis e opções de agrupamento. Use este esquema para criar rapidamente uma interface de usuário de pesquisa, o que ajuda a definir critérios de pesquisa em um layout consistente e reduzir o trabalho de configuração manual.

Sobre esta tarefa

Crie um search page componente para que os usuários possam definir critérios de pesquisa e pesquisar dados.

O search-panel esquema cria o componente da página de pesquisa e inclui código para oferecer suporte aos seguintes recursos:

1. Uma trilha de navegação
2. Função "Salvar pesquisa"
3. Função de personalização dos critérios de pesquisa
4. Pesquisar por categorias

A captura de tela a seguir mostra a página de pesquisa de remessas e destaca os recursos disponíveis nessa página.

1. Vá até o módulo onde deseja adicionar o componente.
   Por exemplo, devtoolkit_docker/orderhub-code/buc-app-order.
2. Crie o componente executando o comando a seguir.

   ng g @buc/schematics:search-panel --name <name> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --shared-lib <shared-lib> \
   --path <path> \
   --json-file-name <json-file-name> \
   --project <project-name> \
   --skip-import

   Parâmetros

   nome

   (Obrigatório) O nome do componente.

   O esquema gera um nome de classe de componente removendo os caracteres especiais e acrescentando a palavra “ "SearchComponent" ”. Por exemplo, se você especificar o nome `my-sample `, o nome da classe gerada será ` MySampleSearchComponent `.

   caminho-do-arquivo-json

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar o arquivo de configuração (search_fields.json). Por exemplo, packages/order-shared/assets/buc-app-order.

   No search_fields.json arquivo, o esquema cria um nome de objeto acrescentando "-search" ao nome. Por exemplo, minha-pesquisa-de-exemplo.

   caminho-do-arquivo-de-tradução

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar os literais de tradução (en.json). Por exemplo, packages/order-shared/assets/buc-app-order/i18n.

   No en.json arquivo, o esquema cria um nome de objeto acrescentando "-search" ao nome. Por exemplo, minha-pesquisa-de-exemplo.

   biblioteca compartilhada

   (Obrigatório) O nome da pasta da biblioteca compartilhada.

   caminho

   (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, é criada uma pasta com o mesmo nome do componente na pasta raiz do módulo.

   nome-do-arquivo-json

   (Opcional) Por padrão, o esquema é atualizado search_fields.json com os dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não exista na pasta de recursos, um novo arquivo será criado.

   projeto

   (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, ao criar um componente de resultados de pesquisa no packages/order-search-result projeto, o nome é order-search-result.

   O comando a seguir apresenta um exemplo com parâmetros.

   ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import