@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

@@ -1,249 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-import {
-    Table,
-    TableBody,
-    TableFooter,
-    TableHead,
-    TableHeadColumn,
-    TableRow,
-    TableRowColumn,
-} from '../../../UIComponents/Table';
-import DeleteForeverIcon from '../../../UIComponents/icons/DeleteForeverIcon';
-import FloatingActionButton from '../../../UIComponents/FloatingActionButton';
-import IconButton from '../../../UIComponents/IconButton';
-import IconMenu from '../../../UIComponents/IconMenu';
-import MenuItem from '../../../UIComponents/MenuItem';
-import AddIcon from '../../../UIComponents/icons/AddIcon';
-import ViewListIcon from '../../../UIComponents/icons/ViewListIcon';
-import CheckCircle from '@material-ui/icons/CheckCircle';
-import Cancel from '@material-ui/icons/Cancel';
-
-import SearchBar from '../../../Components/SearchBar';
-import ColumnFilter from '../../../Components/ListColumnFilter';
-import { delay } from '../../../Components/InputHelpers';
-import { T, t } from '../../../App/i18n';
-
-import '../../../Components/Styles.scss';
-import TableCell from '../../../UIComponents/Table/TableCell';
-import ListItemText from '../../../UIComponents/ListItemText';
-import Checkbox from '../../../UIComponents/Checkbox';
-
-export const AddItemButton = props => (
-    <FloatingActionButton mini={true} {...props}>
-        <AddIcon />
-    </FloatingActionButton>
-);
-
-const ColumnList = props => (
-    <div style={{ display: 'inline-block', marginLeft: 4 }}>
-        <IconMenu iconComponent={ViewListIcon} placement="bottom-start" disablePortal>
-            {props.columns.map((column, idx) => (
-                <MenuItem key={idx} onClick={() => props.onToggleColumn(idx)}>
-                    <Checkbox checked={props.shown[idx]} value={column.label} />
-                    <ListItemText inset primary={t(column.label)} />
-                </MenuItem>
-            ))}
-        </IconMenu>
-    </div>
-);
-
-const listStyle = {
-    footerCol: {
-        textAlign: 'right',
-        whiteSpace: 'normal',
-        lineHeight: '48px',
-        verticalAlign: 'middle',
-        padding: 0,
-        border: 0,
-    },
-    searchBar: {
-        width: 256,
-        float: 'right',
-        marginTop: 10,
-    },
-    transferSuccess: {
-        color: 'green',
-    },
-    transferFailure: {
-        color: 'red',
-    },
-};
-
-export default class TemplateList extends Component {
-    static defaultProps = {
-        onRowSelection: () => {},
-        selectable: true,
-        rowsTotal: 0,
-        columns: [],
-        data: [],
-        shownColumns: null,
-        showCheckboxes: true,
-        transferSuccess: {},
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            fixedHeader: true,
-            stripedRows: false,
-            showRowHover: false,
-            multiSelectable: true,
-            enableSelectAll: props.showCheckboxes,
-            deselectOnClickaway: false,
-            shownColumns: props.shownColumns || props.columns.map(() => true),
-        };
-
-        this.selectedRows = [];
-    }
-
-    componentWillReceiveProps(props) {
-        if (_.isArray(props.selected)) {
-            this.selectedRows = props.selected;
-        }
-        if (!_.isEqual(props.shownColumns, this.props.shownColumns)) {
-            this.setState({ shownColumns: props.shownColumns });
-        }
-    }
-
-    onPaginationChange = data => {
-        _.isFunction(this.props.onPaginationChange) && this.props.onPaginationChange(data);
-    };
-
-    onSearchChange = delay(data => {
-        _.isFunction(this.props.onSearchChange) && this.props.onSearchChange(data);
-    }, 500);
-
-    renderAddItemButton = () => this.props.onAddItem && <AddItemButton onClick={this.props.onAddItem} />;
-
-    renderDeleteButton = () => {
-        const showDelete =
-            this.selectedRows === 'all' || (_.isArray(this.selectedRows) && this.selectedRows.length > 0);
-        return (
-            this.props.onDeleteItems &&
-            showDelete && (
-                <IconButton onClick={this.props.onDeleteItems}>
-                    <DeleteForeverIcon />
-                </IconButton>
-            )
-        );
-    };
-
-    renderTopComponent() {
-        return null;
-    }
-
-    renderSearchBar() {
-        return (
-            this.props.onSearchChange && (
-                <SearchBar label={t('Search')} style={listStyle.searchBar} onChange={this.onSearchChange} />
-            )
-        );
-    }
-
-    renderColumnList(columns, shownColumns, onToggle) {
-        return <ColumnList columns={columns} shown={shownColumns} onToggleColumn={onToggle} />;
-    }
-
-    onToggleColumn = idx => {
-        let { shownColumns } = this.state;
-        shownColumns[idx] = !shownColumns[idx];
-        this.setState({ shownColumns });
-
-        _.isFunction(this.props.onShownColumnsChange) && this.props.onShownColumnsChange(shownColumns);
-    };
-
-    renderTable = () => {
-        const { rowActions, columns, data, showCheckboxes, transferSuccess } = this.props;
-        const { shownColumns } = this.state;
-
-        return (
-            <div className="list-container">
-                <div style={{ clear: 'both', marginBottom: 64 }} />
-                <Table
-                    showCheckbox={this.state.multiSelectable}
-                    selectable={this.props.selectable}
-                    onRowSelected={(rows, event) => {
-                        this.selectedRows = rows;
-                        this.props.onRowSelection(rows, event);
-                    }}
-                    selected={this.selectedRows}
-                    isRowSelectable={this.props.isRowSelectable}
-                >
-                    <TableHead showCheckbox={showCheckboxes}>
-                        <TableRow>
-                            {columns.map(
-                                (column, i) =>
-                                    shownColumns[i] && (
-                                        <TableCell key={column.name} className={column.name}>
-                                            <ColumnFilter
-                                                {...column}
-                                                onFilterChange={this.props.onFilterChange}
-                                                onSortChange={this.props.onSortChange}
-                                            />
-                                        </TableCell>
-                                    )
-                            )}
-                            <TableHeadColumn key="transferSuccess" />
-                            {_.isArray(rowActions) && rowActions.length && (
-                                <TableHeadColumn key="actions">{T('Actions')}</TableHeadColumn>
-                            )}
-                        </TableRow>
-                    </TableHead>
-                    <TableBody className="list-body">
-                        {data.map((row, index) => {
-                            return (
-                                <TableRow key={index}>
-                                    {columns.map(
-                                        (column, i) =>
-                                            shownColumns[i] && (
-                                                <TableRowColumn key={i} className={column.name}>
-                                                    {_.isFunction(column.renderValue)
-                                                        ? column.renderValue(row[column.name], row)
-                                                        : row[column.name]}
-                                                </TableRowColumn>
-                                            )
-                                    )}
-                                    <TableRowColumn key="transferSuccess">
-                                        {transferSuccess[row.id] === true && (
-                                            <CheckCircle style={listStyle.transferSuccess} />
-                                        )}
-                                        {transferSuccess[row.id] === false && (
-                                            <Cancel style={listStyle.transferFailure} />
-                                        )}
-                                    </TableRowColumn>
-                                    {/*_.isArray(rowActions) && rowActions.length && (
-                                        <TableRowColumn key="actions">
-                                            {_.has(row, 'id') &&
-                                                rowActions.map(action => {
-                                                    // action buttons here
-                                                })}
-                                        </TableRowColumn>
-                                    )*/}
-                                </TableRow>
-                            );
-                        })}
-                    </TableBody>
-                    <TableFooter>
-                        <TableRow>
-                            <TableRowColumn style={listStyle.footerCol}>
-                                {this.renderDeleteButton()}
-                            </TableRowColumn>
-                        </TableRow>
-                    </TableFooter>
-                </Table>
-            </div>
-        );
-    };
-
-    render() {
-        return (
-            <div style={{ position: 'relative' }}>
-                {this.renderAddItemButton()}
-                {this.renderTable()}
-            </div>
-        );
-    }
-}

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

