@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

@@ -1,328 +0,0 @@
-%optionTile {
-  height: calc(100% - 10px);
-  margin: 5px 0;
-  padding: 15px;
-
-  -webkit-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-}
-
-.optionclassificationEditor-option {
-
-  @extend %optionTile;
-  position: relative;
-
-  .optionIdentifier {
-    font-size: 0.7em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .optionTitle {
-    font-size: 0.9em;
-    margin: 10px 0 5px 0;
-  }
-
-  .optionActions {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    .optionActionButton-wrapper {
-      width: 33.3%;
-      display: inline-block;
-      text-align: center;
-    }
-  }
-
-  .optionImg {
-    text-align: center;
-    height: 100px;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-.optionActionButton-wrapper {
-
-}
-
-.options-wrapper {
-  margin-top: 15px;
-  clear: both;
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    height: 250px;
-    white-space: nowrap;
-  }
-}
-
-.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 {
-    cursor: pointer;
-    font-size: 1.2em;
-    margin-bottom: 15px;
-    line-height: 48px;
-    > * {
-      vertical-align: middle;
-    }
-    button {
-      float: right;
-    }
-
-    &:hover, &.open {
-      color: rgb(0, 188, 212);
-    }
-  }
-
-  .details {
-    display: none;
-
-    &.open {
-      display: block;
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-}
-
-.optionSelection-dialogBody {
-  height: 100vh;
-}
-
-.optionSelection-twoSideSelect {
-  height: calc(100% - 74px);
-
-  .twoSideSelect-sideContainer {
-    height: 100%;
-
-    > div {
-      overflow: auto;
-      max-height: 100%;
-    }
-  }
-}
-
-.twoSideSelect-helper {
-  z-index: 9999;
-}
-
-.optionclassificationEditor-addOption {
-  float: right;
-  margin-bottom: 16px;
-}
-
-.optionclassificationEditor-itemProps {
-  float: left;
-  width: 70%;
-}
-
-.optionSelection-twoSideSelect {
-
-  .twoSideSelect-source {
-    padding-right: 30px;
-  }
-
-  .twoSideSelect-selection {
-    padding-left: 30px;
-  }
-
-  .twoSideSelect-item {
-    line-height: 100px;
-
-    > * {
-      vertical-align: middle;
-    }
-    button {
-      float: none;
-    }
-  }
-}
-
-.optionSelection-headline {
-  margin: 15px 0;
-
-  &:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-
-  > div {
-    width: 50%;
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .source-text {
-    padding-right: 30px;
-  }
-
-  .selection-text {
-    padding-left: 30px;
-  }
-
-  .optionSelection-searchBar {
-
-  }
-}
-
-.optionSelection-twoSideSelect-item {
-  display: inline-block;
-  width: calc(100% - 48px);
-  line-height: normal;
-
-  .optionImg {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    float: left;
-    text-align: center;
-    margin-right: 10px;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-  .optionIdentifier {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 0.9em;
-  }
-  .optionTitle {
-    margin: 15px 0 5px 0;
-  }
-}
-
-.baseConfigurationEditor-optionclassification {
-
-  position: relative;
-  @extend %optionTile;
-
-  .optionIdentifier {
-    font-size: 0.8em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 5px;
-  }
-
-  .optionclassificationTitle {
-    font-size: 1.1em;
-    height: 48px; // for 2 lines
-  }
-
-  .optionTitle {
-    font-size: 0.7em;
-  }
-
-  .optionImg {
-    text-align: center;
-    height: 100px;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-  .optionAmount {
-    font-size: 0.8em;
-  }
-
-  .optionListContainer {
-    overflow-y: auto;
-    max-height: 165px;
-
-    .optionListItem {
-      min-height: 165px;
-    }
-  }
-}
-
-.configurator-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1400;
-  display: flex;
-  flex-direction: column;
-  background: white;
-
-  iframe {
-    flex: 1;
-    width: 100%;
-    border: none;
-  }
-
-  .configurator-overlay-close {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    z-index: 1;
-  }
-
-  .configurator-overlay-actions {
-    text-align: right;
-  }
-}
-
-.optionclassificationEditor-info,
-.baseConfigurationEditor-info {
-  margin-bottom: 30px;
-}
-
-.optionEditor-itemProps {
-  padding-top: 15px;
-}
-
-.baseConfigurationEditor-state {
-  margin-bottom: 30px;
-  padding-top: 3px;
-  font-size: 0.9em;
-  max-width: 50%;
-  padding-left: 30px;
-  position: relative;
-  svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.variantsEditor .variantsEditor-tableCell {
-  position: relative;
-}
-
-.variantsEditor .form-input-addButton {
-  position: absolute !important;
-  bottom: 0;
-  right: 0;
-}

package/src/Screens/Item/Components/Variants/VariantsAutocomplete.js

@@ -1,234 +0,0 @@
-import React, { Component } from 'react';
-import UIAutoComplete from '../../../../UIComponents/AutoComplete';
-import Api from '../../../../App/Api';
-import IconButton from '../../../../UIComponents/IconButton';
-import AddCircleOutlineIcon from '../../../../UIComponents/icons/AddCircleOutlineIcon';
-import withTranslationFinder from '../../../../Components/withTranslationFinder';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import withStyles from '@material-ui/core/styles/withStyles';
-import PropTypes from 'prop-types';
-
-const styles = {
-    inputRoot: {
-        flexWrap: 'nowrap',
-        minWidth: 100,
-    },
-    inputInput: {
-        width: '100%',
-    },
-    paper: {
-        left: 'auto',
-    },
-};
-
-class VariantsAutocomplete extends Component {
-    // store if selection happened since the last focus event
-    // this helps to identify the case when a "late selection" has to be performed
-    itemSelectionHappened = false;
-
-    static propTypes = {
-        searchText: PropTypes.string,
-        variantId: PropTypes.number,
-        groupId: PropTypes.number,
-        onChange: PropTypes.func,
-        onAddClick: PropTypes.func,
-        findTranslation: PropTypes.func,
-        error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        classes: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            searchText: this.props.searchText,
-            dataSource: [],
-            addButtonVisible: false,
-            isLoading: false,
-        };
-
-        // create a new api object for every instance making the requests cancellable separately
-        this.api = Api.create();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const { searchText } = this.props;
-        const { isLoading } = this.state;
-
-        if (searchText !== prevProps.searchText || (!isLoading && prevState.isLoading)) {
-            this.setState({ searchText });
-        }
-    }
-
-    handleChange = item => {
-        const { variantId, groupId, onChange } = this.props;
-        if (item === null) {
-            return;
-        }
-        onChange(variantId, groupId, item);
-
-        this.itemSelectionHappened = true;
-
-        this.downshiftRef.current.closeMenu();
-    };
-
-    handleAddClick = () => {
-        const { variantId, groupId, onAddClick } = this.props;
-
-        onAddClick(variantId, groupId);
-
-        this.itemSelectionHappened = true;
-    };
-
-    handleAddMouseDown = e => {
-        e.preventDefault();
-    };
-
-    onInputValueChange = async searchText => {
-        if (typeof searchText === 'undefined') {
-            if (!this.itemSelectionHappened) {
-                this.handleChange(null);
-                this.setState({ searchText: '' });
-            }
-
-            return;
-        }
-
-        this.setState({ searchText });
-
-        const requestParams = {
-            url: 'groupentries',
-            params: {
-                query: searchText.trim(),
-            },
-        };
-
-        try {
-            this.api.cancel();
-            const response = await this.api.request(requestParams);
-            this.setState({ dataSource: response.data.data });
-        } catch (e) {
-            // ignore for now
-        }
-    };
-
-    onBlur = async () => {
-        this.setState({ addButtonVisible: false });
-        this.downshiftRef.current.closeMenu();
-
-        const { searchText, dataSource } = this.state;
-
-        if (!this.itemSelectionHappened && searchText && searchText !== this.props.searchText) {
-            // try to find it in the dataSource first (it's already loaded while typing)
-            const dataSourceMatches = dataSource
-                .map(item => {
-                    const translatedText = this.props.findTranslation(
-                        item.translations,
-                        item.translation || item.identifier || ''
-                    );
-                    return [translatedText, item];
-                })
-                .filter(([translatedText]) => {
-                    return translatedText.indexOf(searchText) === 0;
-                })
-                .sort(([text1], [text2]) => text1.length - text2.length)
-                // eslint-disable-next-line no-unused-vars
-                .map(([text, item]) => item);
-            if (dataSourceMatches.length) {
-                this.handleChange(dataSourceMatches[0]);
-                return;
-            }
-
-            // try to find a match with a new request
-            const requestParams = {
-                url: 'groupentries',
-                params: {
-                    query: searchText.trim(),
-                },
-            };
-            this.setState({ isLoading: true });
-            try {
-                this.api.cancel();
-                const response = await this.api.request(requestParams);
-                const list = response.data.data;
-                if (list.length > 0) {
-                    this.handleChange(list[0]);
-                    return;
-                }
-            } finally {
-                this.setState({ isLoading: false });
-            }
-            this.handleChange(null);
-        } else if (!searchText) {
-            this.setState({ searchText: this.props.searchText });
-        }
-    };
-
-    onFocus = () => {
-        this.setState({ addButtonVisible: true });
-        this.itemSelectionHappened = false;
-    };
-
-    downshiftRef = React.createRef();
-
-    render() {
-        const { searchText, dataSource, addButtonVisible, isLoading } = this.state;
-        const { error, classes } = this.props;
-
-        const renderAddButton = error || addButtonVisible;
-
-        const dataSourceConfig = {
-            value: 'id',
-            text: item =>
-                !item || !item.identifier
-                    ? ''
-                    : this.props.findTranslation(
-                          item.translations,
-                          item.translation || item.identifier || ''
-                      ) + ` (${item.identifier})`,
-        };
-
-        return (
-            <React.Fragment>
-                <UIAutoComplete
-                    searchText={searchText}
-                    dataSource={dataSource}
-                    handleChange={this.handleChange}
-                    onInputValueChange={this.onInputValueChange}
-                    dataSourceConfig={dataSourceConfig}
-                    onBlur={this.onBlur}
-                    onFocus={this.onFocus}
-                    maxSearchResults={5}
-                    filter={UIAutoComplete.defaultFilter}
-                    disableUnderline={true}
-                    error={error}
-                    downshiftRef={this.downshiftRef}
-                    classes={{
-                        inputRoot: classes.inputRoot,
-                        inputInput: classes.inputInput,
-                        paper: classes.paper,
-                    }}
-                    startAdornment={
-                        isLoading && (
-                            <InputAdornment position="start">
-                                <CircularProgress size={20} />
-                            </InputAdornment>
-                        )
-                    }
-                />
-                {renderAddButton && (
-                    <IconButton
-                        className="form-input-addButton"
-                        onClick={this.handleAddClick}
-                        onMouseDown={this.handleAddMouseDown}
-                    >
-                        <AddCircleOutlineIcon />
-                    </IconButton>
-                )}
-            </React.Fragment>
-        );
-    }
-}
-
-export default withTranslationFinder(withStyles(styles)(VariantsAutocomplete));