Merge pull request #663 from metasfresh/dev-655

Handle process layout type field #655

src/assets/css/overlayfield.css

@@ -0,0 +1,30 @@
+.overlay-field {
+    background: rgba(255,255,255,0.8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-field .form-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.overlay-field input {
+    text-align: center;
+    font-size: 60px;
+}
+
+.overlay-field .form-control-label {
+    font-size: 30px;
+    text-align: center;
+}

src/assets/css/styles.css

@@ -14,6 +14,7 @@
 @import './inputs.css';
 @import './notification.css';
 @import './panel.css';
+@import './overlayfield.css';
 @import './table.css';
 @import './tabs.css';
 @import './tag.css';

src/components/app/Modal.js

@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import Window from '../Window';
 import Process from '../Process';
 import Indicator from './Indicator';
+import OverlayField from './OverlayField';
 
 import {
     closeModal,
@@ -167,6 +168,12 @@ class Modal extends Component {
         });
     }
 
+    setFetchOnTrue = () => {
+        this.setState({
+            waitingFetch: true
+        });
+    }
+
     handleStart = () => {
         const {dispatch, layout, windowType, indicator} = this.props;
 
@@ -246,7 +253,7 @@ class Modal extends Component {
         }
     }
 
-    render() {
+    renderPanel = () => {
         const {
             data, modalTitle, modalType, isDocumentNotSaved
         } = this.props;
@@ -255,58 +262,96 @@ class Modal extends Component {
             scrolled, pending
         } = this.state;
 
-        return (
+        return(
             data.length > 0 && <div
                 className="screen-freeze js-not-unselect"
             >
-                <div className="panel panel-modal panel-modal-primary">
-                    <div
-                        className={
-                            'panel-modal-header ' +
-                            (scrolled ? 'header-shadow': '')
-                        }
-                    >
-                        <span className="panel-modal-header-title">
-                            {modalTitle ? modalTitle : 'Modal'}
-                        </span>
-                        <div className="items-row-2">
+            <div className="panel panel-modal panel-modal-primary">
+                <div
+                    className={
+                        'panel-modal-header ' +
+                        (scrolled ? 'header-shadow': '')
+                    }
+                >
+                    <span className="panel-modal-header-title">
+                        {modalTitle ? modalTitle : 'Modal'}
+                    </span>
+                    <div className="items-row-2">
+                        <button
+                            className={
+                                `btn btn-meta-outline-secondary
+                                btn-distance-3 btn-md `+
+                                (pending ? 'tag-disabled disabled ' : '')
+                            }
+                            onClick={this.handleClose}
+                            tabIndex={0}
+                        >
+                            {modalType === 'process' ? 'Cancel' : 'Done'}
+                        </button>
+                        {modalType === 'process' &&
                             <button
                                 className={
-                                    `btn btn-meta-outline-secondary
-                                    btn-distance-3 btn-md `+
-                                    (pending ? 'tag-disabled disabled ' : '')
+                                    `btn btn-meta-primary btn-distance-3
+                                    btn-md ` +
+                                    (pending ? 'tag-disabled disabled' : '')
                                 }
-                                onClick={this.handleClose}
+                                onClick={this.handleStart}
                                 tabIndex={0}
                             >
-                                {modalType === 'process' ? 'Cancel' : 'Done'}
+                                Start
                             </button>
-                            {modalType === 'process' &&
-                                <button
-                                    className={
-                                        `btn btn-meta-primary btn-distance-3
-                                        btn-md ` +
-                                        (pending ? 'tag-disabled disabled' : '')
-                                    }
-                                    onClick={this.handleStart}
-                                    tabIndex={0}
-                                >
-                                    Start
-                                </button>
-                            }
-                        </div>
-                    </div>
-                    <Indicator {...{isDocumentNotSaved}}/>
-                    <div
-                        className={
-                            `panel-modal-content js-panel-modal-content
-                            container-fluid`
                         }
-                        ref={c => { c && c.focus()}}
-                    >
-                        {this.renderModalBody()}
                     </div>
                 </div>
+                <Indicator {...{isDocumentNotSaved}}/>
+                <div
+                    className={
+                        `panel-modal-content js-panel-modal-content
+                        container-fluid`
+                    }
+                    ref={c => { c && c.focus()}}
+                >
+                    {this.renderModalBody()}
+                </div>
+            </div>
+        </div>
+        )
+    }
+
+    renderOverlay = () => {
+       const {
+            data, layout, windowType
+        } = this.props;
+
+        const {pending} = this.state;
+
+        return(
+            <OverlayField
+                type={windowType}
+                disabled={pending}
+                data={data}
+                layout={layout}
+                setFetchOnTrue={this.setFetchOnTrue}
+                removeModal={this.removeModal}
+            />
+        )
+    }
+
+    render() {
+        const {
+            layout
+        } = this.props;
+
+        return (
+            <div>
+                {
+                    (!layout.layoutType || layout.layoutType === 'panel') &&
+                    this.renderPanel()
+                }
+                {
+                    layout.layoutType === 'singleOverlayField' &&
+                    this.renderOverlay()
+                }
             </div>
         )
     }

src/components/app/OverlayField.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import MasterWidget from '../widget/MasterWidget';
+
+import {
+    findRowByPropName
+} from '../../actions/WindowActions';
+
+class OverlayField extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleKeyDown = (e) => {
+        const {setFetchOnTrue, removeModal} = this.props;
+        switch(e.key) {
+            case 'Enter':
+                document.activeElement.blur();
+                setFetchOnTrue();
+                break;
+            case 'Escape':
+                removeModal();
+                break;
+        }
+    }
+
+    renderElements = (layout, data, type) => {
+        const {disabled} = this.props;
+        const elements = layout.elements;
+        return elements.map((elem, id) => {
+            const widgetData = elem.fields.map(item =>
+                findRowByPropName(data, item.field)
+            );
+            return (
+                <MasterWidget
+                    entity="process"
+                    key={'element' + id}
+                    windowType={type}
+                    dataId={layout.pinstanceId}
+                    widgetData={widgetData}
+                    isModal={true}
+                    disabled={disabled}
+                    autoFocus={id === 0}
+                    {...elem}
+                />
+            )
+        })
+    }
+
+    render() {
+        const {data, layout, type} = this.props;
+        return (
+            <div
+                className="overlay-field js-not-unselect"
+                onKeyDown={e => this.handleKeyDown(e)}
+            >
+            {
+                layout && layout.elements &&
+                this.renderElements(layout, data, type)
+            }
+
+            </div>
+        )
+    }
+}
+
+export default OverlayField

src/containers/DocList.js

@@ -100,6 +100,7 @@ class DocList extends Component {
                         }
                      />
                  }
+
                  {rawModal.visible &&
                      <RawModal
                          modalTitle={modalTitle}