Merge pull request #22 from icstechsales/development

Added manual date entry
icstechsales · Mar 21, 2019 · dcad302 · dcad302
2 parents 3b29eb7 + 2a212bc
commit dcad302
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/dqlexplorer.nsf b/dqlexplorer.nsf
diff --git a/dqlexplorer.ntf b/dqlexplorer.ntf
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dql-explorer",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "author": "Dimitri Prosper <dimitri_prosper@us.ibm.com>",
   "contributors": [
     {

diff --git a/src/App.js b/src/App.js
@@ -23,6 +23,7 @@ import './App.css';
 import Main from './components/Main';
 import MainHeader from './components/MainHeader';
 
+import { addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
 import { registerIcons } from '@uifabric/styling';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -41,6 +42,9 @@ import {
 
 import { people } from './components/querybuilder/PeoplePicker';
 
+const today = new Date(Date.now());
+const maxDate = addYears(today, 100);
+
 library.add(faSave, faUser, faPlusCircle, faCalendar, faCheck, faDownload, faSortAlphaDown, faSortAlphaUp, faSortAmountDown, faTimes, faHashtag, faBold, faTrashAlt, faShareSquare, faDatabase, faFolder, faTasks, faGripHorizontal, faGlobe, faUsers, faTable, faFile, faChevronDown, faChevronUp, faChevronRight, faChevronLeft, faArrowDown, faArrowUp, faArrowLeft, faArrowRight, faTag)
 
 registerIcons({
@@ -724,14 +728,33 @@ Scott Good https://scott-good.github.io/
 
   onTermDateChange = (id, attribute, data) => {
     if (data) {
-      const newValue =data.getFullYear() + "-" + ('0' + (data.getMonth() + 1)).slice(-2) + "-" + ('0' + data.getDate()).slice(-2);
+      const newValue = data.getFullYear() + "-" + ('0' + (data.getMonth() + 1)).slice(-2) + "-" + ('0' + data.getDate()).slice(-2);
+      let children = this.state.query.children;
+      let entryToUpdate = this._getObject(children, id);
+
+      if ((this._isValidDate(data.getDate(), data.getMonth() + 1, data.getFullYear())) && (data < maxDate)) {
+        entryToUpdate[attribute]=newValue;
+        entryToUpdate.dateValue=data;
+      } else {
+        entryToUpdate[attribute]='';
+        entryToUpdate.dateValue=null;
+      }
+
+      this.setState(
+        update(this.state, {
+          query: { children: { $set: children } },
+          formaction: { queryValid: { $set: false } },
+          formdata: { saved: { $set: false }},
+          explain: { $set: '' },     
+        })
+      );
+    } else {
       let children = this.state.query.children;
       let entryToUpdate = this._getObject(children, id);
 
-      entryToUpdate[attribute]=newValue;
-      entryToUpdate.dateValue=data;
+      entryToUpdate[attribute]='';
+      entryToUpdate.dateValue=null;
 
-      console.log(entryToUpdate)
       this.setState(
         update(this.state, {
           query: { children: { $set: children } },
@@ -1019,6 +1042,22 @@ Scott Good https://scott-good.github.io/
     );
   }
 
+  _daysInMonth = (m, y) => {
+    switch (m) {
+        case 1 :
+            return (y % 4 === 0 && y % 100) || y % 400 === 0 ? 29 : 28;
+        case 8 : case 3 : case 5 : case 10 :
+            return 30;
+        default :
+            return 31
+    }
+  };
+
+  _isValidDate = (d, m, y) => {
+    m = parseInt(m, 10) - 1;
+    return m >= 0 && m < 12 && d > 0 && d <= this._daysInMonth(m, y);
+  };
+
   _getObject = (theObject, value) => {
     var result = null;
     if(theObject instanceof Array) {

diff --git a/src/components/querybuilder/Term.js b/src/components/querybuilder/Term.js
@@ -20,9 +20,14 @@ import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { DefaultButton, IconButton } from "office-ui-fabric-react/lib/Button";
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
+import { addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
+
 import withApp from '../../withApp';
 import DateTextNumber from "./DateTextNumber";
 
+const today = new Date(Date.now());
+const maxDate = addYears(today, 100);
+
 const DayPickerStrings = {
   months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@@ -35,7 +40,8 @@ const DayPickerStrings = {
   nextYearAriaLabel: 'Go to next year',
   closeButtonAriaLabel: 'Close date picker',
   isRequiredErrorMessage: 'Start date is required.',
-  invalidInputErrorMessage: 'Invalid date format.'
+  invalidInputErrorMessage: 'Invalid date format.',
+  isOutOfBoundsErrorMessage: `Date must be before ${maxDate.toLocaleDateString()}`
 };
 
 var booleans = [
@@ -55,22 +61,26 @@ var booleanOptions = booleans.map((boolean, index) => {
 });
 
 const desc = 'Date field.';
+const _daysInMonth = (m, y) => {
+  switch (m) {
+      case 1 :
+          return (y % 4 === 0 && y % 100) || y % 400 === 0 ? 29 : 28;
+      case 8 : case 3 : case 5 : case 10 :
+          return 30;
+      default :
+          return 31
+  }
+};
 
-const _onFormatDate = (date) => {
-  let dt = new Date(date);
-  return (dt.getMonth() + 1)+ '/' + dt.getDate()  + '/' + (dt.getFullYear() % 100);
+const _isValidDate = (d, m, y) => {
+  m = parseInt(m, 10) - 1;
+  return m >= 0 && m < 12 && d > 0 && d <= _daysInMonth(m, y);
 };
 
-const _onParseDateFromString = (value) => {
-  const date = this.props.childQuery.value || new Date();
-  const values = (value || '').trim().split('/');
-  const day = values.length > 0 ? Math.max(1, Math.min(31, parseInt(values[0], 10))) : date.getDate();
-  const month = values.length > 1 ? Math.max(1, Math.min(12, parseInt(values[1], 10))) - 1 : date.getMonth();
-  let year = values.length > 2 ? parseInt(values[2], 10) : date.getFullYear();
-  if (year < 100) {
-    year += date.getFullYear() - (date.getFullYear() % 100);
-  }
-  return new Date(year, month, day);
+const _onFormatDate = (date) => {
+  let dt = new Date(date);
+  let display = _isValidDate(dt.getDate(), dt.getMonth() + 1, dt.getFullYear()) ? (dt.getMonth() + 1) + '/' + dt.getDate()  + '/' + (dt.getFullYear()) : '';
+  return display;
 };
 
 const _onRenderOption = (option) => {
@@ -244,10 +254,13 @@ const Term = ({ index, indexValue, addTermValue, removeTerm, onTermChange, onVal
                 allowTextInput={true}
                 ariaLabel={desc}
                 strings={DayPickerStrings}
-                value={childQuery.dateValue ? new Date(childQuery.dateValue) : new Date()}
+                // value={childQuery.dateValue ? new Date(childQuery.dateValue) : new Date()}
+                value={childQuery.dateValue}
                 onSelectDate={_onSelectDate}
                 formatDate={_onFormatDate}
-                parseDateFromString={_onParseDateFromString}
+                initialPickerDate={new Date()}
+                highlightSelectedMonth={true}
+                maxDate={maxDate}
               />
               )}
 
@@ -318,7 +331,6 @@ const Term = ({ index, indexValue, addTermValue, removeTerm, onTermChange, onVal
                     onValuesChange(childQuery.id, event, item)
                   }
                   multiSelect
-                  // isDisabled={childQuery.options.length === 0 ? true : false}
                   disabled={childQuery.options.length === 0 ? true : false}
                   options={childQuery.options}
                 />