@configuratorware/configurator-admingui 1.37.3 → 1.38.1

package/src/Screens/Designer/SubScreens/Visualization/Containers/Edit/DataLinks.js

@@ -57,7 +57,11 @@ export const multiplyToPixel = m => v => Math.round(v * m);
 const sizeMin = 5;
 
 export const applyLinks = (prevData, nextData, options = {}) => {
-    const { positionRatio, baseShapePadding = DEFAULT_BASE_SHAPE_PADDING } = options;
+    const {
+        positionRatio,
+        baseShapePadding = DEFAULT_BASE_SHAPE_PADDING,
+        recalculatePosition = true,
+    } = options;
 
     // set min value for area size
     if (get(nextData, 'position.width') <= sizeMin) {
@@ -105,11 +109,13 @@ export const applyLinks = (prevData, nextData, options = {}) => {
             set(nextData, 'baseShape.r', minRadius);
         }
     }
-    // recalculating the position with the baseShape size change ratio
-    withRatio(prevData, nextData, 'baseShape.width', r => {
-        isFinite(r) && calcPathValue(nextData, 'position.x', v => v * r);
-    });
-    withRatio(prevData, nextData, 'baseShape.height', r => {
-        isFinite(r) && calcPathValue(nextData, 'position.y', v => v * r);
-    });
+    if (recalculatePosition) {
+        // recalculating the position with the baseShape size change ratio
+        withRatio(prevData, nextData, 'baseShape.width', r => {
+            isFinite(r) && calcPathValue(nextData, 'position.x', v => v * r);
+        });
+        withRatio(prevData, nextData, 'baseShape.height', r => {
+            isFinite(r) && calcPathValue(nextData, 'position.y', v => v * r);
+        });
+    }
 };

package/src/Screens/Designer/SubScreens/Visualization/Containers/Edit/Edit.js

