Send editable fields' values to backend before view is deleted #1361

- Move view_editor_render_mode values in constants.js - Create patchAll action in WindowActions
metasfresh · Dec 1, 2017 · 478dd71 · 478dd71
1 parent 24cf628
commit 478dd71
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 19 deletions.
diff --git a/src/actions/WindowActions.js b/src/actions/WindowActions.js
@@ -449,6 +449,28 @@ export function initWindow(windowType, docId, tabId, rowId = null, isAdvanced) {
     }
 }
 
+export function patchAll(entity, windowType, viewId, rows) {
+    return dispatch => {
+        dispatch(indicatorState('pending'));
+        let patchRequests = [];
+        const isEdit = true;
+
+        rows.map(row => {
+            patchRequests.push(patchRequest({
+                entity,
+                docType: windowType,
+                viewId,
+                isEdit,
+                ...row
+            }));
+        });
+
+        axios.all(patchRequests).then(() => {
+            dispatch(indicatorState('saved'));
+        })
+    }
+}
+
 /*
  *  Wrapper for patch request of widget elements
  *  when responses should merge store

diff --git a/src/components/Container.js b/src/components/Container.js
@@ -112,9 +112,15 @@ class Container extends Component {
                             windowType={rawModal.type}
                             viewId={rawModal.viewId}
                             masterDocumentList={masterDocumentList}
+                            childRef={this.documentListComponent}
                         >
                             <div className="document-lists-wrapper">
                                 <DocumentList
+                                    ref={(c) => {
+                                        this.documentListComponent = (
+                                            c && c.getWrappedInstance()
+                                        );
+                                    }}
                                     type="grid"
                                     windowType={rawModal.type}
                                     defaultViewId={rawModal.viewId}

diff --git a/src/components/app/DocumentList.js b/src/components/app/DocumentList.js
@@ -65,6 +65,7 @@ class DocumentList extends Component {
         const { defaultViewId, defaultPage, defaultSort } = props;
 
         this.pageLength = 20;
+        this.table = null;
 
         this.state = {
             data: null,
@@ -78,7 +79,7 @@ class DocumentList extends Component {
             clickOutsideLock: false,
 
             isShowIncluded: false,
-            hasShowIncluded: false
+            hasShowIncluded: false,
         };
 
         this.fetchLayoutAndData();
@@ -548,6 +549,10 @@ class DocumentList extends Component {
         }
     }
 
+    handlePatchAllEditFields = () => {
+        this.table && this.table.patchAllEditFields();
+    }
+
     render() {
         const {
             windowType, open, closeOverlays, selected, inBackground,
@@ -557,7 +562,7 @@ class DocumentList extends Component {
         } = this.props;
         const {
             layout, data, viewId, clickOutsideLock, page, filters,
-            isShowIncluded, hasShowIncluded, refreshSelection,
+            isShowIncluded, hasShowIncluded, refreshSelection
         } = this.state;
 
         const hasIncluded = layout && layout.includedView && includedView &&
@@ -652,7 +657,7 @@ class DocumentList extends Component {
                                 entity="documentView"
                                 ref={c => this.table =
                                     c && c.getWrappedInstance()
-                                    && c.getWrappedInstance().refs.instance
+                                    && c.getWrappedInstance().instanceRef
                                 }
                                 rowData={{1: data.result}}
                                 cols={layout.elements}

diff --git a/src/components/app/RawModal.js b/src/components/app/RawModal.js
@@ -25,6 +25,7 @@ class RawModal extends Component {
     state = {
         scrolled: false,
         isTooltipShow: false,
+        closeModal: false
     }
 
     componentDidMount() {
@@ -48,6 +49,16 @@ class RawModal extends Component {
         this.removeEventListeners();
     }
 
+    componentDidUpdate() {
+        if (this.state.closeModal) {
+            const {closeCallback, viewId, windowType} = this.props;
+            const {isNew} = this.state;
+            closeCallback && closeCallback(isNew);
+            deleteView(windowType, viewId);
+            this.removeModal();
+        }
+    }
+
     toggleTooltip = (visible) => {
         this.setState({
             isTooltipShow: visible
@@ -79,12 +90,11 @@ class RawModal extends Component {
     }
 
     handleClose = () => {
-        const {closeCallback, viewId, windowType} = this.props;
-        const {isNew} = this.state;
-
-        closeCallback && closeCallback(isNew);
-        deleteView(windowType, viewId);
-        this.removeModal();
+        const { childRef } = this.props;
+        childRef && childRef.handlePatchAllEditFields();
+        this.setState({
+            closeModal: true
+        });
     }
 
     removeModal = () => {
@@ -144,7 +154,8 @@ class RawModal extends Component {
                             {isTooltipShow &&
                                 <Tooltips
                                     name={keymap.APPLY}
-                                    action={counterpart.translate('modal.actions.done')}
+                                    action={counterpart
+                                        .translate('modal.actions.done')}
                                     type={''}
                                 />
                             }

diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -12,6 +12,7 @@ import {
     mapIncluded,
     collapsedMap,
     getZoomIntoWindow,
+    patchAll,
 } from '../../actions/WindowActions';
 import { deleteRequest } from '../../actions/GenericActions';
 
@@ -25,6 +26,7 @@ import TableItem from './TableItem';
 import TablePagination from './TablePagination';
 import TableHeader from './TableHeader';
 import TableContextMenu from './TableContextMenu';
+import { VIEW_EDITOR_RENDER_MODES_NEVER }  from '../../constants/Constants';
 
 class Table extends Component {
     constructor(props) {
@@ -66,7 +68,7 @@ class Table extends Component {
         const {
             dispatch, mainTable, open, rowData, defaultSelected,
             disconnectFromState, type, refreshSelection,
-            openIncludedViewOnSelect, viewId, isModal, hasIncluded,
+            openIncludedViewOnSelect, viewId, isModal, hasIncluded
         } = this.props;
 
         const {
@@ -164,6 +166,31 @@ class Table extends Component {
         }
     }
 
+    patchAllEditFields = () => {
+        const {dispatch, cols, entity, windowType, viewId} = this.props;
+        const {rows} = this.state;
+        let editableRows = [];
+        rows.map((row) => {
+            cols.map(col => {
+                const property = col.fields[0].field;
+                const field = row.fieldsByName[property];
+                const value = field ? field.value : '';
+                const viewEditorRenderMode =
+                    (field && field.viewEditorRenderMode) ||
+                    col.viewEditorRenderMode;
+                if (viewEditorRenderMode !== VIEW_EDITOR_RENDER_MODES_NEVER) {
+                    editableRows.push({
+                        rowId: row.id,
+                        property,
+                        value
+                    });
+                }
+            })
+        });
+
+        dispatch(patchAll(entity, windowType, viewId, editableRows));
+    }
+
     getIndentData = (selectFirst) => {
         const {
             rowData, tabid, indentSupported, collapsible, expandedDepth,

diff --git a/src/components/table/TableItem.js b/src/components/table/TableItem.js
@@ -2,12 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import TableCell from './TableCell';
-
-const VIEW_EDITOR_RENDER_MODES = [
-    'never',
-    'on-demand',
-    'always'
-]
+import {
+    VIEW_EDITOR_RENDER_MODES_ON_DEMAND,
+    VIEW_EDITOR_RENDER_MODES_ALWAYS
+ }  from '../../constants/Constants';
 
 class TableItem extends Component {
     constructor(props) {
@@ -138,7 +136,7 @@ class TableItem extends Component {
 
     isAllowedFieldEdit = (item) => {
         return item.viewEditorRenderMode ===
-            VIEW_EDITOR_RENDER_MODES[1];
+            VIEW_EDITOR_RENDER_MODES_ON_DEMAND;
     }
 
     renderCells = (cols, cells) => {
@@ -169,7 +167,7 @@ class TableItem extends Component {
                 let isEditable = ((cells && cells[property] &&
                     cells[property].viewEditorRenderMode
                 ) || item.viewEditorRenderMode
-                    ) === VIEW_EDITOR_RENDER_MODES[2];
+                    ) === VIEW_EDITOR_RENDER_MODES_ALWAYS;
 
                 let widgetData = item.fields.map(
                     (prop) => {

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -1,2 +1,5 @@
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
 export const LOCAL_LANG = 'metasfreshLanguage';
+export const VIEW_EDITOR_RENDER_MODES_NEVER = 'never';
+export const VIEW_EDITOR_RENDER_MODES_ON_DEMAND = 'on-demand';
+export const VIEW_EDITOR_RENDER_MODES_ALWAYS = 'always';