@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Creator/Components/OptionclassificationEditor.js

@@ -1,483 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-
-import IconButton from '../../../UIComponents/IconButton';
-import RaisedButton from '../../../UIComponents/RaisedButton';
-import FlatButton from '../../../UIComponents/FlatButton';
-import Dialog from '../../../UIComponents/Dialog';
-import IconAdd from '../../../UIComponents/icons/AddIcon';
-import IconDelete from '../../../UIComponents/icons/DeleteIcon';
-import IconExpandMore from '../../../UIComponents/icons/ExpandMoreIcon';
-import IconExpandLess from '../../../UIComponents/icons/ExpandLessIcon';
-import IconSettings from '../../../UIComponents/icons/SettingsIcon';
-import IconPrice from '@material-ui/icons/MonetizationOn';
-
-import Checkbox from '../../../Components/FormFragments/Checkbox';
-import Image from '../../../Components/GeneralFragments/Image';
-import TwoSideSelect from '../../../Components/FormFragments/TwoSideSelect';
-import SearchBar from '../../../Components/SearchBar';
-import { T } from '../../../App/i18n';
-
-import {
-    showOptionSelection,
-    fetchOptions,
-    setOptions,
-    commitOptions,
-    showOptionEditor,
-    setOptionData,
-    commitOptionData,
-    showOptionPriceEditor,
-} from '../Reducers/ConfigurationActions';
-import { connect } from 'react-redux';
-
-import OptionPriceEditor from './OptionPriceEditor';
-
-import '../../Item/Components/Styles.scss';
-import Toggle from "../../../Components/FormFragments/Toggle";
-import {
-    arrayMove,
-    SortableContainer,
-    SortableElement
-} from "react-sortable-hoc";
-
-const OptionActionButton = ({ onClick, IconComponent }) => (
-    <div className="optionActionButton-wrapper">
-        <IconButton onClick={onClick}>
-            <IconComponent />
-        </IconButton>
-    </div>
-);
-
-class OptionclassificationEditorOptionTile extends React.Component {
-    remove = () => {
-        this.props.onRemoveOption(this.props.option);
-    };
-
-    openSettingsDialog = () => {
-        this.props.onEditOption(this.props.option);
-    };
-
-    openPriceDialog = () => {
-        this.props.onEditPrice(this.props.option);
-    };
-
-    render() {
-        const { option, priceEditEnabled } = this.props;
-
-        return (
-            <div className="optionclassificationEditor-option">
-                <div className="optionImg">
-                    <Image src={option.thumbnail} />
-                </div>
-
-                <div className="optionTitle">{option.title || option.translated_title}</div>
-                <div className="optionIdentifier" title={option.identifier}>
-                    {option.identifier}
-                </div>
-
-                <div className="optionActions">
-                    <OptionActionButton onClick={this.remove} IconComponent={IconDelete} />
-                    <OptionActionButton onClick={this.openSettingsDialog} IconComponent={IconSettings} />
-                    {priceEditEnabled && (
-                        <OptionActionButton onClick={this.openPriceDialog} IconComponent={IconPrice} />
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-const SortableList = SortableContainer(props => {
-    return <ul>{props.children}</ul>;
-});
-
-const SortableOptionTile = SortableElement( props => {
-    return (
-        <OptionTile
-           option={props.value}
-           onRemoveOption={props.onRemoveOption}
-           onEditOption={props.onEditOption}
-           onEditPrice={props.onEditPrice}
-           priceEditEnabled={props.priceEditEnabled}
-        />
-    );
-});
-
-const OptionTile = ({option, priceEditEnabled, onRemoveOption, onEditOption, onEditPrice}) => {
-    return (
-        <li key={option.identifier} className='draggable-option-item'>
-            <OptionclassificationEditorOptionTile
-                option={option}
-                onRemoveOption={onRemoveOption}
-                onEditOption={onEditOption}
-                onEditPrice={onEditPrice}
-                priceEditEnabled={priceEditEnabled}
-            />
-        </li>
-    );
-};
-
-class OptionclassificationEditorItem extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            open: false,
-        };
-    }
-
-    toggle = () => this.setState({ open: !this.state.open });
-
-    removeOption = option => {
-        // do the change on a cloned optionclassification
-        const component = _.cloneDeep(this.props.optionclassification);
-        _.remove(component.selectableOptions, { identifier: option.identifier });
-        this.props.onChange(component);
-    };
-
-    change = (field, value) => {
-        // do the change on a cloned optionclassification
-        const component = _.cloneDeep(this.props.optionclassification);
-        component[field] = value;
-        this.props.onChange(component);
-    };
-
-    addOption = () => {
-        this.props.onAddOption(this.props.optionclassification);
-    };
-
-    editOption = option => {
-        this.props.onEditOption(this.props.optionclassification, option);
-    };
-
-    editOptionPrice = option => {
-        this.props.onEditOptionPrice(this.props.optionclassification, option);
-    };
-
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        let component = this.props.optionclassification;
-        const items = arrayMove(component.selectableOptions, oldIndex, newIndex);
-        component.selectableOptions = items.map((item, index) => {
-            item.sequenceNumber = index + 1;
-            return item;
-        });
-        this.props.onChange(component);
-    };
-
-    render() {
-        const { optionclassification, number, sortable, priceEditEnabled } = this.props;
-        const { selectableOptions } = optionclassification;
-        const { open } = this.state;
-
-        return (
-            <div className="optionclassificationEditor-item">
-                <div className={'headline' + (open ? ' open' : '')} onClick={this.toggle}>
-                    <span>
-                        {number}. {optionclassification.title || optionclassification.translated_title} (
-                        {optionclassification.identifier})
-                    </span>
-
-                    <IconButton>{open ? <IconExpandLess /> : <IconExpandMore />}</IconButton>
-                </div>
-
-                <div className={'details' + (open ? ' open' : '')}>
-                    <div className="optionclassificationEditor-itemProps">
-                        <Checkbox
-                            name="isMultiselect"
-                            label={T('constructionPatterns.components.is_multiselect')}
-                            onChange={this.change}
-                            value={optionclassification.isMultiselect}
-                        />
-                        <Checkbox
-                            name="isMandatory"
-                            label={T('constructionPatterns.components.is_mandatory')}
-                            onChange={this.change}
-                            value={optionclassification.isMandatory}
-                        />
-                    </div>
-
-                    <RaisedButton
-                        label={T('constructionPatterns.components.addOptionButtonText')}
-                        onClick={this.addOption}
-                        className="optionclassificationEditor-addOption"
-                        color="secondary"
-                        icon={<IconAdd />}
-                    />
-
-                    {selectableOptions &&
-                        (sortable ?
-                            <div className="options-wrapper">
-                                <SortableList
-                                    onSortEnd={this.onSortEnd}
-                                    axis="x"
-                                    lockAxis="x"
-                                    pressDelay="150"
-                                >
-                                    {selectableOptions.map((option, index) => {
-                                        return (
-                                            <SortableOptionTile
-                                                key={option.id}
-                                                index={index}
-                                                value={option}
-                                                onRemoveOption={this.removeOption}
-                                                onEditOption={this.editOption}
-                                                onEditPrice={this.editOptionPrice}
-                                                priceEditEnabled={priceEditEnabled}
-                                            />
-                                        );
-                                    })}
-                                </SortableList>
-                            </div>
-                            :
-                            <div className="options-wrapper">
-                                <ul>
-                                    {selectableOptions.map(option => {
-                                        return (
-                                            <OptionTile 
-                                                option={option}
-                                                onRemoveOption={this.removeOption}
-                                                onEditOption={this.editOption}
-                                                onEditPrice={this.editOptionPrice}
-                                                priceEditEnabled={priceEditEnabled}
-                                            />
-                                        );
-                                    })}
-                                </ul>
-                            </div>
-                        )}
-                </div>
-            </div>
-        );
-    }
-}
-
-class OptionclassificationEditor extends React.Component {
-    change = oc => {
-        // do the change on a cloned value
-        const value = _.cloneDeep(this.props.value);
-        const index = _.findIndex(value, { identifier: oc.identifier });
-        if (index !== -1) {
-            value[index] = oc;
-        }
-        this.props.onChange(this.props.name, value);
-    };
-
-    addOption = component => {
-        this.props.showOptionSelection(true, component);
-    };
-
-    editOption = (component, option) => {
-        this.props.showOptionEditor(true, component, option);
-    };
-
-    editOptionPrice = (component, option) => {
-        this.props.showOptionPriceEditor(true, component, option);
-    };
-
-    render() {
-        const { value, priceEditEnabled, overrideOptionOrder, setOverrideOptionOrder, showOverrideOptionOrderSaveHint, ...otherProps } = this.props;
-
-        return (
-            <div className="optionclassificationEditor-wrapper">
-                <div className="optionclassificationEditor-info">
-                    {T(
-                        value.length > 0
-                            ? 'constructionPatterns.option.sourceHeadline'
-                            : 'constructionPatterns.components.noComponentsSelected'
-                    )}
-                </div>
-                <Toggle
-                    label={T('constructionPatterns.overrideOptionOrder')}
-                    value={overrideOptionOrder}
-                    onChange={(name, checked) => setOverrideOptionOrder(checked)}
-                    fullWidth={false}
-                    error={showOverrideOptionOrderSaveHint ? T('constructionPatterns.overrideOptionOrderHint') : null}
-                />
-                {value.map((oc, idx) => {
-                    return (
-                        <OptionclassificationEditorItem
-                            key={oc.identifier}
-                            number={idx + 1}
-                            optionclassification={oc}
-                            onChange={this.change}
-                            onAddOption={this.addOption}
-                            onEditOption={this.editOption}
-                            onEditOptionPrice={this.editOptionPrice}
-                            priceEditEnabled={priceEditEnabled}
-                            sortable={overrideOptionOrder}
-                        />
-                    );
-                })}
-
-                <OptionSelection {...otherProps} />
-
-                <OptionEditor {...otherProps} />
-
-                <OptionPriceEditor {...otherProps} />
-            </div>
-        );
-    }
-}
-
-class OptionSelection extends React.Component {
-    componentWillReceiveProps(props) {
-        if (!this.props.showOptionSelectionDialog && props.showOptionSelectionDialog) {
-            this.props.fetchOptions();
-        }
-    }
-
-    closeOptionSelection = () => {
-        this.props.showOptionSelection(false);
-    };
-
-    setOptionSelection = () => {
-        this.props.commitOptions();
-    };
-
-    change = (name, value) => {
-        this.props.setOptions(value);
-    };
-
-    searchChange = text => {
-        this.props.fetchOptions(text);
-    };
-
-    renderItemContent(option) {
-        return (
-            <div className="optionSelection-twoSideSelect-item">
-                <div className="optionImg">
-                    <Image src={option.thumbnail} />
-                </div>
-
-                <div className="optionTitle">{option.title || option.translated_title}</div>
-                <div className="optionIdentifier" title={option.identifier}>
-                    {option.identifier}
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const { selectedComponent, showOptionSelectionDialog, options } = this.props;
-        const selectedOptions = _.get(selectedComponent, 'selectableOptions', []);
-
-        const actions = [
-            <FlatButton label={T('Select')} primary={true} onClick={this.setOptionSelection} />,
-            <FlatButton label={T('Cancel')} primary={false} onClick={this.closeOptionSelection} />,
-        ];
-
-        return (
-            <Dialog
-                title={T('constructionPatterns.option.dialogTitle', { component: selectedComponent && (selectedComponent.title || selectedComponent.translated_title) })}
-                actions={actions}
-                modal={'true'}
-                open={showOptionSelectionDialog}
-                bodyClassName="optionSelection-dialogBody"
-            >
-                <div className="optionSelection-headline">
-                    <div className="source-text">
-                        {T('constructionPatterns.option.sourceHeadline')}
-                        <SearchBar
-                            label={'Search'}
-                            onChange={this.searchChange}
-                            className="optionSelection-searchBar"
-                        />
-                    </div>
-                    <div className="selection-text">{T('constructionPatterns.option.selectionHeadline')}</div>
-                </div>
-
-                <TwoSideSelect
-                    className="optionSelection-twoSideSelect"
-                    name="selectedoptions"
-                    source={options}
-                    value={selectedOptions}
-                    onChange={this.change}
-                    sortable={false}
-                    renderItemContent={this.renderItemContent}
-                />
-            </Dialog>
-        );
-    }
-}
-
-class OptionEditor extends React.Component {
-    closeOptionEditor = () => {
-        this.props.showOptionEditor(false);
-    };
-
-    setOptionData = () => {
-        this.props.commitOptionData();
-    };
-
-    change = (name, value) => {
-        this.props.setOptionData(name, value);
-    };
-
-    render() {
-        const { selectedOption, showOptionEditorDialog } = this.props;
-
-        const actions = [
-            <FlatButton label={T('Select')} primary={true} onClick={this.setOptionData} />,
-            <FlatButton label={T('Cancel')} primary={false} onClick={this.closeOptionEditor} />,
-        ];
-
-        const title = (
-            <h3>
-                {selectedOption ? (selectedOption.title || selectedOption.translated_title) + ' - ' : ''}
-                {T('constructionPatterns.option.settings')}
-            </h3>
-        );
-
-        return (
-            <Dialog
-                title={title}
-                actions={actions}
-                modal={'true'}
-                open={showOptionEditorDialog}
-                bodyClassName="optionEditor-dialogBody"
-            >
-                {selectedOption && (
-                    <div className="optionEditor-itemProps">
-                        <Checkbox
-                            name="amountIsSelectable"
-                            label={T('constructionPatterns.option.amount_is_selectable')}
-                            onChange={this.change}
-                            value={selectedOption.amountIsSelectable}
-                        />
-                    </div>
-                )}
-            </Dialog>
-        );
-    }
-}
-
-function mapStateToProps({ baseConfigurationData, creatorData }) {
-    return {
-        showOptionSelectionDialog: baseConfigurationData.showOptionSelectionDialog,
-        selectedComponent: baseConfigurationData.selectedComponent,
-        showOptionEditorDialog: baseConfigurationData.showOptionEditorDialog,
-        showOptionPriceEditorDialog: baseConfigurationData.showOptionPriceEditorDialog,
-        selectedOption: baseConfigurationData.selectedOption,
-        options: baseConfigurationData.selectableOptions,
-        product: creatorData.source,
-        showOverrideOptionOrderSaveHint: baseConfigurationData.showOverrideOptionOrderSaveHint,
-        priceEditEnabled:
-            _.get(baseConfigurationData, 'dataSources.settings.calculationMethod') === 'deltaprices',
-    };
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        showOptionSelection: (show, component) => dispatch(showOptionSelection(show, component)),
-        fetchOptions: text => dispatch(fetchOptions(text)),
-        setOptions: options => dispatch(setOptions(options)),
-        commitOptions: () => dispatch(commitOptions()),
-        showOptionEditor: (show, component, option) => dispatch(showOptionEditor(show, component, option)),
-        showOptionPriceEditor: (show, component, option) =>
-            dispatch(showOptionPriceEditor(show, component, option)),
-        setOptionData: (name, value) => dispatch(setOptionData(name, value)),
-        commitOptionData: () => dispatch(commitOptionData()),
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(OptionclassificationEditor);

package/src/Screens/Creator/Components/Rules/Containers/Edit.js

@@ -1,180 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import withStyles from '@material-ui/core/styles/withStyles';
-import get from 'lodash/get';
-
-import Actions, { REDUCER_NAME, RULE_TYPES_KEY } from '../../../Reducers/Rules/Actions';
-
-import { connectDefault } from '../../../../../Components/DefaultConnectedForm';
-import { T } from '../../../../../App/i18n';
-import { formsByType } from './RuleForms';
-
-const Headline = ({ children }) => <h3 className="editorHeadline">{children}</h3>;
-
-const RuleSplitContainer = props => {
-    const { showDetails, showList, listComponent, detailsComponent, detailsTitle } = props;
-    return (
-        <div className={'split-container'}>
-            {showList && (
-                <div className={showDetails ? 'split-left' : ''}>
-                    <div className="headlineWrapper">
-                        <Headline>{T('ruleEditor.addRule')}</Headline>
-                        <div className="hintText">{T('ruleEditor.selectRuleTypeHint')}</div>
-                    </div>
-
-                    {listComponent}
-                </div>
-            )}
-
-            {showDetails && (
-                <div className={showList ? 'split-right' : ''}>
-                    <div className="headlineWrapper">
-                        <Headline>{detailsTitle}</Headline>
-                    </div>
-                    {detailsComponent}
-                </div>
-            )}
-        </div>
-    );
-};
-
-const ruleTypeItemStyles = theme => {
-    return {
-        root: {
-            '&.selected': {
-                backgroundColor: theme.palette.primary.main,
-                color: theme.palette.primary.contrastText,
-            },
-        },
-    };
-};
-
-const RuleTypeItem = withStyles(ruleTypeItemStyles)(({ ruleType, selected, classes, onSelect }) => {
-    const onClick = () => onSelect(ruleType);
-    const className = `${classes.root} ${selected ? 'selected' : ''}`;
-    return (
-        <div onClick={onClick} className={className}>
-            {T(`ruleEditor.ruleTypes.${ruleType.identifier}.name`)}
-        </div>
-    );
-});
-
-class RuleTypeList extends Component {
-    componentDidMount() {
-        this.props.loadRuleTypes();
-    }
-
-    onChange = ruleType => {
-        this.props.setRuleType(ruleType);
-        this.props.onChange && this.props.onChange(this.props.name, ruleType);
-    };
-
-    render() {
-        const { ruleTypes, value } = this.props;
-        return (
-            <div>
-                <div className="ruleTypeList">
-                    {ruleTypes.map(ruleType => {
-                        const selected = ruleType.identifier === value.identifier;
-                        return (
-                            <RuleTypeItem
-                                key={ruleType.identifier}
-                                ruleType={ruleType}
-                                onSelect={this.onChange}
-                                selected={selected}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    }
-}
-
-const ConnectedRuleList = connect(
-    ({ dataBySource, ...state }) => ({
-        ruleTypes: get(dataBySource[RULE_TYPES_KEY], 'data.data', []),
-        value: get(state[REDUCER_NAME], 'data.ruleType.value', {}),
-    }),
-    dispatch => ({
-        loadRuleTypes: () => dispatch(Actions.fetchRuleTypes()),
-        setRuleType: ruleType => dispatch(Actions.setRuleType(ruleType)),
-    })
-)(RuleTypeList);
-
-class RuleForm extends Component {
-    onChange = (field, value) => {
-        /*const [ containerField, subField ] = field.split('.');
-
-        // merge the data field instead of replacing it
-        if (containerField && subField) {
-            const { entityState } = this.props;
-            const currentData = get(entityState, `data.${containerField}.value`);
-            return this.props.setData(containerField, { ...currentData, [subField]: value });
-        }*/
-
-        return this.props.setData(field, value);
-    };
-
-    submit = () => {
-        this.props.postData();
-    };
-
-    renderList() {
-        return <ConnectedRuleList name="ruleType" />;
-    }
-
-    renderForm() {
-        const { entityState } = this.props;
-        const ruleType = get(entityState, 'data.ruleType.value');
-
-        if (!ruleType) {
-            return null; // nothing to render if no rule type selected
-        }
-
-        const Form = formsByType[ruleType.identifier];
-
-        if (!Form) {
-            return (
-                <div>
-                    Form does not exist for the rule type &apos;{ruleType.identifier}&apos;. Create one first.
-                </div>
-            );
-        }
-
-        return (
-            <Form
-                data={entityState.data}
-                dataDataHelper={entityState.data.data}
-                onChange={this.onChange}
-                onSubmit={this.submit}
-                onCancel={this.props.hideDetails}
-            />
-        );
-    }
-
-    render() {
-        const { entityState } = this.props;
-        const ruleTypeIdentifier = get(entityState, 'data.ruleType.value.identifier');
-        const showDetails = entityState.showDetails && (entityState.isNew ? ruleTypeIdentifier : true);
-
-        return (
-            <RuleSplitContainer
-                showDetails={showDetails}
-                showList={entityState.isNew}
-                detailsComponent={this.renderForm()}
-                listComponent={this.renderList()}
-                detailsTitle={T(`ruleEditor.ruleTypes.${ruleTypeIdentifier}.name`)}
-            />
-        );
-    }
-}
-
-export default connectDefault(
-    RuleForm,
-    REDUCER_NAME,
-    Actions.setFieldData,
-    Actions.postData,
-    Actions.hideDetails,
-    Actions.customAction
-);