From fdeb4c68977967b409ec8ec596b9000b4f2b3bc2 Mon Sep 17 00:00:00 2001
From: Katarzyna Dunikowska <katarzyna.dunikowska@jazzy.pro>
Date: Thu, 20 Apr 2017 12:48:14 +0200
Subject: [PATCH 1/5] Add overlay widget #655

---
 src/assets/css/overlayfield.css    | 20 ++++++++++++++++++++
 src/assets/css/styles.css          |  1 +
 src/components/app/OverlayField.js | 21 +++++++++++++++++++++
 src/containers/DocList.js          | 12 +++++++++++-
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/css/overlayfield.css
 create mode 100644 src/components/app/OverlayField.js

diff --git a/src/assets/css/overlayfield.css b/src/assets/css/overlayfield.css
new file mode 100644
index 000000000..e88ed514c
--- /dev/null
+++ b/src/assets/css/overlayfield.css
@@ -0,0 +1,20 @@
+.overlay-field {
+    background: rgba(255,255,255,0.8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 500;
+}
+
+.overlay-type-field {
+    top: 40%;
+    position: absolute;
+    width: 80%;
+    left: 10%;
+    font-size: 70px;
+    height: 20%;
+    text-align: center;
+    border: none;
+}
\ No newline at end of file
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 8d426d95d..1a9d0445f 100644
--- a/src/assets/css/styles.css
+++ b/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';
diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
new file mode 100644
index 000000000..fe73a95f5
--- /dev/null
+++ b/src/components/app/OverlayField.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class OverlayField extends Component {
+
+    componentDidMount(){
+        this.overlayWidget.focus();
+    }
+
+    render() {
+        return (
+            <div className="overlay-field">
+                <input
+                    className="overlay-type-field"
+                    ref={c => this.overlayWidget = c}
+                />
+            </div>
+        )
+    }
+}
+
+export default OverlayField
diff --git a/src/containers/DocList.js b/src/containers/DocList.js
index 804326400..28fc73575 100644
--- a/src/containers/DocList.js
+++ b/src/containers/DocList.js
@@ -6,6 +6,7 @@ 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
@@ -77,7 +78,11 @@ class DocList extends Component {
                 query={query}
                 showIndicator={!modal.visible && !rawModal.visible}
             >
-                {modal.visible &&
+                {
+                    modal.visible &&
+                    (!modal.layout.layoutType ||
+                    modal.layout.layoutType === 'panel') &&
+
                     <Modal
                         windowType={modal.type}
                         data={modal.data}
@@ -100,6 +105,11 @@ class DocList extends Component {
                         }
                      />
                  }
+                 {
+                     modal.visible &&
+                     modal.layout.layoutType === 'singleOverlayField' &&
+                    <OverlayField/>
+                 }
                  {rawModal.visible &&
                      <RawModal
                          modalTitle={modalTitle}

From 73b0ef27ce015f3cf0c12b9613e7231d42948bc1 Mon Sep 17 00:00:00 2001
From: Katarzyna Dunikowska <katarzyna.dunikowska@jazzy.pro>
Date: Thu, 20 Apr 2017 15:43:09 +0200
Subject: [PATCH 2/5] Handle process layout type field #655

---
 src/assets/css/overlayfield.css    |  28 ++++---
 src/components/app/Modal.js        | 120 +++++++++++++++++++----------
 src/components/app/OverlayField.js |  55 +++++++++++--
 src/containers/DocList.js          |  13 +---
 4 files changed, 148 insertions(+), 68 deletions(-)

diff --git a/src/assets/css/overlayfield.css b/src/assets/css/overlayfield.css
index e88ed514c..f7d317fbd 100644
--- 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;
-}
\ No newline at end of file
+    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
index b248bbd2a..a2e9309e3 100644
--- 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
index fe73a95f5..675caa43f 100644
--- 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
index 28fc73575..703129998 100644
--- 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}

From ac9541a3fa3c003c6f558c9fd087389b679ba5ae Mon Sep 17 00:00:00 2001
From: Katarzyna Dunikowska <katarzyna.dunikowska@jazzy.pro>
Date: Thu, 20 Apr 2017 16:40:52 +0200
Subject: [PATCH 3/5] Fix start process #655

---
 src/components/app/Modal.js        | 8 +++++++-
 src/components/app/OverlayField.js | 6 ++----
 src/components/header/Header.js    | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/app/Modal.js b/src/components/app/Modal.js
index a2e9309e3..ac5297954 100644
--- a/src/components/app/Modal.js
+++ b/src/components/app/Modal.js
@@ -168,6 +168,12 @@ class Modal extends Component {
         });
     }
 
