@configuratorware/configurator-admingui 1.27.3-beta.1 → 1.27.3-beta.5

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

@@ -1,9 +1,107 @@
 import React from 'react';
 import Actions, { IMAGE_GALLERY_LIST_KEY, IMAGE_GALLERY_LIST_URL } from '../Reducers/Actions';
 const { detailsAction, hideDetails, showDetails, createEntity, listAction, deleteEntities } = Actions;
+import RaisedButton from '../../../UIComponents/RaisedButton';
+import Add from '../../../UIComponents/icons/AddIcon';
+import FileDrop from 'react-file-drop';
+import { connect } from 'react-redux';
+import FolderIcon from '../../../UIComponents/icons/FolderIcon';
 
 import networkConfig from '../../../App/Config/network';
 
+export class AddButtonElement extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { showPopup: false, files: [] };
+        this.ownershipGroup = React.createRef();
+        this.dropZone = React.createRef();
+    }
+
+    handleUpload = files => {
+        this.setState({ files: [...files] });
+    };
+
+    saveFiles = () => {
+        this.props.setData('uploadedImages', this.state.files);
+        this.state.files.map(async (file) => {
+            await this.props.postData();
+        });
+        this.cancel();
+    };
+
+    cancel = () => {
+        this.setState({ showPopup: false, files: [] });
+    };
+
+    render() {
+        const actions = [
+            <FlatButton label={T('Save')} key="saveButton" primary={true} onClick={this.saveFiles} />,
+            <FlatButton label={T('Cancel')} key="cancelButton" primary={false} onClick={this.cancel} />,
+        ];
+        return (
+            <>
+                <RaisedButton onClick={() => this.setState({ showPopup: true })} id="add" color="primary">
+                    <Add />
+                    {T('imageGallery.addButtonLabel')}
+                </RaisedButton>
+                {this.state.showPopup && (
+                    <Dialog
+                        title={T('imageGallery.addButtonLabel')}
+                        onClose={() => this.setState({ showPopup: false })}
+                        actions={actions}
+                        open={true}
+                    >
+                        <FileDrop
+                            onDrop={this.handleUpload}
+                            draggingOverTargetClassName={'draggingOverDropZone'}
+                            accept="image/svg"
+                            multiple={true}
+                        >
+                            <div ref={this.dropZone}>
+                                <div className="uploader">
+                                    <span>{T('dragDropFiles')}</span>
+                                    <RaisedButton className="uploadButton">
+                                        <div className="buttonLabel">
+                                            <FolderIcon className="icon" />
+                                            {T('uploadFiles')}
+                                        </div>
+                                        <input
+                                            className="fileInput"
+                                            type="file"
+                                            multiple="true"
+                                            accept=".svg"
+                                            onChange={e => this.handleUpload(e.target.files)}
+                                        />
+                                    </RaisedButton>
+                                    <span className="hint">
+                                        {T('UploadFailureMessage', {
+                                            url: `<a href="http://svg.enshrined.co.uk/"
+        target="_blank">http://svg.enshrined.co.uk/</a>`,
+                                        })}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="fileNames">
+                                {this.state.files.map((file, i) => (
+                                    <div key={i}>{file.name}</div>
+                                ))}
+                            </div>
+                        </FileDrop>
+                    </Dialog>
+                )}
+            </>
+        );
+    }
+}
+
+const mapDispatchToProps = dispatch => {
+    return {
+        postData: async () => await dispatch(Actions.postData(true)),
+        setData: (field, value) => dispatch(Actions.setFieldData(field, value)),
+    };
+};
+const ConnectedAddButtonElement = connect(null, mapDispatchToProps)(AddButtonElement);
+
 const columns = [
     {
         name: 'thumbUrl',
@@ -33,13 +131,16 @@ const columns = [
 
 const listParams = {
     entity: 'imagegalleryimage',
-    addButtonLabel: 'imageGallery.addButtonLabel',
-    orderby: 'imagegalleryimage.imageGalleryImageText.title',
-    orderdir: 'asc',
+    orderby: 'imagegalleryimage.date_created',
+    orderdir: 'desc',
+    AddButtonComponent: ConnectedAddButtonElement,
 };
 
 import generateConnectedList from '../../../Components/DefaultConnectedList';
 import OrderList from '../../../Components/OrderList';
+import FlatButton from '../../../UIComponents/FlatButton';
+import Dialog from '../../../UIComponents/Dialog';
+import { T } from '../../../App/i18n';
 
 export const ConnectedList = generateConnectedList(
     columns,

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

@@ -8,7 +8,7 @@ export const IMAGE_GALLERY_DATA_KEY = 'imagegalleryimage';
 export const IMAGE_GALLERY_REDUCER_NAME = 'imagegalleryimageData';
 export const IMAGE_GALLERY_UPLOAD_KEY = 'imagegalleryimageUpload';
 export const IMAGE_GALLERY_UPLOAD_URL = 'imagegalleryimages/upload/{id}';
-import { RECEIVE_DATA } from '../../../App/Reducers/Api/Actions';
+import { fetchDataIfNeeded, RECEIVE_DATA } from '../../../App/Reducers/Api/Actions';
 
 import { generateDefaultActions } from '../../../App/Reducers/Entity/Actions';
 import { dispatchPostData } from '../../../App/Reducers/Api/Helpers';
@@ -32,6 +32,27 @@ const beforeApiStateHandler = apiAction => (dispatch, getState) => {
                     resolve(uploadApiAction); // resolve with the problem to handle
                 }
             });
+        } else if (
+            apiAction.type === RECEIVE_DATA &&
+            state.uploadedImages &&
+            state.uploadedImages.length > 0
+        ) {
+            const files = new FormData();
+            const file = state.uploadedImages.shift();
+            files.append('galleryImage', file);
+            dispatch(Actions.setFieldData('uploadedImages', state.uploadedImages));
+            dispatch(Actions.setFieldData('preselectFile', true));
+            return dispatchPostData(dispatch)(
+                IMAGE_GALLERY_UPLOAD_KEY,
+                IMAGE_GALLERY_UPLOAD_URL.replace('{id}', apiAction.data.id),
+                files
+            ).then(uploadApiAction => {
+                if (uploadApiAction.type === RECEIVE_DATA) {
+                    resolve(apiAction); // resolve with the original action
+                } else {
+                    resolve(uploadApiAction); // resolve with the problem to handle
+                }
+            });
         }
         resolve(apiAction);
     });
