@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/FormFragments/Toggle.js

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import UIToggle from '../../UIComponents/Toggle';
-import ErrorWrapper from './ErrorWrapper';
-import FormControlLabel from '../../UIComponents/FormControlLabel';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-const errorStyle = {
-    thumbOff: {
-        backgroundColor: '#ffcccc',
-    },
-    trackOff: {
-        backgroundColor: '#ff9d9d',
-    },
-    thumbSwitched: {
-        backgroundColor: 'red',
-    },
-    trackSwitched: {
-        backgroundColor: '#ff9d9d',
-    },
-    labelStyle: {
-        color: 'red',
-    },
-};
-
-const styles = {
-    label: {
-        marginLeft: 0,
-        justifyContent: 'space-between',
-        '&$fullWidth': {
-            width: '100%',
-        },
-    },
-    body: {
-        fontSize: 16,
-    },
-    fullWidth: {},
-};
-
-const toggle = props => {
-    const extraProps = props.error && {
-        thumbStyle: errorStyle.thumbOff,
-        trackStyle: errorStyle.trackOff,
-        thumbSwitchedStyle: errorStyle.thumbSwitched,
-        trackSwitchedStyle: errorStyle.trackSwitched,
-        labelStyle: errorStyle.labelStyle,
-    };
-    const { classes, fullWidth } = props;
-    const checked = props.invert ? !props.value : !!props.value;
-    const nextChecked = props.invert ? checked : !checked;
-
-    return (
-        <ErrorWrapper error={props.error}>
-            <FormControlLabel
-                label={props.label}
-                default={!!props.defaultValue}
-                labelPlacement={props.labelPlacement}
-                {...extraProps}
-                classes={{
-                    labelPlacementStart: `${classes.label} ${fullWidth ? classes.fullWidth : ''}`,
-                    label: classes.body,
-                }}
-                control={
-                    <UIToggle
-                        checked={checked}
-                        onChange={() => props.onChange(props.name, nextChecked)}
-                        value={checked}
-                        color="primary"
-                    />
-                }
-            />
-        </ErrorWrapper>
-    );
-};
-
-toggle.defaultProps = {
-    fullWidth: true,
-    labelPlacement: 'start',
-};
-
-export default withStyles(styles)(toggle);

package/src/Components/FormFragments/TwoSideSelect.js