@@ -1,234 +0,0 @@
-import React, { Component } from 'react';
-import Actions, { DESIGNER_REDUCER_NAME } from '../Reducers/Actions';
-import _ from 'lodash';
-import { dispatchFetchData, dispatchPostData } from '../../../App/Reducers/Api/Helpers';
-import Dialog from '../../../UIComponents/Dialog';
-import FlatButton from '../../../UIComponents/FlatButton';
-
-// CUSTOM TABBED EDITOR
-import { Tabs, Tab } from '../../../UIComponents/Tabs/index';
-import { T } from '../../../App/i18n';
-import { connect } from 'react-redux';
-import configurationActions, {
-    CONFIGURATION_REDUCER_NAME,
-    getAdminModeHash,
-} from '../../Creator/Reducers/ConfigurationActions';
-import ConfiguratorQuickView from '../Components/ConfiguratorQuickView';
-import DesignDataTransfer from '../Components/DesignDataTransfer';
-import withStyles from '@material-ui/core/styles/withStyles';
-import DesignAreasSubScreen from '../SubScreens/DesignAreas';
-import DesignViewSubScreen from '../SubScreens/Designviews';
-import VisualizationSubScreen from '../SubScreens/Visualization';
-import CheckData from '../../Creator/Components/CheckData/CheckData';
-
-const styles = theme => ({
-    root: {
-        flexGrow: 1,
-        backgroundColor: theme.palette.background.paper,
-        width: '100%',
-    },
-    flexContainer: {
-        margin: '25px 0',
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.common.white,
-    },
-    MuiTabRoot: {
-        minWidth: '33.3%',
-    },
-    linkText: {
-        '& > a:hover': {
-            color: theme.palette.primary.main,
-        },
-        '&.active > a': {
-            color: theme.palette.primary.main,
-        },
-    },
-    itemStatusForm: {
-        display: 'flex',
-        alignItems: 'center',
-
-        '& .form-input-wrapper': {
-            paddingBottom: 0,
-        },
-    },
-    buttonsAlignment: {
-        justifyContent: 'flex-end',
-        display: 'flex',
-        marginLeft: 'auto',
-    },
-});
-
-const designerFormTabs = {
-    designAreas: 'designAreas',
-    views: 'views',
-    visualMaintenance: 'visualMaintenance',
-};
-
-let selectedVisualizationDesigner = null;
-
-class DesignerForm extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            currentTab: designerFormTabs.designAreas,
-            modeChangeConfirmVisible: false,
-        };
-    }
-
-    componentDidMount() {
-        this.props.getAdminModeHash();
-
-        this.loadItem();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.itemId !== this.props.itemId) {
-            this.loadItem();
-        }
-    }
-
-    onTabChange = (event, tab) => {
-        this.setState({ currentTab: tab });
-    };
-
-    loadItem = () => {
-        this.props.fetchItem(this.props.itemId);
-    };
-
-    updateSettings = visualizationDesigner => {
-        selectedVisualizationDesigner = visualizationDesigner;
-
-        this.setState({ modeChangeConfirmVisible: true });
-    };
-
-    modeChangeConfirmCancel = () => {
-        this.setState({ modeChangeConfirmVisible: false });
-    };
-
-    modeChangeConfirmOk = () => {
-        this.setState({ modeChangeConfirmVisible: false });
-
-        const { item, updateSettings } = this.props;
-
-        const data = {
-            ...item.settings,
-            visualizationDesigner: selectedVisualizationDesigner,
-            item: {
-                id: item.id,
-            },
-        };
-
-        updateSettings(data);
-    };
-
-    renderTabContent(tab) {
-        switch (tab) {
-            case designerFormTabs.designAreas: {
-                return <DesignAreasSubScreen />;
-            }
-            case designerFormTabs.views: {
-                const designerModeComponentMap = {
-                    '2dVariant': <DesignViewSubScreen />,
-                };
-                const currentDesignerMode = _.get(this.props.item, 'visualizationMode.identifier');
-                return (
-                    designerModeComponentMap[currentDesignerMode] || (
-                        <div>{T('pleaseUseVisualMaintanance')}</div>
-                    )
-                );
-            }
-            case designerFormTabs.visualMaintenance: {
-                return <VisualizationSubScreen />;
-            }
-        }
-    }
-
-    render() {
-        const { classes, itemId, item } = this.props;
-        const { currentTab, modeChangeConfirmVisible } = this.state;
-
-        const tabClasses = {
-            textColorInherit: classes.textColorInherit,
-            root: classes.MuiTabRoot,
-        };
-
-        return (
-            <div className="itemEdit">
-                <div className={classes.itemStatusForm}>
-                    <div className={classes.buttonsAlignment}>
-                        <DesignDataTransfer sourceItemId={itemId} />
-                        <ConfiguratorQuickView className="configuratorQuickView" />
-                        <CheckData 
-                            itemIdentifier={item && item.identifier} 
-                            itemId={itemId}
-                            area={'designer'} 
-                        />
-                    </div>
-                </div>
-                <div className={classes.root}>
-                    <Tabs value={currentTab} onChange={this.onTabChange} className={classes.flexContainer}>
-                        {Object.values(designerFormTabs).map((tab, index) => (
-                            <Tab
-                                classes={tabClasses}
-                                key={index}
-                                label={T(tab)}
-                                value={tab}
-                                style={{ background: currentTab !== tab ? 'rgba(255,255,255,0.3)' : '' }}
-                            />
-                        ))}
-                    </Tabs>
-                    {this.renderTabContent(currentTab)}
-                </div>
-                <Dialog
-                    title={T('Confirmation')}
-                    actions={
-                        <React.Fragment>
-                            <FlatButton label={T('Cancel')} onClick={this.modeChangeConfirmCancel} />
-                            <FlatButton label={T('Ok')} primary={true} onClick={this.modeChangeConfirmOk} />
-                        </React.Fragment>
-                    }
-                    open={modeChangeConfirmVisible}
-                >
-                    {T('modeChangeConfirm')}
-                </Dialog>
-            </div>
-        );
-    }
-}
-
-const VISUALIZATION_MODE_ITEM_KEY = 'VISUALIZATION_MODE_ITEM_KEY';
-const VISUALIZATION_MODE_ITEM_SETTINGS_KEY = 'VISUALIZATION_MODE_ITEM_SETTINGS_KEY';
-
-const ConnectedDesignerForm = connect(
-    state => {
-        const entityState = state[DESIGNER_REDUCER_NAME];
-        const configurationEntityState = state[CONFIGURATION_REDUCER_NAME];
-        return {
-            entityState,
-            itemId: _.get(entityState, 'data.id.value'),
-            item: _.get(state, `dataBySource.${VISUALIZATION_MODE_ITEM_KEY}.data`, {}),
-            showConfigurationDetails: configurationEntityState.showDetails,
-        };
-    },
-    dispatch => {
-        return {
-            loadConfigurationDetails: data => dispatch(configurationActions.detailsAction(data)),
-            hideConfigurationDetails: () => dispatch(configurationActions.hideDetails()),
-            getAdminModeHash: () => dispatch(getAdminModeHash()),
-            fetchItem: itemId =>
-                dispatchFetchData(dispatch)(VISUALIZATION_MODE_ITEM_KEY, { url: `items/${itemId}` }),
-            updateSettings: async itemSettings => {
-                await dispatchPostData(dispatch)(
-                    VISUALIZATION_MODE_ITEM_SETTINGS_KEY,
-                    'itemsetting',
-                    itemSettings
-                );
-
-                dispatch(Actions.detailsAction(itemSettings.item));
-            },
-        };
-    }
-)(DesignerForm);
-
-export default withStyles(styles)(ConnectedDesignerForm);

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

