@configuratorware/configurator-admingui 1.27.3-beta.1 → 1.27.3-beta.5

package/src/App/Styles.scss

@@ -1,185 +1,185 @@
-@import url("//fonts.googleapis.com/icon?family=Material+Icons");
-@import url("//fonts.googleapis.com/css?family=Roboto:400,300,500:latin");
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: Roboto, sans-serif;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-h1 {
-  font-weight: normal;
-  clear: both;
-  margin-top: 0;
-}
-
-h2 {
-  font-weight: normal;
-  margin-bottom: 15px;
-  clear: both;
-}
-
-div + h2 {
-  margin-top: 20px;
-}
-
-.box:after {
-  content: "";
-  clear: both;
-  display: block;
-}
-
-.content {
-  padding: 1.2em;
-  margin-top: 64px;
-  transition: margin 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  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;
-  padding-right: 0.6em;
-}
-.split-right {
-  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;
-  }
-  .split-right .full {
-    display: block;
-  }
-}
-@media (min-width: 961px) {
-  .split-right .full {
-    display: none !important;
-  }
-}
-
-.action-buttons {
-  text-align: right;
-  margin-top: 1.2em;
-}
-.action-buttons:empty {
-  display: none;
-}
-.action-buttons > div {
-  margin-left: 0.83em;
-}
-
-.error {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(255, 120, 120, 0.8);
-  z-index: 99999;
-}
-.error > div {
-  width: 255px;
-  margin: auto;
-  background: #fff;
-  padding: 16px;
-  margin-top: 255px;
-  text-align: center;
-  -webkit-box-shadow: 0 0 24px #fff;
-  -moz-box-shadow: 0 0 24px #fff;
-  box-shadow: 0 0 24px #fff;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-}
-.error .message {
-  padding: 12px 0;
-}
-
-.view-error-details {
-  color: inherit;
-  text-decoration: none;
-}
-
-.content.menu-opened {
-  margin-left: 256px;
-}
-
-.content.license-error {
-  margin-top: 95px;
-  min-height: calc(100vh - 95px);
-  .form {
-    text-align: left;
-  }
-}
-
-.app-bar {
-  position: fixed !important;
-  top: 0;
-}
-
-.label {
-  margin: 20px 0 5px 0;
-}
-
-.list-body tr {
-  cursor: pointer;
-}
-
-.section-title {
-  padding-top: 30px;
-  padding-bottom: 10px;
-}
-
-.wrapper-text {
-  display: flex;
-
-  .text-title {
-    font-weight: bold;
-    width: 100px;
-    min-width: 30px
-  }
-}
-
-input::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-.rehydration-progress {
-  text-align: center;
-  padding-top: 100px;
-}
+@import url("//fonts.googleapis.com/icon?family=Material+Icons");
+@import url("//fonts.googleapis.com/css?family=Roboto:400,300,500:latin");
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Roboto, sans-serif;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+h1 {
+  font-weight: normal;
+  clear: both;
+  margin-top: 0;
+}
+
+h2 {
+  font-weight: normal;
+  margin-bottom: 15px;
+  clear: both;
+}
+
+div + h2 {
+  margin-top: 20px;
+}
+
+.box:after {
+  content: "";
+  clear: both;
+  display: block;
+}
+
+.content {
+  padding: 1.2em;
+  margin-top: 64px;
+  transition: margin 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  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;
+  padding-right: 0.6em;
+}
+.split-right {
+  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;
+  }
+  .split-right .full {
+    display: block;
+  }
+}
+@media (min-width: 961px) {
+  .split-right .full {
+    display: none !important;
+  }
+}
+
+.action-buttons {
+  text-align: right;
+  margin-top: 1.2em;
+}
+.action-buttons:empty {
+  display: none;
+}
+.action-buttons > div {
+  margin-left: 0.83em;
+}
+
+.error {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 120, 120, 0.8);
+  z-index: 99999;
+}
+.error > div {
+  width: 255px;
+  margin: auto;
+  background: #fff;
+  padding: 16px;
+  margin-top: 255px;
+  text-align: center;
+  -webkit-box-shadow: 0 0 24px #fff;
+  -moz-box-shadow: 0 0 24px #fff;
+  box-shadow: 0 0 24px #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.error .message {
+  padding: 12px 0;
+}
+
+.view-error-details {
+  color: inherit;
+  text-decoration: none;
+}
+
+.content.menu-opened {
+  margin-left: 256px;
+}
+
+.content.license-error {
+  margin-top: 95px;
+  min-height: calc(100vh - 95px);
+  .form {
+    text-align: left;
+  }
+}
+
+.app-bar {
+  position: fixed !important;
+  top: 0;
+}
+
+.label {
+  margin: 20px 0 5px 0;
+}
+
+.list-body tr {
+  cursor: pointer;
+}
+
+.section-title {
+  padding-top: 30px;
+  padding-bottom: 10px;
+}
+
+.wrapper-text {
+  display: flex;
+
+  .text-title {
+    font-weight: bold;
+    width: 100px;
+    min-width: 30px
+  }
+}
+
+input::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.rehydration-progress {
+  text-align: center;
+  padding-top: 100px;
+}

