Merge pull request #1 from typesettin/master

Update Master

adminclient/_src/components/App/Main.js

@@ -104,7 +104,7 @@ var MainApp = function (_Component) {
       // console.log('componentWillReceiveProps nextProps', nextProps);
       this.setState(nextProps);
       if (document && document.body && document.body.setAttribute) {
-        document.body.setAttribute('id', encodeURIComponent(nextProps.location.pathname));
+        document.body.setAttribute('id', encodeURIComponent(nextProps.location.pathname).replace(new RegExp(/%2F|%2/, 'g'), '_'));
       }
     }
   }, {

adminclient/_src/components/AppLayoutMap/index.js

@@ -282,8 +282,9 @@ function getRenderedComponent(componentObject, resources, debug) {
       }) : typeof componentObject.children === 'undefined' ? renderedCompProps && renderedCompProps.children && typeof renderedCompProps.children === 'string' ? renderedCompProps.children : null : componentObject.children);
     }
   } catch (e) {
-    console.error(e, e.stack ? e.stack : 'no stack');
     console.error({ componentObject: componentObject, resources: resources }, 'this', this);
-    return (0, _react.createElement)('div', {}, e.toString());
+    console.error(e, e.stack ? e.stack : 'no stack');
+    throw e;
+    // return createElement('div', {}, e.toString());
   }
 }

adminclient/_src/components/AppOverlay/index.js

@@ -197,12 +197,16 @@ var ModalUI = function (_Component2) {
               footerContent: footerContent,
               isActive: true,
               onCloseRequest: _this4.props.hide,
-              className: 'animated ' + (_this4.props.animation ? _this4.props.animation : 'zoomIn') + ' Medium-Speed',
+              className: 'animated ' + _this4.props.modalClassName + ' ' + (_this4.props.animation ? _this4.props.animation : 'zoomIn') + ' Medium-Speed',
               showOverlayCloseButton: false
             },
-            _react2.default.createElement(
+            _this4.props.noContentWrapper ? _react2.default.createElement(
+              'div',
+              _this4.props.modalContentProps,
+              modelContent
+            ) : _react2.default.createElement(
               _reBulma.Content,
-              null,
+              _this4.props.modalContentProps,
               modelContent
             )
           )

adminclient/_src/components/ResponsiveForm/FormElements.js

@@ -281,6 +281,23 @@ function getPassablePropsKeyEvents(passableProps, formElement) {
   return passableProps;
 }
 