@@ -1,42 +0,0 @@
-import Actions, { DESIGNER_LIST_KEY, DESIGNER_REDUCER_NAME } from '../Reducers/Actions';
-
-const columns = [
-    {
-        name: 'identifier',
-        label: 'Identifier',
-        filterable: true,
-        sortable: true,
-    },
-    {
-        name: 'translated_title',
-        label: 'Title',
-        filterable: true,
-        sortable: true,
-        filterKey: 'item.itemtext.title',
-        sortKey: 'item.itemtext.title',
-    },
-];
-
-const listParams = {
-    entity: 'item',
-    orderby: 'item.itemtext.title',
-    orderdir: 'asc',
-};
-
-import generateConnectedList from '../../../Components/DefaultConnectedList';
-
-export default generateConnectedList(
-    columns,
-    listParams,
-    DESIGNER_LIST_KEY,
-    Actions.listAction,
-    Actions.detailsAction,
-    Actions.hideDetails,
-    Actions.showDetails,
-    false, // skip create entity
-    false, // skip remove entity
-    {
-        reducerName: DESIGNER_REDUCER_NAME,
-        entityIdKey: 'id.value',
-    }
-);

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

@@ -1,49 +0,0 @@
-import _ from 'lodash';
-import { connectDefault } from '../../../Components/DefaultConnectedList';
-import { generateTemplateDefaultList } from '../Components/TemplateDefaultList';
-import {
-    DESIGNER_LIST_TRANSFER_KEY,
-    DESIGNER_TRANSFER_REDUCER_NAME,
-    transferActions,
-} from '../Reducers/Actions';
-
-const columns = [
-    {
-        name: 'identifier',
-        label: 'Identifier',
-        filterable: true,
-        sortable: true,
-    },
-    {
-        name: 'translated_title',
-        label: 'Title',
-        filterable: true,
-        sortable: true,
-        filterKey: 'option.optionText.title',
-        sortKey: 'option.optionText.title',
-    },
-];
-
-const listParams = {
-    entity: 'item',
-};
-
-export default connectDefault(
-    generateTemplateDefaultList(columns, listParams),
-    DESIGNER_LIST_TRANSFER_KEY,
-    transferActions.listAction,
-    () => {
-        return _.noop;
-    },
-    () => {
-        return _.noop;
-    },
-    () => {
-        return _.noop;
-    },
-    false,
-    false,
-    {
-        reducerName: DESIGNER_TRANSFER_REDUCER_NAME,
-    }
-);

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

