From e280a408c91cdd2728ff8dedb4751de9bf44d556 Mon Sep 17 00:00:00 2001
From: Alexander Smith <alex.smith.99@thunderyard.com>
Date: Thu, 14 Sep 2023 14:44:10 -0600
Subject: [PATCH 1/2] Move ReceiptDate Filter Error Messages

Move error messages below the label that has an error.
---
 client/app/reader/DocumentsTable.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/app/reader/DocumentsTable.jsx b/client/app/reader/DocumentsTable.jsx
index b0f577d722e..ced782aa1c2 100644
--- a/client/app/reader/DocumentsTable.jsx
+++ b/client/app/reader/DocumentsTable.jsx
@@ -110,7 +110,6 @@ class DocumentsTable extends React.Component {
    this.setState({ fromDateErrors: foundErrors });
 
    return foundErrors;
-
  };
 
  setDateFrom = (pickedDate) => {
@@ -491,20 +490,20 @@ class DocumentsTable extends React.Component {
                       defaultValue="On this date"
                     />
                     {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
-                  this.state.fromDateErrors.map((error, index) =>
-                    <p id={index} key={index} style={{ color: 'red' }}>{error}</p>)}
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
                   <DateSelector value={this.state.fromDate} type="date"
                     name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'From' : ''}
                     onChange={this.setDateFrom} />}
+                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
+                  this.state.fromDateErrors.map((error, index) =>
+                    <p id={index} key={index} style={{ color: 'red' }}>{error}</p>)}
 
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
-                  this.state.toDateErrors.map((error) =>
-                    <p style={{ color: 'red' }}>{error}</p>)}
                     {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
                   <DateSelector value={this.state.toDate} type="date"
                     name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'To' : ''}
                     onChange={this.setDateTo} />}
+                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
+                  this.state.toDateErrors.map((error) =>
+                    <p style={{ color: 'red' }}>{error}</p>)}
 
                     {this.state.recieptFilter === recieptDateFilterStates.UNINITIALIZED && <DateSelector readOnly type="date" name="Receipt date"
                       onChange={this.validateDateIsAfter} comment="This is a read only component used as a dummy" />}

From 27bcaa596ebaee11afa573ee50d9fd50b51576e1 Mon Sep 17 00:00:00 2001
From: Alexander Smith <alex.smith.99@thunderyard.com>
Date: Fri, 15 Sep 2023 11:15:31 -0600
Subject: [PATCH 2/2] Refactor ReceiptDate Error Messages

- Use built-in errorMessage prop for DateFilter components.

- Fix some styling issues in the ReceiptDate dropdown, esp. when
error messages are displayed.
---
 client/app/reader/DocumentsTable.jsx | 111 ++++++++++++++++-----------
 1 file changed, 67 insertions(+), 44 deletions(-)

diff --git a/client/app/reader/DocumentsTable.jsx b/client/app/reader/DocumentsTable.jsx
index 84b92a44bc7..620b2ee781d 100644
--- a/client/app/reader/DocumentsTable.jsx
+++ b/client/app/reader/DocumentsTable.jsx
@@ -174,6 +174,20 @@ class DocumentsTable extends React.Component {
    this.setState({ onDate: pickedDate });
  }
 