@@ -1,163 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-
-import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
-
-import { T } from '../../App/i18n';
-
-import './Styles.scss';
-import IconButton from '../../UIComponents/IconButton';
-import ForwardIcon from '../../UIComponents/icons/ForwardIcon';
-import DeleteIcon from '../../UIComponents/icons/DeleteIcon';
-import { withTheme } from '@material-ui/core';
-import Tooltip from '../../UIComponents/Tooltip';
-
-class Item extends React.Component {
-    static defaultProps = {
-        IconComponent: ForwardIcon,
-    };
-
-    static propTypes = {
-        renderActions: PropTypes.func,
-        IconComponent: PropTypes.elementType,
-    };
-
-    onSelect = () => {
-        this.props.onSelect(this.props.item);
-    };
-
-    renderContent() {
-        const { item, number } = this.props;
-
-        const label = `${item.title || item.translated_title} ${item.identifier && `(${item.identifier})`}`;
-        if (this.props.renderContent) {
-            return this.props.renderContent(item, number);
-        } else {
-            return (
-                <Tooltip title={label}>
-                    <span className={'twoSideSelect-content'}>
-                        {number && <span>{number}. </span>}
-                        {label}
-                    </span>
-                </Tooltip>
-            );
-        }
-    }
-
-    render() {
-        const { item, IconComponent, renderActions } = this.props;
-        return (
-            <div className="twoSideSelect-item" key={item.id}>
-                {this.renderContent()}
-                {renderActions && renderActions(this.props)}
-                <IconButton onClick={this.onSelect}>
-                    <IconComponent />
-                </IconButton>
-            </div>
-        );
-    }
-}
-
-const SortableItem = SortableElement(Item);
-
-const SortableList = SortableContainer(props => {
-    return <div className={props.className}>{props.children}</div>;
-});
-
-class TwoSideSelect extends React.Component {
-    onSelect = item => {
-        const items = this.props.value || [];
-        items.push(item);
-        this.props.onChange(this.props.name, items);
-    };
-
-    onDelete = item => {
-        const items = this.props.value || [];
-        _.remove(items, { identifier: item.identifier });
-        this.props.onChange(this.props.name, items);
-    };
-
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        const items = arrayMove(this.props.value, oldIndex, newIndex);
-        this.props.onChange(this.props.name, items);
-    };
-
-    render() {
-        const { props } = this;
-        const source = _.differenceBy(props.source, props.value, 'identifier');
-        let info = null;
-        if (!props.source) {
-            // the source is empty..
-        } else if (source.length === 0) {
-            info = T('twoSideSelect.allOptionsAdded');
-        }
-
-        return (
-            <div className={props.className}>
-                {props.label && <div style={{ color: props.theme.palette.text.primary }}>{props.label}</div>}
-
-                <div className="twoSideSelect-sideContainer">
-                    <div className="twoSideSelect-source">
-                        {source.map(item => {
-                            return (
-                                <Item
-                                    key={item.id}
-                                    item={item}
-                                    onSelect={this.onSelect}
-                                    renderContent={props.renderItemContent}
-                                />
-                            );
-                        })}
-                        <div className="twoSideSelect-info">{info}</div>
-                    </div>
-
-                    {props.sortable ? (
-                        <SortableList
-                            className="twoSideSelect-selection sortable"
-                            onSortEnd={this.onSortEnd}
-                            helperClass="twoSideSelect-helper"
-                            distance={10}
-                            lockAxis="y"
-                        >
-                            {props.value &&
-                                props.value.map((item, index) => {
-                                    return (
-                                        <SortableItem
-                                            key={item.id}
-                                            index={index}
-                                            item={item}
-                                            number={index + 1}
-                                            IconComponent={DeleteIcon}
-                                            renderContent={props.renderItemContent}
-                                            onSelect={this.onDelete}
-                                            renderActions={props.renderItemActions}
-                                        />
-                                    );
-                                })}
-                        </SortableList>
-                    ) : (
-                        <div className="twoSideSelect-selection">
-                            {props.value &&
-                                props.value.map((item, index) => {
-                                    return (
-                                        <Item
-                                            key={item.id}
-                                            index={index}
-                                            item={item}
-                                            IconComponent={DeleteIcon}
-                                            renderContent={props.renderItemContent}
-                                            onSelect={this.onDelete}
-                                            renderActions={props.renderItemActions}
-                                        />
-                                    );
-                                })}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-export default withTheme()(TwoSideSelect);

package/src/Components/FormFragments/Value.js

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import UITextField from '../../UIComponents/TextField';
-import baseStyles from './styles';
-
-const styles = {
-    ...baseStyles,
-    value: {
-        lineHeight: '72px',
-        marginTop: '14px',
-    },
-};
-
-const ValueRenderer = props => {
-    const renderedValue = props.renderValue ? props.renderValue(props.value, props) : props.value;
-    return renderedValue && <div style={styles.value}>{renderedValue}</div>;
-};
-
-const value = props => {
-    return (
-        <UITextField
-            floatingLabelText={props.label}
-            style={styles.input}
-            underlineShow={false}
-            floatingLabelStyle={styles.floatingLabel}
-            {...props.muiProps}
-        >
-            <ValueRenderer {...props} />
-        </UITextField>
-    );
-};
-
-export default value;

package/src/Components/FormFragments/index.js

@@ -1,48 +0,0 @@
-import Text from './Text';
-export { Text };
-import AutoComplete from './AutoComplete';
-export { AutoComplete };
-import Select from './Select';
-export { Select };
-import Checkbox from './Checkbox';
-export { Checkbox };
-import RadioGroup from './RadioGroup';
-export { RadioGroup };
-import Toggle from './Toggle';
-export { Toggle };
-import ObjectToggle from './ObjectToggle';
-export { ObjectToggle };
-import TimePicker from './TimePicker';
-export { TimePicker };
-import DatePicker from './DatePicker';
-export { DatePicker };
-import DateTimePicker from './DateTimePicker';
-export { DateTimePicker };
-import Chip from './Chip';
-export { Chip };
-import AutocompleteEntity from './AutocompleteEntity';
-export { AutocompleteEntity };
-import Value from './Value';
-export { Value };
-import HintText from './HintText';
-export { HintText };
-import AttributeValueChip from './AttributeValueChip';
-export { AttributeValueChip };
-
-export default {
-    Text,
-    AutoComplete,
-    AttributeValueChip,
-    Select,
-    Checkbox,
-    RadioGroup,
-    Toggle,
-    ObjectToggle,
-    TimePicker,
-    DatePicker,
-    DateTimePicker,
-    Chip,
-    AutocompleteEntity,
-    Value,
-    HintText,
-};

package/src/Components/FormFragments/styles.js

@@ -1,24 +0,0 @@
-const styles = {
-    select: {
-        textAlign: 'left',
-    },
-    checkbox: {
-        marginBottom: 16,
-    },
-    toggle: {
-        marginBottom: 0,
-        marginLeft: 0,
-    },
-    input: {
-        width: '100%',
-    },
-    dateTime: {
-        date: { display: 'inline-block', width: '50%', paddingRight: 8 },
-        time: { display: 'inline-block', width: '50%', paddingLeft: 8 },
-    },
-    floatingLabel: {
-        color: 'rgb(158, 158, 158)',
-    },
-};
-
-export default styles;

package/src/Components/FormHooks/useDataSchema.js

@@ -1,33 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { DataValidator } from '../../App/Data';
-
-function fillDataSchema(dataSchema, data) {
-    const filledSchema = {};
-    Object.keys(dataSchema).forEach(key => {
-        filledSchema[key] = {
-            ...dataSchema[key],
-            value: data && data[key] !== undefined ? data[key] : dataSchema[key].value,
-        };
-    });
-    return filledSchema;
-}
-
-export const useDataSchema = ({ dataSchema, data }) => {
-    const [currentData, setCurrentData] = useState(fillDataSchema(dataSchema, data));
-    useEffect(() => {
-        setCurrentData(fillDataSchema(dataSchema, data));
-    }, [dataSchema, data]);
-    const validate = useCallback(() => {
-        const validator = new DataValidator(currentData, false);
-        if (validator.validate()) {
-            return true;
-        } else {
-            setCurrentData(validator.getValidatedData());
-            return false;
-        }
-    }, [currentData]);
-    return {
-        currentData,
-        validate,
-    };
-};

package/src/Components/GeneralFragments/Box.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { withTheme } from '@material-ui/core';
-
-const Box = props => {
-    return (
-        <div className="box" style={{ color: props.theme.palette.text.primary }}>
-            {props.text || props.children}
-        </div>
-    );
-};
-
-export default withTheme()(Box);

package/src/Components/GeneralFragments/ConfigurationEditor.js

@@ -1,111 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-
-import networkConfig from '../../App/Config/network';
-import ConfiguratorOverlay from './ConfiguratorOverlay';
-import { NETWORK_ERROR, postData, RECEIVE_DATA } from '../../App/Reducers/Api/Actions';
-import { showErrorMessage, showInfoMessage } from '../../App/Reducers/Frame/Actions';
-import { t } from '../../App/i18n';
-
-export const saveConfiguration = (configuration, type) => async (dispatch, getState) => {
-    const url = `configurations/frontendsave`;
-    const apiAction = await dispatch(
-        postData(
-            { url },
-            {
-                configuration,
-                configurationtype: type,
-            },
-            'CONFIGURATION_EDITOR'
-        )
-    );
-    switch (apiAction.type) {
-        case RECEIVE_DATA: {
-            dispatch(showInfoMessage(t('entity.saveOk')));
-            break;
-        }
-        case NETWORK_ERROR: {
-            const state = getState();
-            const source = state.dataBySource[apiAction.key];
-            if (source.isPosted) {
-                // data is saved
-                dispatch(showErrorMessage(t('entity.saveError'), apiAction.error));
-            } else {
-                dispatch(showErrorMessage(t('entity.loadError'), apiAction.error));
-            }
-            break;
-        }
-    }
-    return apiAction;
-};
-
-export const ConfigurationEditor = ({
-    code,
-    identifier,
-    configuratorUrl,
-    open,
-    adminMode,
-    onSaved,
-    onClose,
-    ...props
-}) => {
-    const locale = useSelector(({ i18n: { locale } }) => locale.replace('-', '_'));
-    const configurationPath = code ? `code:${code}` : `identifier:${identifier}`;
-    const directMode = !!configuratorUrl; // direct mode: the existing configuration should be updated
-    if (!configuratorUrl) {
-        configuratorUrl = `${networkConfig.configuratorBasePath}${configurationPath}?_adminmode=${adminMode}&_hidevariantselection=true&_deliverycountry=de&_language=${locale}`;
-    }
-    const iframeRef = useRef(null);
-    const dispatch = useDispatch();
-
-    const triggerGetConfiguration = useCallback(() => {
-        const messageHandler = async event => {
-            const {
-                data: { type, configuration },
-            } = event;
-            if (type === 'getConfiguration') {
-                if (!directMode) {
-                    // the code prop tells if a new configuration should be saved, or updating the existing one
-                    if (!code) {
-                        delete configuration.code;
-                    } else {
-                        configuration.code = code;
-                    }
-                }
-                const apiAction = await dispatch(saveConfiguration(configuration, adminMode));
-                onSaved && onSaved(apiAction);
-                onClose && onClose();
-            }
-        };
-        window.addEventListener('message', messageHandler);
-        iframeRef.current.contentWindow.postMessage(
-            { type: 'getConfiguration' },
-            networkConfig.configuratorBasePath
-        );
-        return () => window.removeEventListener('message', messageHandler);
-    }, [code, dispatch, adminMode, onSaved, onClose, directMode]);
-
-    return (
-        <ConfiguratorOverlay
-            show={open}
-            configuratorUrl={configuratorUrl}
-            iframeRef={iframeRef}
-            onSave={triggerGetConfiguration}
-            onClose={onClose}
-            {...props}
-        />
-    );
-};
-
-ConfigurationEditor.propTypes = {
-    code: PropTypes.string,
-    identifier: PropTypes.string,
-    configuratorUrl: PropTypes.string,
-    open: PropTypes.bool.isRequired,
-    adminMode: PropTypes.string.isRequired,
-    onSaved: PropTypes.func,
-    onClose: PropTypes.func,
-};
-
-export default ConfigurationEditor;

package/src/Components/GeneralFragments/ConfiguratorOverlay.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import RaisedButton from '../../UIComponents/RaisedButton';
-import { T } from '../../App/i18n';
-
-class ConfiguratorOverlay extends React.Component {
-    static defaultProps = {
-        closeButtonText: 'Close',
-        saveButtonText: 'Save',
-    };
-
-    componentDidMount() {
-        if (this.props.show) {
-            document.body.style.overflow = 'hidden';
-        }
-    }
-
-    componentWillUnmount() {
-        document.body.style.overflow = '';
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            document.body.style.overflow = 'hidden';
-        } else if (!this.props.show && prevProps.show) {
-            document.body.style.overflow = '';
-        }
-    }
-
-    render() {
-        const {
-            configuratorUrl,
-            onClose,
-            onSave,
-            show,
-            iframeRef,
-            closeButtonText,
-            saveButtonText,
-            children,
-        } = this.props;
-        return (
-            (show && (
-                <div className="configurator-overlay">
-                    <iframe src={configuratorUrl} ref={iframeRef} />
-                    <div className="configurator-overlay-actions">
-                        <RaisedButton label={T(closeButtonText)} onClick={onClose} />
-                        {onSave && <RaisedButton primary={true} label={T(saveButtonText)} onClick={onSave} />}
-                    </div>
-                    {children}
-                </div>
-            )) ||
-            null
-        );
-    }
-}
-
-export default ConfiguratorOverlay;

package/src/Components/GeneralFragments/Content.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { withTheme } from '@material-ui/core';
-
-const Content = props => {
-    return (
-        <div className="content" style={{ color: props.theme.palette.text.primary }}>
-            {props.children}
-        </div>
-    );
-};
-
-export default withTheme()(Content);

package/src/Components/GeneralFragments/Headline.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { withTheme } from '@material-ui/core';
-
-const Headline = props => {
-    const Headline = `h${props.priority || 1}`;
-    return (
-        <Headline
-            style={{ color: props.theme.palette.text.primary, ...props.style }}
-            className={props.className}
-        >
-            {props.text || props.children}
-        </Headline>
-    );
-};
-
-export default withTheme()(Headline);

package/src/Components/GeneralFragments/Image.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { T } from '../../App/i18n';
-import networkConfig from '../../App/Config/network';
-import './Styles.scss';
-
-export default class Image extends React.Component {
-    static defaultProps = {
-        basePath: networkConfig.basePath,
-    };
-
-    state = {
-        brokenImg: false,
-    };
-
-    onImageError = () => {
-        this.setState({ brokenImg: true });
-    };
-
-    render() {
-        if (this.state.brokenImg) {
-            return <span className="brokenImg">{T('image.brokenImgText')}</span>;
-        }
-        return <img src={this.props.src} onError={this.onImageError} />;
-    }
-}