@@ -48,6 +48,7 @@ import Checkbox from '../../../../../../UIComponents/Checkbox';
 import FormControlLabel from '../../../../../../UIComponents/FormControlLabel';
 import { sendMessage } from '../../../../../../Utils/Function/sendMessage';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import AreaEditorForm from '../../Components/AreaEditorForm';
 
 const styles = theme => {
     const breakPoint = {
@@ -57,22 +58,37 @@ const styles = theme => {
         editorRoot: {
             display: 'flex',
             flexDirection: 'row',
+            height: 'calc(100vh - 180px)',
             '& > $header': {
                 display: 'none',
                 [breakPoint.max]: {
                     display: 'block',
                 },
             },
+            '& > $header3DContainer': {
+                display: 'none',
+                [breakPoint.max]: {
+                    display: 'flex',
+                },
+            },
             [breakPoint.max]: {
                 flexDirection: 'column',
             },
         },
         leftSide: {
             marginRight: 2 * theme.spacing.unit,
+            flex: 1,
         },
         header: {
             flex: 1,
         },
+        header3D: {
+            flex: 1,
+        },
+        header3DContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
         rightSide: {
             flex: 1,
             '& > $header': {
@@ -81,6 +97,27 @@ const styles = theme => {
                 },
             },
         },
+        rightSide3D: {
+            flex: 1,
+            '& > $header3DContainer': {
+                [breakPoint.max]: {
+                    display: 'none',
+                },
+            },
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '50%',
+            marginLeft: 'auto',
+            overflow: 'hidden',
+            [breakPoint.max]: {
+                maxWidth: '100%',
+            },
+        },
+        areaEditorForm: {
+            marginLeft: 4 * theme.spacing.unit,
+            marginBottom: 2 * theme.spacing.unit,
+            flex: 1,
+        },
         title: {
             fontSize: 20,
             marginBottom: theme.spacing.unit,
@@ -120,6 +157,12 @@ const styles = theme => {
             width: '100%',
             height: '39vw',
         },
+        visualizationContainer3D: {
+            width: 'auto',
+            flex: 1,
+            maxHeight: '100%',
+            overflow: 'hidden',
+        },
         loaderContainer: {
             minHeight: 400,
             display: 'flex',
@@ -475,10 +518,10 @@ export class VisualizationSettingsEdit extends Component {
             designArea: { width, height },
         } = this.props;
 
-        this.baseShapeEditor &&
-            applyLinks(previousData, nextData, {
-                positionRatio: (width || 1) / (height || 1),
-            });
+        applyLinks(previousData, nextData, {
+            positionRatio: (width || 1) / (height || 1),
+            recalculatePosition: isKindOf2D(this.props.mode),
+        });
 
         data.updateValues(nextData);
         if (data.validate()) {
@@ -520,7 +563,7 @@ export class VisualizationSettingsEdit extends Component {
             .map(dpm => dpm.title)
             .join(', ');
         return (
-            <div className={classes.header}>
+            <div className={isKindOf3D(mode) ? classes.header3D : classes.header}>
                 <Typography variant="h3" className={classes.title}>
                     <TranslationFinder
                         data={designArea.texts}
@@ -572,6 +615,20 @@ export class VisualizationSettingsEdit extends Component {
         );
     }
 
+    renderHeader3D(designAreaData) {
+        const { classes } = this.props;
+        return (
+            <div className={classes.header3DContainer}>
+                {this.renderHeader()}
+                <AreaEditorForm
+                    designAreaData={designAreaData}
+                    onChange={this.onChangeData}
+                    className={classes.areaEditorForm}
+                />
+            </div>
+        );
+    }
+
     renderVisualization(designAreaData) {
         const { mode, classes } = this.props;
         const { three } = this;
@@ -598,8 +655,8 @@ export class VisualizationSettingsEdit extends Component {
         if (isKindOf3D(mode)) {
             return (
                 <React.Fragment>
-                    {this.renderHeader()}
-                    <VisualizationContainer three={three} />
+                    {this.renderHeader3D(designAreaData)}
+                    <VisualizationContainer three={three} className={classes.visualizationContainer3D} />
                 </React.Fragment>
             );
         }
@@ -607,7 +664,7 @@ export class VisualizationSettingsEdit extends Component {
     }
 
     render() {
-        const { designArea, classes } = this.props;
+        const { designArea, classes, mode } = this.props;
         const { three } = this;
         if (!designArea) {
             return null;
@@ -634,7 +691,7 @@ export class VisualizationSettingsEdit extends Component {
             <div className={classes.editorRoot}>
                 {loading && <LoadingComponent fullSize />}
 
-                {this.renderHeader()}
+                {isKindOf3D(mode) ? this.renderHeader3D(data) : this.renderHeader()}
 
                 {imageElement && (
                     <div className={classes.leftSide}>
@@ -645,11 +702,12 @@ export class VisualizationSettingsEdit extends Component {
                             areaData={data && data.position}
                             areaRatio={areaRatio}
                             ref={this.areaEditorRef}
+                            onChange={this.updateData}
                         />
                     </div>
                 )}
 
-                <div className={classes.rightSide}>
+                <div className={isKindOf3D(mode) ? classes.rightSide3D : classes.rightSide}>
                     {this.renderVisualization(data)}
 
                     {errors && (

package/src/Screens/Designer/SubScreens/Visualization/Screen.js

@@ -13,7 +13,7 @@ import { provideLocalState, withLocalState } from '../../../../Utils/HOCs/LocalS
 const styles = () => ({
     paperRoot: {
         maxWidth: '90vw',
-        maxHeight: '90vw',
+        maxHeight: '90vh',
         marginTop: '16px',
         marginBottom: '16px',
     },

package/src/Screens/Item/Components/CopyCreatorItemDialog.js

@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { t } from '../../../App/i18n';
+import Dialog from '../../../UIComponents/Dialog';
+import FlatButton from '../../../UIComponents/FlatButton';
+import TextField from '../../../UIComponents/TextField';
+import IconButton from '../../../UIComponents/IconButton';
+import Tooltip from '../../../UIComponents/Tooltip';
+import CopyIcon from '@material-ui/icons/FileCopy';
+import Actions from '../Reducers/Actions';
+import IntlInputHoc from "../../../Components/FormFragments/IntlInput";
+import { InputSwitch } from "../../../Components/Form";
+import {identifierPattern} from "../../../App/Data";
+import { showErrorMessage } from "../../../App/Reducers/Frame/Actions";
+
+const IntlInput = IntlInputHoc(InputSwitch);
+
+const CopyCreatorItemDialog = ({ data, selected, copyCreatorItem, clearSelection, reloadList, showErrorMessage }) => {
+
+    const [showEditor, setShowEditor] = useState(false);
+    const [identifier, setIdentifier] = useState('');
+    const [identifierError, setIdentifierError] = useState(null);
+    const [titles, setTitles] = useState([]);
+    const hasSelection = selected && selected.length === 1;
+    let hasOnlyCreatorItemsSelected = hasSelection;
+    if (hasSelection) {
+        selected.map(selectedIndex => hasOnlyCreatorItemsSelected = data[selectedIndex].configurationMode === 'creator');
+    }
+
+    const onTitleChange = (name, values) => {
+        setTitles(values);
+    }
+    
+    const onIdentifierChange = (name, identifier) => {
+        setIdentifier(identifier);
+    }
+    
+    const validateIdentifier = () => {
+        const isSameIdentifier = identifier === data[selected[0]].identifier;
+        if (   identifier.match(identifierPattern) &&
+            identifier.match(identifierPattern)[0] === identifier && 
+            !isSameIdentifier
+        ) {
+            setIdentifierError(null);
+        } else {
+            setIdentifierError(t('customValidators.identifier'));
+        }
+    }
+
+    const onSave = async () => {
+        const saveResult = await copyCreatorItem(data[selected[0]].id, identifier, titles);
+        if (saveResult.error) {
+            showErrorMessage(t('entity.saveError'))
+        }
+        else {
+            clearSelection();
+            reloadList();
+        }
+    }
+    
+    if (!hasOnlyCreatorItemsSelected) {
+        return null;
+    }
+
+    return (
+        <>
+            <Tooltip title={t('item.copyCreatorItemDialogTitle')}>
+                <IconButton color={hasSelection ? 'primary' : ''}
+                            onClick={() => setShowEditor(true)}
+                >
+                    <CopyIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                title={t('item.copyCreatorItemDialogTitle')}
+                actions={
+                    <React.Fragment>
+                        <FlatButton
+                            label={t('cancel')}
+                            onClick={() => setShowEditor(false)}
+                        />
+                        <FlatButton
+                            label={t('duplicate')}
+                            primary={true}
+                            onClick={onSave}
+                            disabled={identifier === '' || identifierError !== null}
+                        />
+                    </React.Fragment>
+                }
+                open={showEditor && hasOnlyCreatorItemsSelected}
+            >
+                <div style={{ display: 'flex', mindWidth: '620px', flexDirection: 'column' }}>
+                    <TextField
+                        label={t('item.copyItemIdentifier')}
+                        onChange={(evt) => {
+                            onIdentifierChange(name, evt.target.value);
+                        }}
+                        onBlur={validateIdentifier}
+                        style={{ width: '100%' }}
+                        error={identifierError !== null}
+                        helperText={identifierError}
+                        value={identifier}
+                        type={'text'}
+                    />
+                    <IntlInput
+                        intl={{
+                            name: 'title',
+                            type: 'text',
+                        }}
+                        label={t('item.copyItemTitle')}
+                        onChange={onTitleChange}
+                        style={{ width: 200 }}
+                        value={titles}
+                    />
+                </div>
+            </Dialog>
+        </>
+    )
+};
+
+const mapDispatchToProps = (dispatch) => ({
+    copyCreatorItem: async (sourceItemId, newItemIdentifier, itemTexts) =>
+        await dispatch(Actions.copyCreatorItem(sourceItemId, newItemIdentifier, itemTexts)),
+    showErrorMessage: (errorMessage) => dispatch(showErrorMessage(errorMessage))
+});
+
+export default connect(
+    () => null,
+    mapDispatchToProps
+)((CopyCreatorItemDialog));

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

@@ -237,7 +237,7 @@ const formFields = [
     },
     {
         name: 'itemclassifications',
-        label: 'itemclassifications',
+        label: 'ItemClassifications',
         type: 'dynSource',
         sourceConfig: {
             value: 'id',

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import Actions, { ITEM_LIST_KEY, ITEM_REDUCER_NAME } from '../Reducers/Actions';
 import { T } from '../../../App/i18n';
+import generateConnectedList from '../../../Components/DefaultConnectedList';
+import ListItemStatusEditor from '../Components/ListItemStatusEditor';
+import CopyCreatorItemDialog from "../Components/CopyCreatorItemDialog";
 
 const columns = [
     {
@@ -52,9 +55,6 @@ const listParams = {
     orderdir: 'asc',
 };
 
-import generateConnectedList from '../../../Components/DefaultConnectedList';
-import ListItemStatusEditor from '../Components/ListItemStatusEditor';
-
 export const ConnectedItemList = generateConnectedList(
     columns,
     listParams,
@@ -74,7 +74,11 @@ const ItemList = ({ listProps, ...props }) => (
     <ConnectedItemList
         {...props}
         listProps={{
-            renderAction: props => <ListItemStatusEditor {...props} />,
+            renderAction: props =>
+                <>
+                    <ListItemStatusEditor {...props} />
+                    <CopyCreatorItemDialog {...props} />
+                </>,
             ...listProps,
         }}
     />

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

@@ -1,5 +1,6 @@
 export const ITEM_LIST_KEY = 'items';
 export const ITEM_LIST_URL = 'items';
+export const ITEM_COPY_URL = (id) => `items/${id}/duplicate`;
 export const ITEM_STATUS_URL = 'items/status';
 export const ITEM_DATA_KEY = 'item';
 export const ITEM_REDUCER_NAME = 'itemData';
@@ -43,6 +44,13 @@ const setItemStatusForMultipleItems = (selectedItems, itemStatus) => (dispatch,
     }))
 }
 
+const copyCreatorItem = (sourceItemId, newItemIdentifier, itemTexts) => (dispatch, getState) => {
+    return dispatch(apiActions.postData(ITEM_COPY_URL(sourceItemId), {
+        "identifier": newItemIdentifier,
+        itemTexts
+    }))
+};
+
 const setFieldData = (field, value) => (dispatch, getState) => {
     const entityState = getState()[ITEM_REDUCER_NAME];
     let configurationMode = entityState.data.configurationMode.value;
@@ -69,5 +77,6 @@ export default {
     ...actions,
     setFieldData,
     setItemStatusForMultipleItems,
-    loadItemStatus
+    loadItemStatus,
+    copyCreatorItem
 };

package/src/Screens/Item/Translations.js

@@ -18,7 +18,7 @@ require('../../App/i18n').use(
             editDialogTitle: 'Edit selected entries',
             editDialogHint:
                 'Use the checkboxes to select one or more entries in the list</br>and then click this icon to set the item status for them.',
-            itemclassifications: 'Product categories',
+            ItemClassifications: 'Product categories',
             visualizationData: {
               '2d': "2D",
               '3d': "3D",
@@ -60,6 +60,9 @@ require('../../App/i18n').use(
                         dialogTitle: 'Edit core data',
                     },
                 },
+                copyCreatorItemDialogTitle: 'Copy selected product',
+                copyItemIdentifier: 'New identifier',
+                copyItemTitle: 'New title',
             },
             configuratorQuickView: {
                 buttonText: 'Preview',
@@ -98,9 +101,10 @@ require('../../App/i18n').use(
             cancel: 'Abbrechen',
             save: 'Speichern',
             editDialogTitle: 'Gewählte Einträge bearbeiten',
+            duplicate: 'Duplizieren',
             editDialogHint:
                 'Nutze die Checkboxen in der Liste und klicke dann dieses Icon,</br>um den Status für einen oder mehrere Einträge zu setzen.',
-            itemclassifications: 'Produktkategorien',
+            ItemClassifications: 'Produktkategorien',
             visualizationData: {
                 '2d': "2D",
                 '3d': "3D",
@@ -123,6 +127,9 @@ require('../../App/i18n').use(
                     searchOrAddAttributeValue: 'Suche einen Attributwert oder lege einen neuen mit dem + an',
                 },
                 headline: 'Dieses Produkt ist folgendermaßen definiert:',
+                copyCreatorItemDialogTitle: 'Gewähltes Produkt kopieren',
+                copyItemIdentifier: 'Neuer Identifier',
+                copyItemTitle: 'Neuer Titel',
                 editorPopup: {
                     attribute: {
                         dialogTitle: 'Attribut hinzufügen',

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

@@ -4,12 +4,16 @@ export const ITEMCLASSIFICATION_REDUCER_NAME = 'itemclassificationData';
 export const ITEMCLASSIFICATIONS_URL = 'itemclassifications';
 
 import { generateDefaultActions } from '../../../App/Reducers/Entity/Actions';
+import { customDispatchHandler } from '../../Item/DataStructures/Attributes/Actions';
 
 const actions = generateDefaultActions(
     ITEMCLASSIFICATION_LIST_KEY,
     ITEMCLASSIFICATION_DATA_KEY,
     ITEMCLASSIFICATION_REDUCER_NAME,
-    ITEMCLASSIFICATIONS_URL
+    ITEMCLASSIFICATIONS_URL,
+    {
+        customDispatchHandler,
+    }
 );
 
 export const { hideDetails, loadEntity, postData } = actions;