@configuratorware/configurator-frontendgui 1.49.9 → 1.50.0

package/App/Shared/Components/ToolbarList/index.js

@@ -16,6 +16,7 @@ var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
 var _AnalyticsWrapper = _interopRequireDefault(require("../Analytics/AnalyticsWrapper"));
 var _customClassName = _interopRequireDefault(require("../../../Utils/customClassName"));
 var _i18n = require("../../../../Framework/i18n");
+var _AccessibleButton = _interopRequireDefault(require("../AccessibleButton/AccessibleButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -119,24 +120,26 @@ var ToolbarList = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           key: tool.key,
           targetId: tool.key
+        }, /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+          onClick: tool["function"]
         }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
           title: tool.title && (0, _i18n.t)(tool.title),
           key: tool.key,
-          className: classes.iconHover,
-          onClick: tool["function"]
-        }, tool.identifier));
+          className: classes.iconHover
+        }, tool.identifier)));
       })), /*#__PURE__*/_react["default"].createElement(_Hidden["default"], {
         smUp: true
       }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         "aria-label": "Menu",
         "aria-haspopup": "true",
+        "aria-controls": "toolbar-menu",
         classes: {
           root: classes.ToolbarButton,
           label: classes.ToolbarIconButton
         },
         onClick: this.handleClick
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, toolbarMobileIcon)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
-        id: "long-menu",
+        id: "toolbar-menu",
         anchorEl: anchorEl,
         open: open,
         getContentAnchorEl: null,
@@ -149,6 +152,7 @@ var ToolbarList = /*#__PURE__*/function (_React$Component) {
           horizontal: 'center'
         },
         onClose: this.handleClose,
+        keepMounted: true,
         PaperProps: {
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
@@ -156,25 +160,23 @@ var ToolbarList = /*#__PURE__*/function (_React$Component) {
           }
         }
       }, tools && tools.map(function (tool) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          className: classes.MenuItemOption,
-          key: tool.key,
-          onClick: _this2.handleClose
-        }, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           key: tool.key,
           targetId: tool.key
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex',
-            width: '100%'
-          },
-          onClick: tool["function"]
+        }, /*#__PURE__*/_react["default"].createElement(_AccessibleButton["default"], {
+          component: _MenuItem["default"],
+          className: classes.MenuItemOption,
+          key: tool.key,
+          onClick: function onClick(evt) {
+            tool["function"](evt);
+            _this2.handleClose();
+          }
         }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
           key: tool.key,
           className: classes.iconHover
         }, tool.identifier), /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.toolTitle
-        }, tool.title && (0, _i18n.t)(tool.title)))));
+        }, tool.title && (0, _i18n.t)(tool.title))));
       })))));
     }
   }]);

