Merge pull request #1507 from metasfresh/dev-1387

#1387

package.json

@@ -85,6 +85,7 @@
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
     "react-tagsinput": "~3.18.0",
+    "react-tether": "^0.6.0",
     "react-translate-component": "~0.14.0",
     "redux": "~3.7.2",
     "redux-thunk": "~2.2.0",

src/actions/ViewActions.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-
+import Moment from "moment";
 import { getQueryString } from "./GenericActions";
 
 export function getViewLayout(windowId, viewType, viewProfileId = null) {
@@ -86,6 +86,13 @@ export function createViewRequest({
 }
 
 export function filterViewRequest(windowId, viewId, filters) {
+  filters.map(filter => {
+    filter.parameters.map((param, index) => {
+      if (param.caption === "Date") {
+        filter.parameters[index].value = Moment(param.value).format();
+      }
+    });
+  });
   return axios.post(
     config.API_URL + "/documentView/" + windowId + "/" + viewId + "/filter",
     {

src/assets/css/datetime.css

@@ -23,8 +23,8 @@
 }
 
 .rdtPicker {
-    display: none;
-    position: absolute;
+    display: block;
+    position: static;
     width: 260px;
     padding: 0;
     margin-top: 3px;
@@ -230,3 +230,11 @@ td.rdtYear:hover {
 .rdtDayPart {
     margin-top: 43px;
 }
+
+.tether-element {
+    z-index: 9;
+}
+
+.tether-out-of-bounds-top .rdtPicker {
+    visibility: hidden;
+} 

src/components/filters/FiltersFrequent.js

@@ -12,6 +12,13 @@ const classes = "btn btn-filter btn-meta-outline-secondary btn-sm";
 class FiltersFrequent extends Component {
   state = { openFilterId: null };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      allowOutsideClickListener: true
+    };
+  }
+
   toggleFilter = index => {
     this.setState({
       openFilterId: index
@@ -24,8 +31,15 @@ class FiltersFrequent extends Component {
 
   outsideClick = () => {
     const { widgetShown, dropdownToggled } = this.props;
-    !widgetShown && this.toggleFilter(null, null);
-    dropdownToggled();
+    const { allowOutsideClickListener } = this.state;
+    if (allowOutsideClickListener) {
+      !widgetShown && this.toggleFilter(null);
+      dropdownToggled();
+    }
+  };
+
+  allowOutsideClickListener = value => {
+    this.setState({ allowOutsideClickListener: value });
   };
 
   render() {
@@ -115,6 +129,7 @@ class FiltersFrequent extends Component {
                   onHide={() => handleShow(false)}
                   viewId={viewId}
                   outsideClick={this.outsideClick}
+                  allowOutsideClickListener={this.allowOutsideClickListener}
                 />
               )}
             </div>

src/components/filters/FiltersItem.js

@@ -72,23 +72,28 @@ class FiltersItem extends Component {
     }
   };
 
+  parseDateToReadable = value => {
+    if (value) {
+      return new Date(value);
+    }
+  };
+
   mergeData = (property, value, valueTo) => {
+    const DATE_FIELD = "DateDoc";
     this.setState(prevState => ({
       filter: Object.assign({}, prevState.filter, {
         parameters: prevState.filter.parameters.map(param => {
           if (param.parameterName === property) {
-            return Object.assign(
-              {},
-              param,
-              valueTo
-                ? {
-                    value,
-                    valueTo
-                  }
-                : {
-                    value
-                  }
-            );
+            return Object.assign({}, param, {
+              value:
+                DATE_FIELD === property
+                  ? this.parseDateToReadable(value)
+                  : value,
+              valueTo:
+                DATE_FIELD === property
+                  ? this.parseDateToReadable(valueTo)
+                  : valueTo
+            });
           } else {
             return param;
           }
@@ -139,7 +144,8 @@ class FiltersItem extends Component {
       onHide,
       viewId,
       outsideClick,
-      captionValue
+      captionValue,
+      allowOutsideClickListener
     } = this.props;
 
     const { filter, isTooltipShow } = this.state;
@@ -193,7 +199,13 @@ class FiltersItem extends Component {
                       caption={item.caption}
                       noLabel={false}
                       filterWidget={true}
-                      {...{ viewId, windowType, onShow, onHide }}
+                      {...{
+                        viewId,
+                        windowType,
+                        onShow,
+                        onHide,
+                        allowOutsideClickListener
+                      }}
                     />
                   ))}
               </div>

src/components/filters/FiltersNotFrequent.js

@@ -12,7 +12,8 @@ class FiltersNotFrequent extends Component {
 
     this.state = {
       isOpenDropdown: false,
-      openFilterId: null
+      openFilterId: null,
+      allowOutsideClickListener: true
     };
   }
 
@@ -22,13 +23,18 @@ class FiltersNotFrequent extends Component {
 
   outsideClick = () => {
     const { widgetShown, dropdownToggled } = this.props;
-    if (!widgetShown) {
+    const { allowOutsideClickListener } = this.state;
+    if (allowOutsideClickListener && !widgetShown) {
       dropdownToggled();
       this.toggleDropdown(false);
       this.toggleFilter(null);
     }
   };
 
+  allowOutsideClickListener = value => {
+    this.setState({ allowOutsideClickListener: value });
+  };
+
   toggleDropdown = value => {
     this.setState({
       isOpenDropdown: value
@@ -119,6 +125,7 @@ class FiltersNotFrequent extends Component {
                 onHide={() => handleShow(false)}
                 viewId={viewId}
                 outsideClick={this.outsideClick}
+                allowOutsideClickListener={this.allowOutsideClickListener}
               />
             )}
           </div>

src/components/widget/DatePicker.js

@@ -1,8 +1,7 @@
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import Datetime from "react-datetime";
 import { connect } from "react-redux";
-
+import TetheredDateTime from "./TetheredDateTime";
 import { addNotification } from "../../actions/AppActions";
 
 const propTypes = {
@@ -11,7 +10,8 @@ const propTypes = {
   patch: PropTypes.func,
   field: PropTypes.string,
   value: PropTypes.any,
-  isOpenDatePicker: PropTypes.bool
+  isOpenDatePicker: PropTypes.bool,
+  allowOutsideClickListener: PropTypes.func // function to manage outside Click Listener from FilterFrequency component
 };
 
 class DatePicker extends Component {
@@ -56,17 +56,20 @@ class DatePicker extends Component {
   };
 
   handleFocus = () => {
-    const { value } = this.props;
+    const { value, allowOutsideClickListener } = this.props;
     this.setState({
       cache: value,
       open: true
     });
+    allowOutsideClickListener && allowOutsideClickListener(false);
   };
 
   handleClose = () => {
+    const { allowOutsideClickListener } = this.props;
     this.setState({
       open: false
     });
+    allowOutsideClickListener && allowOutsideClickListener(true);
   };
 
   handleClickOutside = () => {
@@ -94,7 +97,7 @@ class DatePicker extends Component {
   render() {
     return (
       <div tabIndex="-1" onKeyDown={this.handleKeydown} className="datepicker">
-        <Datetime
+        <TetheredDateTime
           ref={c => (this.picker = c)}
           closeOnTab={true}
           renderDay={this.renderDay}

src/components/widget/RawWidget.js

@@ -225,6 +225,7 @@ class RawWidget extends Component {
       allowShowPassword,
       onBlurWidget,
       defaultValue,
+      allowOutsideClickListener,
       isOpenDatePicker
     } = this.props;
     const widgetValue = data || widgetData[0].value;
@@ -297,7 +298,10 @@ class RawWidget extends Component {
                     date ? Moment(date).format(DATE_FORMAT) : null
                   )
                 }
-                handleBackdropLock={handleBackdropLock}
+                {...{
+                  allowOutsideClickListener,
+                  handleBackdropLock
+                }}
               />
             </div>
           );

src/components/widget/TetheredDateTime.js

@@ -0,0 +1,69 @@
+import React from "react";
+import DateTime from "react-datetime";
+import CalendarContainer from "react-datetime/src/CalendarContainer";
+import TetherComponent from "react-tether";
+
+export default class TetheredDateTime extends DateTime {
+  render() {
+    const { open } = this.state;
+    let className =
+      "rdt" +
+      (this.props.className
+        ? Array.isArray(this.props.className)
+          ? " " + this.props.className.join(" ")
+          : " " + this.props.className
+        : "");
+    let children = [];
+
+    if (this.props.input) {
+      const props = {
+        type: "text",
+        className: "form-control",
+        onFocus: this.openCalendar,
+        onChange: this.onInputChange,
+        onKeyDown: this.onInputKey,
+        value: this.state.inputValue,
+        ...this.props.inputProps
+      };
+
+      if (this.props.renderInput) {
+        children = [
+          <div key="i">{this.props.renderInput(props, this.openCalendar)}</div>
+        ];
+      } else {
+        children = [<input key="i" {...props} />];
+      }
+    } else {
+      className += " rdtStatic";
+    }
+
+    return (
+      <div className={className}>
+        <TetherComponent
+          attachment="top left"
+          targetAttachment="bottom left"
+          constraints={[
+            {
+              to: "scrollParent"
+            },
+            {
+              to: "window",
+              pin: ["bottom"]
+            }
+          ]}
+        >
+          {children}
+          {open && (
+            <div className="rdtPicker">
+              <CalendarContainer
+                view={this.state.currentView}
+                viewProps={this.getComponentProps()}
+                onClickOutside={this.handleClickOutside}
+              />
+            </div>
+          )}
+        </TetherComponent>
+      </div>
+    );
+  }
+}

yarn.lock

@@ -7157,6 +7157,13 @@ react-tagsinput@~3.18.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
 
+react-tether@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-0.6.0.tgz#428fb676467aa033336790997477ffcebe0aeca8"
+  dependencies:
+    prop-types "^15.5.8"
+    tether "^1.3.7"
+
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"