Exemplos de configuração de pesquisa

Os exemplos mostram como configurar e utilizar uma experiência de pesquisa por meio de um arquivo JSON estruturado. Esses exemplos ajudam você a começar mais rapidamente, fornecendo modelos prontos que podem ser adaptados ao seu caso de uso.

Os exemplos mostram formas comuns de configurar uma experiência de pesquisa, desde uma configuração básica até a integração completa com a API. Use esses padrões para entender as principais opções e adaptá-las ao seu caso de uso.

Exemplo 1: Configuração mínima

{
  "metadata": {
    "name": "customer-search",
    "displayName": "Customer search",
    "paths": {
      "component": "packages/customer/src/app/features/order",
      "table": "packages/customer/src/app/features/order",
      "jsonFile": "packages/order-shared/assets/buc-app-order",
      "translationFile": "packages/order-shared/assets/buc-app-order"
    },
    "options": {
      "sharedLib": "order-shared"
    }
  }
}
Comando
ng g @buc/schematics:search-from-config --config=customer-search.json
Resultado
  • O painel de pesquisa contém campos de exemplo.
  • Os resultados da pesquisa apresentam uma trilha de navegação padrão.
  • Há uma tabela com paginação do lado do servidor. Este é o padrão.
  • Exemplos de configurações JSON (search_fields.json, buc-table-config.JSON).

Exemplo 2: Com integração de API

{
  "metadata": {
    "name": "order-search",
    "displayName": "Order Search",
    "module": "order",
    "paths": { /* ... */ },
    "options": { /* ... */ }
  },
  "oms-api": {
    "endpoints": {
      "search": {
        "apiName": "getOrderList",
        "method": "POST"
      }
    },
    "requestMapping": {
      "pageNumber": "PageNumber",
      "pageSize": "PageSize"
    },
    "responseMapping": {
      "data": "Output.OrderList.Order",
      "totalCount": "Output.OrderList.TotalNumberOfRecords"
    }
  },
  "search-results": {
    "pagination": {
      "type": "server-side",
      "defaultPageSize": 50
    }
  }
}
Resultado
  • Este é um serviço de API totalmente funcional.
  • Você precisa implementar a consulta complexa com base nos campos de pesquisa. No momento, ele serve apenas como um espaço reservado.
  • Há paginação NEXTPAGE.
  • Existe um mapeamento automático entre solicitações e respostas.
  • Os componentes são registrados em ordem.

Exemplo 3: Paginação no lado do cliente

{
  "metadata": { /* ... */ },
  "search-results": {
    "pagination": {
      "type": "client-side",
      "defaultPageSize": 25
    }
  }
}
Resultado
  • Todos os dados são recuperados de uma só vez.
  • É possível classificar os dados no lado do cliente.
  • Não há chamadas de API página a página.

Exemplo 4: Rotas personalizadas e trilha de navegação

{
  "metadata": { /* ... */ },
  "search": {
    "route": "/custom/order/order-search",
    "breadcrumb": {
      "label": "Order search"
    }
  },
  "search-results": {
    "route": "/custom/order/order-results",
    "breadcrumb": {
      "label": "Order results"
    }
  }
}
Resultado
  • Existem rotas personalizadas em vez de rotas geradas automaticamente.
  • Existem rótulos personalizados para a barra de navegação.

Exemplo 5: Sem registro do módulo

{
  "metadata": {
    "name": "standalone-search",
    "displayName": "Standalone Search",
    "paths": { /* ... */ },
    "options": { /* ... */ }
    // Note: No "module" field
  }
}
Resultado
  • Os componentes são gerados sem o registro do módulo.
  • Isso é útil para componentes independentes ou para o registro manual.