From 15d70316c23cf073e3d3efefdecd163e3f6a1d4c Mon Sep 17 00:00:00 2001
From: hdf1986 <hugo.farji+github@gmail.com>
Date: Tue, 29 Oct 2019 15:28:40 -0300
Subject: [PATCH] Added subtitle to antibiotics table

---
 .../AntibioticConsumptionStatsList.js         | 19 +++++++++++++++++--
 app/components/Table.js                       | 16 ++++++++++++++--
 app/components/Table.scss                     |  5 +++++
 .../antibioticConsumptionStatsList.js         | 13 ++++++++++++-
 4 files changed, 48 insertions(+), 5 deletions(-)

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<Props, State> {
       recipientFacility,
       recipientUnit
     } = this.state;
+    const { strength, form, name, packSize, brand } =
+      (antibioticConsumptionStatsList &&
+        antibioticConsumptionStatsList.antibiotic) ||
+      {};
 
     return (
       <div>
@@ -109,9 +120,13 @@ class AntibioticConsumptionStatsList extends Component<Props, State> {
                 <MaterialIcon icon="arrow_back" />
               </Link>
               {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<Props, State> {
     prevPage: null,
     nextPage: null,
     search: null,
-    filters: null
+    filters: null,
+    subtitle: null
   };
 
   render() {
@@ -83,7 +85,8 @@ class Table extends Component<Props, State> {
       history,
       onReload,
       search,
-      filters
+      filters,
+      subtitle
     } = this.props;
     const { searchText, searchTimeout } = this.state;
     return (
@@ -98,6 +101,15 @@ class Table extends Component<Props, State> {
                 {title || `${totalCount} ${entityName}`}
               </h2>
             </Cell>
+            {subtitle && (
+              <Cell
+                columns={12 - (search ? 3 : 0) - (filters ? 6 : 0)}
+                align="middle"
+              >
+                <h3 className={styles.tableSubtitle}>{subtitle}</h3>
+              </Cell>
+            )}
+
             {filters && (
               <Cell columns={6} align="middle">
                 {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: