From 6aabe0f3fcae2bba52e64149780dd737d430dca8 Mon Sep 17 00:00:00 2001
From: Bilal Catic <bilal.catic@hotmail.com>
Date: Thu, 20 Jun 2019 14:11:39 +0200
Subject: [PATCH] improve date picker, allow inline button

---
 .../src/components/DateRangePicker/index.js   | 28 +++++++++++++------
 .../src/scenes/PracticeSummaryReport/index.js |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/src/components/DateRangePicker/index.js b/client/src/components/DateRangePicker/index.js
index 74d23f7..afd7dd8 100644
--- a/client/src/components/DateRangePicker/index.js
+++ b/client/src/components/DateRangePicker/index.js
@@ -73,17 +73,25 @@ class DateRangePicker extends Component {
 
     render() {
         const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
+        const { inlineButton } = this.props;
 
         const buttonLabel = this.props.buttonLabel || 'Save';
 
         const startDateValue = startDate.format(defaultDateFormat);
         const endDateValue = endDate.format(defaultDateFormat);
 
+        const buttonRender = (
+            <Grid.Column width={inlineButton ? 1 : null}>
+                { inlineButton && <label>{'\u00A0'}</label> }
+                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+            </Grid.Column>
+        );
+
         return (
             <Form>
-                <Grid columns="equal">
+                <Grid stackable columns={inlineButton ? null : 'equals'}>
                     <Grid.Row>
-                        <Grid.Column>
+                        <Grid.Column width={inlineButton ? 7 : null}>
                             <label>{startDateLabel}</label>
                             <Form.Input
                                 fluid
@@ -93,7 +101,7 @@ class DateRangePicker extends Component {
                                 onChange={this.onStartDateChange.bind(this)}
                             />
                         </Grid.Column>
-                        <Grid.Column>
+                        <Grid.Column width={inlineButton ? 6 : null}>
                             <label>{endDateLabel}</label>
                             <Form.Input
                                 fluid
@@ -103,6 +111,9 @@ class DateRangePicker extends Component {
                                 onChange={this.onEndDateChange.bind(this)}
                             />
                         </Grid.Column>
+                        {
+                            inlineButton && buttonRender
+                        }
                     </Grid.Row>
                     { error &&
                         <Grid.Row>
@@ -114,11 +125,12 @@ class DateRangePicker extends Component {
                             </Grid.Column>
                         </Grid.Row>
                     }
-                    <Grid.Row>
-                        <Grid.Column>
-                            <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
-                        </Grid.Column>
-                    </Grid.Row>
+                    {
+                        !inlineButton &&
+                        <Grid.Row>
+                            {buttonRender}
+                        </Grid.Row>
+                    }
                 </Grid>
             </Form>
         );
diff --git a/client/src/scenes/PracticeSummaryReport/index.js b/client/src/scenes/PracticeSummaryReport/index.js
index 70fa155..11feb47 100644
--- a/client/src/scenes/PracticeSummaryReport/index.js
+++ b/client/src/scenes/PracticeSummaryReport/index.js
@@ -52,7 +52,7 @@ class PracticeSummaryReport extends Component {
                             <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
                         </Grid.Column>
                         <Grid.Column>
-                            <DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
+                            <DateRangePicker inlineButton={true} onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>