@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Savedconfigurations/Components/ConfigurationDataSheet.js

@@ -1,263 +0,0 @@
-import React, { Component } from 'react';
-import { get } from 'lodash';
-import { T } from '../../../App/i18n';
-import RaisedButton from '../../../UIComponents/RaisedButton';
-import { Table, TableBody, TableRow, TableHeadColumn, TableRowColumn } from '../../../UIComponents/Table';
-import Link from '../../../UIComponents/Link';
-import networkConfig from '../../../App/Config/network';
-import { Tooltip } from '@material-ui/core';
-import OpenInNew from '@material-ui/icons/OpenInNew';
-
-const DataRow = ({ label, value, children, identifier, bold }) => (
-    <TableRow className="data-row">
-        <TableHeadColumn className="label" style={{ fontWeight: bold ? 'bold' : 'normal' }}>
-            {T(label)}
-            {identifier && <div style={styles.optionInformation}>{identifier}</div>}
-        </TableHeadColumn>
-        <TableRowColumn className="value">{value || children}</TableRowColumn>
-    </TableRow>
-);
-
-export const formatColorIdentifier = colorIdentifierStr => {
-    try {
-        const { color, palette } = JSON.parse(colorIdentifierStr);
-        return `${color}/${palette}`;
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-    }
-    return colorIdentifierStr;
-};
-
-const styles = {
-    link: {
-        color: 'black',
-        lineHeight: 3,
-        fontSize: 12,
-        cursor: 'pointer',
-        '&:hover': {
-            cursor: 'pointer',
-        },
-    },
-    optionInformation: {
-        fontSize: '80%',
-        opacity: '60%',
-        fontWeight: 'normal',
-    },
-    icon: {
-        marginLeft: '0.5em',
-        marginBottom: '-0.2em',
-        color: 'initial',
-    },
-};
-
-export default class ConfigurationDataSheet extends Component {
-    renderConfigurationData(data, locale) {
-        const configurationCode = get(data, 'code.value', '');
-        return (
-            <div className="configuration-data">
-                <Tooltip title={T('codeTooltip', { CODE: configurationCode })} placement={'bottom-start'}>
-                    <div className="section-title">{T('Configuration data')}</div>
-                </Tooltip>
-
-                <Table selectable={false}>
-                    <TableBody displayRowCheckbox={false}>
-                        <DataRow
-                            label="Date"
-                            value={get(data, 'date_created.value.date', '').replace(/\.0+$/, '')}
-                        />
-                        <DataRow label="Code">
-                            <Link
-                                target="_blank"
-                                href={`${networkConfig.configuratorBasePath}code:${configurationCode}`}
-                            >
-                                {configurationCode}
-                                <OpenInNew style={styles.icon} />
-                            </Link>
-                        </DataRow>
-                        <DataRow
-                            label="Item"
-                            value={
-                                get(data, 'item.value.title') +
-                                ' (' +
-                                get(data, 'item.value.identifier', '') +
-                                ')'
-                            }
-                        />
-                    </TableBody>
-                </Table>
-                {get(data, 'item.value.configurationModes[0].itemStatus.item_available') && (
-                    <div>
-                        <div className="section-title">{T('Selected options')}</div>
-
-                        <Table selectable={false}>
-                            <TableBody displayRowCheckbox={false}>
-                                {get(data, 'optionclassifications.value', []).map(oc => (
-                                    <DataRow
-                                        label={oc.title}
-                                        key={oc.identifier}
-                                        identifier={oc.identifier}
-                                        bold
-                                    >
-                                        {oc.selectedoptions &&
-                                            oc.selectedoptions.map(option => (
-                                                <div className="option" key={option.identifier}>
-                                                    <div className="title">
-                                                        {option.title}
-                                                        <div style={styles.optionInformation}>
-                                                            {option.identifier}
-                                                        </div>
-                                                    </div>
-                                                    <div className="price">{option.priceFormatted}</div>
-                                                    {option.amount_is_selectable && (
-                                                        <div className="amount">{option.amount}</div>
-                                                    )}
-                                                </div>
-                                            ))}
-                                    </DataRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </div>
-                )}
-
-                {get(data, 'previewImageURL.value') && (
-                    <div>
-                        <div className="section-title">{T('Preview image')}</div>
-                        <a href={data.previewImageURL.value} target="_blank" rel="noreferrer">
-                            <img className="preview" src={data.previewImageURL.value} />
-                        </a>
-                    </div>
-                )}
-
-                {get(data, 'item.value.configurationModes[1].itemStatus.item_available') && (
-                    <div>
-                        <div className="section-title">{T('design data')}</div>
-                        <Table selectable={false}>
-                            <TableBody displayRowCheckbox={false}>
-                                {get(data, 'designdata') &&
-                                    get(data, 'designdata.value', []).map(dd => (
-                                        <React.Fragment key={dd.DesignAreaIdentifier}>
-                                            <DataRow
-                                                label="DesignAreaIdentifier"
-                                                value={dd.designAreaIdentifier}
-                                            />
-                                            <DataRow
-                                                label="DesignProductionMethodIdentifier"
-                                                value={dd.designProductionMethodIdentifier}
-                                            />
-                                            {dd.colorAmount !== null && (
-                                                <DataRow label="colorAmount" value={dd.colorAmount} />
-                                            )}
-                                            {dd.texts &&
-                                                dd.texts.map(text => (
-                                                    <DataRow label="texts" key={text.text}>
-                                                        <div>
-                                                            <div className="wrapper-text">
-                                                                <div className="text-title">
-                                                                    <T>text</T>:
-                                                                </div>
-                                                                <div>{text.text}</div>
-                                                            </div>
-                                                            <div className="wrapper-text">
-                                                                <div className="text-title">
-                                                                    <T>font weight</T>:
-                                                                </div>
-                                                                <div>{text.fontWeight}</div>
-                                                            </div>
-                                                            <div className="wrapper-text">
-                                                                <div className="text-title">
-                                                                    <T>font</T>:
-                                                                </div>
-                                                                <div>
-                                                                    {text.fontFamily}
-                                                                    {text.customFont &&
-                                                                        T(' ({custom font})', {
-                                                                            interpolate: true,
-                                                                        })}
-                                                                </div>
-                                                            </div>
-                                                            <div className="wrapper-text">
-                                                                <div className="text-title">
-                                                                    <T>font size</T>:
-                                                                </div>
-                                                                <div>{text.fontSize}</div>
-                                                            </div>
-                                                            <div className="wrapper-text">
-                                                                <div className="text-title">
-                                                                    <T>font style</T>:
-                                                                </div>
-                                                                <div>{text.fontStyle}</div>
-                                                            </div>
-                                                            {text.colors &&
-                                                                text.colors.map(color => (
-                                                                    <div
-                                                                        className="wrapper-text"
-                                                                        key={color.identifier}
-                                                                    >
-                                                                        <div className="text-title">
-                                                                            <T>color</T>:
-                                                                        </div>
-                                                                        <div>{`${formatColorIdentifier(
-                                                                            color.identifier
-                                                                        )} ( ${color.value} )`}</div>
-                                                                    </div>
-                                                                ))}
-                                                        </div>
-                                                    </DataRow>
-                                                ))}
-                                            {dd.images &&
-                                                dd.images.map(image => (
-                                                    <DataRow label="images" key={image.image}>
-                                                        <div>{image.image}</div>
-                                                    </DataRow>
-                                                ))}
-                                        </React.Fragment>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                        <div>
-                            <div className="section-title">{T('productionDataLabel')}</div>
-                            <a
-                                style={styles.link}
-                                href={`${networkConfig.frontendBaseURL}configurations/zip/production/${configurationCode}?_language=${locale.replace('-', '_')}`}
-                            >
-                                {T('productionDataDownloadButtonLabel')}
-                            </a>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    render() {
-        const { postData, hideDetails, entityState, locale } = this.props;
-        const { data, isReady } = entityState;
-        
-        return (
-            <div style={{ height: '100%', width: '100%' }}>
-                {isReady && this.renderConfigurationData(data, locale)}
-
-                <div className="action-buttons">
-                    {postData && (
-                        <RaisedButton label={T('Save')} primary={true} onClick={postData} id="submit" />
-                    )}
-                    {hideDetails && (
-                        <RaisedButton
-                            label={T('Back')}
-                            className="full"
-                            primary={false}
-                            onClick={hideDetails}
-                            id="back"
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-export const generateConfigurationDataSheet = (formFields = []) => props => (
-    <ConfigurationDataSheet {...props} formFields={formFields} />
-);

package/src/Screens/Savedconfigurations/Containers/Edit.js

@@ -1,46 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-import { connect } from 'react-redux';
-import Actions, { CONFIGURATION_REDUCER_NAME } from '../Reducers/Actions';
-
-import { generateConfigurationDataSheet } from '../Components/ConfigurationDataSheet';
-
-const formFields = [
-    {
-        name: 'id',
-        label: 'ID',
-        type: 'text',
-    },
-    {
-        name: 'code',
-        label: 'Code',
-        type: 'text',
-    },
-    {
-        name: 'name',
-        label: 'Name',
-        type: 'text',
-    },
-    {
-        name: 'designdata',
-        label: 'designdata',
-        type: 'text',
-    },
-];
-
-const mapStateToProps = state => {
-    const entityState = cloneDeep(state[CONFIGURATION_REDUCER_NAME]);
-    return {
-        entityState,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        setData: (field, value) => dispatch(Actions.setFieldData(field, value)),
-        postData: false,
-        hideDetails: (reportUnsaved = true, silent = false) =>
-            dispatch(Actions.hideDetails(reportUnsaved, silent)),
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(generateConfigurationDataSheet(formFields));

package/src/Screens/Savedconfigurations/Containers/List.js

@@ -1,130 +0,0 @@
-import React from 'react';
-import Actions, { CONFIGURATION_LIST_KEY } from '../Reducers/Actions';
-
-const columns = [
-    {
-        name: 'code',
-        label: 'Code',
-        filterable: true,
-        sortable: true,
-        filterKey: 'configuration.code',
-        sortKey: 'configuration.code',
-    },
-    {
-        name: 'item',
-        label: 'Item',
-        filterable: true,
-        sortable: true,
-        filterKey: 'configuration.item.itemtext.title',
-        sortKey: 'configuration.item.itemtext.title',
-        renderValue: itemObj => itemObj && itemObj.title,
-    },
-    {
-        name: 'date_created',
-        label: 'Date',
-        filterable: true,
-        sortable: true,
-        filterKey: 'configuration.date_created',
-        sortKey: 'configuration.date_created',
-        renderValue: dateObj => dateObj && dateObj.date.replace(/\.0+$/, ''),
-    },
-];
-
-const listParams = {
-    entity: 'configuration',
-};
-
-import { connectDefault } from '../../../Components/DefaultConnectedList';
-
-import DefaultList from '../../../Components/DefaultList';
-
-import List from '../../../Components/List';
-import SelectField from '../../../UIComponents/SelectField';
-import MenuItem from '../../../UIComponents/MenuItem';
-import { T } from '../../../App/i18n';
-
-const CONFIGURATION_TYPE_FILTER = 'configurationtype.identifier';
-const DEFAULT_CONFIGURATION_TYPE = 'cart';
-
-class TypeFilter extends React.Component {
-    constructor(props) {
-        super(props);
-        this.options = ['cart', 'user', 'mail', 'share', 'print', 'widget'];
-        this.state = {
-            value: DEFAULT_CONFIGURATION_TYPE,
-        };
-    }
-
-    onChange(value) {
-        if (typeof value === 'undefined') {
-            value = null; // use null as a default value when "all" is selected
-        }
-        this.setState({
-            value,
-        });
-        this.props.onChange && this.props.onChange(value);
-    }
-
-    render() {
-        return (
-            <SelectField
-                ref="input"
-                onChange={evt => this.onChange(evt.target.value)}
-                style={{ width: 130, float: 'right' }}
-                label={T('Type')}
-                value={this.state.value}
-                disableUnderline
-            >
-                {this.options.map((option, key) => {
-                    return (
-                        <MenuItem value={option} key={key}>
-                            {T(`savedConfigurations.typeFilterOptions.${option}`)}
-                        </MenuItem>
-                    );
-                })}
-            </SelectField>
-        );
-    }
-}
-
-class ConfigurationList extends List {
-    onTypeChange = value => {
-        this.props.onFilterChange(CONFIGURATION_TYPE_FILTER, value);
-        this.props.onRowSelection();
-    };
-
-    renderTopComponent() {
-        return <TypeFilter onChange={this.onTypeChange} />;
-    }
-
-    renderSearchBar() {
-        return null;
-    }
-}
-
-const ConfigurationListBinder = props => (
-    <DefaultList
-        {...props}
-        List={ConfigurationList}
-        columns={columns}
-        listParams={{
-            ...listParams,
-            orderby: 'configuration.date_created',
-            orderdir: 'desc',
-            filters: {
-                [`${listParams.entity}.${CONFIGURATION_TYPE_FILTER}`]: DEFAULT_CONFIGURATION_TYPE,
-            },
-        }}
-    />
-);
-
-export default connectDefault(
-    ConfigurationListBinder,
-    CONFIGURATION_LIST_KEY,
-    Actions.listAction,
-    Actions.detailsAction,
-    Actions.hideDetails,
-    Actions.showDetails,
-    false, // Actions.createEntity,
-    Actions.deleteEntities
-);

package/src/Screens/Savedconfigurations/Reducers/Actions.js

@@ -1,17 +0,0 @@
-export const CONFIGURATION_LIST_KEY = 'configurations';
-export const CONFIGURATION_LIST_URL = 'configurations';
-export const CONFIGURATION_DATA_KEY = 'configuration';
-export const CONFIGURATION_REDUCER_NAME = 'configurationData';
-
-import { generateDefaultActions } from '../../../App/Reducers/Entity/Actions';
-
-const actions = generateDefaultActions(
-    CONFIGURATION_LIST_KEY,
-    CONFIGURATION_DATA_KEY,
-    CONFIGURATION_REDUCER_NAME,
-    CONFIGURATION_LIST_URL
-);
-
-export default {
-    ...actions,
-};

package/src/Screens/Savedconfigurations/Reducers/Reducer.js

@@ -1,28 +0,0 @@
-import { CONFIGURATION_DATA_KEY, CONFIGURATION_REDUCER_NAME } from './Actions';
-import { getDefaultEntityState, defaultEntityReducer } from '../../../App/Reducers/Entity/Reducer';
-import { createFeatureReducer } from '../../../App/FeatureReducers';
-
-const initialState = {
-    ...getDefaultEntityState(
-        {
-            id: null,
-            code: null,
-            item: null,
-            date_created: null,
-            optionclassifications: null,
-            previewImageURL: null,
-            designdata: null,
-        },
-        null,
-        CONFIGURATION_DATA_KEY
-    ),
-};
-
-export const configurationData = createFeatureReducer(
-    CONFIGURATION_REDUCER_NAME,
-    (state = initialState, action) => {
-        return defaultEntityReducer(state, action, initialState);
-    }
-);
-
-export default configurationData;

package/src/Screens/Savedconfigurations/Screen.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import Actions, { CONFIGURATION_REDUCER_NAME } from './Reducers/Actions';
-
-import List from './Containers/List';
-import Edit from './Containers/Edit';
-
-import './Translations';
-
-import './Styles.scss';
-
-import { generateCustomScreen, SplitScreen } from '../../Components/DefaultScreen';
-import { connectDefault } from '../../Components/DefaultConnectedScreen';
-
-const SplitContainer = props => <SplitScreen {...props} className="savedconfigurations" />;
-
-export default connectDefault(
-    generateCustomScreen('configurations', List, Edit, SplitContainer),
-    CONFIGURATION_REDUCER_NAME,
-    Actions.invalidateList,
-    Actions.triggerUnsavedEntity,
-    Actions.hideDetails
-);

package/src/Screens/Savedconfigurations/Styles.scss

@@ -1,38 +0,0 @@
-.configuration-data {
-
-  .data-row {
-    .label {
-      width: 40%;
-    }
-    .value {
-      padding-top: 20px;
-      padding-bottom: 20px;
-      width: 100%;
-      overflow: visible !important;
-      white-space: normal !important;
-      height: auto !important;
-
-      .option {
-        .title {
-          float: left;
-          max-width: 80%;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .price {
-          float: right;
-          padding-left: 10px;
-          display: inline-block;
-        }
-        .amount {
-          float: right;
-          display: inline-block;
-        }
-      }
-    }
-  }
-
-  .preview {
-    max-width: 100%;
-  }
-}

package/src/Screens/Savedconfigurations/Translations.js

@@ -1,67 +0,0 @@
-require('../../App/i18n').use(
-    {
-        en: {
-            Comment: 'Comment',
-            'design data': 'Design data',
-            colorAmount: 'Color amount',
-            DesignAreaIdentifier: 'Design area',
-            DesignProductionMethodIdentifier: 'Design productionmethod',
-            texts: 'Text',
-            images: 'Images',
-            text: 'Text',
-            color: 'color',
-            productionDataLabel: 'Production data',
-            productionDataDownloadButtonLabel: 'Download zip',
-            codeTooltip: `Configuration data for Code %{CODE}`,
-
-            savedConfigurations: {
-                typeFilterOptions: {
-                    user: 'user',
-                    cart: 'cart',
-                    mail: 'mail',
-                    share: 'share',
-                    print: 'print',
-                    widget: 'widget',
-                },
-            },
-        },
-        de: {
-            Date: 'Datum',
-            Item: 'Artikel',
-            Type: 'Typ',
-            Comment: 'Kommentar',
-
-            'Configuration data': 'Basisdaten',
-            'Selected options': 'Gewählte Optionen',
-            'Preview image': 'Vorschaubild',
-            'design data': 'Designdaten',
-            colorAmount: 'Farbmenge',
-            DesignAreaIdentifier: 'Designfläche',
-            DesignProductionMethodIdentifier: 'Druckmethode',
-            texts: 'Text',
-            images: 'Bilder',
-            text: 'Text',
-            color: 'Farbe',
-            font: 'Schriftart',
-            'font size': 'Schriftgröße',
-            'font style': 'Schriftstil',
-            'font weight': 'Schriftgewicht',
-            'custom font': 'Wunschschrift',
-            productionDataLabel: 'Produktionsdaten',
-            productionDataDownloadButtonLabel: 'Zip herunterladen',
-            codeTooltip: `Basisdaten für %{CODE}`,
-
-            savedConfigurations: {
-                typeFilterOptions: {
-                    user: 'Nutzer',
-                    cart: 'Warenkorb',
-                    mail: 'Mail',
-                    share: 'Geteilte',
-                    print: 'Gedruckte',
-                    widget: 'Widget',
-                },
-            },
-        },
-    },
-    true
-);

package/src/Screens/Savedconfigurations/index.js

@@ -1,9 +0,0 @@
-import Screen from './Screen';
-import Reducer from './Reducers/Reducer';
-import { addReducers } from '../../App/FeatureReducers';
-
-addReducers(Reducer);
-
-export default {
-    Screen,
-};