Merge pull request #747 from metasfresh/dev-742

Filter singleOverlayField support #742
metasfresh · May 15, 2017 · c1e8995 · c1e8995
2 parents b243dee + 1bc2c32
commit c1e8995
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 59 deletions.
diff --git a/src/components/app/Modal.js b/src/components/app/Modal.js
@@ -342,8 +342,8 @@ class Modal extends Component {
                 disabled={pending}
                 data={data}
                 layout={layout}
-                setFetchOnTrue={this.setFetchOnTrue}
-                removeModal={this.removeModal}
+                handleSubmit={this.setFetchOnTrue}
+                closeOverlay={this.removeModal}
             />
         )
     }

diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import MasterWidget from '../widget/MasterWidget';
+import RawWidget from '../widget/RawWidget';
 
 import {
     findRowByPropName
@@ -11,14 +12,17 @@ class OverlayField extends Component {
     }
 
     handleKeyDown = (e) => {
-        const {setFetchOnTrue, removeModal} = this.props;
+        const {handleSubmit, closeOverlay, clearData} = this.props;
         switch(e.key) {
             case 'Enter':
                 document.activeElement.blur();
-                setFetchOnTrue();
+                handleSubmit();
                 break;
             case 'Escape':
-                removeModal();
+                closeOverlay();
+                break;
+            case 'Delete':
+                clearData && clearData();
                 break;
         }
     }
@@ -46,14 +50,46 @@ class OverlayField extends Component {
         })
     }
 
