Handle process layout type field #655

metasfresh · Apr 20, 2017 · 73b0ef2 · 73b0ef2
1 parent fdeb4c6
commit 73b0ef2
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 68 deletions.
diff --git a/src/assets/css/overlayfield.css b/src/assets/css/overlayfield.css
@@ -6,15 +6,25 @@
     width: 100%;
     height: 100%;
     z-index: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.overlay-type-field {
-    top: 40%;
-    position: absolute;
-    width: 80%;
-    left: 10%;
-    font-size: 70px;
-    height: 20%;
+.overlay-field .form-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.overlay-field input {
     text-align: center;
-    border: none;
-}
+    font-size: 60px;
+}
+
+.overlay-field .form-control-label {
+    font-size: 30px;
+    text-align: center;
+}
diff --git a/src/components/app/Modal.js b/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,
@@ -246,7 +247,7 @@ class Modal extends Component {
         }
     }
 
-    render() {
+    renderPanel = () => {
         const {
             data, modalTitle, modalType, isDocumentNotSaved
         } = this.props;
@@ -255,58 +256,95 @@ 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
+                handleStart={this.handleStart}
+                type={windowType}
+                disabled={pending}
+                data={data}
+                layout={layout}
+            />
+        )
+    }
+
+    render() {
+        const {
+            layout
+        } = this.props;
+
+        return (
+            <div>
+                {
+                    (!layout.layoutType || layout.layoutType === 'panel') &&
+                    this.renderPanel()
+                }
+                {
+                    layout.layoutType === 'singleOverlayField' &&
+                    this.renderOverlay()
+                }
             </div>
         )
     }

diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
@@ -1,18 +1,59 @@
 import React, { Component } from 'react';
+import MasterWidget from '../widget/MasterWidget';
+
+import {
+    findRowByPropName
+} from '../../actions/WindowActions';
 
 class OverlayField extends Component {
 
-    componentDidMount(){
-        this.overlayWidget.focus();
+    handleKeyDown = (e) => {
+        const {handleStart} = this.props;
+        switch(e.key) {
+            case 'Enter':
+            document.activeElement.blur();
+            setTimeout(() => {
+                handleStart();
+            }, 1000);
+            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">
-                <input
-                    className="overlay-type-field"
-                    ref={c => this.overlayWidget = c}
-                />
+            <div
+                className="overlay-field js-not-unselect"
+                onKeyDown={e => this.handleKeyDown(e)}
+            >
+            {
+                layout && layout.elements &&
+                this.renderElements(layout, data, type)
+            }
+
             </div>
         )
     }

diff --git a/src/containers/DocList.js b/src/containers/DocList.js
@@ -6,7 +6,6 @@ import DocumentList from '../components/app/DocumentList';
 import Container from '../components/Container';
 import Modal from '../components/app/Modal';
 import RawModal from '../components/app/RawModal';
-import OverlayField from '../components/app/OverlayField';
 
 import {
     getWindowBreadcrumb
@@ -78,11 +77,7 @@ class DocList extends Component {
                 query={query}
                 showIndicator={!modal.visible && !rawModal.visible}
             >
-                {
-                    modal.visible &&
-                    (!modal.layout.layoutType ||
-                    modal.layout.layoutType === 'panel') &&
-
+                {modal.visible &&
                     <Modal
                         windowType={modal.type}
                         data={modal.data}
@@ -105,11 +100,7 @@ class DocList extends Component {
                         }
                      />
                  }
-                 {
-                     modal.visible &&
-                     modal.layout.layoutType === 'singleOverlayField' &&
-                    <OverlayField/>
-                 }
+
                  {rawModal.visible &&
                      <RawModal
                          modalTitle={modalTitle}