+    setFetchOnTrue = () => {
+        this.setState({
+            waitingFetch: true
+        });
+    }
+
     handleStart = () => {
         const {dispatch, layout, windowType, indicator} = this.props;
 
@@ -321,11 +327,11 @@ class Modal extends Component {
 
         return(
             <OverlayField
-                handleStart={this.handleStart}
                 type={windowType}
                 disabled={pending}
                 data={data}
                 layout={layout}
+                setFetchOnTrue={this.setFetchOnTrue}
             />
         )
     }
diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
index 675caa43f..85af29c13 100644
--- a/src/components/app/OverlayField.js
+++ b/src/components/app/OverlayField.js
@@ -8,13 +8,11 @@ import {
 class OverlayField extends Component {
 
     handleKeyDown = (e) => {
-        const {handleStart} = this.props;
+        const {setFetchOnTrue} = this.props;
         switch(e.key) {
             case 'Enter':
             document.activeElement.blur();
-            setTimeout(() => {
-                handleStart();
-            }, 1000);
+            setFetchOnTrue();
             break;
         }
     }
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 625d5f4b5..accd0961c 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -502,7 +502,7 @@ class Header extends Component {
                 />}
 
                 <GlobalContextShortcuts
-                    handleSidelistToggle={(id) => 
+                    handleSidelistToggle={(id) =>
                         this.handleSidelistToggle(id, sideListTab)}
                     handleMenuOverlay={isMenuOverlayShow ?
                         () => this.handleMenuOverlay('', '') :

From 349f9aff9990bb8d59f0ec461d37ad0ac7d51126 Mon Sep 17 00:00:00 2001
From: Katarzyna Dunikowska <katarzyna.dunikowska@jazzy.pro>
Date: Thu, 20 Apr 2017 16:43:39 +0200
Subject: [PATCH 4/5] Fix PR #655

---
 src/components/app/OverlayField.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
index 85af29c13..ccc10f802 100644
--- a/src/components/app/OverlayField.js
+++ b/src/components/app/OverlayField.js
@@ -6,6 +6,9 @@ import {
 } from '../../actions/WindowActions';
 
 class OverlayField extends Component {
+    constructor(props) {
+        super(props);
+    }
 
     handleKeyDown = (e) => {
         const {setFetchOnTrue} = this.props;

From 19918df772b3e9c183fe8088a08fcfb159176cf8 Mon Sep 17 00:00:00 2001
From: Katarzyna Dunikowska <katarzyna.dunikowska@jazzy.pro>
Date: Thu, 20 Apr 2017 16:59:13 +0200
Subject: [PATCH 5/5] Add esc to exit field #655

---
 src/components/app/Modal.js        |  1 +
 src/components/app/OverlayField.js | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/app/Modal.js b/src/components/app/Modal.js
index ac5297954..1d78b01cd 100644
--- a/src/components/app/Modal.js
+++ b/src/components/app/Modal.js
@@ -332,6 +332,7 @@ class Modal extends Component {
                 data={data}
                 layout={layout}
                 setFetchOnTrue={this.setFetchOnTrue}
+                removeModal={this.removeModal}
             />
         )
     }
diff --git a/src/components/app/OverlayField.js b/src/components/app/OverlayField.js
index ccc10f802..fa2489a40 100644
--- a/src/components/app/OverlayField.js
+++ b/src/components/app/OverlayField.js
@@ -11,12 +11,15 @@ class OverlayField extends Component {
     }
 
     handleKeyDown = (e) => {
-        const {setFetchOnTrue} = this.props;
+        const {setFetchOnTrue, removeModal} = this.props;
         switch(e.key) {
             case 'Enter':
-            document.activeElement.blur();
-            setFetchOnTrue();
-            break;
+                document.activeElement.blur();
+                setFetchOnTrue();
+                break;
+            case 'Escape':
+                removeModal();
+                break;
         }
     }