@@ -1,29 +0,0 @@
-export const DESIGNER_LIST_KEY = 'designeritems';
-export const DESIGNER_LIST_TRANSFER_KEY = 'designeritemsTransfer';
-export const DESIGNER_LIST_URL = 'items/designer';
-export const DESIGNER_DATA_KEY = 'designer';
-export const DESIGNER_REDUCER_NAME = 'designerData';
-export const DESIGNER_TRANSFER_REDUCER_NAME = 'designerDataTransfer';
-export const DESIGNER_ITEM_URL = 'items/{itemId}';
-
-import { generateDefaultActions, generateListActions } from '../../../App/Reducers/Entity/Actions';
-
-const Actions = generateDefaultActions(
-    DESIGNER_LIST_KEY,
-    DESIGNER_DATA_KEY,
-    DESIGNER_REDUCER_NAME,
-    DESIGNER_LIST_URL,
-    {
-        getDetailsURL: params => {
-            return DESIGNER_ITEM_URL.replace('{itemId}', params.id);
-        },
-    }
-);
-
-const mergedActions = {
-    ...Actions,
-};
-
-export const transferActions = generateListActions(DESIGNER_LIST_TRANSFER_KEY, DESIGNER_LIST_URL);
-
-export default mergedActions;

package/src/Screens/Designer/Reducers/DesignerReducer.js

