@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Components/OrderList.js

@@ -1,169 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-
-import { T } from '../App/i18n';
-import { connect } from 'react-redux';
-import { SortableContainer, SortableElement } from 'react-sortable-hoc';
-
-import * as orderListActions from '../App/Reducers/Common/OrderList/Actions';
-
-import RaisedButton from '../UIComponents/RaisedButton';
-import FlatButton from '../UIComponents/FlatButton';
-import Dialog from '../UIComponents/Dialog';
-import ReorderIcon from '../UIComponents/icons/ReorderIcon';
-
-import './Styles.scss';
-import networkConfig from '../App/Config/network';
-const SortableItem = SortableElement(props => {
-    return (
-        <div>
-            {props.number}. {props.translated_title ? props.translated_title : props.name}
-            {props.identifier && props.identifier}
-            {props.thumbUrl && (
-                <img
-                    className="sortlistThumb"
-                    src={networkConfig.basePath + props.thumbUrl.replace(/^\//, '') + '?' + Math.random()}
-                />
-            )}
-        </div>
-    );
-});
-
-const SortableList = SortableContainer(props => {
-    return <div className={props.className}>{props.children}</div>;
-});
-
-export class OrderList extends React.Component {
-    state = {
-        loading: false,
-        showDialog: false,
-    };
-
-    componentDidUpdate(prevProps) {
-        if (this.props.saved && this.props.saved !== prevProps.saved) {
-            this.setState({ showDialog: false });
-            this.props.onListSaved && this.props.onListSaved();
-        }
-    }
-
-    cancel = () => this.setState({ showDialog: false });
-
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        this.props.moveItem(oldIndex, newIndex);
-    };
-
-    saveOrder = () => {
-        this.props.saveList();
-    };
-
-    openDialog = () => {
-        this.setState({
-            loading: false,
-            loaded: false,
-            showDialog: true,
-        });
-        this.loadList();
-    };
-
-    loadList = () => {
-        this.setState({
-            loading: true,
-            loaded: false,
-        });
-        const filters = {};
-
-        if (['designarea', 'designview'].indexOf(this.props.entity) !== -1) {
-            filters[`${this.props.entity}.item.id`] = this.props.itemId;
-        }
-
-        this.props
-            .loadList(
-                this.props.listUrl,
-                this.props.entity,
-                this.props.orderSequenceNumber,
-                filters,
-                this.props.listField,
-                this.props.saveListUrl
-            )
-            .then(() => {
-                this.setState({
-                    loading: false,
-                    loaded: true,
-                });
-            });
-    };
-
-    renderOrderButton() {
-        return (
-            <RaisedButton
-                className="orderList-button"
-                label={T('orderList.changeOrderButtonText')}
-                icon={<ReorderIcon />}
-                onClick={this.openDialog}
-            />
-        );
-    }
-
-    renderOrderList() {
-        const { list } = this.props;
-
-        return (
-            <SortableList
-                className="orderList sortable"
-                onSortEnd={this.onSortEnd}
-                helperClass="orderList-helper"
-            >
-                {list &&
-                    list.map((item, index) => (
-                        <SortableItem key={index} index={index} {...item} number={index + 1} />
-                    ))}
-            </SortableList>
-        );
-    }
-
-    renderDialog() {
-        const actions = [
-            <FlatButton label={T('Save')} key="saveButton" primary={true} onClick={this.saveOrder} />,
-            <FlatButton label={T('Cancel')} key="cancelButton" primary={false} onClick={this.cancel} />,
-        ];
-
-        const { showDialog } = this.state;
-
-        return (
-            <Dialog
-                title={T('orderList.changeOrderButtonText')}
-                actions={actions}
-                modal={'true'}
-                open={showDialog}
-                bodyClassName="orderList-dialogBody"
-                scroll="paper"
-            >
-                {this.state.loading && <div>{T('Loading data')}...</div>}
-                {this.state.loaded && this.renderOrderList()}
-            </Dialog>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                {this.renderOrderButton()}
-                {this.renderDialog()}
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = ({ designerData, orderList }) => ({
-    itemId: get(designerData, 'data.id.value', null),
-    ...orderList,
-});
-
-const mapDispatchToProps = dispatch => ({
-    loadList: (url, entity, orderSequenceNumber, filters, dataField, postUrl) =>
-        orderListActions.loadList(dispatch)(url, entity, orderSequenceNumber, filters, dataField, postUrl),
-    moveItem: (oldIndex, newIndex) => dispatch(orderListActions.moveItem(oldIndex, newIndex)),
-    saveList: () => dispatch(orderListActions.saveList()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(OrderList);

package/src/Components/OverlayContainer.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Headline } from './GeneralFragments';
-
-const OverlayContainer = props => {
-    const { showDetails, listComponent, detailsComponent, headlineText, className, children } = props;
-
-    const containerClassName = 'overlay-container ' + className + (showDetails ? ' showDetails' : '');
-
-    return (
-        <div className={containerClassName}>
-            <Headline text={headlineText} />
-
-            <div className="list-wrapper">{listComponent}</div>
-
-            {showDetails && <div className="details-wrapper">{detailsComponent}</div>}
-
-            {children}
-        </div>
-    );
-};
-
-export default OverlayContainer;

package/src/Components/Pagination.js

@@ -1,90 +0,0 @@
-import React from 'react';
-
-import UIPagination from '../UIComponents/Pagination';
-import { t } from '../App/i18n';
-
-const rowsPerPageOptions = [10, 20, 50, 100];
-
-export default class Pagination extends React.Component {
-    constructor(props) {
-        super(props);
-
-        const rows = props.rowsPerPage || 20;
-
-        this.state = {
-            currentPage: props.currentPage || 0,
-            rowsPerPage: rows,
-            totalPages: Math.ceil(props.rowsTotal / rows),
-        };
-    }
-
-    componentDidUpdate() {
-        if (this.state.currentPage !== this.props.currentPage) {
-            this.setState({ currentPage: this.props.currentPage });
-        } else if (this.state.rowsPerPage !== this.props.rowsPerPage) {
-            this.setState({ rowsPerPage: this.props.rowsPerPage });
-        }
-    }
-
-    componentWillReceiveProps(props) {
-        if (props.rowsTotal !== this.props.rowsTotal && props.rowsTotal !== 0) {
-            const totalPages = Math.ceil(props.rowsTotal / this.state.rowsPerPage);
-            const currentPage = Math.min(this.state.currentPage, totalPages - 1);
-            const triggerChange = totalPages < this.state.totalPages;
-            if (currentPage < totalPages) {
-                this.setState({ totalPages, currentPage }, () => {
-                    triggerChange && this.onPaginationChange(null, currentPage);
-                });
-            }
-        }
-    }
-
-    onPaginationChange = (event, page) => {
-        this.extendState({ currentPage: page });
-    };
-
-    onRowsPerPageChange = event => {
-        const { value } = event.target;
-        this.extendState({
-            rowsPerPage: value,
-            totalPages: Math.ceil(this.props.rowsTotal / value),
-            currentPage: 0,
-        });
-    };
-
-    extendState = newState => {
-        let state = Object.assign({}, this.state, newState);
-        state.first = state.currentPage * state.rowsPerPage;
-        state.last = Math.min((state.currentPage + 1) * state.rowsPerPage, this.props.rowsTotal);
-        state.count = state.last - state.first;
-        this.setState(state);
-        this.props.onPaginationChange(state);
-    };
-
-    getProps = () => {
-        // eslint-disable-next-line no-unused-vars
-        const { rowsTotal, currentPage, rowsPerPage, onPaginationChange, ...otherProps } = this.props;
-        return otherProps;
-    };
-
-    render() {
-        if (this.props.rowsTotal < 1) {
-            return null;
-        }
-        return (
-            <UIPagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                count={this.props.rowsTotal}
-                rowsPerPage={this.state.rowsPerPage}
-                page={this.state.currentPage}
-                onChangePage={this.onPaginationChange}
-                onChangeRowsPerPage={this.onRowsPerPageChange}
-                labelDisplayedRows={({ from, to, count }) =>
-                    t('pagination.labelDisplayedRows', { from, to, count })
-                }
-                labelRowsPerPage={t('pagination.labelRowsPerPage')}
-                {...this.getProps()}
-            />
-        );
-    }
-}

package/src/Components/ProfileButton.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { T } from '../App/i18n';
-
-import { logout, LOGIN_REDUCER_NAME } from '../Screens/Login/Reducers/Actions';
-
-import IconMenu from '../UIComponents/IconMenu';
-import MenuItem from '../UIComponents/MenuItem';
-import AccountCircleIcon from '../UIComponents/icons/AccountCircleIcon';
-import { browserHistory } from 'react-router';
-
-const ProfileButton = props => {
-    const { logout, changePassword } = props;
-
-    return (
-        <IconMenu buttonText={T('Profile')} iconComponent={AccountCircleIcon} disablePortal>
-            <MenuItem onClick={logout} id="logout">
-                {T('Logout')}
-            </MenuItem>
-            <MenuItem onClick={changePassword} id="changePassoword">
-                {T('Change Password')}
-            </MenuItem>
-        </IconMenu>
-    );
-};
-
-ProfileButton.muiName = 'FlatButton';
-
-const mapStateToProps = state => ({
-    login: state[LOGIN_REDUCER_NAME],
-});
-
-const mapDispatchToProps = dispatch => ({
-    logout: () => dispatch(logout()),
-    changePassword: () => browserHistory.push(window.basePath + '/changepassword'),
-});
-
-export { ProfileButton };
-
-const ConnectedProfileButton = connect(mapStateToProps, mapDispatchToProps)(ProfileButton);
-
-export { ConnectedProfileButton };
-
-export default ConnectedProfileButton;

package/src/Components/SearchBar.js

@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-import TextField from '../UIComponents/TextField';
-import IconButton from '../UIComponents/IconButton';
-import SearchIcon from '../UIComponents/icons/SearchIcon';
-import CloseIcon from '../UIComponents/icons/CloseIcon';
-import InputAdornment from '../UIComponents/InputAdornment';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-const styles = theme => ({
-    wrapper: {
-        verticalAlign: 'middle',
-        lineHeight: '48px',
-        position: 'relative',
-    },
-    inner: {
-        width: '100%',
-    },
-    input: {
-        width: '100%',
-        paddingLeft: '30px',
-    },
-    icon: {
-        display: 'block',
-        verticalAlign: 'middle',
-        height: '100%',
-        position: 'absolute',
-        top: 0,
-        paddingTop: '8px',
-    },
-    buttonClose: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        verticalAlign: 'middle',
-        height: '100%',
-        marginRight: -12,
-    },
-    iconClose: {
-        color: theme.palette.accent3Color,
-    },
-    underline: {
-        borderBottomWidth: '2px',
-        borderBottomColor: theme.palette.primary.main,
-        borderBottomStyle: 'solid',
-        marginTop: '-6px',
-    },
-    menu: {
-        marginTop: '-6px',
-        width: '100%',
-    },
-    list: {
-        width: '100%',
-    },
-});
-
-class SearchBar extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: '',
-        };
-    }
-
-    delayedChange = _.debounce(() => this.props.onChange(this.state.value), 300);
-
-    onChange = evt => {
-        const { value } = evt.target;
-        this.setState({ value }, this.delayedChange);
-    };
-
-    onClearClick = () => this.setState({ value: '' }, () => this.props.onChange());
-
-    render() {
-        const { label, className, classes } = this.props;
-        return (
-            <div style={{ ...this.props.style }} className={className}>
-                <TextField
-                    placeholder={label}
-                    style={{
-                        width: _.get(this.props, 'style.width', classes.list.width),
-                    }}
-                    onChange={this.onChange}
-                    value={this.state.value}
-                    InputProps={{
-                        startAdornment: (
-                            <InputAdornment position="start">
-                                <SearchIcon />
-                            </InputAdornment>
-                        ),
-                        endAdornment: !!this.state.value && (
-                            <InputAdornment position="end">
-                                <IconButton onClick={this.onClearClick}>
-                                    <CloseIcon className={classes.iconClose} />
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
-                />
-            </div>
-        );
-    }
-}
-export default withStyles(styles)(SearchBar);

package/src/Components/SplitContainer.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Headline } from './GeneralFragments';
-import IconButton from '@material-ui/core/IconButton';
-import Close from '../UIComponents/icons/CloseIcon';
-import Tooltip from '../UIComponents/Tooltip';
-import { T } from '../App/i18n';
-
-const SplitContainer = props => {
-    const {
-        showDetails,
-        listComponent,
-        detailsComponent,
-        headlineText,
-        className,
-        hideDetailsAction,
-        hintText
-    } = props;
-    return (
-        <div className={'split-container ' + className}>
-            <Headline text={headlineText} />
-            {hintText && <div className={clsx('hint', showDetails && 'withDetails')}>{hintText}</div>}
-
-            <div className={showDetails ? 'split-left' : ''}>{listComponent}</div>
-
-            {showDetails && (
-                <div className="split-right">
-                    <Tooltip title={T('detailView.close')}>
-                        <IconButton onClick={() => hideDetailsAction()} className="close-details">
-                            <Close />
-                        </IconButton>
-                    </Tooltip>
-                    {detailsComponent}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default SplitContainer;

package/src/Components/Styles.scss

@@ -1,114 +0,0 @@
-.list-container {
-  position: relative;
-  padding-top: 45px;
-}
-
-.intl-input {
-  position: relative;
-
-  .intl-input-toggle {
-    position: absolute !important;
-    top: 0;
-    right: 0;
-    z-index: 1;
-  }
-}
-
-.highlighted-area {
-  background: rgba(33, 150, 243, 0.05);
-  box-shadow: 0px 0px 8px 4px rgba(33, 150, 243, 0.05);
-  transition: all .5s;
-}
-
-.sortlistThumb {
-  display: block;
-  margin: 10px auto;
-}
-
-.column-filter {
-  position: relative;
-
-  /*.toggle-filter {
-    position: absolute;
-    top: -18px;
-    right: 0;
-  }*/
-
-  /*> span {
-    line-height: 54px;
-    display: inline-block;
-  }*/
-
-  /*.filter-field {
-    max-width: 130px;
-    width: 100%;
-    float: left;
-  }*/
-}
-
-.form {
-  text-align: center;
-  margin-top: 40px;
-
-
-  .form-inner {
-    margin: auto;
-    text-align: left;
-    display: inline-block;
-    width: 100%;
-    max-width: 600px;
-  }
-
-  .form-input-wrapper {
-    display: block;
-    text-align: left;
-    clear: both;
-    padding-bottom: 14px;
-    position: relative;
-
-    .form-input-addButton {
-      position: absolute !important;
-      bottom: 20px;
-      right: 0;
-    }
-
-    &.withError {
-      .form-input-addButton {
-        bottom: 46px;
-      }
-    }
-  }
-}
-
-td, th {
-  &.id {
-    width: 20%;
-  }
-}
-
-.orderList-dialogBody {
-  height: 100vh;
-}
-
-.orderList {
-  overflow-y: auto;
-  height: 100%;
-  user-select: none;
-
-  > div {
-    padding: 5px;
-    &:hover {
-      cursor: move;
-    }
-  }
-}
-
-.orderList-helper {
-  z-index: 99999;
-  padding: 5px;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.orderList-button {
-  margin-top: 15px;
-}