@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Designer/SubScreens/DesignAreas/Components/ColorPalettes.js

@@ -1,387 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { find, isFunction, first } from 'lodash';
-import { t } from '../../../../../App/i18n';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Button from '@material-ui/core/Button/Button';
-import Select from '@material-ui/core/Select/Select';
-import Input from '@material-ui/core/Input/Input';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText/ListItemText';
-import FormControl from '@material-ui/core/FormControl/FormControl';
-import Typography from '@material-ui/core/Typography/Typography';
-import TextField from '@material-ui/core/TextField/TextField';
-import grey from '@material-ui/core/colors/grey';
-import TranslationFinder from '../../../../../Components/TranslationFinder';
-
-const styles = theme => ({
-    container: {
-        pointerEvents: 'all', // catch the pointer events again
-    },
-    card: {
-        borderTop: '7px solid ' + theme.palette.primary.main,
-
-        [theme.breakpoints.down('xs')]: {
-            boxShadow: 'none',
-        },
-    },
-    cardUnboxed: {
-        borderTop: 'none',
-        boxShadow: 'none',
-
-        [theme.breakpoints.down('xs')]: {
-            boxShadow: 'none',
-        },
-    },
-    customColorWrapper: {
-        display: 'inline-flex',
-        margin: '35px auto',
-
-        [theme.breakpoints.between('xs', 'sm')]: {
-            display: 'block',
-        },
-        [theme.breakpoints.down('xs')]: {
-            display: 'inline-flex',
-        },
-    },
-    customColorGrid: {
-        textAlign: 'center',
-        margin: 'auto',
-    },
-    alignTypo: {
-        textAlign: 'center',
-        width: '80%',
-        margin: '10px auto',
-    },
-    arrowNone: {
-        display: 'none',
-    },
-    colorPaletteColors: {
-        outline: '1px solid black',
-        width: 20,
-        height: 20,
-    },
-    colorPaletteWrapper: {
-        maxHeight: 400,
-        overflowY: 'auto',
-        padding: 5,
-    },
-    colorWrapper: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        marginTop: 10,
-        width: 'calc(100% / 3)',
-
-        [theme.breakpoints.between('xs', 'sm')]: {
-            flexDirection: 'column',
-        },
-        '&:hover': {
-            cursor: 'pointer',
-        },
-
-        '&.selected': {},
-    },
-    selectedColorText: {
-        '& span': {
-            fontSize: '12px',
-            fontWeight: 'bold',
-            fontStyle: 'italic',
-            textDecoration: 'underline',
-        },
-    },
-    selectColorMenu: {
-        '& div': {
-            '& span': {
-                textAlign: 'center',
-                fontSize: 14,
-            },
-        },
-    },
-    colorPaletteButton: {
-        textTransform: 'none',
-        leftAlign: 30,
-    },
-    selectedColorButtonLabel: {
-        color: 'white',
-    },
-    selectedColorButton: {
-        marginTop: 7,
-        backgroundColor: grey[900],
-        '&:hover': {
-            backgroundColor: grey[700],
-        },
-    },
-    selectedColorGrid: {
-        margin: '0 auto',
-    },
-    ColorPalettesCloseIcon: {
-        position: 'absolute',
-        right: 10,
-        top: 15,
-
-        '&:hover': {
-            cursor: 'pointer',
-        },
-    },
-    RootListItem: {
-        margin: '0 6px',
-        padding: 0,
-
-        '& span': {
-            fontsize: 10.5,
-        },
-    },
-    selectedColorField: {
-        padding: '15px 14px',
-        fontSize: 12,
-    },
-    selectedColorLabel: {
-        fontSize: 12,
-    },
-    selectedColorWrap: {
-        outline: 'solid gray 2px',
-        boxShadow: '3px 2px 5px gray',
-    },
-});
-
-class ColorPalettes extends React.Component {
-    static propTypes = {
-        boxed: PropTypes.bool,
-        classes: PropTypes.object,
-        colorPaletteIdentifier: PropTypes.string,
-        colorPalettes: PropTypes.array,
-        closeColorPalettes: PropTypes.func,
-        colorSelectClick: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const { selectedColor, colorPalettes } = this.props;
-        const selectedColorData = selectedColor && selectedColor.identifier ? selectedColor.identifier : {};
-
-        const colorPaletteIdentifier = selectedColorData.palette
-            ? selectedColorData.palette
-            : first(colorPalettes).identifier;
-        const customColor = selectedColorData.custom ? selectedColorData.color : '';
-
-        this.state = {
-            colorPaletteIdentifier,
-            customColor,
-            customColorError: null,
-        };
-    }
-
-    colorSelectChange = (evt, color, paletteIdentifier) => {
-        evt.preventDefault();
-        if (isFunction(this.props.colorSelectClick)) {
-            this.props.colorSelectClick(color.hex_value, color.identifier, paletteIdentifier, false);
-        }
-    };
-
-    onColorPaletteChange = evt => {
-        this.setState({ colorPaletteIdentifier: evt.target.value });
-    };
-
-    onCustomColorChange = evt => {
-        this.setState({
-            customColor: evt.target.value,
-            customColorError: null,
-        });
-    };
-
-    onApplyColor = () => {
-        const customColor = this.state.customColor;
-        if (!customColor) {
-            this.setState({ customColorError: t('colorPalettesDialog.emptyColorCode') });
-            return;
-        }
-        this.props.closeColorPalettes();
-        this.props.colorSelectClick(customColor, customColor, null, true);
-    };
-
-    render() {
-        const { boxed, classes, colorPalettes, closeColorPalettes, selectedColor } = this.props;
-
-        const { colorPaletteIdentifier, customColor, customColorError } = this.state;
-
-        const multiplePalettes = colorPalettes.length > 1;
-        const arrowVisible = !multiplePalettes ? classes.arrowNone : '';
-        const classesColorWrapSelected = classes.colorPaletteColors + ' ' + classes.selectedColorWrap;
-        const classesColorWrap = classes.colorPaletteColors;
-        const palette = find(colorPalettes, { identifier: colorPaletteIdentifier }) || { identifier: '' };
-
-        return (
-            <Grid container className={classes.container}>
-                <Grid item xs={12} md={12}>
-                    <Card className={boxed ? classes.card : classes.cardUnboxed} style={{ height: '100%' }}>
-                        <CardContent>
-                            <Grid container>
-                                <Grid item xs={12} md={12} lg={12}>
-                                    <Typography variant="body1" className={classes.alignTypo}>
-                                        <b>{t('colorPalettesDialog.title')}</b>
-                                    </Typography>
-                                    <Typography variant="body1" className={classes.alignTypo}>
-                                        {t('colorPalettesDialog.description')}
-                                    </Typography>
-                                </Grid>
-                                <Grid item className={classes.customColorWrapper} xs={12} md={12} lg={12}>
-                                    <Grid className={classes.customColorGrid} item xs={6} md={6} lg={6}>
-                                        <TextField
-                                            value={customColor}
-                                            onChange={this.onCustomColorChange}
-                                            variant="outlined"
-                                            label={t('colorPalettesDialog.colorCode')}
-                                            placeholder={t('colorPalettesDialog.colorSpecify')}
-                                            InputProps={{
-                                                classes: {
-                                                    input: classes.selectedColorField,
-                                                },
-                                            }}
-                                            InputLabelProps={{
-                                                classes: {
-                                                    formControl: classes.selectedColorLabel,
-                                                },
-                                            }}
-                                            error={!!customColorError}
-                                            helperText={customColorError}
-                                        />
-                                    </Grid>
-                                    <Grid
-                                        className={classes.customColorGrid + ' ' + classes.selectedColorGrid}
-                                        item
-                                        xs={6}
-                                        md={6}
-                                        lg={6}
-                                    >
-                                        <Button
-                                            onClick={this.onApplyColor}
-                                            className={classes.colorPaletteButton}
-                                            size="medium"
-                                            variant="contained"
-                                            classes={{
-                                                root: classes.selectedColorButton,
-                                                label: classes.selectedColorButtonLabel,
-                                            }}
-                                        >
-                                            {t('colorPalettesDialog.apply')}
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-
-                                <Grid item xs={12} md={12} lg={12}>
-                                    <FormControl fullWidth className={classes.formControl}>
-                                        <Select
-                                            value={palette.identifier}
-                                            onChange={this.onColorPaletteChange}
-                                            input={
-                                                <Input id="colorPaletteInput" readOnly={!multiplePalettes} />
-                                            }
-                                            classes={{
-                                                selectMenu: classes.selectColorMenu,
-                                                icon: arrowVisible,
-                                            }}
-                                        >
-                                            {colorPalettes.map((colorPalette, index) => (
-                                                <MenuItem
-                                                    key={index}
-                                                    value={colorPalette.identifier}
-                                                    aria-label={
-                                                        <TranslationFinder
-                                                            data={colorPalette.texts}
-                                                            property="title"
-                                                            fallback={colorPalette.identifier}
-                                                        />
-                                                    }
-                                                >
-                                                    <ListItemText
-                                                        primary={
-                                                            <TranslationFinder
-                                                                data={colorPalette.texts}
-                                                                property="title"
-                                                                fallback={colorPalette.identifier}
-                                                            />
-                                                        }
-                                                    />
-                                                </MenuItem>
-                                            ))}
-                                        </Select>
-                                    </FormControl>
-                                    <div className={classes.colorPaletteWrapper}>
-                                        {palette.colors &&
-                                            palette.colors.map((color, index) => (
-                                                <div
-                                                    key={index}
-                                                    className={classes.colorWrapper}
-                                                    onMouseDown={evt =>
-                                                        this.colorSelectChange(evt, color, palette.identifier)
-                                                    }
-                                                >
-                                                    <div
-                                                        className={
-                                                            selectedColor &&
-                                                            selectedColor.identifier &&
-                                                            selectedColor.identifier.color ===
-                                                                color.identifier
-                                                                ? classesColorWrapSelected
-                                                                : classesColorWrap
-                                                        }
-                                                        style={{ background: '#' + color.hex_value }}
-                                                        aria-label={
-                                                            <TranslationFinder
-                                                                data={color.texts}
-                                                                property="title"
-                                                                fallback={color.identifier}
-                                                            />
-                                                        }
-                                                        key={index}
-                                                    />
-                                                    <ListItemText
-                                                        className={
-                                                            selectedColor &&
-                                                            selectedColor.identifier &&
-                                                            selectedColor.identifier.color ===
-                                                                color.identifier
-                                                                ? classes.selectedColorText
-                                                                : 'variant-list'
-                                                        }
-                                                        classes={{ root: classes.RootListItem }}
-                                                        primary={
-                                                            <TranslationFinder
-                                                                data={color.texts}
-                                                                property="title"
-                                                                fallback={color.identifier}
-                                                            />
-                                                        }
-                                                    />
-                                                </div>
-                                            ))}
-                                    </div>
-                                    <Grid className={classes.customColorGrid} item xs={6} md={6} lg={6}>
-                                        <Button
-                                            onClick={closeColorPalettes}
-                                            className={classes.colorPaletteButton}
-                                            size="medium"
-                                            variant="contained"
-                                            classes={{
-                                                root: classes.selectedColorButton,
-                                                label: classes.selectedColorButtonLabel,
-                                            }}
-                                        >
-                                            {t('colorPalettesDialog.apply')}
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </CardContent>
-                    </Card>
-                </Grid>
-            </Grid>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'ColorPalettes' })(ColorPalettes);

package/src/Screens/Designer/SubScreens/DesignAreas/Components/FormArray.dev.js

@@ -1,61 +0,0 @@
-// dev mode: http://localhost:3000/dev?Screens/Designer/SubScreens/DesignAreas/Components/FormArray
-
-import React from 'react';
-import FormArray from './FormArray';
-import { withStateProps } from '../../../../../Utils/Dev/withStateProps';
-
-const selectOptions = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
-
-const props = {
-    value: [],
-    schema: {
-        id: { value: null },
-    },
-    name: 'designProductionMethods',
-    label: 'designProductionMethod',
-    formArray: {
-        FormComponent: props => {
-            const onChange = ({ target: { name, value } }) =>
-                props.onChange(
-                    {
-                        ...props.data,
-                        [name]: value,
-                    },
-                    props.rowNumber
-                );
-
-            return (
-                <div id={'dpm-' + props.data.id}>
-                    <select name="id" onChange={onChange} value={props.data.id || ''}>
-                        <option value={false}>Select an option</option>
-                        {selectOptions.map(o => (
-                            <option key={o.id} value={o.id}>
-                                {o.id}
-                            </option>
-                        ))}
-                    </select>
-                    <input
-                        name={'width'}
-                        placeholder={'width'}
-                        onChange={onChange}
-                        value={props.data.width}
-                    />
-                    <button name={'remove'} onClick={() => props.onRemove(props.data)}>
-                        remove
-                    </button>
-                </div>
-            );
-        },
-        updateOnPropertyMatch: 'id',
-    },
-};
-
-export default withStateProps(
-    props,
-    state => state,
-    setState => ({
-        onChange: (name, value) => {
-            setState(state => ({ ...state, value }));
-        },
-    })
-)(props => <FormArray {...props} />);

package/src/Screens/Designer/SubScreens/DesignAreas/Components/FormArray.js

@@ -1,150 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import Typography from '@material-ui/core/Typography/Typography';
-import { withStyles } from '@material-ui/core/styles';
-
-import { T, t } from '../../../../../App/i18n';
-
-import { generateObjectPropertyStringComparator } from '../../../../../App/Utils';
-import RaisedButton from '../../../../../UIComponents/RaisedButton';
-import Add from '../../../../../UIComponents/icons/AddIcon';
-
-import Data from '../../../../../App/Data';
-
-const styles = () => ({
-    error: {
-        color: '#f44336',
-        fontSize: '0.75rem',
-    },
-});
-
-class FormArray extends Component {
-    state = {
-        showErrorMessage: false,
-    };
-
-    initSchema() {
-        const { schema } = this.props;
-        return new Data(schema);
-    }
-
-    validateProductionMethodList = value => {
-        const index = _.findIndex(value, { id: undefined });
-        if (index !== -1) {
-            this.setState({ showErrorMessage: true });
-        }
-        const result = _.filter(value, function(productionMethod) {
-            return productionMethod.id !== undefined;
-        });
-        return result;
-    };
-
-    onChange = (data, rowNumber = false) => {
-        const value = _.cloneDeep(_.isArray(this.props.value) ? this.props.value : []);
-        const updateOnPropertyMatch = _.get(this.props, 'formArray.updateOnPropertyMatch');
-
-        let item;
-        if (rowNumber !== false && value.length > rowNumber) {
-            item = value[rowNumber];
-        } else if (updateOnPropertyMatch) {
-            // find the item in the list with the same property value
-            item = _.find(
-                value,
-                generateObjectPropertyStringComparator(updateOnPropertyMatch, data[updateOnPropertyMatch])
-            );
-            if (!item) {
-                const lastAdded = _.last(value);
-                if (!lastAdded[updateOnPropertyMatch]) {
-                    item = lastAdded;
-                }
-            }
-        }
-        // if the item is there, merge the data into it
-        if (item) {
-            Object.assign(item, data);
-        }
-        // if it's a new item
-        else {
-            value.push(data);
-        }
-        const { name } = this.props;
-        const validatedResult = this.validateProductionMethodList(value);
-        this.props.onChange(name, validatedResult);
-    };
-
-    onAdd = () => {
-        const { name, value } = this.props;
-        const result = [].concat(_.isArray(value) ? value : []);
-        // get the default data from the schema and add it to the array
-        result.push(this.initSchema().getData());
-        this.props.onChange(name, result);
-    };
-
-    onRemove = data => {
-        const { name, value } = this.props;
-        const { showErrorMessage } = this.state;
-        const result = [].concat(value);
-        const idx = _.findIndex(result, data);
-        result.splice(idx, 1);
-        const idxUndefined = _.findIndex(result, { id: undefined });
-        if (idxUndefined === -1 && showErrorMessage) {
-            this.setState({ showErrorMessage: false });
-        }
-        this.props.onChange(name, result);
-    };
-
-    onDelete = data => {
-        const { name, value } = this.props;
-        const result = [].concat(value);
-        const idx = _.findIndex(result, data);
-        result.splice(idx, 1, data);
-        this.props.onChange(name, result);
-    };
-
-    renderAddButton = (disableAdd = false) => {
-        return (
-            !disableAdd && (
-                <RaisedButton color="secondary" onClick={this.onAdd} id="add">
-                    <Add />
-                    {T('Add')}
-                </RaisedButton>
-            )
-        );
-    };
-
-    render() {
-        const { label, formArray, value, errors, classes, ...props } = this.props;
-        const { disableAdd, FormComponent, updateOnPropertyMatch } = formArray;
-        const { showErrorMessage } = this.state;
-
-        return (
-            <div>
-                {label && <div className="label">{label}</div>}
-
-                {value.length > 0 &&
-                    value.map((data, idx) => (
-                        <FormComponent
-                            {...props}
-                            key={`${data[updateOnPropertyMatch]}-${idx}`}
-                            data={data}
-                            onChange={this.onChange}
-                            onRemove={this.onRemove}
-                            onDelete={this.onDelete}
-                            rowNumber={idx}
-                        />
-                    ))}
-
-                {showErrorMessage && (
-                    <Typography variant="body1" color="primary">
-                        {t('errors.noProdMethodLeft')}
-                    </Typography>
-                )}
-                {errors && <Typography className={classes.error}>{errors}</Typography>}
-
-                <div className="action-buttons">{this.renderAddButton(disableAdd)}</div>
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles)(FormArray);

package/src/Screens/Designer/SubScreens/DesignAreas/Components/FormArray.test.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import TestFormArray from './FormArray.dev';
-
-describe('DesignAreas/Components/FormArray', () => {
-    test('clicking Add button adds a new item', () => {
-        const wrapper = mount(<TestFormArray />);
-        const addButton = wrapper.find('#add button');
-        addButton.simulate('click');
-        expect(wrapper.find('#dpm-null').length).toBe(1);
-        addButton.simulate('click');
-        expect(wrapper.find('#dpm-null').length).toBe(2);
-        // make sure the FormComponent keys are unique
-        expect(
-            wrapper
-                .find('FormComponent')
-                .at(0)
-                .key()
-        ).toBe('null-0');
-        expect(
-            wrapper
-                .find('FormComponent')
-                .at(1)
-                .key()
-        ).toBe('null-1');
-    });
-    test('select the id of the first item sets the correct value', () => {
-        const wrapper = mount(<TestFormArray />);
-        const addButton = wrapper.find('#add button');
-        addButton.simulate('click');
-        wrapper.find('#dpm-null [name="id"]').simulate('change', { target: { name: 'id', value: 2 } });
-        expect(wrapper.find('#dpm-2 [name="id"]').prop('value')).toBe(2);
-    });
-    test('clicking remove button on the first element, the second stays in', () => {
-        const wrapper = mount(<TestFormArray />);
-        const addButton = wrapper.find('#add button');
-        addButton.simulate('click');
-        wrapper.find('#dpm-null [name="id"]').simulate('change', { target: { name: 'id', value: 2 } });
-        addButton.simulate('click');
-        wrapper.find('#dpm-null [name="id"]').simulate('change', { target: { name: 'id', value: 5 } });
-        wrapper.find('#dpm-2 [name="remove"]').simulate('click');
-        expect(wrapper.find('#dpm-2 [name="remove"]').length).toBe(0);
-        expect(wrapper.find('#dpm-5 [name="remove"]').length).toBe(1);
-    });
-});