diff --git a/app/components/AntibioticConsumptionStatsList.js b/app/components/AntibioticConsumptionStatsList.js index 8c75656..3020376 100644 --- a/app/components/AntibioticConsumptionStatsList.js +++ b/app/components/AntibioticConsumptionStatsList.js @@ -21,7 +21,14 @@ type ComponentProps = { dispatch: Dispatch, antibioticConsumptionStatsList: { antibioticName: string, - antibioticConsumptionStats: Page + antibioticConsumptionStats: Page, + antibiotic?: { + strength: string, + form: string, + name: string, + packSize: string, + brand: string + } }, antibioticId: string, site: { @@ -99,6 +106,10 @@ class AntibioticConsumptionStatsList extends Component { recipientFacility, recipientUnit } = this.state; + const { strength, form, name, packSize, brand } = + (antibioticConsumptionStatsList && + antibioticConsumptionStatsList.antibiotic) || + {}; return (
@@ -109,9 +120,13 @@ class AntibioticConsumptionStatsList extends Component { {antibioticConsumptionStatsList && - antibioticConsumptionStatsList.antibioticName} + `${name || ''} ${packSize || ''}`} } + subtitle={ + antibioticConsumptionStatsList && + `${strength || ''} ${form || ''} ${(brand && `(${brand})`) || ''}` + } pagination items={antibioticConsumptionStats.items} totalCount={antibioticConsumptionStats.totalCount} diff --git a/app/components/Table.js b/app/components/Table.js index 78d175a..8f7e953 100644 --- a/app/components/Table.js +++ b/app/components/Table.js @@ -31,6 +31,7 @@ type ComponentProps = { entityName?: string, onClick?: () => void, title?: string, + subtitle?: string, rowClassName?: () => [string], lastRow?: typeof Component, pagination?: boolean, @@ -61,7 +62,8 @@ class Table extends Component { prevPage: null, nextPage: null, search: null, - filters: null + filters: null, + subtitle: null }; render() { @@ -83,7 +85,8 @@ class Table extends Component { history, onReload, search, - filters + filters, + subtitle } = this.props; const { searchText, searchTimeout } = this.state; return ( @@ -98,6 +101,15 @@ class Table extends Component { {title || `${totalCount} ${entityName}`} + {subtitle && ( + +

{subtitle}

+
+ )} + {filters && ( {filters} diff --git a/app/components/Table.scss b/app/components/Table.scss index e51b73e..68b441e 100644 --- a/app/components/Table.scss +++ b/app/components/Table.scss @@ -31,6 +31,11 @@ tbody tr:hover { color: var(--black); } +.tableSubtitle, +.tableSubtitle a { + color: var(--medium-gray); +} + .filters { text-align: right; } diff --git a/app/reducers/antibioticConsumptionStatsList.js b/app/reducers/antibioticConsumptionStatsList.js index 0ab0b75..2a2dcf6 100644 --- a/app/reducers/antibioticConsumptionStatsList.js +++ b/app/reducers/antibioticConsumptionStatsList.js @@ -9,6 +9,13 @@ import type { Action, State } from './types'; const initialState = { antibioticName: null, + antibiotic: { + strength: null, + form: null, + name: null, + packSize: null, + brand: null + }, antibioticConsumptionStats: { items: [], totalCount: 0, @@ -25,7 +32,11 @@ export default function(state: State = initialState, action: Action) { let newItems; switch (action.type) { case FETCHED_ANTIBIOTIC: - return { ...state, antibioticName: action.antibiotic.name }; + return { + ...state, + antibioticName: action.antibiotic.name, + antibiotic: action.antibiotic + }; case FETCH_ANTIBIOTIC_CONSUMPTION_STATS_LIST_SUCCEEDED: return { ...state, antibioticConsumptionStats: action }; case ADD_CREATED_ANTIBIOTIC_CONSUMPTION_STAT_TO_LIST: