-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add ResourceListPageContent component
- Loading branch information
Showing
8 changed files
with
280 additions
and
18 deletions.
There are no files selected for viewing
15 changes: 12 additions & 3 deletions
15
src/components/BaseLayout/PageContainer/PageContainerContent/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,24 @@ | ||
| import { S } from "./styles"; | ||
|
|
||
| export type PageContainerContentProps = React.HTMLAttributes<HTMLDivElement> & { | ||
| /* Page content max width */ | ||
| maxWidth?: number | string; | ||
|
|
||
| /** | ||
| * PageContainerContent (level=2) can be nested in other PageContainerContent (level=1) | ||
| * e.g. ResourceListPageContent use PageContainerContent (level=2) | ||
| * | ||
| * Styles of the PageContainerContent will be adjusted for provided level. | ||
| */ | ||
| level?: 1 | 2; | ||
| }; | ||
|
|
||
| export function PageContainerContent(props: PageContainerContentProps) { | ||
| const { maxWidth, ...rest } = props; | ||
| const { maxWidth, level = 1, ...rest } = props; | ||
|
|
||
| return ( | ||
| <S.PageContentContainer> | ||
| <S.PageContent {...rest} $maxWidth={maxWidth} /> | ||
| <S.PageContentContainer $level={level}> | ||
| <S.PageContent {...rest} $maxWidth={maxWidth} $level={level} /> | ||
| </S.PageContentContainer> | ||
| ); | ||
| } |
18 changes: 15 additions & 3 deletions
18
src/components/BaseLayout/PageContainer/PageContainerContent/styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,34 @@ | ||
| import styled from 'styled-components'; | ||
| import styled, { css } from 'styled-components'; | ||
|
|
||
| import { maxWidthStyles } from '../PageContainerHeader/styles'; | ||
|
|
||
| export const S = { | ||
| PageContentContainer: styled.div` | ||
| PageContentContainer: styled.div<{ $level: 1 | 2 }>` | ||
| padding: 0 24px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| ${({ $level }) => | ||
| $level === 2 && | ||
| css` | ||
| padding: 0; | ||
| `} | ||
| `, | ||
| PageContent: styled.div<{ $maxWidth?: number | string }>` | ||
| PageContent: styled.div<{ $level: 1 | 2, $maxWidth?: number | string }>` | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 32px 0; | ||
| gap: 24px 0; | ||
| width: 100%; | ||
| ${({ $level }) => | ||
| $level === 2 && | ||
| css` | ||
| padding: 0; | ||
| `} | ||
| ${maxWidthStyles} | ||
| `, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import { Trans } from '@lingui/macro'; | ||
| import { Empty } from 'antd'; | ||
| import { Bundle, Resource } from 'fhir/r4b'; | ||
| import React, { useMemo } from 'react'; | ||
|
|
||
| import { formatError } from '@beda.software/fhir-react'; | ||
| import { isFailure, isLoading, isSuccess } from '@beda.software/remote-data'; | ||
|
|
||
| import { SearchBar } from 'src/components/SearchBar'; | ||
| import { useSearchBar } from 'src/components/SearchBar/hooks'; | ||
| import { isTableFilter } from 'src/components/SearchBar/utils'; | ||
| import { SpinIndicator } from 'src/components/Spinner'; | ||
| import { Table } from 'src/components/Table'; | ||
| import { populateTableColumnsWithFiltersAndSorts } from 'src/components/Table/utils'; | ||
|
|
||
| import { HeaderQuestionnaireAction } from '../ResourceListPage/actions'; | ||
| import { useResourceListPage } from '../ResourceListPage/hooks'; | ||
| import { BatchActions } from '../ResourceListPage/BatchActions'; | ||
| import { getRecordActionsColumn, ResourceListPageProps, ResourcesListPageReport } from '../ResourceListPage'; | ||
| import { PageContainerContent } from 'src/components/BaseLayout/PageContainer/PageContainerContent'; | ||
| import { S } from './styles'; | ||
|
|
||
| type RecordType<R extends Resource> = { resource: R; bundle: Bundle }; | ||
|
|
||
| type ResourceListPageContentProps<R extends Resource> = Omit<ResourceListPageProps<R>, 'headerTitle' | 'maxWidth'> & {}; | ||
|
|
||
| export function ResourceListPageContent<R extends Resource>({ | ||
| resourceType, | ||
| extractPrimaryResources, | ||
| searchParams, | ||
| getRecordActions, | ||
| getHeaderActions, | ||
| getBatchActions, | ||
| getFilters, | ||
| getTableColumns, | ||
| defaultLaunchContext, | ||
| getReportColumns, | ||
| }: ResourceListPageContentProps<R>) { | ||
| const allFilters = getFilters?.() ?? []; | ||
|
|
||
| const { columnsFilterValues, onChangeColumnFilter, onResetFilters } = useSearchBar({ | ||
| columns: allFilters ?? [], | ||
| }); | ||
| const tableFilterValues = useMemo( | ||
| () => columnsFilterValues.filter((filter) => isTableFilter(filter)), | ||
| [JSON.stringify(columnsFilterValues)], | ||
| ); | ||
|
|
||
| const { | ||
| recordResponse, | ||
| reload, | ||
| pagination, | ||
| handleTableChange, | ||
| selectedRowKeys, | ||
| setSelectedRowKeys, | ||
| selectedResourcesBundle, | ||
| } = useResourceListPage(resourceType, extractPrimaryResources, columnsFilterValues, searchParams ?? {}); | ||
|
|
||
| // TODO: move to hooks | ||
| const initialTableColumns = getTableColumns({ reload }); | ||
| const tableColumns = populateTableColumnsWithFiltersAndSorts({ | ||
| tableColumns: initialTableColumns, | ||
| filters: tableFilterValues, | ||
| onChange: onChangeColumnFilter, | ||
| }); | ||
| const headerActions = getHeaderActions?.() ?? []; | ||
| const batchActions = getBatchActions?.() ?? []; | ||
|
|
||
| const renderHeader = () => { | ||
| const hasFilters = columnsFilterValues.length > 0; | ||
|
|
||
| if (!hasFilters && headerActions.length === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <S.Header> | ||
| <S.HeaderLeftColumn> | ||
| {columnsFilterValues.length ? ( | ||
| <SearchBar | ||
| columnsFilterValues={columnsFilterValues} | ||
| onChangeColumnFilter={onChangeColumnFilter} | ||
| onResetFilters={onResetFilters} | ||
| level={2} | ||
| /> | ||
| ) : null} | ||
| </S.HeaderLeftColumn> | ||
| <S.HeaderRightColumn $hasFilters={hasFilters}> | ||
| {headerActions.map((action, index) => ( | ||
| <React.Fragment key={index}> | ||
| <HeaderQuestionnaireAction | ||
| action={action} | ||
| reload={reload} | ||
| defaultLaunchContext={defaultLaunchContext ?? []} | ||
| /> | ||
| </React.Fragment> | ||
| ))} | ||
| </S.HeaderRightColumn> | ||
| </S.Header> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <PageContainerContent level={2}> | ||
| {renderHeader()} | ||
|
|
||
| {getReportColumns ? ( | ||
| <ResourcesListPageReport recordResponse={recordResponse} getReportColumns={getReportColumns} /> | ||
| ) : null} | ||
|
|
||
| {batchActions.length ? ( | ||
| <BatchActions | ||
| batchActions={batchActions} | ||
| selectedRowKeys={selectedRowKeys} | ||
| allKeys={isSuccess(recordResponse) ? recordResponse.data.map((d) => d.resource.id!) : []} | ||
| setSelectedRowKeys={setSelectedRowKeys} | ||
| reload={reload} | ||
| selectedResourcesBundle={selectedResourcesBundle} | ||
| defaultLaunchContext={defaultLaunchContext} | ||
| /> | ||
| ) : null} | ||
|
|
||
| <Table<RecordType<R>> | ||
| pagination={pagination} | ||
| onChange={handleTableChange} | ||
| rowSelection={batchActions.length ? { selectedRowKeys, onChange: setSelectedRowKeys } : undefined} | ||
| locale={{ | ||
| emptyText: isFailure(recordResponse) ? ( | ||
| <> | ||
| <Empty | ||
| description={formatError(recordResponse.error)} | ||
| image={Empty.PRESENTED_IMAGE_SIMPLE} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Empty description={<Trans>No data</Trans>} image={Empty.PRESENTED_IMAGE_SIMPLE} /> | ||
| </> | ||
| ), | ||
| }} | ||
| rowKey={(p) => p.resource.id!} | ||
| dataSource={isSuccess(recordResponse) ? recordResponse.data : []} | ||
| columns={[ | ||
| ...tableColumns, | ||
| ...(getRecordActions | ||
| ? [ | ||
| getRecordActionsColumn({ | ||
| getRecordActions, | ||
| reload, | ||
| defaultLaunchContext: defaultLaunchContext ?? [], | ||
| }), | ||
| ] | ||
| : []), | ||
| ]} | ||
| loading={isLoading(recordResponse) && { indicator: SpinIndicator }} | ||
| /> | ||
| </PageContainerContent> | ||
| ); | ||
| } |
Oops, something went wrong.