+function getFunctionFromProps(options) {
+  var propFunc = options.propFunc;
+
+
+  if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props.reduxRouter') !== -1) {
+    return this.props.reduxRouter[this.props.replace('func:this.props.reduxRouter.', '')];
+  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props') !== -1) {
+    return this.props[this.props.replace('func:this.props.', '')];
+  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:window') !== -1 && typeof window[propFunc.replace('func:window.', '')] === 'function') {
+    return window[propFunc.replace('func:window.', '')];
+  } else if (typeof this.props[propFunc] === 'function') {
+    return propFunc;
+  } else {
+    return function () {};
+  }
+}
+
 function getFormDatatable(options) {
   var _this3 = this;
 
@@ -293,10 +310,12 @@ function getFormDatatable(options) {
   var getTableHeaders = function getTableHeaders(row) {
     return row.map(function (rowkey) {
       var selectOptions = _this3.state.__formOptions && _this3.state.__formOptions[rowkey] ? _this3.state.__formOptions[rowkey] : [];
+      // console.log({ selectOptions });
+
       return {
         label: (0, _capitalize2.default)(rowkey),
         sortid: rowkey,
-        sortable: formElement.sortable ? formElement.sortable : true,
+        sortable: typeof formElement.sortable !== 'undefined' ? formElement.sortable : true,
         formtype: formElement.tableHeaderType && formElement.tableHeaderType[rowkey] ? formElement.tableHeaderType[rowkey] : 'text',
         defaultValue: formElement.tableHeaderDefaultValue && formElement.tableHeaderDefaultValue[rowkey] ? formElement.tableHeaderDefaultValue[rowkey] : selectOptions.length ? selectOptions[0].value : undefined,
         formoptions: selectOptions,
@@ -339,6 +358,7 @@ function getFormDatatable(options) {
     hasPagination: false,
     tableForm: true
   }, formElement.passProps); // formElement.datalist,
+  // console.log({ tableHeaders, useRowButtons,passedProps });
   // console.debug({tableHeaders})
   // let shape ={};// this is the header of of the footer which has elements for new insert
   // let inlineshape ={};// if true, should look like a regular form row, else form below
@@ -357,7 +377,11 @@ function getFormDatatable(options) {
         var updatedStateProp = (0, _assign2.default)((0, _defineProperty3.default)({
           formDataTables: (0, _assign2.default)({}, _this3.state.formDataTables, (0, _defineProperty3.default)({}, formElement.name, newvalue.rows))
         }, formElement.name, newvalue.rows), flattenedData, selectedRowData);
-        // console.debug({ flattenedData,updatedStateProp });
+        if (formElement.onChangeFilter) {
+          var onChangeFunc = getFunctionFromProps.call(_this3, { propFunc: formElement.onChangeFilter });
+          updatedStateProp = onChangeFunc.call(_this3, (0, _assign2.default)({}, _this3.state, updatedStateProp), updatedStateProp);
+        }
+        // console.debug('DATATABLE',updatedStateProp);
         _this3.setState(updatedStateProp);
       },
       value: initialValue })),
@@ -726,6 +750,10 @@ function getFormSwitch(options) {
       updatedStateProp[_this8.state[formElement.formdata_name] || formElement.name] = _this8.state[_this8.state[formElement.formdata_name] || formElement.name] ? 0 : 'on';
 
       // console.debug('after', { updatedStateProp, formElement, }, event.target);
+      if (formElement.onChange) {
+        var onChangeFunc = getFunctionFromProps.call(_this8, { propFunc: formElement.onChange });
+        onChangeFunc.call(_this8, (0, _assign2.default)({}, _this8.state, updatedStateProp), updatedStateProp);
+      }
       _this8.setState(updatedStateProp, function () {
         if (formElement.validateOnChange) {
           _this8.validateFormElement({ formElement: formElement });
@@ -1073,7 +1101,9 @@ function getFormSubmit(options) {
 
   var passableProps = (0, _assign2.default)({
     state: formElement.confirmModal && (0, _keys2.default)(this.state.formDataErrors).length > 0 ? 'isDisabled' : undefined
-  }, formElement.passProps);
+  }, this.props.useLoadingButtons && this.state.__formIsSubmitting ? {
+    state: 'isLoading'
+  } : {}, formElement.passProps);
   return _react2.default.createElement(
     _FormItem2.default,
     (0, _extends3.default)({ key: i }, formElement.layoutProps),

adminclient/_src/components/ResponsiveForm/index.js

@@ -108,10 +108,27 @@ var defaultProps = {
   dynamicField: false,
   blockPageUI: false,
   cardForm: false,
+  useLoadingButtons: false,
+  includeFormDataOnLayout: false,
   onSubmit: 'func:this.props.debug',
   formgroups: []
 };
 
+function getFunctionFromProps(options) {
+  var propFunc = options.propFunc;
+
+
+  if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props.reduxRouter') !== -1) {
+    return this.props.reduxRouter[this.props.replace('func:this.props.reduxRouter.', '')];
+  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props') !== -1) {
+    return this.props[this.props.replace('func:this.props.', '')];
+  } else if (typeof propFunc === 'string' && propFunc.indexOf('func:window') !== -1 && typeof window[propFunc.replace('func:window.', '')] === 'function') {
+    return window[propFunc.replace('func:window.', '')];
+  } else if (typeof this.props[propFunc] === 'function') {
+    return propFunc;
+  }
+}
+
 var ResponsiveForm = function (_Component) {
   (0, _inherits3.default)(ResponsiveForm, _Component);
 
@@ -132,6 +149,7 @@ var ResponsiveForm = function (_Component) {
     // console.debug({ formdata });
 
     _this.state = (0, _assign2.default)({
+      __formIsSubmitting: false,
       formDataError: null,
       formDataErrors: {},
       __formDataStatusDate: new Date().toString(),
@@ -141,6 +159,7 @@ var ResponsiveForm = function (_Component) {
     },
     // customProps.formdata,
     customPropsFormdata);
+
     _this.datalists = {};
 
     _this.getRenderedComponent = _AppLayoutMap.getRenderedComponent.bind(_this);
@@ -169,7 +188,7 @@ var ResponsiveForm = function (_Component) {
   (0, _createClass3.default)(ResponsiveForm, [{
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
-      // console.debug('componentWillReceiveProps', nextProps);
+      // console.warn('componentWillReceiveProps', nextProps);
       var formdata = nextProps.flattenFormData ? (0, _flat2.default)((0, _assign2.default)({}, nextProps.formdata), nextProps.flattenDataOptions) : nextProps.formdata;
       formdata = (0, _assign2.default)({}, nextProps.useDynamicData ? this.props.getState().dynamic.formdata : {}, formdata);
       var __formOptions = nextProps.useFormOptions ? (0, _assign2.default)({}, nextProps.useDynamicData && nextProps.getState() ? nextProps.getState().dynamic.__formOptions : {}, nextProps.__formOptions) : undefined;
@@ -212,14 +231,17 @@ var ResponsiveForm = function (_Component) {
       var formSuccessCallbacks = _FormHelpers.handleSuccessCallbacks.bind(this);
       var __formStateUpdate = function __formStateUpdate() {
         _this2.setState({
+          __formIsSubmitting: false,
           __formDataStatusDate: new Date().toString()
         });
 
         if (_this2.props.blockPageUI) {
           _this2.props.setUILoadedState(true);
         }
       };
-
+      this.setState({
+        __formIsSubmitting: true
+      });
       delete formdata.formDataLists;
       delete formdata.__formDataStatusDate;
       delete formdata.formDataTables;
@@ -334,7 +356,12 @@ var ResponsiveForm = function (_Component) {
   }, {
     key: 'componentWillUpdate',
     value: function componentWillUpdate(nextProps, nextState) {
+      if (this.props.filterFunction) {
+        var filterFunction = getFunctionFromProps.call(this, { propFunc: this.props.filterFunction });
+        nextState = filterFunction.call(this, nextState);
+      }
       if (this.props.onChange) {
+
         var formdata = (0, _assign2.default)({}, nextState);
         var submitFormData = formdata;
         delete formdata.formDataFiles;
@@ -343,6 +370,8 @@ var ResponsiveForm = function (_Component) {
         delete formdata.formDataStatusDate;
         delete formdata.formDataLists;
         delete formdata.formDataTables;
+        delete formdata.__formDataStatusDate;
+        delete formdata.__formOptions;
         // console.warn('TODO:this should eventually use the same logic as submitform');
         if (typeof this.props.onChange === 'string' && this.props.onChange.indexOf('func:this.props') !== -1) {
           if (this.props.onChange === 'func:this.props.setDynamicData') {
@@ -422,10 +451,14 @@ var ResponsiveForm = function (_Component) {
           } else if (formElement.type === 'slider') {
             return _this3.getSliderInput({ formElement: formElement, i: j, formgroup: formgroup });
           } else if (formElement.type === 'layout') {
+            var layoutComponent = formElement.value;
+            if (_this3.props.includeFormDataOnLayout) {
+              layoutComponent.props = (0, _assign2.default)({}, layoutComponent.props, { formdata: _this3.state });
+            }
             return _react2.default.createElement(
               _reBulma.Column,
               (0, _extends3.default)({ key: j }, formElement.layoutProps),
-              _this3.getRenderedComponent(formElement.value)
+              _this3.getRenderedComponent(formElement.value, _this3.state)
             );
           } else if (formElement.type === 'submit') {
             return _this3.getFormSubmit({ formElement: formElement, i: j, formgroup: formgroup });
@@ -607,11 +640,40 @@ var ResponsiveForm = function (_Component) {
     }
   }, {
     key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps, prevState) {
       // console.log('componentDidUpdate this.props.error', this.props.error);
       if (this.props.formerror) {
         this.props.onError(this.props.formerror);
       }
+      if (this.props.filterFunction) {
+        var filterFunction = getFunctionFromProps.call(this, { propFunc: this.props.filterFunction });
+        prevState = filterFunction.call(this, prevState);
+      }
+      if (this.props.afterChange) {
+
+        var formdata = (0, _assign2.default)({}, prevState);
+        var submitFormData = formdata;
+        delete formdata.formDataFiles;
+        delete formdata.formDataErrors;
+        delete formdata.formDataError;
+        delete formdata.formDataStatusDate;
+        delete formdata.formDataLists;
+        delete formdata.formDataTables;
+        delete formdata.__formDataStatusDate;
+        delete formdata.__formOptions;
+        // console.warn('TODO:this should eventually use the same logic as submitform');
+        if (typeof this.props.afterChange === 'string' && this.props.afterChange.indexOf('func:this.props') !== -1) {
+          if (this.props.afterChange === 'func:this.props.setDynamicData') {
+            this.props.setDynamicData(this.props.dynamicField, submitFormData);
+          } else {
+            this.props[this.props.afterChange.replace('func:this.props.', '')](submitFormData);
+          }
+        } else if (typeof this.props.afterChange === 'string' && this.props.afterChange.indexOf('func:window') !== -1 && typeof window[this.props.afterChange.replace('func:window.', '')] === 'function') {
+          window[this.props.afterChange.replace('func:window.', '')].call(this, submitFormData);
+        } else if (typeof this.props.afterChange === 'function') {
+          this.props.onChange(prevState);
+        }
+      }
     }
   }]);
   return ResponsiveForm;

adminclient/_src/components/ResponsiveTable/TableHelpers.js

@@ -73,7 +73,9 @@ var propTypes = exports.propTypes = {
   replaceButtonLabel: _react.PropTypes.string,
   uploadAddButton: _react.PropTypes.bool,
   uploadAddButtonProps: _react.PropTypes.any,
-  uploadAddButtonLabel: _react.PropTypes.string
+  uploadAddButtonLabel: _react.PropTypes.string,
+  useUpArrowButton: _react.PropTypes.bool,
+  useDownArrowButton: _react.PropTypes.bool
 };
 
 var defaultProps = exports.defaultProps = {
@@ -157,7 +159,12 @@ var defaultProps = exports.defaultProps = {
     trimFieldValues: true
   },
   includeAllLimits: true,
-  numOfLimits: [1, 5, 10, 20, 50, 100, 500, 1000]
+  numOfLimits: [1, 5, 10, 20, 50, 100, 500, 1000],
+  useUpArrowButton: true,
+  useDownArrowButton: true,
+  containerProps: {
+    className: '__ra_rtable'
+  }
 };
 
 function getOptionsHeaders(props, propHeaders) {
@@ -201,7 +208,7 @@ function excludeEmptyHeaders(options) {
   if (excludeEmptyHeaders) {
     headers.forEach(function (header, i) {
       // console.debug('headers[ i ]', headers[ i ], { header, });
-      if (!headers[i].sortid && !headers[i].label) {
+      if (!headers[i].sortid && !headers[i].label && !headers[i].formRowButtons) {
         delete headers[i];
       }
     });

adminclient/_src/components/ResponsiveTable/index.js

@@ -161,7 +161,7 @@ var ResponsiveTable = function (_Component) {
       numPages: Math.ceil(props.numItems / props.limit),
       numButtons: props.numButtons,
       isLoading: false,
-      sortProp: _this.props.searchField || 'createdat',
+      sortProp: _this.props.searchField || '_id',
       sortOrder: 'desc',
       filterRowData: [],
       filterRowNewData: _TableHelpers.defaultNewRowData,
@@ -205,7 +205,7 @@ var ResponsiveTable = function (_Component) {
         excludeEmptyHeaders: nextProps.excludeEmptyHeaders
       });
       if (nextProps.flattenRowData) {
-        rows = rows.map(function (row) {
+        rows = (rows || []).map(function (row) {
           return (0, _assign2.default)({}, row, (0, _flat.flatten)(row, nextProps.flattenRowDataOptions));
         });
       }
@@ -423,11 +423,7 @@ var ResponsiveTable = function (_Component) {
           newSortOptions.sortOrder = this.state.sortOrder === 'desc' || this.state.sortOrder === '-' ? 'desc' : 'asc';
           updatedState.rows = updatedState.rows.sort(_util2.default.sortObject(newSortOptions.sortOrder, newSortOptions.sortProp));
         }
-        if (this.props.tableSearch && this.props.searchField && options.search) {
-          updatedState.rows = this.props.rows.filter(function (row) {
-            return row[_this5.props.searchField].indexOf(options.search) !== -1;
-          });
-        }
+
         if (this.props.tableSearch && this.state.filterRowData && this.state.filterRowData.length) {
           var filteredRows = [];
           updatedState.rows.forEach(function (row) {
@@ -490,6 +486,11 @@ var ResponsiveTable = function (_Component) {
           updatedState.rows = filteredRows;
           // console.debug('updatedState.rows', updatedState.rows, { filteredRows, });
         }
+        if (this.props.tableSearch && this.props.searchField && options.search) {
+          updatedState.rows = (updatedState.rows || this.props.rows).filter(function (row) {
+            return row[_this5.props.searchField] && row[_this5.props.searchField].indexOf(options.search) !== -1;
+          });
+        }
         updatedState.numPages = Math.ceil(updatedState.rows.length / this.state.limit);
         updatedState.limit = this.state.limit;
         updatedState.currentPage = typeof options.pagenum !== 'undefined' ? options.pagenum : this.state.currentPage && this.state.currentPage <= updatedState.numPages ? this.state.currentPage : 1;
@@ -699,7 +700,9 @@ var ResponsiveTable = function (_Component) {
         if (typeof options.idx !== 'undefined' && typeof returnValue === 'string' && returnValue.indexOf('--idx-ctr--') !== -1) {
           returnValue = returnValue.replace('--idx-ctr--', options.idx + 1);
         }
-        if (options.momentFormat) {
+        if (options.momentFromNow) {
+          returnValue = (0, _moment2.default)(value).fromNow();
+        } else if (options.momentFormat) {
           returnValue = (0, _moment2.default)(value).format(options.momentFormat);
         } else if (options.numeralFormat) {
           returnValue = (0, _numeral2.default)(value).format(options.numeralFormat);
@@ -1450,7 +1453,7 @@ var ResponsiveTable = function (_Component) {
         ) : null,
         _react2.default.createElement(
           'div',
-          { style: { overflow: 'hidden', height: '100%' } },
+          { style: (0, _assign2.default)({ overflow: 'hidden', height: '100%' }, this.props.tableWrappingStyle) },
           this.state.isLoading ? _react2.default.createElement(
             'div',
             { style: {
@@ -1575,14 +1578,14 @@ var ResponsiveTable = function (_Component) {
                       return _react2.default.createElement(
                         rb.Td,
                         (0, _extends3.default)({ key: 'row' + rowIndex + 'col' + colIndex, style: { textAlign: 'right' } }, header.columnProps),
-                        rowIndex !== 0 ? _react2.default.createElement(
+                        rowIndex !== 0 && _this8.props.useUpArrowButton ? _react2.default.createElement(
                           rb.Button,
                           (0, _extends3.default)({}, _this8.props.formRowUpButton, { onClick: function onClick() {
                               _this8.moveRowUp(rowIndex);
                             } }),
                           _this8.props.formRowUputtonLabel ? _this8.props.formRowUputtonLabel : '⇧'
                         ) : null,
-                        rowIndex < _this8.state.rows.length - 1 ? _react2.default.createElement(
+                        rowIndex < _this8.state.rows.length - 1 && _this8.props.useDownArrowButton ? _react2.default.createElement(
                           rb.Button,
                           (0, _extends3.default)({}, _this8.props.formRowDownButton, { onClick: function onClick() {
                               _this8.moveRowDown(rowIndex);