@@ -1,37 +0,0 @@
-import { DESIGNER_DATA_KEY, DESIGNER_REDUCER_NAME } from './Actions';
-import { getDefaultEntityState, defaultEntityReducer } from '../../../App/Reducers/Entity/Reducer';
-import { createFeatureReducer } from '../../../App/FeatureReducers';
-
-const initialState = {
-    ...getDefaultEntityState(
-        {
-            id: null,
-            identifier: '',
-            itemStatus: {},
-            visualizationMode: {},
-        },
-        {
-            source: 'designerData',
-            dependencies: [
-                {
-                    name: 'itemstatus',
-                    dataKey: 'itemstatus',
-                    source: 'itemstatus',
-                },
-                {
-                    name: 'colorpalettes',
-                    dataKey: 'colorpalettes',
-                    source: 'colorpalettes',
-                },
-            ],
-        },
-        DESIGNER_DATA_KEY
-    ),
-};
-
-export const designerData = createFeatureReducer(DESIGNER_REDUCER_NAME, (state = initialState, action) => {
-    state = defaultEntityReducer(state, action, initialState);
-    return state;
-});
-
-export default designerData;

package/src/Screens/Designer/Screen.js

@@ -1,18 +0,0 @@
-import Actions, { DESIGNER_REDUCER_NAME } from './Reducers/Actions';
-
-import List from './Containers/List';
-import Edit from './Containers/Edit';
-
-import './Translations';
-
-import { generateConnectedSplitScreen } from '../../Components/DefaultConnectedScreen';
-
-export default generateConnectedSplitScreen(
-    'designer_data',
-    List,
-    Edit,
-    DESIGNER_REDUCER_NAME,
-    Actions.invalidateList,
-    Actions.triggerUnsavedEntity,
-    Actions.hideDetails
-);