# SASQRoute
A component designed to accelerate the setup of a basic 3-pane layout by combining routing, SASQ (Search And Sort Query), and Multi-Column List (MCL) configuration in one place. **SASQRoute** simplifies the process of configuring lookup and view components by automatically setting up the required routes and passing down fetch parameters and custom components.
> **Note:** Although **SASQRoute** is intended to work with the default sub-components—**SASQLookupComponent** and **SASQViewComponent**—you can override them via props. Refer to the documentation for those sub-components for further details.
## Basic Usage
Below is an example of how to set up **SASQRoute**. In this example, it configures a route that manages both a lookup view and an individual item view within a 3-pane layout. The lookup component renders an MCL with the given `resultColumns`, and clicking on a row navigates to the view route that renders the specified `ViewComponent`.
```jsx
import { FormattedMessage } from 'react-intl';
import { SASQRoute } from '@k-int/stripes-kint-components';
import ActionItem from '../components/ActionItem';
const ActionedRoute = ({ path }) => {
const fetchParameters = {
endpoint: "remote-sync/feedback/done",
itemEndpoint: "remote-sync/feedback",
SASQ_MAP: {
searchKey: 'description',
filterKeys: {
// Additional filter configuration if required
}
}
};
const resultColumns = [
{ propertyPath: "selected", label: " " },
{ propertyPath: "description", label: },
{ propertyPath: "status", label: },
{ propertyPath: "correlationId", label: },
{ propertyPath: "caseIndicator", label: }
];
return (
);
};
```
In this example, **SASQRoute**:
- Configures lookup behavior via `fetchParameters` and the associated `SASQ_MAP`.
- Uses `resultColumns` to define the columns for the MCL rendered by the lookup component.
- Sets up routes under the provided `path` for both the lookup and view panes.
- Renders the `ActionItem` component when an individual row is selected.
## Props
| Name | Type | Description | Default | Required |
|-----------------------|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------|----------|
| `fetchParameters` | `object` | An object containing the parameters needed for data fetching for both the lookup and view components. This should include:
• **endpoint:** The main fetch endpoint for retrieving all data. The endpoint is typically used for both list and individual item fetches (appending `/{id}` to the endpoint for individual items).
• **itemEndpoint (optional):** An alternative endpoint for fetching a single item.
• **SASQ_MAP:** An object defining search and filter configuration. See `generateKiwtQuery` for details. | | ✓ |
| `id` | `string` | A unique identifier for this route. This identifier is important as it drives pane set logic and must be unique within the application. | | ✓ |
| `path` | `string` | The base path for this route. **SASQRoute** will set up a 3-pane layout under this path and automatically configure the view route under `{path}/:id`. | | ✓ |
| `resultColumns` | `array` | An array of objects where each object defines a column for the Multi-Column List (MCL) rendered by the lookup component. Each object should contain a `propertyPath` and a `label`. These columns drive the display of data in the list view. | | ✓ |
| `ViewComponent` | `element` (or `func`) | The component to render when a row in the lookup list is selected. This component is displayed in the view pane for showing detailed information about a selected item. | | ✓ |
| `children` | `node`, `element`, or `func` | Optional additional child elements to render within the lookup component. These are rendered inside the **SASQLookupComponent**. | | ✕ |
| `getPathLookup` | `func` | A function to determine the route for the lookup pane. Defaults to appending `/:id?` to the base `path`. Use this prop to customize the lookup route if needed. | `(path) => ${path}/:id?` | ✕ |
| `getPathView` | `func` | A function to determine the route for the view pane. Defaults to appending `/:id` to the base `path`. Use this prop to customize the view route if needed. | `(path) => ${path}/:id` | ✕ |
| `SASQLookupComponent` | `element` or `func` | The component to be used for the lookup view. Defaults to the built-in **SASQLookupComponent**. Override this prop to provide a custom lookup component. | `SASQLookupComponent` | ✕ |
| `SASQViewComponent` | `element` or `func` | The component to be used for the view pane. Defaults to the built-in **SASQViewComponent**. Override this prop to provide a custom view component. | `SASQViewComponent` | ✕ |
| `...props` | `object` | Additional props will be passed down to both the lookup and view components. Use these to further customize behavior or appearance as needed. | | ✕ |
## How It Works
1. **Configuration of SASQ_MAP:**
The component extracts and updates the `SASQ_MAP` from `fetchParameters`. If `perPage` is not defined, it defaults to 25. Additionally, it ensures that `stats` is set to `true` before reassigning the object back to `fetchParameters`.
2. **Routing Setup:**
- The **lookup route** is configured using the `getPathLookup` function (defaulting to appending `/:id?` to the base `path`). The lookup component (default **SASQLookupComponent**) renders the main Multi-Column List.
- Nested within the lookup route is a **view route** configured using the `getPathView` function (defaulting to appending `/:id`). This route renders the view component (default **SASQViewComponent**), which in turn displays the detailed view of a selected item via the passed `ViewComponent`.
3. **Forwarding Refs:**
The component uses `forwardRef` and `useImperativeHandle` to combine the refs of both the lookup and view components, allowing parent components to access methods or properties exposed by these sub-components.
4. **Customizability:**
By overriding default sub-components (`SASQLookupComponent` and `SASQViewComponent`), and by providing custom functions for route paths (`getPathLookup` and `getPathView`), developers can tailor the routing and display behavior to match specific application needs.
This comprehensive setup provided by **SASQRoute** allows for a rapid configuration of complex layouts involving data lookup and detailed views, reducing boilerplate and ensuring consistency across the application.
## Use in Settings
In Settings, often a "search and filter" experience is wanted, but with 2 panes instead of 3. In order to facilitate this,
SASQRoute (via SASQLookupComponent) exposes a set of props. See SASQLookupComponent README for details.