+    renderParameters = (layout) => {
+        const {
+            windowType, viewId, onShow, onHide, handlePatch, handleChange
+        } = this.props;
+        const parameters = layout.parameters;
+        return parameters.map((item, index) => {
+            return (
+                <RawWidget
+                    entity="documentView"
+                    subentity="filter"
+                    subentityId={layout.filterId}
+                    widgetType={item.widgetType}
+                    fields={[item]}
+                    type={item.type}
+                    widgetData={[item]}
+                    key={index}
+                    id={index}
+                    range={item.range}
+                    caption={item.caption}
+                    noLabel={false}
+                    filterWidget={true}
+                    autoFocus={index === 0}
+                    {...{handlePatch, handleChange, windowType, onShow, onHide,
+                        viewId}}
+                />
+            )
+        })
+    }
+
     render() {
-        const {data, layout, type} = this.props;
+        const {data, layout, type, filter} = this.props;
+
         return (
             <div
                 className="overlay-field js-not-unselect"
                 onKeyDown={e => this.handleKeyDown(e)}
             >
             {
+                filter ?
+                this.renderParameters(layout) :
                 layout && layout.elements &&
                 this.renderElements(layout, data, type)
             }

diff --git a/src/components/filters/FiltersFrequent.js b/src/components/filters/FiltersFrequent.js
@@ -20,6 +20,10 @@ class FiltersFrequent extends Component {
     }
 
     handleClickOutside = () => {
+        this.outsideClick();
+    }
+
+    outsideClick = () => {
         const {widgetShown, dropdownToggled} = this.props;
         !widgetShown && this.toggleFilter(null, null);
         dropdownToggled();
@@ -73,6 +77,7 @@ class FiltersFrequent extends Component {
                                     onShow={() => handleShow(true)}
                                     onHide={() => handleShow(false)}
                                     viewId={viewId}
+                                    outsideClick={this.outsideClick}
                                 />
                             }
                         </div>

diff --git a/src/components/filters/FiltersItem.js b/src/components/filters/FiltersItem.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import RawWidget from '../widget/RawWidget';
+import OverlayField from '../app/OverlayField';
 
 class FiltersItem extends Component {
     constructor(props) {
@@ -108,69 +109,88 @@ class FiltersItem extends Component {
 
     render() {
         const {
-            data, notValidFields, isActive, windowType, onShow, onHide, viewId
+            data, notValidFields, isActive, windowType, onShow, onHide, viewId,
+            outsideClick
         } = this.props;
 
         const {
             filter
         } = this.state;
 
         return (
-            <div className="filter-menu filter-widget">
-                <div>Active filter:
-                    <span className="filter-active"> {data.caption}</span>
-                    {isActive &&
-                        <span
-                            className="filter-clear"
-                            onClick={() => this.handleClear()}
-                        >
-                            Clear filter <i className="meta-icon-trash" />
-                    </span>
-                }
-            </div>
-            <div className="form-group row filter-content">
-                <div className="col-sm-12">
-                    {filter.parameters && filter.parameters.map((item, index) =>
-                        <RawWidget
-                            entity="documentView"
-                            subentity="filter"
-                            subentityId={filter.filterId}
-                            handlePatch={this.setValue}
-                            handleChange={this.setValue}
-                            widgetType={item.widgetType}
-                            fields={[item]}
-                            windowType={windowType}
-                            type={item.type}
-                            widgetData={[item]}
-                            key={index}
-                            id={index}
-                            range={item.range}
-                            onShow={onShow}
-                            onHide={onHide}
-                            caption={item.caption}
-                            noLabel={false}
-                            filterWidget={true}
-                            viewId={viewId}
-                        />
-                    )}
-                </div>
-                <div className="col-sm-12 text-xs-right">
-                    {notValidFields &&
-                        <div className="input-error">
-                            Mandatory filters are not filled!
+            <div>
+                {
+                    data.parametersLayoutType === 'singleOverlayField' ?
+                    <OverlayField
+                        type={windowType}
+                        filter={true}
+                        layout={filter}
+                        handlePatch={this.setValue}
+                        handleChange={this.setValue}
+                        clearData={isActive && this.handleClear}
+                        closeOverlay={outsideClick}
+                        handleSubmit={this.handleApply}
+                        {...{windowType, onShow, onHide, viewId}}
+                    /> :
+                    <div className="filter-menu filter-widget">
+                        <div>Active filter:
+                            <span className="filter-active">
+                                {data.caption}
+                            </span>
+                            {isActive &&
+                                <span
+                                    className="filter-clear"
+                                    onClick={() => this.handleClear()}
+                                >
+                                    Clear filter
+                                    <i className="meta-icon-trash" />
+                            </span>
+                        }
+                    </div>
+                    <div className="form-group row filter-content">
+                        <div className="col-sm-12">
+                            {filter.parameters &&
+                            filter.parameters.map((item, index) =>
+                                <RawWidget
+                                    entity="documentView"
+                                    subentity="filter"
+                                    subentityId={filter.filterId}
+                                    handlePatch={this.setValue}
+                                    handleChange={this.setValue}
+                                    widgetType={item.widgetType}
+                                    fields={[item]}
+                                    type={item.type}
+                                    widgetData={[item]}
+                                    key={index}
+                                    id={index}
+                                    range={item.range}
+                                    caption={item.caption}
+                                    noLabel={false}
+                                    filterWidget={true}
+                                    {...{viewId, windowType, onShow, onHide}}
+                                />
+                            )}
                         </div>
-                    }
+                        <div className="col-sm-12 text-xs-right">
+                            {notValidFields &&
+                                <div className="input-error">
+                                    Mandatory filters are not filled!
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    <div className="filter-btn-wrapper">
+                        <button
+                            className="applyBtn btn btn-sm btn-success"
+                            onClick={this.handleApply}
+                        >
+                            Apply
+                        </button>
+                    </div>
                 </div>
+
+                }
             </div>
-            <div className="filter-btn-wrapper">
-                <button
-                    className="applyBtn btn btn-sm btn-success"
-                    onClick={this.handleApply}
-                >
-                    Apply
-                </button>
-            </div>
-        </div>
     )}
 }
 

diff --git a/src/components/filters/FiltersNotFrequent.js b/src/components/filters/FiltersNotFrequent.js
@@ -19,6 +19,10 @@ class FiltersNotFrequent extends Component {
     }
 
     handleClickOutside = () => {
+       this.outsideClick();
+    }
+
+    outsideClick = () => {
         const {widgetShown, dropdownToggled} = this.props;
         if(!widgetShown) {
             dropdownToggled();
@@ -101,6 +105,7 @@ class FiltersNotFrequent extends Component {
                                 onShow={() => handleShow(true)}
                                 onHide={() => handleShow(false)}
                                 viewId={viewId}
+                                outsideClick={this.outsideClick}
                             />
                         }
                     </div>