package/App/Shared/Hooks/useDialogId.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogId = void 0;
+var _react = require("react");
+var _v = _interopRequireDefault(require("uuid/v4"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var useDialogId = exports.useDialogId = function useDialogId() {
+  var dialogId = (0, _react.useMemo)(function () {
+    return (0, _v["default"])();
+  }, []);
+  var dialogTitleId = "dialog-title-".concat(dialogId);
+  return {
+    dialogId: dialogId,
+    dialogTitleId: dialogTitleId
+  };
+};

package/Shared/Components/CustomDialog.js

@@ -3,24 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.customDialogStyle = void 0;
+exports["default"] = exports.customDialogStyle = exports.CustomDialogHeader = exports.CustomDialog = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
 var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _AutoFocusDialogContentContainer = _interopRequireDefault(require("../../App/Shared/Components/AutoFocusDialogContentContainer/AutoFocusDialogContentContainer"));
+var _useDialogId2 = require("../../App/Shared/Hooks/useDialogId");
 var _excluded = ["className", "classes", "width", "dialogTitle", "onCancel", "children", "fullScreen"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var customDialogStyle = exports.customDialogStyle = function customDialogStyle(theme) {
-  var _closeIcon;
   var _theme$smallScreen = theme.smallScreen,
     smallScreen = _theme$smallScreen === void 0 ? {
       centeredDialogPadding: 0
@@ -35,17 +33,24 @@ var customDialogStyle = exports.customDialogStyle = function customDialogStyle(t
           maxWidth: 720
         },
         '& .MuiDialogTitle-root': {
-          paddingTop: 20,
-          paddingBottom: 15,
-          '& p, h2': {
+          paddingTop: theme.spacing(2),
+          paddingBottom: theme.spacing(2),
+          '& .MuiTypography-root': {
             fontSize: 24,
             fontWeight: 'bold',
             letterSpacing: 'normal',
-            marginRight: 28
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center'
           }
         },
         '& .MuiDialogActions-root': {
-          paddingBottom: 24
+          paddingBottom: 24,
+          '& .MuiButton-root': {
+            height: 40,
+            textTransform: 'none',
+            minWidth: 140
+          }
         },
         '& .MuiDialogTitle-root, .MuiDialogContent-root, .MuiDialogActions-root': {
           paddingLeft: smallScreen.centeredDialogPadding,
@@ -55,51 +60,63 @@ var customDialogStyle = exports.customDialogStyle = function customDialogStyle(t
             letterSpacing: 'normal'
           }
         }
-      },
-      '& .MuiButton-root': {
-        height: 40,
-        textTransform: 'none',
-        minWidth: 140
       }
+    }
+  };
+};
+var customDialogHeaderStyle = function customDialogHeaderStyle(theme) {
+  return {
+    closeButton: {
+      marginLeft: 'auto',
+      marginRight: theme.spacing(1),
+      marginTop: theme.spacing(1)
     },
-    stickyDialog: {
-      '& .MuiDialog-container': {
-        '& .MuiDialogTitle-root': {
-          paddingTop: 25,
-          paddingBottom: 8
-        }
-      },
-      '& .MuiButton-root': {
-        width: '100%',
-        height: 56,
-        minWidth: 64
-      }
+    dialogHeader: {
+      display: 'flex',
+      alignItems: 'start'
     },
-    closeIcon: (_closeIcon = {
-      position: 'absolute',
-      right: 28,
-      top: 28
-    }, _defineProperty(_closeIcon, theme.breakpoints.down('xs'), {
-      right: 20,
-      top: 30
-    }), _defineProperty(_closeIcon, '&:hover', {
-      cursor: 'pointer'
-    }), _closeIcon)
+    dialogTitle: {
+      flex: 1
+    }
   };
 };
-var _default = exports["default"] = (0, _withWidth["default"])({
+var CustomDialogHeader = exports.CustomDialogHeader = (0, _styles.withStyles)(customDialogHeaderStyle, {
+  name: 'CustomDialogHeader'
+})(function (_ref) {
+  var classes = _ref.classes,
+    dialogTitle = _ref.dialogTitle,
+    dialogTitleId = _ref.dialogTitleId,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.dialogHeader
+  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+    className: classes.dialogTitle,
+    id: dialogTitleId
+  }, dialogTitle), children, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClose,
+    className: classes.closeButton
+  }, /*#__PURE__*/_react["default"].createElement(CustomDialogHeader.IconComponent, null)));
+});
+CustomDialogHeader.IconComponent = function CloseIcon() {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "close");
+};
+var CustomDialog = exports.CustomDialog = (0, _withWidth["default"])({
   initialWidth: 'xl'
 })((0, _styles.withStyles)(customDialogStyle, {
   name: 'CustomDialog'
-})(function (_ref) {
-  var className = _ref.className,
-    classes = _ref.classes,
-    width = _ref.width,
-    dialogTitle = _ref.dialogTitle,
-    onCancel = _ref.onCancel,
-    children = _ref.children,
-    fullScreen = _ref.fullScreen,
-    props = _objectWithoutProperties(_ref, _excluded);
+})(function (_ref2) {
+  var className = _ref2.className,
+    classes = _ref2.classes,
+    width = _ref2.width,
+    dialogTitle = _ref2.dialogTitle,
+    onCancel = _ref2.onCancel,
+    children = _ref2.children,
+    fullScreen = _ref2.fullScreen,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var open = props.open;
+  var _useDialogId = (0, _useDialogId2.useDialogId)(),
+    dialogTitleId = _useDialogId.dialogTitleId;
   return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], _extends({
     maxWidth: width === 'md' || width === 'lg' || width === 'xl' ? 'md' : 'sm',
     fullWidth: true,
@@ -108,11 +125,15 @@ var _default = exports["default"] = (0, _withWidth["default"])({
       root: classes.MuiStyledDialog
     },
     className: className + ' ' + (width === 'xs' ? classes.stickyDialog : ''),
-    fullScreen: fullScreen
-  }, props), /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
-    id: "alert-dialog-title"
-  }, dialogTitle, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    className: classes.closeIcon,
-    onClick: onCancel
-  }, "close")), children);
-}));
+    fullScreen: fullScreen,
+    "aria-labelledby": dialogTitleId
+  }, props), /*#__PURE__*/_react["default"].createElement(CustomDialog.DialogHeaderComponent, {
+    dialogTitle: dialogTitle,
+    dialogTitleId: dialogTitleId,
+    onClose: onCancel
+  }), /*#__PURE__*/_react["default"].createElement(_AutoFocusDialogContentContainer["default"], {
+    open: open
+  }, children));
+}));
+CustomDialog.DialogHeaderComponent = CustomDialogHeader;
+var _default = exports["default"] = CustomDialog;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.49.9",
+  "version": "1.50.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.49.9",
+    "@configuratorware/scripts": "1.50.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.49.9",
-    "redhotmagma-visualization": "1.49.9",
+    "redhotmagma-graphics-editor": "1.50.0",
+    "redhotmagma-visualization": "1.50.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/invoke.js

