diff --git a/src/components/SearchBar/types.ts b/src/components/SearchBar/types.ts
index 51c65868..ca933d3f 100644
--- a/src/components/SearchBar/types.ts
+++ b/src/components/SearchBar/types.ts
@@ -13,38 +13,41 @@ export enum SearchBarColumnType {
export interface SearchBarProps {
columns: SearchBarColumn[];
}
-export type SearchBarStringColumn = {
+
+type SearchBarColumnBase = {
id: string;
+ searchParam?: string;
+};
+
+export type SearchBarStringColumn = SearchBarColumnBase & {
type: SearchBarColumnType.STRING;
placeholder: string;
};
-export type SearchBarDateColumn = {
- id: string;
+export type SearchBarDateColumn = SearchBarColumnBase & {
type: SearchBarColumnType.DATE;
placeholder: [string, string];
};
-export type SearchBarReferenceColumn = {
+export type SearchBarReferenceColumn = SearchBarColumnBase & {
id: string;
type: SearchBarColumnType.REFERENCE;
expression: Expression['expression'];
path: QuestionnaireItemChoiceColumn['path'];
placeholder: string;
};
-export type SearchBarChoiceColumn = {
- id: string;
+export type SearchBarChoiceColumn = SearchBarColumnBase & {
type: SearchBarColumnType.CHOICE;
repeats?: boolean;
placeholder: string;
} & (
- | {
- options: ValueSetOption[];
- valueSet?: never;
- }
- | {
- options?: never;
- valueSet: ValueSet['id'];
- }
-);
+ | {
+ options: ValueSetOption[];
+ valueSet?: never;
+ }
+ | {
+ options?: never;
+ valueSet: ValueSet['id'];
+ }
+ );
export type SearchBarColumn =
| SearchBarStringColumn
diff --git a/src/containers/PatientResourceListExample/index.tsx b/src/containers/PatientResourceListExample/index.tsx
index a0671675..69c90ea2 100644
--- a/src/containers/PatientResourceListExample/index.tsx
+++ b/src/containers/PatientResourceListExample/index.tsx
@@ -36,7 +36,7 @@ export function PatientResourceListExample() {
headerTitle={t`Patients`}
resourceType="Patient"
searchParams={searchParams}
- tableColumns={[
+ getTableColumns={() => [
{
title: Name,
dataIndex: 'name',
@@ -59,9 +59,10 @@ export function PatientResourceListExample() {
width: '25%',
},
]}
- searchBarColumns={[
+ getFilters={() => [
{
id: 'name',
+ searchParam: 'name',
type: SearchBarColumnType.STRING,
placeholder: t`Find patient`,
},
diff --git a/src/uberComponents/ResourceListPage/hooks.ts b/src/uberComponents/ResourceListPage/hooks.ts
index 6a16d258..29d75484 100644
--- a/src/uberComponents/ResourceListPage/hooks.ts
+++ b/src/uberComponents/ResourceListPage/hooks.ts
@@ -23,7 +23,7 @@ export function useResourceListPage(
const searchBarSearchParams = {
...Object.fromEntries(
debouncedFilterValues.map((filterValue) => [
- filterValue.column.id,
+ filterValue.column.searchParam ?? filterValue.column.id,
getSearchBarColumnFilterValue(filterValue),
]),
),
diff --git a/src/uberComponents/ResourceListPage/index.tsx b/src/uberComponents/ResourceListPage/index.tsx
index 86f12f07..746c6a06 100644
--- a/src/uberComponents/ResourceListPage/index.tsx
+++ b/src/uberComponents/ResourceListPage/index.tsx
@@ -31,7 +31,7 @@ import { SearchBarColumn } from '../../components/SearchBar/types';
type RecordType = { resource: R; bundle: Bundle };
-interface ActionManager {
+interface TableManager {
reload: () => void;
}
@@ -53,11 +53,11 @@ interface ResourceListPageProps {
/* Default search params */
searchParams?: SearchParams;
- /* Search bar columns that displayed before the table */
- searchBarColumns?: SearchBarColumn[];
+ /* Filter that are displayed in the search bar and inside table columns */
+ getFilters?: () => SearchBarColumn[];
/* Table columns without action column - action column is generated based on `getRecordActions` */
- tableColumns: ColumnsType>;
+ getTableColumns: (manager: TableManager) => ColumnsType>;
/**
* Record actions list that is displayed in the table per record
@@ -65,7 +65,7 @@ interface ResourceListPageProps {
*/
getRecordActions?: (
record: RecordType,
- manager: ActionManager,
+ manager: TableManager,
) => Array;
/**
@@ -97,10 +97,14 @@ export function ResourceListPage({
getRecordActions,
getHeaderActions,
getBatchActions,
- searchBarColumns,
- tableColumns,
+ getFilters,
+ getTableColumns,
defaultLaunchContext,
}: ResourceListPageProps) {
+ const allFilters = getFilters?.() ?? [];
+ // TODO: filter out column filters
+ const searchBarColumns = allFilters;
+
const { columnsFilterValues, onChangeColumnFilter, onResetFilters } = useSearchBar({
columns: searchBarColumns ?? [],
});
@@ -199,7 +203,7 @@ export function ResourceListPage({
rowKey={(p) => p.resource.id!}
dataSource={isSuccess(recordResponse) ? recordResponse.data : []}
columns={[
- ...tableColumns,
+ ...getTableColumns({ reload }),
...(getRecordActions
? [
getRecordActionsColumn({
@@ -224,7 +228,7 @@ function getRecordActionsColumn({
}: {
getRecordActions: (
record: RecordType,
- manager: ActionManager,
+ manager: TableManager,
) => Array;
defaultLaunchContext?: ParametersParameter[];
reload: () => void;