@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

@@ -1,305 +0,0 @@
-import React from 'react';
-import { T } from '../../../App/i18n';
-import Api from '../../../App/Api';
-import { withStyles } from '@material-ui/core/styles';
-import RaisedButton from '../../../UIComponents/RaisedButton';
-import Dialog from '../../../UIComponents/Dialog';
-import FormGroup from '@material-ui/core/FormGroup';
-import Typography from '@material-ui/core/Typography';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import DialogContent from '@material-ui/core/DialogContent';
-import FlatButton from '../../../UIComponents/FlatButton';
-import TemplateList from '../Containers/TemplateList';
-
-const styles = () => ({
-    dialogContent: {
-        padding: '0 7px 24px',
-        '&:first-child': {
-            paddingTop: 7,
-        },
-    },
-    cancelButton: {
-        position: 'absolute',
-        right: '20px',
-        bottom: '20px',
-    },
-    labelPlacementStart: {
-        marginLeft: 0,
-        marginRight: 36,
-    },
-    formControlLabel: {
-        fontSize: '17px !important',
-        fontWeight: '450 !important',
-    },
-});
-
-let movedItemIds = [];
-
-class DesignDataTransfer extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            showDesignDataTransferDialog: false,
-            showConfirmation: false,
-            showNothingSelected: false,
-            itemAvailability: true,
-            designAreas: true,
-            viewsVisualData: true,
-            transferSuccess: {},
-            transferred: false,
-            amountSelectedRows: 0,
-        };
-    }
-
-    onDesignDataTransferClick = () => {
-        movedItemIds = [];
-
-        this.setState({
-            showDesignDataTransferDialog: true,
-            transferSuccess: {},
-            transferred: false,
-        });
-    };
-
-    closeDesignDataTransferDialog = () => {
-        this.setState({ showDesignDataTransferDialog: false });
-    };
-
-    openConfirmationDialog = () => {
-        this.setState({ showConfirmation: true });
-    };
-
-    openNothingSelectedDialog = () => {
-        this.setState({ showNothingSelected: true });
-    };
-
-    closeConfirmation = () => {
-        this.setState({ showConfirmation: false });
-    };
-
-    closeNothingSelected = () => {
-        this.setState({ showNothingSelected: false });
-    };
-
-    transferItem = async targetItemId => {
-        const { sourceItemId } = this.props;
-        const { designAreas, viewsVisualData, itemAvailability } = this.state;
-
-        const params = {
-            url: '/data_transfer/design_data',
-            method: 'post',
-            data: {
-                sourceItemId: sourceItemId,
-                targetItemId: targetItemId,
-                designAreas: designAreas,
-                visualizationData: viewsVisualData,
-                itemStatus: itemAvailability,
-            },
-        };
-
-        return Api.request(params);
-    };
-
-    confirmTransfer = async () => {
-        this.setState({
-            showConfirmation: false,
-            transferSuccess: {
-                beginTransfer: true,
-            },
-        });
-
-        for (const movedItemId of movedItemIds) {
-            let transferSuccess = false;
-
-            try {
-                await this.transferItem(movedItemId);
-
-                transferSuccess = true;
-            } catch (e) {
-                // eslint-disable-next-line no-console
-                console.error(e);
-            }
-
-            this.setState({
-                transferSuccess: {
-                    ...this.state.transferSuccess,
-                    [movedItemId]: transferSuccess,
-                },
-                transferred: true,
-            });
-        }
-
-        this.setState({
-            transferSuccess: {
-                ...this.state.transferSuccess,
-                beginTransfer: false,
-            },
-        });
-    };
-
-    transferDataConfirmationClick = () => {
-        movedItemIds.length > 0 ? this.openConfirmationDialog() : this.openNothingSelectedDialog();
-    };
-
-    renderConfirmation = () => {
-        return (
-            <Dialog
-                title={T('Confirmation')}
-                actions={
-                    <React.Fragment>
-                        <FlatButton label={T('Cancel')} onClick={this.closeConfirmation} />
-                        <FlatButton label={T('Transfer')} primary={true} onClick={this.confirmTransfer} />
-                    </React.Fragment>
-                }
-                open={this.state.showConfirmation}
-            >
-                {T('designDataTransfer.transferConfirmation')}
-            </Dialog>
-        );
-    };
-
-    renderNothingSelected = () => {
-        return (
-            <Dialog
-                title={T('Hint')}
-                actions={
-                    <React.Fragment>
-                        <FlatButton
-                            label={T('Ok')}
-                            id="ok"
-                            color="primary"
-                            onClick={this.closeNothingSelected}
-                        />
-                    </React.Fragment>
-                }
-                open={this.state.showNothingSelected}
-            >
-                {T('designDataTransfer.noSelectedRows')}
-            </Dialog>
-        );
-    };
-
-    handleChange = name => event => {
-        this.setState({ [name]: event.target.checked });
-    };
-
-    onMovedItemsChange = ids => {
-        movedItemIds = ids;
-    };
-
-    renderDesignDataTransfer = () => {
-        const { classes, sourceItemId } = this.props;
-        const { transferSuccess, transferred } = this.state;
-        return (
-            <Dialog
-                title={T('designDataTransfer.dialogTitle')}
-                modal={'true'}
-                open={this.state.showDesignDataTransferDialog}
-                scroll={'body'}
-                actions={
-                    transferred ? (
-                        <RaisedButton
-                            label={T('Ok')}
-                            onClick={this.closeDesignDataTransferDialog}
-                            id="ok"
-                            color="primary"
-                        />
-                    ) : (
-                        <React.Fragment>
-                            <RaisedButton
-                                label={T('Cancel')}
-                                onClick={this.closeDesignDataTransferDialog}
-                                id="cancel"
-                            />
-                            <RaisedButton
-                                label={T('Transfer')}
-                                onClick={this.transferDataConfirmationClick}
-                                id="transfer"
-                                color="primary"
-                            />
-                        </React.Fragment>
-                    )
-                }
-                maxWidth="lg"
-            >
-                <DialogContent classes={{ root: classes.dialogContent }}>
-                    <Typography variant="body1" color="inherit">
-                        {T('designDataTransfer.settingsTransfer')}
-                    </Typography>
-                    <FormGroup row>
-                        <FormControlLabel
-                            labelPlacement="start"
-                            control={
-                                <Switch
-                                    checked={this.state.designAreas}
-                                    onChange={this.handleChange('designAreas')}
-                                    value="designAreas"
-                                    color="primary"
-                                />
-                            }
-                            label={T('designDataTransfer.designAreas')}
-                            classes={{
-                                labelPlacementStart: classes.labelPlacementStart,
-                                label: classes.formControlLabel,
-                            }}
-                        />
-                        <FormControlLabel
-                            labelPlacement="start"
-                            control={
-                                <Switch
-                                    checked={this.state.viewsVisualData}
-                                    onChange={this.handleChange('viewsVisualData')}
-                                    value="viewsVisualData"
-                                    color="primary"
-                                />
-                            }
-                            label={T('designDataTransfer.viewsVisualData')}
-                            classes={{
-                                labelPlacementStart: classes.labelPlacementStart,
-                                label: classes.formControlLabel,
-                            }}
-                        />
-                        <FormControlLabel
-                            labelPlacement="start"
-                            control={
-                                <Switch
-                                    checked={this.state.itemAvailability}
-                                    onChange={this.handleChange('itemAvailability')}
-                                    value="itemAvailability"
-                                    color="primary"
-                                />
-                            }
-                            label={T('designDataTransfer.itemAvailability')}
-                            classes={{
-                                labelPlacementStart: classes.labelPlacementStart,
-                                label: classes.formControlLabel,
-                            }}
-                        />
-                    </FormGroup>
-                    <TemplateList
-                        onMovedItemsChange={this.onMovedItemsChange}
-                        transferSuccess={transferSuccess}
-                        sourceItemId={sourceItemId}
-                    />
-                </DialogContent>
-            </Dialog>
-        );
-    };
-
-    render() {
-        return (
-            <div>
-                <RaisedButton
-                    label={T('designDataTransfer.buttonUseAsTemplate')}
-                    onClick={this.onDesignDataTransferClick}
-                />
-                {this.renderDesignDataTransfer()}
-                {this.renderConfirmation()}
-                {this.renderNothingSelected()}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles)(DesignDataTransfer);

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

@@ -1,341 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import Grid from '@material-ui/core/Grid/Grid';
-
-import List from '../../../Components/List';
-import TemplateList from './TemplateList';
-import { T } from '../../../App/i18n';
-import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
-import IconButton from '../../../UIComponents/IconButton';
-import ForwardIcon from '../../../UIComponents/icons/ForwardIcon';
-
-const listStyle = {
-    progress: {
-        position: 'absolute',
-        top: '50%',
-        margin: '-15px',
-    },
-    progressContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1303,
-        background: 'lightgrey',
-        opacity: 0.5,
-        textAlign: 'center',
-    },
-};
-
-export default class TemplateDefaultList extends Component {
-    static defaultProps = {
-        config: {},
-        List,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            selectedRows: [],
-            selectedItems: [],
-            listParams: {
-                offset: 0,
-                limit: props.actionConfig.rowsPerPage,
-                _language: props.locale.replace('-', '_'),
-            },
-            movedItems: [],
-        };
-    }
-
-    componentDidMount() {
-        this.setState({
-            selectedRows: [],
-            selectedItems: [],
-        });
-        this.props.loadList(this.state.listParams);
-    }
-
-    componentWillReceiveProps(props) {
-        if (props.clearSelection) {
-            this.setState({
-                selectedRows: [],
-            });
-        }
-        if (props.setSelection) {
-            this.setState({
-                selectedRows: props.selected,
-            });
-        }
-        //if (props.selected && !_.isEqual(props.selected, this.props.selected))
-        if (props.locale !== this.props.locale) {
-            this.updateListParams({
-                _language: props.locale.replace('-', '_'),
-            });
-        }
-        if (props.didInvalidate && props.didInvalidate !== this.props.didInvalidate) {
-            // reload list if invalidated
-            this.setState({
-                selectedRows: [],
-            });
-            this.props.loadList(this.state.listParams);
-        }
-    }
-
-    onRowSelection = (selectedRows, event) => {
-        this.setState({ selectedRows });
-
-        const inputType = event.target.type;
-
-        if (inputType === 'checkbox') {
-            return;
-        }
-
-        if (_.isArray(selectedRows) && selectedRows.length > 1 && this.props.selected.length !== 1) {
-            return;
-        }
-
-        if (_.isArray(selectedRows) && selectedRows.length === 1) {
-            this.props.loadDetails(this.props.list.data[selectedRows[0]]);
-        } else if (_.isArray(selectedRows) && selectedRows.length > 1) {
-            this.props.hideDetails(true /* check if unsaved */, true /* do it silently */);
-        } else {
-            this.props.hideDetails();
-        }
-    };
-
-    onItemSelection = selectedItems => {
-        this.setState({ selectedItems });
-    };
-
-    updateListParams = params => {
-        const { listParams } = this.state;
-        _.merge(listParams, params);
-        this.setState({ listParams }, () => {
-            this.props.loadList(this.state.listParams);
-        });
-    };
-
-    removeListParams = params => {
-        const { listParams } = this.state;
-        this.setState({ listParams: _.omit(listParams, params) }, () => {
-            this.props.loadList(this.state.listParams);
-        });
-    };
-
-    onSearchChange = query => (query ? this.updateListParams({ query }) : this.removeListParams('query'));
-
-    onPaginationChange = ({ first, rowsPerPage }) => {
-        this.props.setActionConfig({ rowsPerPage });
-        this.updateListParams({
-            offset: first,
-            limit: rowsPerPage,
-        });
-    };
-
-    onFilterChange = (column, value, filterKey) => {
-        const { entity } = this.props.listParams;
-        const key = filterKey || `${entity}.${column}`;
-        if (value && value.length > 0) {
-            this.updateListParams({
-                filters: {
-                    [key]: value,
-                },
-                offset: 0,
-            });
-        } else {
-            this.removeListParams([`filters["${key}"]`]);
-        }
-    };
-
-    onSortChange = (column, dir, sortKey) => {
-        const { entity } = this.props.listParams;
-        if (dir) {
-            this.updateListParams({
-                orderby: sortKey || `${entity}.${column}`,
-                orderdir: dir && dir.toUpperCase(),
-            });
-        } else {
-            this.removeListParams(['orderby', 'orderdir']);
-        }
-    };
-
-    onDeleteItems = () => {
-        const idsToDelete = _.isArray(this.state.selectedRows)
-            ? this.state.selectedRows.map(row => this.props.list.data[row].id)
-            : this.state.selectedRows === 'all'
-            ? this.props.list.data.map(e => e.id)
-            : false;
-        idsToDelete && _.isFunction(this.props.onDeleteItems) && this.props.onDeleteItems(idsToDelete);
-    };
-
-    onShownColumnsChange = shownColumns => {
-        this.props.setConfig({ shownColumns });
-    };
-
-    getAvailableItems = () => {
-        return _.get(this.props.list, 'data', []);
-    };
-
-    onMoveItems = () => {
-        const { selectedRows, movedItems } = this.state;
-        const data = this.getAvailableItems();
-
-        const newItems = _.filter(data, (item, index) => {
-            return selectedRows.indexOf(index) !== -1 || selectedRows === 'all';
-        });
-
-        this.setState(
-            {
-                movedItems: movedItems.concat(newItems),
-                selectedRows: [],
-            },
-            () => {
-                this.onMovedItemsChange();
-            }
-        );
-    };
-
-    onUnselectItem = () => {
-        const { movedItems, selectedItems } = this.state;
-
-        const newItems = _.filter(movedItems, (item, index) => {
-            return selectedItems !== 'all' && selectedItems.indexOf(index) === -1;
-        });
-
-        this.setState(
-            {
-                movedItems: newItems,
-                selectedItems: [],
-            },
-            () => {
-                this.onMovedItemsChange();
-            }
-        );
-    };
-
-    isItemAtIndexMoved = index => {
-        const clickedItem = this.props.list.data[index];
-
-        return _.find(this.state.movedItems, { id: clickedItem.id });
-    };
-
-    isItemAtIndexSource = index => {
-        const clickedItem = this.props.list.data[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);
-
-        this.props.onMovedItemsChange(movedItemIds);
-    };
-
-    renderMoveButton = () => {
-        return (
-            this.state.selectedRows.length > 0 && (
-                <IconButton onClick={() => this.onMoveItems()}>
-                    <ForwardIcon></ForwardIcon>
-                </IconButton>
-            )
-        );
-    };
-
-    render() {
-        const { list, columns, error, selected, onAddItem, config, List } = this.props;
-        const { movedItems, selectedItems } = this.state;
-        const data = this.getAvailableItems();
-
-        const total = +_.get(list, 'metadata.totalcount', data.length);
-
-        const { shownColumns } = config;
-
-        return (
-            <div>
-                <Grid container justify="space-between">
-                    {this.props.transferSuccess.beginTransfer && (
-                        <div style={listStyle.progressContainer}>
-                            <CircularProgress style={listStyle.progress} />
-                        </div>
-                    )}
-                    <Grid item xs={12} md={5}>
-                        <List
-                            data={data}
-                            columns={columns}
-                            shownColumns={shownColumns}
-                            rowsTotal={total}
-                            rowsPerPage={this.state.listParams.limit}
-                            listParams={this.state.listParams}
-                            onRowSelection={this.onRowSelection}
-                            selected={selected || this.state.selectedRows}
-                            onAddItem={onAddItem}
-                            onDeleteItems={this.props.onDeleteItems && this.onDeleteItems}
-                            onSearchChange={this.onSearchChange}
-                            onPaginationChange={this.onPaginationChange}
-                            onFilterChange={this.onFilterChange}
-                            onSortChange={this.onSortChange}
-                            onShownColumnsChange={this.onShownColumnsChange}
-                            showCheckboxes={!!this.props.onDeleteItems}
-                            onMoveItems={this.onMoveItems}
-                            isRowSelectable={this.isRowSelectable}
-                            getRowStyle={this.getRowStyle}
-                        />
-                    </Grid>
-
-                    <Grid container alignItems="center" justify="center" md={1}>
-                        {this.renderMoveButton()}
-                    </Grid>
-
-                    <Grid item xs={12} md={5}>
-                        <TemplateList
-                            data={movedItems}
-                            columns={columns}
-                            shownColumns={shownColumns}
-                            rowsTotal={movedItems.length}
-                            rowsPerPage={this.state.listParams.limit}
-                            onRowSelection={this.onItemSelection}
-                            selected={selectedItems}
-                            onAddItem={onAddItem}
-                            onDeleteItems={this.onUnselectItem}
-                            onSearchChange={this.onSearchChange}
-                            onPaginationChange={this.onPaginationChange}
-                            onFilterChange={this.onFilterChange}
-                            onSortChange={this.onSortChange}
-                            onShownColumnsChange={this.onShownColumnsChange}
-                            showCheckboxes={!!this.props.onDeleteItems}
-                            transferSuccess={this.props.transferSuccess}
-                        />
-                    </Grid>
-                </Grid>
-                {error ? (
-                    <div>
-                        {T('Listing failed due to the following error')}: {error.message}
-                    </div>
-                ) : !list ? (
-                    <div>{T('Loading data')}...</div>
-                ) : (
-                    !total && <div>{T('There are no records')}</div>
-                )}
-            </div>
-        );
-    }
-}
-
-export const generateTemplateDefaultList = (columns = [], listParams = {}) => props => (
-    <TemplateDefaultList {...props} columns={columns} listParams={listParams} />
-);