package/src/App/Translations.js

@@ -64,6 +64,11 @@ require('./i18n').use(
                 blankError: "Can't be blank",
                 decimalPoint: 'Please use dot (".") as decimal separator',
             },
+            callToActionDefault: {
+                addToCart: 'Use default setting (Add to cart)',
+                requestOffer: 'Use default setting (Request Offer)',
+                none: 'Use default setting (None)',
+            },
         },
 
         de: {
@@ -152,6 +157,11 @@ require('./i18n').use(
                 blankError: 'Kann nicht leer sein',
                 decimalPoint: 'Bitte Punkt (".") als Dezimaltrennzeichen verwenden',
             },
+            callToActionDefault: {
+                addToCart: 'Default (In den Warenkorb)',
+                requestOffer: 'Default (Angebot anfragen)',
+                none: 'Default (Kein Element)',
+            },
         },
     },
     true

package/src/Components/CallToActionField.js

@@ -0,0 +1,95 @@
+import { newestRequest } from '../Utils/Async/newestRequest';
+import { lazyFetch } from '../Utils/Request/lazyFetch';
+import { URL } from '../Screens/DefaultClient/Reducers/Actions';
+import { connect } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { T } from '../App/i18n';
+import { get } from 'lodash';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const ctaFields = [
+    {
+        value: 'addToCart',
+        label: 'callToAction.addToCart',
+        id: 'addToCart',
+    },
+    {
+        value: 'requestOffer',
+        label: 'callToAction.requestOffer',
+        id: 'requestOffer',
+    },
+    {
+        value: 'none',
+        label: 'callToAction.none',
+        id: 'none',
+    },
+];
+
+const sourceConfig = {
+    text: function text(_ref) {
+        return _ref.translate === false ? _ref.label : T(_ref.label);
+    },
+    value: 'value',
+};
+
+const loadDefaultClient = newestRequest(async () => {
+    const response = await lazyFetch(URL);
+    return response.data;
+});
+
+export const CallToActionField = connect()(({ renderWrappedInput, fields, dynamicDefaultLabel = true }) => {
+    const [source, setSource] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        (async () => {
+            if (dynamicDefaultLabel) {
+                setLoading(true);
+                const defaultClient = await loadDefaultClient();
+                const defaultCTALabel = T(`callToActionDefault.${get(defaultClient, 'callToAction')}`);
+                setSource([
+                    {
+                        value: '',
+                        label: defaultCTALabel,
+                        id: defaultCTALabel,
+                        translate: false,
+                    },
+                    ...ctaFields,
+                ]);
+                setLoading(false);
+            } else {
+                setSource([
+                    {
+                        value: '',
+                        label: 'Default',
+                        id: 'Default',
+                    },
+                    ...ctaFields,
+                ]);
+            }
+        })();
+    }, []);
+
+    fields[0].calculateProps = () => ({
+        source,
+        sourceConfig,
+        shrinkLabel: true,
+    });
+    return (
+        <div style={{ position: 'relative' }}>
+            {loading && (
+                <CircularProgress
+                    size={24}
+                    style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        marginTop: -12,
+                        marginLeft: -12,
+                    }}
+                />
+            )}
+            {!loading && fields.map(renderWrappedInput)}
+        </div>
+    );
+});

package/src/Components/DefaultList.js

