@configuratorware/configurator-admingui 1.40.6 → 1.41.1

package/src/Screens/Creator/Reducers/ConfigurationActions.js

@@ -43,6 +43,7 @@ export const CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR = 'CONFIGURATION_HIDE_DES
 export const CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR = 'CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR';
 export const CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE = 'CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE';
 export const CONFIGURATION_SET_OVERWRITE_COMPONENT_ORDER = 'CONFIGURATION_SET_OVERWRITE_COMPONENT_ORDER';
+export const CONFIGURATION_SET_OVERRIDE_OPTION_ORDER = 'CONFIGURATION_SET_OVERRIDE_OPTION_ORDER';
 
 export const showOptionSelection = (show = false, component = null) => ({
     type: CONFIGURATION_SHOW_OPTION_SELECTION,
@@ -212,3 +213,42 @@ export const setOverwriteComponentOrder = value => async (dispatch, getState) =>
         });
     }
 };
+
+export const setOverrideOptionOrder = value => async (dispatch, getState) => {
+    const entityState = getState()[CONFIGURATION_REDUCER_NAME];
+    await dispatch({
+        type: CONFIGURATION_SET_OVERRIDE_OPTION_ORDER,
+        value,
+    });
+    const item = get(entityState, 'data.item.value');
+    if (item) {
+        const { stock, ...itemData } = item;
+        const data = { ...itemData, overrideOptionOrder: value };
+        const url = `items`;
+        return dispatch(postData({ url }, data, CONFIGURATION_SAVE_ITEM)).then(apiAction => {
+            switch (apiAction.type) {
+                case RECEIVE_DATA: {
+                    dispatch(showInfoMessage(t('entity.saveOk')));
+                    dispatch(saveConfigurationSuccess(apiAction.data));
+                    return true;
+                }
+
+                case NETWORK_ERROR: {
+                    const state = getState();
+                    const source = state.dataBySource[apiAction.key];
+                    if (source.isPosted) {
+                        // data is saved
+                        dispatch(showErrorMessage(t('entity.saveError'), apiAction.error));
+                    } else {
+                        dispatch(showErrorMessage(t('entity.loadError'), apiAction.error));
+                    }
+                    dispatch({
+                        type: CONFIGURATION_SET_OVERRIDE_OPTION_ORDER,
+                        value: !value,
+                    });
+                    return false;
+                }
+            }
+        });
+    }
+};

package/src/Screens/Creator/Reducers/ConfigurationReducer.js

@@ -22,6 +22,7 @@ import {
     CONFIGURATION_SHOW_CREATOR_PREVIEW_ERROR,
     CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR,
     CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR,
+    CONFIGURATION_SET_OVERRIDE_OPTION_ORDER,
 } from './ConfigurationActions';
 
 import { getDefaultEntityState, defaultEntityReducer } from '../../../App/Reducers/Entity/Reducer';
@@ -80,6 +81,7 @@ const initialState = {
     showConfigurator: false,
     showOpenDesignerPreviewError: false,
     showOpenCreatorPreviewError: false,
+    showOverrideOptionOrderSaveHint: false,
 };
 
 export const baseConfigurationData = createFeatureReducer(
@@ -129,6 +131,13 @@ export const baseConfigurationData = createFeatureReducer(
                         adminModeHash,
                     };
                 }
+                
+                if (action.key === CONFIGURATION_DATA_KEY) {
+                    return {
+                        ...state,
+                        showOverrideOptionOrderSaveHint: false
+                    }
+                }
 
                 return state;
             }
@@ -318,6 +327,54 @@ export const baseConfigurationData = createFeatureReducer(
                 };
             }
 
+            case CONFIGURATION_SET_OVERRIDE_OPTION_ORDER: {
+                const overrideOptionOrder = action.value;
+
+                let nextState = state;
+                let showOverrideOptionOrderSaveHint = false;
+                if (!overrideOptionOrder) {
+                    showOverrideOptionOrderSaveHint = true;
+                    // reset options seuqence number -> global sequence number will be used when loading in FE
+                    const { data } = state;
+                    const { selectableComponents } = data;
+             
+                    const { value: currentOptionclassifications } = selectableComponents;
+                    currentOptionclassifications.forEach((optionClassification) => optionClassification.selectableOptions.forEach(
+                        (option) => option.sequenceNumber = null
+                    ));
+ 
+                    nextState = {
+                        ...state,
+                        data: {
+                            ...data,
+                            selectableComponents: {
+                                ...selectableComponents,
+                                value: currentOptionclassifications,
+                            },
+                        },
+                    };
+                }
+
+                const { data } = nextState;
+                const { item } = data;
+                const { value } = item;
+
+                return {
+                    ...nextState,
+                    showOverrideOptionOrderSaveHint,
+                    data: {
+                        ...data,
+                        item: {
+                            ...item,
+                            value: {
+                                ...value,
+                                overrideOptionOrder,
+                            },
+                        },
+                    },
+                };
+            }
+
             default:
                 state = defaultEntityReducer(state, action, initialState);
 

