@configuratorware/configurator-frontendgui 1.42.5 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/App/Shared/Components/ConfigurationOverview/index.js +75 -23
  2. package/package.json +4 -4
  3. package/src/App/Shared/Components/ConfigurationOverview/index.js +90 -29
package/App/Shared/Components/ConfigurationOverview/index.js CHANGED
@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports["default"] = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _styles = require("@material-ui/core/styles");
10
- var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
11
10
  var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
12
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _get = _interopRequireDefault(require("lodash/get"));
13
+ var _getImageUrl = _interopRequireDefault(require("../../../Utils/getImageUrl"));
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
14
15
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
15
16
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -25,14 +26,53 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
25
26
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
26
27
  var styles = function styles() {
27
28
  return {
28
- li: {
29
- listStyle: 'none'
29
+ tableWrapper: {
30
+ padding: '0 0 25px 0'
30
31
  },
31
- gridWrapper: {
32
- padding: '10px 0 25px 0'
32
+ table: {
33
+ width: '100%',
34
+ borderCollapse: 'collapse',
35
+ '& tr:nth-of-type(odd)': {
36
+ backgroundColor: '#f3f3f3'
37
+ }
33
38
  },
34
39
  title: {
35
- fontWeight: 'bold'
40
+ fontWeight: 'bold',
41
+ textWrap: 'wrap'
42
+ },
43
+ field: {
44
+ padding: '12px 15px',
45
+ paddingRight: '10px'
46
+ },
47
+ row: {
48
+ borderBottom: '1px solid #dddddd',
49
+ width: '100%'
50
+ },
51
+ options: {
52
+ display: 'flex',
53
+ flexDirection: 'column',
54
+ marginBottom: '5px',
55
+ marginTop: '5px'
56
+ },
57
+ option: {
58
+ marginLeft: '10px',
59
+ width: '180px',
60
+ textWrap: 'noWrap'
61
+ },
62
+ image: {
63
+ display: 'flex',
64
+ flexDirection: 'row',
65
+ alignItems: 'center',
66
+ "float": 'left',
67
+ height: '100%',
68
+ maxHeight: '100%',
69
+ maxWidth: '80px',
70
+ marginRight: '10px',
71
+ fontSize: 0,
72
+ '& img': {
73
+ maxHeight: '100%',
74
+ maxWidth: '100%'
75
+ }
36
76
  }
37
77
  };
38
78
  };
@@ -49,29 +89,41 @@ var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
49
89
  var _this$props = this.props,
50
90
  optionclassifications = _this$props.optionclassifications,
51
91
  classes = _this$props.classes;
92
+ var renderImage = function renderImage(thumbnail) {
93
+ var src = (0, _getImageUrl["default"])(thumbnail);
94
+ return src && /*#__PURE__*/_react["default"].createElement("img", {
95
+ src: src
96
+ });
97
+ };
52
98
  return /*#__PURE__*/_react["default"].createElement("div", {
53
- className: classes.gridWrapper
54
- }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
55
- container: true,
56
- spacing: 2
57
- }, optionclassifications === null || optionclassifications === void 0 ? void 0 : optionclassifications.map(function (optionclassification) {
99
+ className: classes.tableWrapper
100
+ }, /*#__PURE__*/_react["default"].createElement("table", {
101
+ className: classes.table
102
+ }, /*#__PURE__*/_react["default"].createElement("tbody", null, optionclassifications === null || optionclassifications === void 0 ? void 0 : optionclassifications.map(function (optionclassification) {
58
103
  var _optionclassification;
59
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
60
- item: true,
61
- xs: 6,
62
- key: optionclassification.identifier
104
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !optionclassification.hiddenInFrontend && /*#__PURE__*/_react["default"].createElement("tr", {
105
+ className: classes.row
106
+ }, /*#__PURE__*/_react["default"].createElement("td", {
107
+ className: classes.field,
108
+ width: '35%'
63
109
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
64
110
  className: classes.title
65
- }, optionclassification.title)), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
66
- item: true,
67
- xs: 6
111
+ }, optionclassification.title)), /*#__PURE__*/_react["default"].createElement("td", {
112
+ className: classes.field
68
113
  }, (_optionclassification = optionclassification.selectedoptions) === null || _optionclassification === void 0 ? void 0 : _optionclassification.map(function (option) {
69
114
  return /*#__PURE__*/_react["default"].createElement("li", {
70
- key: option.identifier,
71
- className: classes.li
72
- }, option.amount !== 1 ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, option.amount, " x ", option.title) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, option.title));
73
- })));
74
- })));
115
+ className: classes.options
116
+ }, option.amount !== 1 ? /*#__PURE__*/_react["default"].createElement("div", {
117
+ className: classes.image
118
+ }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
119
+ className: classes.option
120
+ }, option.amount, " x ", option.title)) : /*#__PURE__*/_react["default"].createElement("div", {
121
+ className: classes.image
122
+ }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
123
+ className: classes.option
124
+ }, option.title)));
125
+ }))));
126
+ }))));
75
127
  }
76
128
  }]);
77
129
  return ConfigurationOverview;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@configuratorware/configurator-frontendgui",
3
- "version": "1.42.5",
3
+ "version": "1.43.0",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
6
  "main": "./index.js",
