diff --git a/dqlexplorer.nsf b/dqlexplorer.nsf index d366959..cc7144d 100644 Binary files a/dqlexplorer.nsf and b/dqlexplorer.nsf differ diff --git a/dqlexplorer.ntf b/dqlexplorer.ntf index 20f1a12..cd792dd 100644 Binary files a/dqlexplorer.ntf and b/dqlexplorer.ntf differ diff --git a/package.json b/package.json index 4f7e838..8835064 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dql-explorer", - "version": "0.2.7", + "version": "0.2.8", "author": "Dimitri Prosper ", "contributors": [ { diff --git a/src/App.js b/src/App.js index c574fbc..c9f3fa4 100644 --- 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 index 0199773..60b0e19 100644 --- 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} />