@@ -2,7 +2,7 @@ var clientParam = new URL(window.location.href).searchParams.get("_client");
 var file = location.pathname.split("/").pop();
 var link = document.createElement("link");
 
-link.href = file.substr(0, file.lastIndexOf(".")) + "/dynamic_file/custom_css" + (typeof clientParam == 'string' ? "/" + clientParam : '');
+link.href = file.substr(0, file.lastIndexOf(".")) + "/frontendapi/dynamic_file/custom_css" + (typeof clientParam == 'string' ? "/" + clientParam : '');
 link.type = "text/css";
 link.rel = "stylesheet";
 link.media = "screen,print";

package/public/translations/de_DE.json

@@ -349,7 +349,8 @@
     "title": "Oooops!",
     "errorTexts": {
       "first": "Wir haben uns verkonfiguriert...",
-      "second": "Leider ist ein Fehler aufgetreten."
+      "second": "Leider ist ein Fehler aufgetreten.",
+      "404": "Die angeforderte Ressource konnte nicht gefunden werden."
     },
     "reloadButton": "Seite neu laden"
   },

package/public/translations/en_GB.json

@@ -340,7 +340,8 @@
     "title": "Oooops!",
     "errorTexts": {
       "first": "We messed something up...",
-      "second": "Sorry, an error has occurred."
+      "second": "Sorry, an error has occurred.",
+      "404": "The requested ressource could not be found on the server."
     },
     "reloadButton": "Reload page"
   },

package/scripts/utils/fileSystem.js

@@ -45,7 +45,12 @@ function cpDirDeep(src, dst, testFn) {
             console.log('Copy file: ' + file + ' -> ' + tp);
             fs.createReadStream(file).pipe(fs.createWriteStream(tp));
         } else if (!fs.existsSync(tp)) {
-            fs.mkdirSync(tp);
+            try {
+                fs.mkdirSync(tp);
+            } catch (e) {
+                console.log('Could not create directory:', tp);
+                console.log(e.message)
+            }
         }
     });
 }

package/src/App/Error/ProductionErrorPage/index.js

@@ -1,34 +1,37 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-
 import { T } from 'Framework/i18n';
-
 import './Style.scss';
+import { store } from './../../Store';
 
-const ErrorPage = () => (
-    <div className="error-wrapper">
-        <div className="error-icon" />
+const ErrorPage = () => {
+    const is404Error = store.getState().api.has404Error;
+    return (
+        <div className="error-wrapper">
+            <div className="error-icon" />
 
-        <div>
-            <Typography variant="h1" className="header">
-                {T('errorPage.title')}
-            </Typography>
-            <Typography className="text">{T('errorPage.errorTexts.first')}</Typography>
-            <Typography className="text">{T('errorPage.errorTexts.second')}</Typography>
-        </div>
+            <div>
+                <Typography variant="h1" className="header">
+                    {T('errorPage.title')}
+                </Typography>
+                <Typography className="text">{T('errorPage.errorTexts.first')}</Typography>
+                <Typography className="text">{T('errorPage.errorTexts.second')}</Typography>
+                {is404Error && <Typography className="text">{T('errorPage.errorTexts.404')}</Typography>}
+            </div>
 
-        <Button
-            variant="contained"
-            color="secondary"
-            className="button"
-            onClick={() => {
-                window.location.reload();
-            }}
-        >
-            {T('errorPage.reloadButton')}
-        </Button>
-    </div>
-);
+            <Button
+                variant="contained"
+                color="secondary"
+                className="button"
+                onClick={() => {
+                    window.location.reload();
+                }}
+            >
+                {T('errorPage.reloadButton')}
+            </Button>
+        </div>
+    );
+};
 
 export default ErrorPage;