7
7
  "dependencies": {
8
8
  "@babel/polyfill": "^7.12.1",
9
- "@configuratorware/scripts": "1.42.5",
9
+ "@configuratorware/scripts": "1.43.0",
10
10
  "@material-ui/core": "^4.12.4",
11
11
  "@material-ui/icons": "^4.11.3",
12
12
  "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
36
36
  "react-router-dom": "^5.3.4",
37
37
  "react-swipeable": "^5.5.1",
38
38
  "react-zoom-pan-pinch": "^2.1.3",
39
- "redhotmagma-graphics-editor": "1.42.5",
40
- "redhotmagma-visualization": "1.42.5",
39
+ "redhotmagma-graphics-editor": "1.43.0",
40
+ "redhotmagma-visualization": "1.43.0",
41
41
  "redux": "^4.1.0",
42
42
  "redux-logger": "^3.0.6",
43
43
  "redux-persist": "^5.10.0",
package/src/App/Shared/Components/ConfigurationOverview/index.js CHANGED
@@ -1,18 +1,59 @@
1
1
  import React from 'react';
2
2
  import { withStyles } from '@material-ui/core/styles';
3
- import Grid from '@material-ui/core/Grid';
4
3
  import Typography from '@material-ui/core/Typography';
5
4
  import PropTypes from 'prop-types';
5
+ import get from 'lodash/get';
6
+ import getImageUrl from '../../../Utils/getImageUrl';
6
7
 
7
8
  const styles = () => ({
8
- li: {
9
- listStyle: 'none',
9
+ tableWrapper: {
10
+ padding: '0 0 25px 0',
10
11
  },
11
- gridWrapper: {
12
- padding: '10px 0 25px 0',
12
+ table: {
13
+ width: '100%',
14
+ borderCollapse: 'collapse',
15
+ '& tr:nth-of-type(odd)': {
16
+ backgroundColor: '#f3f3f3',
17
+ },
13
18
  },
14
19
  title: {
15
20
  fontWeight: 'bold',
21
+ textWrap: 'wrap',
22
+ },
23
+ field: {
24
+ padding: '12px 15px',
25
+ paddingRight: '10px',
26
+ },
27
+ row: {
28
+ borderBottom: '1px solid #dddddd',
29
+ width: '100%',
30
+ },
31
+ options: {
32
+ display: 'flex',
33
+ flexDirection: 'column',
34
+ marginBottom: '5px',
35
+ marginTop: '5px',
36
+ },
37
+ option: {
38
+ marginLeft: '10px',
39
+ width: '180px',
40
+ textWrap: 'noWrap',
41
+ },
42
+ image: {
43
+ display: 'flex',
44
+ flexDirection: 'row',
45
+ alignItems: 'center',
46
+ float: 'left',
47
+ height: '100%',
48
+ maxHeight: '100%',
49
+ maxWidth: '80px',
50
+ marginRight: '10px',
51
+ fontSize: 0,
52
+
53
+ '& img': {
54
+ maxHeight: '100%',
55
+ maxWidth: '100%',
56
+ },
16
57
  },
17
58
  });
18
59
 
@@ -21,35 +62,55 @@ class ConfigurationOverview extends React.Component {
21
62
  optionclassifications: PropTypes.array,
22
63
  classes: PropTypes.object,
23
64
  };
65
+
24
66
  render() {
25
67
  const { optionclassifications, classes } = this.props;
26
68
 
69
+ const renderImage = thumbnail => {
70
+ const src = getImageUrl(thumbnail);
71
+ return src && <img src={src} />;
72
+ };
73
+
27
74
  return (
28
- <div className={classes.gridWrapper}>
29
- <Grid container spacing={2}>
30
- {optionclassifications?.map(optionclassification => (
31
- <>
32
- <Grid item xs={6} key={optionclassification.identifier}>
33
- <Typography className={classes.title}>
34
- {optionclassification.title}
35
- </Typography>
36
- </Grid>
37
- <Grid item xs={6}>
38
- {optionclassification.selectedoptions?.map(option => (
39
- <li key={option.identifier} className={classes.li}>
40
- {option.amount !== 1 ? (
41
- <Typography>
42
- {option.amount} x {option.title}
75
+ <div className={classes.tableWrapper}>
76
+ <table className={classes.table}>
77
+ <tbody>
78
+ {optionclassifications?.map(optionclassification => (
79
+ <>
80
+ {!optionclassification.hiddenInFrontend && (
81
+ <tr className={classes.row}>
82
+ <td className={classes.field} width={'35%'}>
83
+ <Typography className={classes.title}>
84
+ {optionclassification.title}
43
85
  </Typography>
44
- ) : (
45
- <Typography>{option.title}</Typography>
46
- )}
47
- </li>
48
- ))}
49
- </Grid>
50
- </>
51
- ))}
52
- </Grid>
86
+ </td>
87
+ <td className={classes.field}>
88
+ {optionclassification.selectedoptions?.map(option => (
89
+ <li className={classes.options}>
90
+ {option.amount !== 1 ? (
91
+ <div className={classes.image}>
92
+ {renderImage(get(option, 'thumbnail', ''))}
93
+ <Typography className={classes.option}>
94
+ {option.amount} x {option.title}
95
+ </Typography>
96
+ </div>
97
+ ) : (
98
+ <div className={classes.image}>
99
+ {renderImage(get(option, 'thumbnail', ''))}
100
+ <Typography className={classes.option}>
101
+ {option.title}
102
+ </Typography>
103
+ </div>
104
+ )}
105
+ </li>
106
+ ))}
107
+ </td>
108
+ </tr>
109
+ )}
110
+ </>
111
+ ))}
112
+ </tbody>
113
+ </table>
53
114
  </div>
54
115
  );
55
116
  }