package/src/Screens/Creator/Translations.js

@@ -64,6 +64,8 @@ require('../../App/i18n').use(
                     description: 'Option "%{option}" in Component "%{component}" by Product "%{product}"',
                     addButtonLabel: 'Add price',
                 },
+                overrideOptionOrder: 'Edit option order for item</br>(when deactivated, the global option order is used)',
+                overrideOptionOrderHint: '</br></br>In order to see the options globally, you have to save your current changes.'
             },
             openPreviewError: {
                 title: 'Missing data',
@@ -136,6 +138,8 @@ require('../../App/i18n').use(
                     description: 'Option "%{option}" in Komponente "%{component}" an Produkt "%{product}"',
                     addButtonLabel: 'Preis hinzufügen',
                 },
+                overrideOptionOrder: 'Optionsreihenfolge auf Produktebene pflegen </br>(Wenn deaktiviert, greift die globale Optionsreihenfolge)',
+                overrideOptionOrderHint: '</br></br>Um die globale Sortierung der Optionen anzuwenden, speichere bitte deine aktuellen Änderungen.'
             },
             openPreviewError: {
                 title: 'Fehlende Daten',

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

@@ -5,6 +5,7 @@ import { withLoadAction } from '../../../Components/withLoadAction';
 import { T, t } from '../../../App/i18n';
 import { CallToActionField } from '../../../Components/CallToActionField';
 import PdfMarkDownField from '../../Client/Components/PdfMarkdownField';
+import ColorTextField from '../../Client/Components/ColorTextField';
 
 const formFields = [
     {
@@ -14,7 +15,7 @@ const formFields = [
             {
                 name: 'highlightColor',
                 label: 'Theme - Highlight color',
-                type: 'text',
+                type: ColorTextField,
             },
             {
                 name: 'font',

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

@@ -4,6 +4,7 @@ import { withLoadAction } from '../../../Components/withLoadAction';
 import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData';
 import { t, T } from '../../../App/i18n';
 import PdfMarkDownField from '../../Client/Components/PdfMarkdownField';
+import ColorTextField from '../../Client/Components/ColorTextField';
 
 const formFields = [
     {
@@ -13,7 +14,7 @@ const formFields = [
             {
                 name: 'highlightColor',
                 label: 'Theme - Highlight color',
-                type: 'text',
+                type: ColorTextField,
             },
             {
                 name: 'font',

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

@@ -5,8 +5,8 @@ import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData
 import Toggle from '../../../Components/FormFragments/Toggle';
 import { T } from '../../../App/i18n';
 import TranslationFinder, { findTranslation } from '../../../Components/TranslationFinder';
-import {LocalizedPriceTextField} from "../../../Components/LocalizedPriceTextField";
-import LocalizedPriceValue from "../../../Components/LocalizedPriceValue";
+import { LocalizedPriceTextField } from '../../../Components/LocalizedPriceTextField';
+import LocalizedPriceValue from '../../../Components/LocalizedPriceValue';
 
 const formFields = [
     {
@@ -29,7 +29,12 @@ const formFields = [
         fields: [
             {
                 name: 'vectorsRequired',
-                label: 'Vectors Required',
+                label: 'vectorsRequired',
+                type: 'checkbox',
+            },
+            {
+                name: 'vectorizedLogoMandatory',
+                label: 'vectorizedLogoMandatory',
                 type: 'checkbox',
             },
             {
@@ -192,9 +197,13 @@ const formFields = [
                         className: 'table',
                         array: {
                             disableAdd: ({ parentSchema, value }) => {
-                              const colorAmountDependent = parentSchema.colorAmountDependent && parentSchema.colorAmountDependent.value;
-                              const itemAmountDependent = parentSchema.itemAmountDependent && parentSchema.itemAmountDependent.value;
-                              return !colorAmountDependent && !itemAmountDependent && value.length > 0;
+                                const colorAmountDependent =
+                                    parentSchema.colorAmountDependent &&
+                                    parentSchema.colorAmountDependent.value;
+                                const itemAmountDependent =
+                                    parentSchema.itemAmountDependent &&
+                                    parentSchema.itemAmountDependent.value;
+                                return !colorAmountDependent && !itemAmountDependent && value.length > 0;
                             },
                             addButtonLabel: 'designProductionMethod.prices.addButtonLabel',
                             columns: null,
@@ -203,13 +212,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: 'colorAmountFrom',

package/src/Screens/DesignProductionMethods/Reducers/DesignProductionMethodsReducer.js

@@ -12,6 +12,7 @@ const initialState = {
                 value: {},
                 schema: {
                     vectorsRequired: { value: false },
+                    vectorizedLogoMandatory: { value: false },
                     visualizationEffect: { value: 'print', constraints: { presence: false } },
                     maxColorAmount: {
                         value: 0,

package/src/Screens/DesignProductionMethods/Translations.js

@@ -20,7 +20,8 @@ require('../../App/i18n').use(
                 embroidery: 'embroidery',
                 doming: 'doming',
             },
-            'Vectors Required': 'Vectors Required',
+            vectorsRequired: 'Colorize step is mandatory',
+            vectorizedLogoMandatory: 'Force using vectorized logo',
             'Maximum Color Amount': 'Maximum Color Amount',
             'Minimum Font Size': 'Minimum Font Size',
             'Has Engraving Background Colors': 'Has Engraving Background Colors',
@@ -56,7 +57,8 @@ require('../../App/i18n').use(
                 embroidery: 'Stick',
                 doming: 'Doming',
             },
-            'Vectors Required': 'Erfordert Vektorisierung',
+            vectorsRequired: 'Umfärben erzwingen',
+            vectorizedLogoMandatory: 'Vektorisierte Bilddaten müssen verwendet werden',
             'Maximum Color Amount': 'Maximale Farbanzahl',
             'Minimum Font Size': 'Minimale Schriftgröße',
             'Has Engraving Background Colors': 'Hat Gravur-Hintergrundfarben',

package/src/Screens/Designer/Components/TemplateDefaultList.js

@@ -174,11 +174,7 @@ export default class TemplateDefaultList extends Component {
     };
 
     getAvailableItems = () => {
-        const { list, sourceItemId } = this.props;
-
-        const excludedIds = [sourceItemId];
-
-        return _.get(list, 'data', []).filter(item => excludedIds.indexOf(item.id) === -1);
+        return _.get(this.props.list, 'data', []);
     };
 
     onMoveItems = () => {
@@ -186,7 +182,7 @@ export default class TemplateDefaultList extends Component {
         const data = this.getAvailableItems();
 
         const newItems = _.filter(data, (item, index) => {
-            return (selectedRows.indexOf(index) !== -1 || selectedRows === 'all');
+            return selectedRows.indexOf(index) !== -1 || selectedRows === 'all';
         });
 
         this.setState(
@@ -217,23 +213,32 @@ export default class TemplateDefaultList extends Component {
             }
         );
     };
-    
-    isItemAtIndexMoved= (index) => {
+
+    isItemAtIndexMoved = index => {
         const clickedItem = this.props.list.data[index];
 
         return _.find(this.state.movedItems, { id: clickedItem.id });
-    }
-    
-    isRowSelectable = (index) => {
-        return !this.isItemAtIndexMoved(index);
-    }
+    };
+
+    isItemAtIndexSource = index => {
+        const clickedItem = this.props.list.data[index];
 
-    getRowStyle = (index) => {
+        return clickedItem.id === this.props.sourceItemId;
+    };
+
+    isRowSelectable = index => {
+        return !this.isItemAtIndexMoved(index) && !this.isItemAtIndexSource(index);
+    };
+
+    getRowStyle = index => {
         if (this.isItemAtIndexMoved(index)) {
             return { cursor: 'not-allowed', backgroundColor: 'lightgreen' };
         }
+        if (this.isItemAtIndexSource(index)) {
+            return { cursor: 'not-allowed', opacity: 0.5 };
+        }
         return { cursor: 'pointer' };
-    }
+    };
 
     onMovedItemsChange = () => {
         const movedItemIds = this.state.movedItems.map(item => item.id);
@@ -275,6 +280,7 @@ export default class TemplateDefaultList extends Component {
                             shownColumns={shownColumns}
                             rowsTotal={total}
                             rowsPerPage={this.state.listParams.limit}
+                            listParams={this.state.listParams}
                             onRowSelection={this.onRowSelection}
                             selected={selected || this.state.selectedRows}
                             onAddItem={onAddItem}

package/src/Screens/Designer/Components/TemplateList.js

@@ -170,6 +170,7 @@ export default class TemplateList extends Component {
                         this.props.onRowSelection(rows, event);
                     }}
                     selected={this.selectedRows}
+                    isRowSelectable={this.props.isRowSelectable}
                 >
                     <TableHead showCheckbox={showCheckboxes}>
                         <TableRow>

package/src/Screens/Item/Components/Styles.scss

@@ -63,19 +63,20 @@
     overflow-y: hidden;
     height: 250px;
     white-space: nowrap;
-
-    li {
-      white-space: normal;
-      display: inline-block;
-      width: calc(25% - 10px);
-      margin-right: 10px;
-      height: 100%;
-      vertical-align: top;
-      padding: 0 10px;
-    }
   }
 }
 
+.draggable-option-item {
+  list-style-type: none;
+  white-space: normal;
+  display: inline-block;
+  width: calc(25% - 10px);
+  margin-right: 10px;
+  height: 100%;
+  vertical-align: top;
+  padding: 0 10px;
+}
+
 .optionclassificationEditor-item {
 
   .headline {