@@ -70,6 +91,24 @@ const mergedActions = {
             dispatch(Actions.detailsAction(params))
         );
     },
+    listAction: params => (dispatch, getState) => {
+        const { preselectFile } = getState()[IMAGE_GALLERY_REDUCER_NAME];
+        dispatch(Actions.listAction(params)).then(res => {
+            preselectFile &&
+                dispatch(
+                    fetchDataIfNeeded(
+                        IMAGE_GALLERY_LIST_URL + '/' + res.data.data[0].id,
+                        IMAGE_GALLERY_DATA_KEY
+                    )
+                ).then(res => {
+                    return dispatch(ConfigurationActions.triggerUnsavedEntity()).then(() => {
+                        preselectFile && dispatch(Actions.refreshListAction());
+                        dispatch(Actions.detailsAction(res.data));
+                        dispatch(Actions.setFieldData('preselectFile', false));
+                    });
+                });
+        });
+    },
 };
 
 export default mergedActions;

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

@@ -19,6 +19,8 @@ const initialState = {
     ),
     imageFile: null,
     printFile: null,
+    uploadedImages: null,
+    preselectFile: false,
 };
 
 export const imagegalleryimageData = createFeatureReducer(
@@ -36,6 +38,16 @@ export const imagegalleryimageData = createFeatureReducer(
                         ...state,
                         printFile: action.value,
                     };
+                } else if (action.field === 'uploadedImages') {
+                    state = {
+                        ...state,
+                        uploadedImages: action.value,
+                    };
+                } else if (action.field === 'preselectFile') {
+                    state = {
+                        ...state,
+                        preselectFile: action.value,
+                    };
                 }
             }
         }

package/src/Screens/ImageGallery/Styles.scss

