Modals refactor #1

metasfresh · May 30, 2017 · 632a239 · 632a239
1 parent d6a79ee
commit 632a239
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 202 deletions.
diff --git a/src/components/Container.js b/src/components/Container.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Header from './header/Header';
 import ErrorScreen from './app/ErrorScreen';
+import Modal from './app/Modal';
+import RawModal from './app/RawModal';
+import DocumentList from './app/DocumentList';
 
 class Container extends Component {
     constructor(props){
@@ -11,11 +14,13 @@ class Container extends Component {
 
     render() {
         const {
-            docActionElem, docStatusData, docNoData, docId,
+            docActionElem, docStatusData, docNoData, docId, processStatus,
             docSummaryData, dataId, windowType, breadcrumb, references, actions,
             showSidelist, siteName, connectionError, noMargin, entity, children,
             query, attachments, showIndicator, isDocumentNotSaved, hideHeader,
-            handleDeletedStatus, dropzoneFocused, notfound
+            handleDeletedStatus, dropzoneFocused, notfound, rawModal, modal,
+            selected, selectedWindowType, indicator, modalTitle, setModalTitle,
+            includedView, closeModalCallback
         } = this.props;
 
         return (
@@ -39,6 +44,76 @@ class Container extends Component {
                         (noMargin ? 'dashboard' : 'container-fluid')
                     }
                 >
+                {modal.visible &&
+                    <Modal
+                        windowType={modal.type}
+                        dataId={modal.dataId ? modal.dataId : ''}
+                        data={modal.data}
+                        layout={modal.layout}
+                        rowData={modal.rowData}
+                        tabId={modal.tabId}
+                        rowId={modal.rowId}
+                        modalTitle={modal.title}
+                        modalType={modal.modalType}
+                        modalViewId={modal.viewId}
+                        isAdvanced={modal.isAdvanced}
+                        relativeType={windowType}
+                        relativeDataId={dataId}
+                        triggerField={modal.triggerField}
+                        query={query}
+                        selected={selected}
+                        viewId={query && query.viewId}
+                        rawModalVisible={rawModal.visible}
+                        indicator={indicator}
+                        modalViewDocumentIds={modal.viewDocumentIds}
+                        closeCallback={closeModalCallback}
+                        modalSaveStatus={
+                            modal.saveStatus &&
+                            modal.saveStatus.saved !== undefined ?
+                                modal.saveStatus.saved : true
+                        }
+                        isDocumentNotSaved={
+                            (modal.saveStatus && !modal.saveStatus.saved) &&
+                            (modal.validStatus &&
+                                !modal.validStatus.initialValue)
+                        }
+                     />
+                 }
+
+                     {rawModal.visible &&
+                         <RawModal
+                             modalTitle={modalTitle}
+                         >
+                            <div className="document-lists-wrapper">
+                                 <DocumentList
+                                     type="grid"
+                                     windowType={rawModal.type}
+                                     defaultViewId={rawModal.viewId}
+                                     selected={selected}
+                                     selectedWindowType={selectedWindowType}
+                                     setModalTitle={setModalTitle}
+                                     isModal={true}
+                                     processStatus={processStatus}
+                                     includedView={includedView}
+                                     inBackground={
+                                         includedView.windowType &&
+                                            includedView.viewId
+                                     }
+                                 >
+                                 </DocumentList>
+                                 {includedView.windowType && includedView.viewId &&
+                                     <DocumentList
+                                         type="includedView"
+                                         selected={selected}
+                                         selectedWindowType={selectedWindowType}
+                                         windowType={includedView.windowType}
+                                         defaultViewId={includedView.viewId}
+                                         isIncluded={true}
+                                     />
+                                 }
+                            </div>
+                         </RawModal>
+                     }
                     {children}
                 </div>
             </div>

diff --git a/src/containers/Dashboard.js b/src/containers/Dashboard.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Container from '../components/Container';
 import DraggableWrapper from '../components/widget/DraggableWrapper';
-import Modal from '../components/app/Modal';
 
 export class Dashboard extends Component {
     constructor(props){
@@ -12,38 +11,17 @@ export class Dashboard extends Component {
 
     render() {
         const {
-            location, modal, selected, rawModal,
-            indicator
+            location, modal, selected, rawModal, indicator, processStatus,
+            includedView
         } = this.props;
 
         return (
             <Container
                 siteName="Dashboard"
                 noMargin={true}
+                {...{modal, rawModal, selected, indicator, processStatus, 
+                    includedView}}
             >
-                {modal.visible &&
-                    <Modal
-                        windowType={modal.type}
-                        data={modal.data}
-                        layout={modal.layout}
-                        rowData={modal.rowData}
-                        tabId={modal.tabId}
-                        rowId={modal.rowId}
-                        modalTitle={modal.title}
-                        modalType={modal.modalType}
-                        modalViewId={modal.viewId}
-                        selected={selected}
-                        viewId={null}
-                        rawModalVisible={rawModal.visible}
-                        indicator={indicator}
-                        isDocumentNotSaved={
-                            (modal.saveStatus && !modal.saveStatus.saved) &&
-                            (modal.validStatus &&
-                                !modal.validStatus.initialValue)
-                        }
-                     />
-                 }
-
                 <div className="container-fluid dashboard-wrapper">
                     <DraggableWrapper
                         dashboard={location.pathname}
@@ -60,23 +38,36 @@ Dashboard.propTypes = {
 
 function mapStateToProps(state) {
     const {
-        windowHandler
+        windowHandler, listHandler, appHandler
     } = state;
 
     const {
         modal,
         rawModal,
         selected,
-        indicator
+        indicator,
     } = windowHandler || {
         modal: false,
         rawModal: false,
         selected: [],
         indicator: ''
     }
 
+
+    const {
+        includedView
+    } = listHandler || {
+        includedView: {}
+    }
+
+    const {
+        processStatus
+    } = appHandler || {
+        processStatus: ''
+    }
+
     return {
-        modal, selected, indicator, rawModal
+        modal, selected, indicator, rawModal, processStatus, includedView
     }
 }
 

diff --git a/src/containers/DocList.js b/src/containers/DocList.js
@@ -4,8 +4,6 @@ import {connect} from 'react-redux';
 
 import DocumentList from '../components/app/DocumentList';
 import Container from '../components/Container';
-import Modal from '../components/app/Modal';
-import RawModal from '../components/app/RawModal';
 
 import {
     getWindowBreadcrumb
@@ -79,76 +77,12 @@ class DocList extends Component {
         return (
             <Container
                 entity="documentView"
-                breadcrumb={breadcrumb}
-                windowType={windowType}
-                query={query}
-                notfound={notfound}
+                {...{modal, rawModal, breadcrumb, windowType, query, notfound,
+                    selected, selectedWindowType, indicator, modalTitle,
+                    processStatus, includedView}}
+                setModalTitle={this.setModalTitle}
                 showIndicator={!modal.visible && !rawModal.visible}
             >
-                {modal.visible &&
-                    <Modal
-                        windowType={modal.type}
-                        dataId={modal.dataId ? modal.dataId : ''}
-                        data={modal.data}
-                        layout={modal.layout}
-                        rowData={modal.rowData}
-                        tabId={modal.tabId}
-                        rowId={modal.rowId}
-                        modalTitle={modal.title}
-                        modalType={modal.modalType}
-                        modalViewId={modal.viewId}
-                        query={query}
-                        selected={selected}
-                        viewId={query.viewId}
-                        rawModalVisible={rawModal.visible}
-                        indicator={indicator}
-                        modalSaveStatus={
-                            modal.saveStatus &&
-                            modal.saveStatus.saved !== undefined ?
-                                modal.saveStatus.saved : true
-                        }
-                        isDocumentNotSaved={
-                            (modal.saveStatus && !modal.saveStatus.saved) &&
-                            (modal.validStatus &&
-                                !modal.validStatus.initialValue)
-                        }
-                     />
-                 }
-
-                 {rawModal.visible &&
-                     <RawModal
-                         modalTitle={modalTitle}
-                     >
-                        <div className="document-lists-wrapper">
-                             <DocumentList
-                                 type="grid"
-                                 windowType={rawModal.type}
-                                 defaultViewId={rawModal.viewId}
-                                 selected={selected}
-                                 selectedWindowType={selectedWindowType}
-                                 setModalTitle={this.setModalTitle}
-                                 isModal={true}
-                                 processStatus={processStatus}
-                                 includedView={includedView}
-                                 inBackground={
-                                     includedView.windowType &&
-                                        includedView.viewId
-                                 }
-                             >
-                             </DocumentList>
-                             {includedView.windowType && includedView.viewId &&
-                                 <DocumentList
-                                     type="includedView"
-                                     selected={selected}
-                                     selectedWindowType={selectedWindowType}
-                                     windowType={includedView.windowType}
-                                     defaultViewId={includedView.viewId}
-                                     isIncluded={true}
-                                 />
-                             }
-                        </div>
-                     </RawModal>
-                 }
                  <DocumentList
                      type="grid"
                      updateUri={this.updateUriCallback}

diff --git a/src/containers/InboxAll.js b/src/containers/InboxAll.js
@@ -8,11 +8,16 @@ import Inbox from '../components/inbox/Inbox';
 
 class InboxAll extends Component {
     render() {
-        const {inbox} = this.props;
+        const {
+            inbox, modal, rawModal, processStatus, indicator, selected, 
+            includedView
+        } = this.props;
 
         return (
             <Container
                 siteName = "Inbox"
+                {...{modal, rawModal, processStatus, indicator, selected,
+                    includedView}}
             >
                 <Inbox
                     all={true}
@@ -24,15 +29,36 @@ class InboxAll extends Component {
 }
 
 function mapStateToProps(state) {
-    const { appHandler } = state;
+    const { appHandler, windowHandler, listHandler  } = state;
+
     const {
-        inbox
+        inbox,
+        processStatus
     } = appHandler || {
-        inbox: {}
+        inbox: {},
+        processStatus: ''
+    }
+
+    const {
+        modal,
+        rawModal,
+        selected,
+        indicator,
+    } = windowHandler || {
+        modal: false,
+        rawModal: false,
+        selected: [],
+        indicator: ''
+    }
+
+    const {
+        includedView
+    } = listHandler || {
+        includedView: {}
     }
 
     return {
-        inbox
+        inbox, modal, rawModal, selected, indicator, includedView, processStatus
     }
 }