Ejemplos de configuración de búsqueda

Los ejemplos muestran cómo configurar y utilizar una función de búsqueda mediante un archivo JSON estructurado. Estos ejemplos te ayudan a ponerte en marcha más rápido, ya que te ofrecen plantillas que puedes adaptar a tu caso concreto.

Los ejemplos muestran formas habituales de configurar una experiencia de búsqueda, desde una configuración básica hasta una integración completa con la API. Utiliza estos patrones para comprender las opciones clave y adaptarlas a tu caso concreto.

Ejemplo 1: Configuración 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"
    }
  }
}
Mandato
ng g @buc/schematics:search-from-config --config=customer-search.json
Resultado
  • El panel de búsqueda contiene campos de ejemplo.
  • Los resultados de la búsqueda incluyen una ruta de navegación predeterminada.
  • Hay una tabla con paginación del lado del servidor. Es el valor predeterminado.
  • Ejemplos de configuraciones JSON (search_fields.json, buc-table-config.JSON).

Ejemplo 2: Con integración 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
  • Se trata de un servicio API totalmente operativo.
  • Debes implementar la consulta compleja basándote en los campos de búsqueda. Por ahora solo ofrece un marcador de posición.
  • Hay una paginación NEXTPAGE.
  • Existe una asignación automática entre solicitudes y respuestas.
  • Los componentes se registran por orden.

Ejemplo 3: Paginación del lado del cliente

{
  "metadata": { /* ... */ },
  "search-results": {
    "pagination": {
      "type": "client-side",
      "defaultPageSize": 25
    }
  }
}
Resultado
  • Todos los datos se recogen de una sola vez.
  • La ordenación se realiza del lado del cliente.
  • No hay llamadas a la API página por página.

Ejemplo 4: Rutas personalizadas y navegación por migas de pan

{
  "metadata": { /* ... */ },
  "search": {
    "route": "/custom/order/order-search",
    "breadcrumb": {
      "label": "Order search"
    }
  },
  "search-results": {
    "route": "/custom/order/order-results",
    "breadcrumb": {
      "label": "Order results"
    }
  }
}
Resultado
  • Hay rutas personalizadas en lugar de rutas generadas automáticamente.
  • Hay etiquetas personalizadas para la ruta de navegación.

Ejemplo 5: Sin registro del módulo

{
  "metadata": {
    "name": "standalone-search",
    "displayName": "Standalone Search",
    "paths": { /* ... */ },
    "options": { /* ... */ }
    // Note: No "module" field
  }
}
Resultado
  • Los componentes se generan sin necesidad de registrar el módulo.
  • Esto resulta útil para componentes independientes o para el registro manual.