@@ -0,0 +1,37 @@
+.fileInput {
+  position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+.buttonLabel {
+  display: flex;
+  align-items: center;
+}
+.uploadButton {
+  width: 160px;
+  margin: 16px !important;
+}
+.icon {
+  margin-right: 8px;
+}
+.uploader {
+  display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid black;
+    padding: 50px 8px;
+}
+.hint {
+  max-width: 300px;
+  text-align: center;
+}
+.fileNames {
+  max-height: calc(100vh - 500px);
+  overflow: auto;
+  padding: 20px 0px;
+}

package/src/Screens/ImageGallery/Translations.js

@@ -8,12 +8,15 @@ require('../../App/i18n').use(
             add_tags: 'add tags',
             'tags name': 'Tags title',
             imageGallery: {
-                addButtonLabel: 'Add Image',
+                addButtonLabel: 'Add Images',
                 tags: {
                     addButtonLabel: 'Add Tag',
                 },
             },
-            UploadFailureMessage: 'If you have trouble uploading a SVG file, make sure it is valid by checking it with a SVG sanitizer (e.g. %{url} ).'
+            dragDropFiles: 'Use drag & drop to upload SVG files here',
+            uploadFiles: 'Upload Files',
+            UploadFailureMessage:
+                'If you have trouble uploading a SVG file, make sure it is valid by checking it with a SVG sanitizer (e.g. %{url} ).',
         },
         de: {
             image_gallery: 'Bildergalerie',
@@ -26,12 +29,15 @@ require('../../App/i18n').use(
             add_tags: 'Tags hinzufügen',
             'tags name': 'Tagstitel',
             imageGallery: {
-                addButtonLabel: 'Bild hinzufügen',
+                addButtonLabel: 'Bilder Hinzufügen',
                 tags: {
                     addButtonLabel: 'Tag hinzufügen',
                 },
             },
-            UploadFailureMessage: 'Wenn Du Probleme beim Hochladen einer SVG Datei hast, stelle sicher, dass es sich um eine valide Datei handelt (z.B. mit %{url})'
+            dragDropFiles: 'Zum Hochladen SVG-Dateien per Drag & Drop hier ablegen.',
+            uploadFiles: 'Dateien hochladen',
+            UploadFailureMessage:
+                'Wenn Du Probleme beim Hochladen einer SVG Datei hast, stelle sicher, dass es sich um eine valide Datei handelt (z.B. mit %{url})',
         },
     },
     true

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

@@ -18,7 +18,7 @@ const CustomConfigurationField = withStyles({
         width: '100%',
     },
     button: { width: 'calc(100%)' },
-})(({ classes, value, error}) => {
+})(({ classes, value, error }) => {
     const [showConfigurator, setShowConfigurator] = useState(false);
     const item = useSelector(state => state[REDUCER_NAME].selectedItem);
     const code = useSelector(state => state[REDUCER_NAME].data.configurationCode.value);

package/src/Screens/Inspirations/Screen.js

@@ -11,11 +11,17 @@ import { useDispatch, useSelector } from 'react-redux';
 import InspirationActions, { setItem } from './Reducers/Actions';
 
 const EditComponent = ({
+    // eslint-disable-next-line no-unused-vars
     loadDetails,
+    // eslint-disable-next-line no-unused-vars
     invalidateListAction,
+    // eslint-disable-next-line no-unused-vars
     showDetails,
+    // eslint-disable-next-line no-unused-vars
     hideDetails,
+    // eslint-disable-next-line no-unused-vars
     EditComponent,
+    // eslint-disable-next-line no-unused-vars
     title,
     ...props
 }) => <InspirationsSubscreen {...props} />;

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

@@ -3,6 +3,8 @@ import { connect } from 'react-redux';
 import get from 'lodash/get';
 import {
     CONFIGURATION_REDUCER_NAME,
+    hideOpenCreatorPreviewError,
+    hideOpenDesignerPreviewError,
     showConfiguratorAdminMode,
 } from '../../Creator/Reducers/ConfigurationActions';
 import ConfiguratorOverlay from '../../../Components/GeneralFragments/ConfiguratorOverlay';
@@ -10,6 +12,7 @@ import { ITEM_REDUCER_NAME } from '../Reducers/Actions';
 import networkConfig from '../../../App/Config/network';
 import { T } from '../../../App/i18n';
 import RaisedButton from '../../../UIComponents/RaisedButton';
+import ShowPreviewErrorDialog from '../../Creator/Components/ShowPreviewErrorDialog';
 
 const mapStateToProps = state => {
     const { i18n } = state;
@@ -18,6 +21,10 @@ const mapStateToProps = state => {
     const locale = i18n.locale.replace('-', '_');
     const configurationData = state[CONFIGURATION_REDUCER_NAME];
     const { adminModeHash } = configurationData;
+    const itemId = get(itemData, 'data.id.value');
+    const configurationMode = get(itemData, 'data.configurationMode.value');
+    const showOpenDesignerPreviewError = get(configurationData, 'showOpenDesignerPreviewError');
+    const showOpenCreatorPreviewError = get(configurationData, 'showOpenCreatorPreviewError');
 
     const params = new URLSearchParams({
         _adminmode: 'quickView',
@@ -33,22 +40,59 @@ const mapStateToProps = state => {
     return {
         show: state[CONFIGURATION_REDUCER_NAME].showConfiguratorAdminMode,
         configuratorUrl,
+        configurationMode,
+        itemId,
+        showOpenDesignerPreviewError,
+        showOpenCreatorPreviewError,
     };
 };
 
 const mapDispatchToProps = dispatch => ({
     close: () => dispatch(showConfiguratorAdminMode(false)),
-    open: () => dispatch(showConfiguratorAdminMode(true)),
+    open: (configurationMode, itemId) => dispatch(showConfiguratorAdminMode(true, configurationMode, itemId)),
+    hideOpenDesignerPreviewError: () => dispatch(hideOpenDesignerPreviewError()),
+    hideOpenCreatorPreviewError: () => dispatch(hideOpenCreatorPreviewError()),
 });
 
-const ConfiguratorQuickView = ({ show, open, close, configuratorUrl, style, className }) => (
+const ConfiguratorQuickView = ({
+    show,
+    open,
+    close,
+    configuratorUrl,
+    style,
+    className,
+    configurationMode,
+    itemId,
+    showOpenDesignerPreviewError,
+    showOpenCreatorPreviewError,
+    hideOpenDesignerPreviewError,
+    hideOpenCreatorPreviewError,
+}) => (
     <div style={style} className={className}>
         <RaisedButton
             label={T('configuratorQuickView.buttonText')}
-            onClick={open}
+            onClick={() => open(configurationMode, itemId)}
             disabled={!configuratorUrl}
         />
         <ConfiguratorOverlay show={show} configuratorUrl={configuratorUrl} onClose={close} />
+        {showOpenDesignerPreviewError && 
+        <ShowPreviewErrorDialog
+            dialogTitle={T('openPreviewError.title')}
+            open={showOpenDesignerPreviewError}
+            onClose={hideOpenDesignerPreviewError}
+        >
+            <p>{T('openPreviewError.openDesignerPreviewError')}</p>
+        </ShowPreviewErrorDialog>
+        }
+        {showOpenCreatorPreviewError && 
+        <ShowPreviewErrorDialog
+            dialogTitle={T('openPreviewError.title')}
+            open={showOpenCreatorPreviewError}
+            onClose={hideOpenCreatorPreviewError}
+        >
+            <p>{T('openPreviewError.openCreatorPreviewError')}</p>
+        </ShowPreviewErrorDialog>
+        }
     </div>
 );
 

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

@@ -3,17 +3,14 @@ import { connect } from 'react-redux';
 import withStyles from '@material-ui/core/styles/withStyles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import _ from 'lodash';
-
 import Actions, { ITEM_REDUCER_NAME } from '../Reducers/Actions';
 import VariantsEditor from '../Components/Variants/VariantsEditor';
 import VariantActions, { REDUCER_NAME } from '../Reducers/Variant/Actions';
-
 import attributesDataStructure from '../DataStructures/Attributes/Editor';
-
 import { loadVisualizationModes } from '../ApiCalls';
 
 const hasVisualizationMode = (visualizationModeStr, requiredMode) =>
-    visualizationModeStr.split('+').indexOf(requiredMode) !== -1;
+    visualizationModeStr ? visualizationModeStr.split('+').indexOf(requiredMode) !== -1 : false;
 
 const ConfigurationModeFields = connect(
     ({ loginData, itemData }) => ({
@@ -190,11 +187,13 @@ const formFields = [
         fields: [
             {
                 type: 'inputGroup',
+                required: true,
                 label: 'itemCoreData.configurationMode',
                 fields: [
                     {
                         name: 'configurationMode',
                         label: 'itemCoreData.creator',
+                        displayAsMandatory: false,
                         type: 'checkbox',
                         calculateProps: ({ props }) => ({
                             name: 'configurationModeCreator',
@@ -204,6 +203,7 @@ const formFields = [
                     {
                         name: 'configurationMode',
                         label: 'itemCoreData.designer',
+                        displayAsMandatory: false,
                         type: 'checkbox',
                         calculateProps: ({ props }) => ({
                             name: 'configurationModeDesigner',
@@ -241,33 +241,14 @@ const formFields = [
         type: 'text',
     },
     {
-        name: 'callToAction',
-        label: 'callToAction.callToAction',
-        type: 'select',
-        sourceConfig: {
-            text: function text(_ref) {
-                const label = _ref.label;
-                return t(label);
-            },
-            value: 'value',
-        },
-        source: [
-            {
-                value: 'addToCart',
-                label: 'callToAction.addToCart',
-                id: 'addToCart',
-            },
-            {
-                value: 'requestOffer',
-                label: 'callToAction.requestOffer',
-                id: 'requestOffer',
-            },
+        type: CallToActionField,
+        fields: [
             {
-                value: 'none',
-                label: 'callToAction.none',
-                id: 'none',
-            },
-        ],
+                name: 'callToAction',
+                label: 'callToAction.callToAction',
+                type: 'select',
+            }
+        ]
     },
     {
         name: 'prices',
@@ -296,13 +277,13 @@ const formFields = [
                         name: 'price',
                         label: 'Price',
                         type: LocalizedPriceTextField,
-                        renderValue: value => <LocalizedPriceValue data={value}/>,
+                        renderValue: value => <LocalizedPriceValue data={value} />,
                     },
                     {
                         name: 'priceNet',
                         label: 'price Net',
                         type: LocalizedPriceTextField,
-                        renderValue: value => <LocalizedPriceValue data={value}/>,
+                        renderValue: value => <LocalizedPriceValue data={value} />,
                     },
                     {
                         name: 'amountfrom',
@@ -374,8 +355,9 @@ import ConfiguratorQuickView from '../Components/ConfiguratorQuickView';
 import hasCredentialFor from '../../../App/Selectors/Credentials/hasCredentialFor';
 import { LOGIN_REDUCER_NAME } from '../../Login/Reducers/Actions';
 import CheckData from '../../Creator/Components/CheckData/CheckData';
-import LocalizedPriceValue from "../../../Components/LocalizedPriceValue";
-import { LocalizedPriceTextField } from "../../../Components/LocalizedPriceTextField";
+import LocalizedPriceValue from '../../../Components/LocalizedPriceValue';
+import { LocalizedPriceTextField } from '../../../Components/LocalizedPriceTextField';
+import {CallToActionField} from "../../../Components/CallToActionField";
 
 const styles = theme => ({
     root: {
@@ -449,7 +431,7 @@ class ItemForm extends Component {
     }
 
     render() {
-        const { classes, license, itemIdentifier } = this.props;
+        const { classes, license, itemIdentifier, itemId } = this.props;
         const { currentTab } = this.state;
 
         const tabClasses = {
@@ -463,7 +445,11 @@ class ItemForm extends Component {
                     {T('item.headline')}
                     <div className="itemHeaderButtons">
                         <ConfiguratorQuickView className="configuratorQuickView" />
-                        <CheckData itemIdentifier={itemIdentifier} license={license} />
+                        <CheckData 
+                            itemIdentifier={itemIdentifier} 
+                            itemId={itemId}
+                            license={license} 
+                        />
                     </div>
                 </div>
                 <div className={classes.root}>

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

@@ -269,7 +269,7 @@ describe('Item/Edit', () => {
         creatorCheckbox.simulate('change', { target: { checked: false } });
         expect(store.getState().itemData.data.configurationMode.value).toBe('designer');
         designerCheckbox.simulate('change', { target: { checked: false } });
-        expect(store.getState().itemData.data.configurationMode.value).toBe('');
+        expect(store.getState().itemData.data.configurationMode.value).toBe(null);
     });
     it('does not render configuration mode if the license is creator only, sets the values automatically', () => {
         const { store, element } = provideStore(Edit);