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;