+  errorMessagesNode = (errors, errType) => {
+    if (errors.length) {
+      return (
+        <div>
+          {
+            errors.map((error, index) =>
+              <p id={`${errType}Err${index}`} key={index} style={{ color: 'red' }}>{error}</p>
+            )
+          }
+        </div>
+      );
+    }
+  }
+
  constructor() {
    super();
    this.state = {
@@ -470,7 +484,8 @@ class DocumentsTable extends React.Component {
             {isRecipetDateFilterOpen && (
               <div style={{
                 position: 'relative',
-                right: '7vw' }}>
+                right: '7vw'
+              }}>
                 <DropdownFilter
                   clearFilters={this.resetRecieptPicker}
                   name="Receipt Date"
@@ -478,49 +493,57 @@ class DocumentsTable extends React.Component {
                   handleClose={this.toggleRecieptDataDropdownFilterVisibility}
                   addClearFiltersRow
                 >
-                  <div style={{
-                    paddingLeft: '10px',
-                    paddingRight: '10px' }}>
-                    <Dropdown
-                      name="dateDropdownText"
-                      options={dateDropdownMap}
-                      label="Date filter parameters"
-                      value="dateDropdownVal"
-                      onChange={(newKey) => this.updateRecieptFilter(newKey)}
-                      defaultText={this.state.recieptFilter === recieptDateFilterStates.UNINITIALIZED ? 'Select...' :
-                        dateDropdownMap[this.state.recieptFilter].displayText}
-                      defaultValue="On this date"
-                    />
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
-                  <DateSelector value={this.state.fromDate} type="date"
-                    name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'From' : ''}
-                    onChange={this.setDateFrom} />}
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
-                  this.state.fromDateErrors.map((error, index) =>
-                    <p id={index} key={index} style={{ color: 'red' }}>{error}</p>)}
-
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
-                  <DateSelector value={this.state.toDate} type="date"
-                    name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'To' : ''}
-                    onChange={this.setDateTo} />}
-                    {(this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
-                  this.state.toDateErrors.map((error) =>
-                    <p style={{ color: 'red' }}>{error}</p>)}
-
-                    {this.state.recieptFilter === recieptDateFilterStates.UNINITIALIZED && <DateSelector readOnly type="date" name="Receipt date"
-                      onChange={this.validateDateIsAfter} comment="This is a read only component used as a dummy" />}
-
-                    {(this.state.recieptFilter === recieptDateFilterStates.ON) && this.state.onDateErrors.map((error) =>
-                      <p style={{ color: 'red' }}>{error}</p>)}
-                    {this.state.recieptFilter === recieptDateFilterStates.ON && <DateSelector value={this.state.onDate} type="date"
-                      name="" onChange={this.setOnDate} />}
-
-                    <div style={{ width: '100%', display: 'flex' }}>
-                      <span style={{ height: '1px', position: 'absolute', width: '100%', backgroundColor: 'gray' }}></span>
-                      <div style={{ display: 'flex', marginTop: '10px', marginRight: '10px', marginBottom: '10px', justifyContent: 'end', width: '100%' }}>
-                        <Button disabled={this.isRecieptFilterButtonEnabled()} onClick={() => this.executeRecieptFilter()} title="apply filter">
-                          <span>Apply filter</span>
-                        </Button>
+                  <div>
+                    <div style={{ padding: '0px 30px' }}>
+                      <Dropdown
+                        name="dateDropdownText"
+                        options={dateDropdownMap}
+                        label="Date filter parameters"
+                        value="dateDropdownVal"
+                        onChange={(newKey) => this.updateRecieptFilter(newKey)}
+                        defaultText={this.state.recieptFilter === recieptDateFilterStates.UNINITIALIZED ? 'Select...' :
+                          dateDropdownMap[this.state.recieptFilter].displayText}
+                        defaultValue="On this date"
+                      />
+                      {
+                        (this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.FROM) &&
+                        <DateSelector
+                          value={this.state.fromDate}
+                          type="date"
+                          name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'From' : ''}
+                          onChange={this.setDateFrom}
+                          errorMessage={this.errorMessagesNode(this.state.fromDateErrors, 'fromDate')}
+                        />
+                      }
+
+                      {
+                        (this.state.recieptFilter === recieptDateFilterStates.BETWEEN || this.state.recieptFilter === recieptDateFilterStates.TO) &&
+                        <DateSelector
+                          value={this.state.toDate}
+                          type="date"
+                          name={this.state.recieptFilter === recieptDateFilterStates.BETWEEN ? 'To' : ''}
+                          onChange={this.setDateTo}
+                          errorMessage={this.errorMessagesNode(this.state.toDateErrors, 'toDate')}
+                        />
+                      }
+
+                      {this.state.recieptFilter === recieptDateFilterStates.UNINITIALIZED && <DateSelector readOnly type="date" name="Receipt date"
+                        onChange={this.validateDateIsAfter} comment="This is a read only component used as a dummy" />}
+
+                      {(this.state.recieptFilter === recieptDateFilterStates.ON) && this.state.onDateErrors.map((error) =>
+                        <p style={{ color: 'red' }}>{error}</p>)}
+                      {this.state.recieptFilter === recieptDateFilterStates.ON && <DateSelector value={this.state.onDate} type="date"
+                        name="" onChange={this.setOnDate} />}
+                    </div>
+
+                    <div>
+                      <div style={{ width: '100%', display: 'flex' }}>
+                        <span style={{ height: '1px', position: 'absolute', width: '100%', backgroundColor: 'gray' }}></span>
+                        <div style={{ display: 'flex', margin: '10px 0px', justifyContent: 'center', width: '100%' }}>
+                          <Button disabled={this.isRecieptFilterButtonEnabled()} onClick={() => this.executeRecieptFilter()} title="apply filter">
+                            <span>Apply filter</span>
+                          </Button>
+                        </div>
                       </div>
                     </div>
                   </div>