@configuratorware/configurator-admingui 1.26.5 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.26.5",
+  "version": "1.27.2",
   "license": "UNLICENSED",
   "private": false,
   "files": [
@@ -87,7 +87,7 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^3.0.2",
     "react-sortable-hoc": "^1.3.1",
-    "redhotmagma-visualization": "1.26.5",
+    "redhotmagma-visualization": "1.27.2",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Data.js

@@ -18,6 +18,15 @@ validate.validators.emptyOrPositive = function(value, options) {
     return t('customValidators.numericality');
 };
 
+validate.validators.numericOrEmpty = function (value, options) {
+    if (value === '' || value === null ) {
+        return null;
+    }
+    else {
+        return validate.validators.numericality(value, options);
+    }
+}
+
 validate.validators.identifier = function(value, options) {
     const pattern = /^[A-za-z0-9_.-]+$/;
     if (

package/src/App/Reducers/Common/OrderList/Actions.js

@@ -2,13 +2,15 @@ import { dispatchFetchData } from '../../Api/Helpers';
 
 export const COMPONENT_KEY = 'order_list';
 export const COMPONENT_KEY_SAVE = 'order_list_save';
+export const ORDER_LIST_SET_DATA_FIELD = 'ORDER_LIST//setDataField'
 export const ORDER_LIST_SET_URL = 'ORDER_LIST//setUrl';
 export const ORDER_LIST_MOVE_ITEM = 'ORDER_LIST//moveItem';
 export const ORDER_LIST_SAVE_LIST = 'ORDER_LIST//saveList';
 export const ORDER_LIST_SET_STATUS = 'ORDER_LIST//setStatus';
 
-export const loadList = dispatch => (url, entity, orderSequenceNumber, filters = {}) => {
-    dispatch(setUrl(url));
+export const loadList = dispatch => (url, entity, orderSequenceNumber, filters = {}, dataField = null, postUrl = null) => {
+    dispatch(setUrl(url, postUrl));
+    dispatch(setDataField(dataField));
     return dispatchFetchData(dispatch)(COMPONENT_KEY, {
         url,
         params: { orderby: `${entity}.${orderSequenceNumber}`, filters: { ...filters } },
@@ -25,9 +27,15 @@ export const saveList = () => ({
     type: ORDER_LIST_SAVE_LIST,
 });
 
-export const setUrl = url => ({
+export const setUrl = (url, postUrl) => ({
     type: ORDER_LIST_SET_URL,
     url,
+    postUrl
+});
+
+export const setDataField = dataField => ({
+    type: ORDER_LIST_SET_DATA_FIELD,
+    dataField,
 });
 
 export const setSaveStatus = (status, error = null) => ({

package/src/App/Reducers/Common/OrderList/Listener.js

@@ -5,12 +5,12 @@ import { dispatchPostData, RECEIVE_DATA } from '../../Api/Helpers';
 export const orderListListener = {
     [ORDER_LIST_SAVE_LIST]: (action, dispatch, state) => {
         const { orderList } = state;
-        const { list, url } = orderList;
+        const { list, url, postUrl } = orderList;
         const data = list.map(({ id }, idx) => ({
             id,
             sequencenumber: idx + 1,
         }));
-        dispatchPostData(dispatch)(COMPONENT_KEY_SAVE, `${url}/savesequencenumbers`, data).then(res => {
+        dispatchPostData(dispatch)(COMPONENT_KEY_SAVE, postUrl || `${url}/savesequencenumbers`, data).then(res => {
             if (res.type === RECEIVE_DATA) {
                 dispatch(setSaveStatus(true));
             } else {

package/src/App/Reducers/Common/OrderList/Reducer.js

@@ -1,6 +1,12 @@
 import { RECEIVE_DATA } from '../../Api/Helpers';
 
-import { COMPONENT_KEY, ORDER_LIST_MOVE_ITEM, ORDER_LIST_SET_URL, ORDER_LIST_SET_STATUS } from './Actions';
+import {
+    COMPONENT_KEY,
+    ORDER_LIST_MOVE_ITEM,
+    ORDER_LIST_SET_URL,
+    ORDER_LIST_SET_STATUS,
+    ORDER_LIST_SET_DATA_FIELD
+} from './Actions';
 
 import { arrayMove } from 'react-sortable-hoc';
 import { addReduxListener } from '../../../ReduxListener';
@@ -11,16 +17,20 @@ addReduxListener(orderListListener);
 const initialState = {
     list: null,
     url: null,
+    postUrl: null,
     saved: null,
+    dataField: null,
 };
 
 export const orderList = (state = initialState, action = {}) => {
     switch (action.type) {
         case RECEIVE_DATA: {
             if (action.key === COMPONENT_KEY) {
+                const { dataField } = state;
+                const list = (dataField && action.data && action.data[dataField]) ? action.data[dataField] : action.data.data;
                 return {
                     ...state,
-                    list: action.data.data,
+                    list
                 };
             }
             return state;
@@ -35,11 +45,20 @@ export const orderList = (state = initialState, action = {}) => {
             };
         }
 
+        case ORDER_LIST_SET_DATA_FIELD: {
+            const { dataField } = action;
+            return {
+                ...state,
+                dataField
+            };
+        }
+
         case ORDER_LIST_SET_URL: {
-            const { url } = action;
+            const { url, postUrl } = action;
             return {
                 ...state,
                 url,
+                postUrl,
                 list: null,
                 saved: null,
             };

package/src/App/Styles.scss

@@ -42,8 +42,16 @@ div + h2 {
   min-height: calc(100vh - 64px);
   position: relative;
 }
-
+.hideSave {
+  .form-inner > .action-buttons {
+    display: none
+  }
+}
+.hint {
+  font-size: 15px
+}
 .split-left {
+  overflow-x: auto;
   width: 50%;
   float: left;
   display: inline-block;
@@ -53,11 +61,21 @@ div + h2 {
   width: 50%;
   display: inline-block;
   padding-left: 0.6em;
+  padding-top: 40px;
+  position: relative;
+  .close-details {
+    position: absolute;
+    right: -10px;
+    top: -5px;
+  }
 }
 @media (max-width: 960px) {
   .split-left {
     display: none;
   }
+  .withDetails.hint {
+    display: none;
+  }
   .split-right {
     width: 100%;
     padding: 0;

package/src/Components/DefaultConnectedScreen.js

@@ -53,10 +53,11 @@ export const generateConnectedSplitScreen = (
     reducerName,
     invalidateListAction,
     unsavedEntityAction,
-    hideDetailsAction
+    hideDetailsAction,
+    hintText = null
 ) => {
     return connectDefault(
-        generateDefaultScreen(title, ListComponent, EditComponent),
+        generateDefaultScreen(title, ListComponent, EditComponent, hintText),
         reducerName,
         invalidateListAction,
         unsavedEntityAction,

package/src/Components/DefaultScreen.js

@@ -63,11 +63,13 @@ export default class DefaultScreen extends Component {
             ListComponent,
             EditComponent,
             ScreenComponent,
+            hintText,
             ...otherProps
         } = this.props;
         return (
             <ScreenComponent
                 headlineText={title && T(title)}
+                hintText={hintText}
                 showDetails={showDetails}
                 listComponent={<ListComponent {...otherProps} />}
                 detailsComponent={<EditComponent {...otherProps} />}
@@ -77,9 +79,15 @@ export default class DefaultScreen extends Component {
     }
 }
 
-export const generateDefaultScreen = (title, ListComponent, EditComponent) => {
+export const generateDefaultScreen = (title, ListComponent, EditComponent, hintText = null) => {
     return props => (
-        <DefaultScreen title={title} ListComponent={ListComponent} EditComponent={EditComponent} {...props} />
+        <DefaultScreen
+            title={title}
+            hintText={hintText}
+            ListComponent={ListComponent}
+            EditComponent={EditComponent}
+            {...props}
+        />
     );
 };
 

package/src/Components/Form.js

@@ -15,6 +15,7 @@ import File from './FormFragments/File';
 import SimpleTextEditor from './FormFragments/SimpleTextEditor';
 import MonacoEditor from './FormFragments/MonacoEditor';
 import InputGroup from './FormFragments/InputGroup';
+import HintText from './FormFragments/HintText';
 import Label from './FormFragments/Label';
 import MarkDown from './FormFragments/MarkDown';
 import ValidatorCallbackProvider from './ValidatorCallbackProvider';
@@ -74,6 +75,8 @@ const getInputComponentByType = type => {
             return InputGroup;
         case 'markDown':
             return MarkDown;
+        case 'hinttext':
+            return HintText;
         default:
             return null;
     }
@@ -187,6 +190,7 @@ class ConfigurableForm extends Component {
             onChange: this.onChange,
             onAction: this.onAction,
             renderWrappedInput: this.renderWrappedInput,
+            helperText: input.helperText && T(input.helperText)
         };
 
         if (input.name) {

package/src/Components/FormFragments/HintText.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+export default withStyles(
+    () => ({
+        hint: {
+            fontSize: 15,
+        },
+    }),
+    { name: 'HintText' }
+)(props => {
+    const { classes, renderHintText, value } = props;
+    return <span className={classes.hint}>{renderHintText(value)}</span>;
+});

package/src/Components/FormFragments/InputArray.js

@@ -8,6 +8,7 @@ import Data from '../../App/Data';
 import nestedDataComponent from './NestedDataComponent';
 import { generateObjectPropertyStringComparator } from '../../App/Utils';
 import RaisedButton from '../../UIComponents/RaisedButton';
+import Dialog from '../../UIComponents/Dialog';
 import Add from '../../UIComponents/icons/AddIcon';
 import { withValidatorCallbackContext } from '../ValidatorCallbackProvider';
 
@@ -20,6 +21,7 @@ class InputArray extends Component {
         this.state = {
             showEditor: false,
             selectedRow: false,
+            newItem: false,
         };
     }
 
@@ -117,7 +119,7 @@ class InputArray extends Component {
     onCancel = () => {
         const { schema } = this.props;
         schema.reset();
-        this.setState({ selectedRow: false, showEditor: false });
+        this.setState({ selectedRow: false, showEditor: false, newItem: false });
     };
 
     onDelete = row => {
@@ -138,7 +140,7 @@ class InputArray extends Component {
         }
         const { schema } = this.props;
         schema.reset({ active: this });
-        this.setState({ selectedRow: false, showEditor: true });
+        this.setState({ selectedRow: false, showEditor: true, newItem: !this.state.newItem });
     };
 
     isAddingDisabled() {
@@ -172,14 +174,21 @@ class InputArray extends Component {
     };
 
     render() {
-        const { label, array, value, errors } = this.props;
+        const { label, array, value, errors, buttonsPosition = '', showPopup = false } = this.props;
         const { fields, disableDelete, disableEdit } = array;
+        const { newItem } = this.state;
         const columns = array.columns || fields;
         const selectedRows = this.state.selectedRow === false ? [] : [this.state.selectedRow];
 
         return (
             <div>
                 {label && <div className="label">{label}</div>}
+                {buttonsPosition === 'top' && (
+                    <div className="cancel-button">
+                        {!showPopup && this.renderCancelButton()}
+                        <div className="action-buttons">{this.renderAddButton()}</div>
+                    </div>
+                )}
 
                 {value.length > 0 && (
                     <SimpleTable
@@ -192,17 +201,37 @@ class InputArray extends Component {
                     />
                 )}
 
-                {this.state.showEditor && (
-                    <div>{fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}</div>
-                )}
-
-                <div className="cancel-button">
-                    {this.renderCancelButton()}
-                    <div className="action-buttons">
-                        {this.renderAddButton()}
+                {this.state.showEditor &&
+                    (showPopup ? (
+                        <Dialog open={true}>
+                            <div className="form">{fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}</div>
+                            <div className="overlay-actions">
+                                {newItem && (
+                                    <RaisedButton
+                                        primary={true}
+                                        label={T('Save')}
+                                        onClick={() => {
+                                            this.addNewItem();
+                                            this.setState({ selectedRow: false, showEditor: false });
+                                        }}
+                                    />
+                                )}
+                                <RaisedButton
+                                    label={newItem ? T('Cancel') : T('Close')}
+                                    onClick={this.onCancel}
+                                />
+                            </div>
+                        </Dialog>
+                    ) : (
+                        <div>{fields.map((field, idx) => this.props.renderWrappedInput(field, idx))}</div>
+                    ))}
+
+                {buttonsPosition !== 'top' && (
+                    <div className="cancel-button">
+                        {!showPopup && this.renderCancelButton()}
+                        <div className="action-buttons">{this.renderAddButton()}</div>
                     </div>
-                </div>
-
+                )}
             </div>
         );
     }

package/src/Components/FormFragments/SimpleTable.js

@@ -185,7 +185,16 @@ class SimpleTable extends Component {
                         return (
                             <TableRow key={index} style={style}>
                                 {columns.map((column, i) => (
-                                    <TableRowColumn key={i} style={tableStyle.column}>
+                                    <TableRowColumn
+                                        key={i}
+                                        style={tableStyle.column}
+                                        onClick={e => {
+                                            if (column.disableSelection) {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }
+                                        }}
+                                    >
                                         {column.renderValue
                                             ? column.renderValue(row[column.name], row)
                                             : row[column.name] !== null && row[column.name] !== undefined
@@ -193,7 +202,14 @@ class SimpleTable extends Component {
                                             : ''}
                                     </TableRowColumn>
                                 ))}
-                                <TableRowColumn key="actions" style={tableStyle.actionsColumn}>
+                                <TableRowColumn
+                                    key="actions"
+                                    style={tableStyle.actionsColumn}
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                    }}
+                                >
                                     {this.renderDeleteButton(index)}
                                 </TableRowColumn>
                             </TableRow>

package/src/Components/FormFragments/Styles.scss

@@ -113,3 +113,7 @@
 .twoSideSelect-info {
   color: rgb(158, 158, 158);
 }
+
+.overlay-actions {
+  text-align: right;
+}

package/src/Components/FormFragments/Text.js

@@ -25,6 +25,7 @@ const text = props => (
         }}
         inputProps={props.inputProps}
         rows={props.rows || 1}
+        helperText={props.helperText}
     />
 );
 

package/src/Components/FormFragments/index.js

@@ -24,6 +24,8 @@ import AutocompleteEntity from './AutocompleteEntity';
 export { AutocompleteEntity };
 import Value from './Value';
 export { Value };
+import HintText from './HintText';
+export { HintText };
 
 export default {
     Text,
@@ -39,4 +41,5 @@ export default {
     Chip,
     AutocompleteEntity,
     Value,
+    HintText,
 };

package/src/Components/List.js

@@ -205,6 +205,7 @@ export default class List extends Component {
                     onPaginationChange={this.onPaginationChange}
                     rowsTotal={rowsTotal || data.length}
                     colSpan={columns.length}
+                    currentPage={this.props.listParams.offset / rowsPerPage}
                     rowsPerPage={rowsPerPage}
                     beforeElement={
                         <div style={listStyle.groupButtons}>

package/src/Components/OrderList.js

@@ -17,7 +17,8 @@ import networkConfig from '../App/Config/network';
 const SortableItem = SortableElement(props => {
     return (
         <div>
-            {props.number}. {props.translated_title} {props.identifier && props.identifier}
+            {props.number}. {props.translated_title ? props.translated_title : props.name}
+            {props.identifier && props.identifier}
             {props.thumbUrl && (
                 <img
                     className="sortlistThumb"
@@ -38,9 +39,10 @@ export class OrderList extends React.Component {
         showDialog: false,
     };
 
-    componentWillReceiveProps(props) {
-        if (props.saved) {
+    componentDidUpdate(prevProps) {
+        if (this.props.saved && this.props.saved !== prevProps.saved) {
             this.setState({ showDialog: false });
+            this.props.onListSaved && this.props.onListSaved();
         }
     }
 
@@ -52,7 +54,6 @@ export class OrderList extends React.Component {
 
     saveOrder = () => {
         this.props.saveList();
-        this.setState({ showDialog: false });
     };
 
     openDialog = () => {
@@ -76,7 +77,14 @@ export class OrderList extends React.Component {
         }
 
         this.props
-            .loadList(this.props.listUrl, this.props.entity, this.props.orderSequenceNumber, filters)
+            .loadList(
+                this.props.listUrl,
+                this.props.entity,
+                this.props.orderSequenceNumber,
+                filters,
+                this.props.listField,
+                this.props.saveListUrl
+            )
             .then(() => {
                 this.setState({
                     loading: false,
@@ -152,8 +160,8 @@ const mapStateToProps = ({ designerData, orderList }) => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    loadList: (url, entity, orderSequenceNumber, filters) =>
-        orderListActions.loadList(dispatch)(url, entity, orderSequenceNumber, filters),
+    loadList: (url, entity, orderSequenceNumber, filters, dataField, postUrl) =>
+        orderListActions.loadList(dispatch)(url, entity, orderSequenceNumber, filters, dataField, postUrl),
     moveItem: (oldIndex, newIndex) => dispatch(orderListActions.moveItem(oldIndex, newIndex)),
     saveList: () => dispatch(orderListActions.saveList()),
 });

package/src/Components/Pagination.js

@@ -18,6 +18,14 @@ export default class Pagination extends React.Component {
         };
     }
 
+    componentDidUpdate() {
+        if (this.state.currentPage !== this.props.currentPage) {
+            this.setState({ currentPage: this.props.currentPage });
+        } else if (this.state.rowsPerPage !== this.props.rowsPerPage) {
+            this.setState({ rowsPerPage: this.props.rowsPerPage });
+        }
+    }
+
     componentWillReceiveProps(props) {
         if (props.rowsTotal !== this.props.rowsTotal && props.rowsTotal !== 0) {
             const totalPages = Math.ceil(props.rowsTotal / this.state.rowsPerPage);

package/src/Components/SplitContainer.js

@@ -1,15 +1,38 @@
 import React from 'react';
+import clsx from 'clsx';
 import { Headline } from './GeneralFragments';
+import IconButton from '@material-ui/core/IconButton';
+import Close from '../UIComponents/icons/CloseIcon';
+import Tooltip from '../UIComponents/Tooltip';
+import { T } from '../App/i18n';
 
 const SplitContainer = props => {
-    const { showDetails, listComponent, detailsComponent, headlineText, className } = props;
+    const {
+        showDetails,
+        listComponent,
+        detailsComponent,
+        headlineText,
+        className,
+        hideDetailsAction,
+        hintText
+    } = props;
     return (
         <div className={'split-container ' + className}>
             <Headline text={headlineText} />
+            {hintText && <div className={clsx('hint', showDetails && 'withDetails')}>{hintText}</div>}
 
             <div className={showDetails ? 'split-left' : ''}>{listComponent}</div>
 
-            {showDetails && <div className="split-right">{detailsComponent}</div>}
+            {showDetails && (
+                <div className="split-right">
+                    <Tooltip title={T('detailView.close')}>
+                        <IconButton onClick={() => hideDetailsAction()} className="close-details">
+                            <Close />
+                        </IconButton>
+                    </Tooltip>
+                    {detailsComponent}
+                </div>
+            )}
         </div>
     );
 };

package/src/Components/Styles.scss

@@ -48,6 +48,8 @@
 
 .form {
   text-align: center;
+  margin-top: 40px;
+
 
   .form-inner {
     margin: auto;

package/src/Components/Translations.js

@@ -30,6 +30,9 @@ require('../App/i18n').use(
                 deleteEntriesInfo: 'delete selected entries',
                 deleteEntriesHint: 'Use the checkboxes to select one or more entries in the list<br>and then click this icon to delete them.',
             },
+            detailView: {
+                close: 'Close Editor',
+            },
         },
         de: {
             // LISTING AND EDITING
@@ -96,6 +99,9 @@ require('../App/i18n').use(
                 deleteEntriesInfo: 'Gewählte Einträge löschen',
                 deleteEntriesHint: 'Nutze die Checkboxen in der Liste und klicke dann dieses Icon,<br>um einen oder mehrere Einträge zu löschen.',
             },
+            detailView: {
+                close: 'Editor schließen',
+            },
         },
     },
     true

package/src/Screens/ColorPalettes/Components/DefaultColorSwitch.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import Switch from '@material-ui/core/Switch';
+import Actions, { COLORPALETTES_REDUCER_NAME } from '../Reducers/Actions';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = {
+    switchBase: {
+        height: 28,
+    },
+};
+
+export class DefaultColorSwitch extends Component {
+    static propTypes = {
+        color: PropTypes.object,
+        classes: PropTypes.object,
+        isDefaultColor: PropTypes.bool,
+    };
+
+    onToggle = e => {
+        this.props.setDefaultColor(this.props.isDefaultColor ? null : this.props.color);
+    };
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <Switch
+                classes={{ switchBase: classes.switchBase }}
+                checked={this.props.isDefaultColor}
+                onClick={this.onToggle}
+                name="isDefaultColor"
+                color="primary"
+            />
+        );
+    }
+}
+
+const mapStateToProps = (state, ownProps) => {
+    const colorId = get(ownProps.color, 'id', null);
+    const defaultColorId = get(state, `${COLORPALETTES_REDUCER_NAME}.data.defaultColor.value.id`, null);
+
+    return {
+        isDefaultColor: colorId === defaultColorId,
+    };
+};
+
+const mapDispatchToProps = dispatch => ({
+    setDefaultColor: color => dispatch(Actions.setFieldData('defaultColor', color)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DefaultColorSwitch));
+