@@ -32,6 +32,14 @@ export default class DefaultList extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.selected !== this.props.selected) {
+            this.setState({
+                selectedRows: this.props.selected,
+            });
+        }
+    }
+
     componentWillReceiveProps(props) {
         if (props.clearSelection) {
             this.setState({
@@ -170,13 +178,14 @@ export default class DefaultList extends Component {
         let mergedSelectedRows = this.state.selectedRows || [];
 
         if (selected) {
-            mergedSelectedRows = mergedSelectedRows.concat(selected);
+            mergedSelectedRows = _.uniq(mergedSelectedRows.concat(selected));
         }
 
         return (
             <div>
                 <List
                     data={data}
+                    AddButtonComponent={this.props.listParams.AddButtonComponent}
                     columns={columns}
                     shownColumns={shownColumns}
                     rowsTotal={total}

package/src/Components/Form.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { isPlainObject } from 'lodash';
+import { get, isPlainObject } from 'lodash';
 
 import { T } from '../App/i18n';
 import RaisedButton from '../UIComponents/RaisedButton';
@@ -204,14 +204,15 @@ class ConfigurableForm extends Component {
 
             const { value, error, schema, errors, constraints } = data[field];
             const required = constraints && (constraints.presence || constraints.identifier);
+            const displayAsMandatory = get(input, 'displayAsMandatory', required);
 
             props = {
                 ...props,
-                label: <Label required={required}>{props.label}</Label>,
+                label: <Label required={displayAsMandatory}>{props.label}</Label>,
                 value,
                 schema,
                 errors,
-                error: T(error, { escapeDot: true }),
+                error: displayAsMandatory ? T(error, { escapeDot: true }) : '',
             };
         } else {
             props = {

package/src/Components/FormFragments/File.js

@@ -15,7 +15,7 @@ import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import { withStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
-import {CircularProgress} from "@material-ui/core";
+import { CircularProgress } from '@material-ui/core';
 
 const styles = {
     button: {
@@ -177,7 +177,9 @@ const File = props => {
                                 src={previewUrl || getPreviewImagePath(props.value)}
                                 onClick={openOnPreviewClick ? openFile : null}
                             />
-                            {!previewImageLoaded && <CircularProgress size={24} className={classes.previewImageProgress}/>}
+                            {!previewImageLoaded && (
+                                <CircularProgress size={24} className={classes.previewImageProgress} />
+                            )}
                         </div>
                     )}
                 </div>

package/src/Components/FormFragments/InputGroup.js

@@ -2,6 +2,8 @@ import React from 'react';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
 import withStyles from '@material-ui/core/styles/withStyles';
+import { T } from '../../App/i18n';
+import { get } from 'lodash';
 
 const styles = {
     wrapper: {
@@ -21,13 +23,24 @@ const styles = {
     },
 };
 
-const inputGroup = withStyles(styles)(({ classes, fields, label, renderWrappedInput }) =>
-    fields ? (
+const inputGroup = withStyles(styles)(props => {
+    const { classes, fields, label, dataReference, required, renderWrappedInput } = props;
+    const error = fields.length > 0 ? get(dataReference[fields[0].name], 'error', '') : '';
+    return fields ? (
         <FormControl>
-            {label && <InputLabel className={classes.label}>{label}</InputLabel>}
+            {label && (
+                <InputLabel required={required} className={classes.label}>
+                    {label}
+                </InputLabel>
+            )}
             <div className={'element-wrapper ' + classes.wrapper}>{fields.map(renderWrappedInput)}</div>
+            {error && (
+                <div className="form-field-error" style={{ paddingTop: 5 }}>
+                    {T(error, { escapeDot: true })}
+                </div>
+            )}
         </FormControl>
-    ) : null
-);
+    ) : null;
+});
 
 export default inputGroup;

package/src/Components/FormFragments/IntlInput.js

@@ -5,7 +5,7 @@ import { getAvailableLocales, T } from '../../App/i18n';
 import '../Styles.scss';
 import IconButton from '../../UIComponents/IconButton';
 import TranslateIcon from '../../UIComponents/icons/TranslateIcon';
-import {Tooltip} from "@material-ui/core";
+import { Tooltip } from '@material-ui/core';
 
 const IntlInputHoc = IntlInputComponent => {
     class IntlInputWrapper extends Component {
@@ -79,10 +79,7 @@ const IntlInputHoc = IntlInputComponent => {
                 <div className={'intl-input' + (open ? ' highlighted-area' : '')}>
                     {tfs}
                     <Tooltip title={T('Translations')}>
-                        <IconButton
-                            className="intl-input-toggle"
-                            onClick={this.onToggle}
-                        >
+                        <IconButton className="intl-input-toggle" onClick={this.onToggle}>
                             <TranslateIcon {...iconProps} />
                         </IconButton>
                     </Tooltip>

package/src/Components/FormFragments/Select.js

@@ -25,6 +25,7 @@ const select = props => {
             onFocus={() => props.source.length === 0 && this.props.loadSource && this.props.loadSource()}
             disabled={props.disabled}
             error={props.error}
+            shrinkLabel={props.shrinkLabel}
         >
             {props.source.map((item, idx) => {
                 const { value, text } = getInputItemParamsByConfig(item, props.sourceConfig);