package/src/App/Modules/Creator/Components/Incompatibility/OptionExclusionRule/index.js

@@ -22,7 +22,7 @@ export const decorateOptionlistitem = memoize(OptionlistitemComponent =>
             return null;
         }
 
-        return <OptionlistitemComponent {...props} OptionAmountComponent={null} />;
+        return <OptionlistitemComponent {...props} OptionAmountComponent={null} notAccessible />;
     })
 );
 

package/src/App/Modules/Creator/Components/Incompatibility/OptionRule/index.js

@@ -21,7 +21,7 @@ export const decorateOptionlistitem = memoize(OptionlistitemComponent =>
             return null;
         }
 
-        return <OptionlistitemComponent {...props} OptionAmountComponent={null} />;
+        return <OptionlistitemComponent {...props} OptionAmountComponent={null} notAccessible />;
     })
 );
 

package/src/App/Modules/Creator/Components/Incompatibility/index.js

@@ -150,7 +150,6 @@ class Incompatibility extends React.Component {
                 onClose={onClose}
                 onCancel={onClose}
                 className={classes.incompatibilityDialog}
-                refValue={checkResults}
             >
                 <DialogContent className={'incompatibility'}>{this.renderRules()}</DialogContent>
                 {this.renderFooter()}
@@ -160,7 +159,7 @@ class Incompatibility extends React.Component {
 }
 
 Incompatibility.propTypes = {
-    checkResults: PropTypes.func,
+    checkResults: PropTypes.object,
     ruleComponentProps: PropTypes.any,
     optionclassifications: PropTypes.array,
     classes: PropTypes.object,

package/src/App/Modules/Creator/Components/InvalidConfigurationNotice/index.js

@@ -2,13 +2,9 @@ import React, { Fragment, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useTheme } from '@material-ui/core/styles';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
-import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import CloseIcon from '@material-ui/icons/Close';
 import MainButton from 'Shared/Components/MainButton';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
@@ -16,25 +12,13 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import { T } from 'Framework/i18n';
+import CustomDialog from '../../../../../Shared/Components/CustomDialog';
 
 const useStyles = makeStyles(
     theme => ({
         root: {
             borderTop: `7px solid ${theme.palette.primary.main}`,
         },
-        titleRoot: {
-            margin: 0,
-            padding: theme.spacing(2),
-        },
-        title: {
-            marginRight: 40,
-        },
-        closeButton: {
-            position: 'absolute',
-            right: theme.spacing(1),
-            top: theme.spacing(1),
-            color: theme.palette.grey[500],
-        },
         contentRoot: {
             padding: theme.spacing(2),
         },
@@ -61,15 +45,14 @@ const InvalidConfigurationNotice = ({ validationErrors, show, close, open, admin
     }, [open, validationErrors, adminMode, initialRender]);
 
     return (
-        <Dialog fullScreen={fullScreen} open={show} classes={{ paper: classes.root }}>
-            <DialogTitle disableTypography className={classes.titleRoot}>
-                <Typography variant={'h5'} className={classes.title}>
-                    {T('invalidConfigurationNotice.title')}
-                </Typography>
-                <IconButton aria-label="close" className={classes.closeButton} onClick={close}>
-                    <CloseIcon />
-                </IconButton>
-            </DialogTitle>
+        <CustomDialog
+            fullScreen={fullScreen}
+            classes={{ paper: classes.root }}
+            open={show}
+            onClose={close}
+            onCancel={close}
+            dialogTitle={T('invalidConfigurationNotice.title')}
+        >
             <DialogContent className={classes.contentRoot}>
                 <List>
                     {validationErrors.map(({ title, errors }, index) => (
@@ -111,7 +94,7 @@ const InvalidConfigurationNotice = ({ validationErrors, show, close, open, admin
                     OK
                 </MainButton>
             </DialogActions>
-        </Dialog>
+        </CustomDialog>
     );
 };