Feature/restrict date options

src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormModelConfig } from '@context';
-import { FromModelUI } from '@constants';
+import { FormModelUI } from '@constants';
 
 type Props = {
   formObject: any,
@@ -11,7 +11,7 @@ type Props = {
 };
 
 const CheckBox = ({ id, modifyFormObject, formObject, onSave, autoSave, ...rest }: Props) => {
-  const { UI_VALUE, UI_DEFAULT, UI_LABEL, UI_NAME } = FromModelUI;
+  const { UI_VALUE, UI_DEFAULT, UI_LABEL, UI_NAME } = FormModelUI;
   const valueFromPod = rest[UI_VALUE] ? JSON.parse(rest[UI_VALUE]) : Number(rest[UI_DEFAULT]);
   const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : valueFromPod;
   const label = rest[UI_LABEL] || '';

src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import DatePicker from 'react-datepicker';
+
 import moment from 'moment';
+
 import { FormModelConfig } from '@context';
-import { UITypes, FromModelUI } from '@constants';
+import { UITypes, FormModelUI } from '@constants';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -29,15 +31,31 @@ const DateTimePicker = React.memo(
   ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBlur, ...rest }) => {
     const [selectedDate, setDate] = useState(null);
     const [invalidate, setInvalid] = useState(null);
-    const { DateTimePicker, TimeField } = UITypes;
-    const { UI_LABEL, RDF_TYPE, MIN_VALUE, MAX_VALUE } = FromModelUI;
-    const minValue = +rest[MIN_VALUE];
-    const maxValue = +rest[MAX_VALUE];
+
+    const {
+      UI_LABEL,
+      RDF_TYPE,
+      MIN_VALUE,
+      MAX_VALUE,
+      MIN_DATE_OFFSET,
+      MAX_DATE_OFFSET,
+      MIN_DATETIME_OFFSET,
+      MAX_DATETIME_OFFSET
+    } = FormModelUI;
+
+    const minValue = rest[MIN_VALUE];
+    const maxValue = rest[MAX_VALUE];
+    const mindateOffset = parseInt(rest[MIN_DATE_OFFSET], 10);
+    const maxdateOffset = parseInt(rest[MAX_DATE_OFFSET], 10);
+    const mindatetimeOffset = parseInt(rest[MIN_DATETIME_OFFSET], 10);
+    const maxdatetimeOffset = parseInt(rest[MAX_DATETIME_OFFSET], 10);
     const label = rest[UI_LABEL] || '';
     const type = rest[RDF_TYPE];
-    const showTimeSelect = type === DateTimePicker || type === TimeField || false;
-    const showTimeSelectOnly = type === TimeField || false;
+
+    const showTimeSelect = type === UITypes.DateTimeField || type === UITypes.TimeField || false;
+    const showTimeSelectOnly = type === UITypes.TimeField || false;
     const dateFormat = getDateFormat(type);
+
     const updateDate = useCallback(() => {
       const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value;
 
@@ -67,6 +85,67 @@ const DateTimePicker = React.memo(
       updateDate();
     }, [value, formObject]);
 
+    /* set the date ranges based on the UI Element to display */
+    let minDate;
+    let maxDate;
+    let minTime;
+    let maxTime;
+    let dateOptions;
+
+    /* Transform the incoming values depending on the type of element to display */
+    if (type === UITypes.TimeField) {
+      /* min, max Values are times */
+      const [minHours, minMinutes] = minValue.split(':');
+      const [maxHours, maxMinutes] = maxValue.split(':');
+
+      minTime = moment()
+        .hours(minHours)
+        .minutes(minMinutes)
+        .toDate();
+      maxTime = moment()
+        .hours(maxHours)
+        .minutes(maxMinutes)
+        .toDate();
+
+      dateOptions = { minTime, maxTime };
+    }
+    if (type === UITypes.DateTimeField) {
+      /* min, max Values are datetimes and offset is in seconds */
+
+      if (!Number.isNaN(mindatetimeOffset))
+        minDate = moment(new Date())
+          .add(mindatetimeOffset, 'seconds')
+          .toDate();
+      if (!Number.isNaN(maxdatetimeOffset))
+        maxDate = moment(new Date())
+          .add(maxdatetimeOffset, 'seconds')
+          .toDate();
+
+      /* min,maxValue take priority over the offsets if both values are provided */
+      if (minValue) minDate = moment(minValue).toDate();
+      if (maxValue) maxDate = moment(maxValue).toDate();
+
+      dateOptions = { minDate, maxDate };
+    }
+    if (type === UITypes.DateField) {
+      /* min,maxValue are dates and offset is in days */
+
+      if (!Number.isNaN(mindateOffset))
+        minDate = moment(new Date())
+          .add(mindateOffset, 'days')
+          .toDate();
+      if (!Number.isNaN(maxdateOffset))
+        maxDate = moment(new Date())
+          .add(maxdateOffset, 'days')
+          .toDate();
+
+      /* min,maxValue take priority over the offsets if both values are provided */
+      if (minValue) minDate = moment(minValue).toDate();
+      if (maxValue) maxDate = moment(maxValue).toDate();
+
+      dateOptions = { minDate, maxDate };
+    }
+
     return (
       <FormModelConfig.Consumer>
         {({ theme }) => (
@@ -77,8 +156,7 @@ const DateTimePicker = React.memo(
                 id,
                 selected: selectedDate,
                 onChange,
-                minDate: minValue,
-                maxDate: maxValue,
+                ...dateOptions,
                 onChangeRaw: e => handleChangeRaw(e),
                 className: theme && theme.inputText,
                 onBlur,

src/lib/constants/index.js

@@ -44,14 +44,18 @@ export const InputTextTypes = {
   'http://www.w3.org/ns/ui#IntegerField': 'number'
 };
 
-export const FromModelUI = {
+export const FormModelUI = {
   UI_VALUE: 'ui:value',
   UI_LABEL: 'ui:label',
   UI_NAME: 'ui:name',
   UI_DEFAULT: 'ui:default',
   RDF_TYPE: 'rdf:type',
   MIN_VALUE: 'ui:minValue',
-  MAX_VALUE: 'ui:maxValue'
+  MAX_VALUE: 'ui:maxValue',
+  MAX_DATE_OFFSET: 'ui:maxdateOffset',
+  MIN_DATE_OFFSET: 'ui:mindateOffset',
+  MAX_DATETIME_OFFSET: 'ui:maxdatetimeOffset',
+  MIN_DATETIME_OFFSET: 'ui:mindatetimeOffset'
 };
 
 export const NotificationTypes = {