@configuratorware/configurator-admingui 1.41.2 → 1.42.2

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

@@ -1,582 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { withStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Checkbox from '@material-ui/core/Checkbox/Checkbox';
-import TablePagination from '@material-ui/core/TablePagination';
-import uniq from 'lodash/uniq';
-import { addReduxListener, removeReduxListener } from '../../../../App/ReduxListener';
-import { t } from '../../../../App/i18n';
-import Actions, { ITEM_REDUCER_NAME } from '../../Reducers/Actions';
-import { DATA_KEY as GROUP_DATA_KEY } from '../../../Group/Reducers/Actions';
-import { DATA_KEY as GROUPENTRY_DATA_KEY } from '../../../GroupEntry/Reducers/Actions';
-import { connectDefault } from '../../../../Components/DefaultConnectedForm';
-import Form from '../../../../Components/Form';
-import withTranslationFinder from '../../../../Components/withTranslationFinder';
-import TranslateComponent from '../../../../Components/TranslateComponent';
-import TranslationFinder from '../../../../Components/TranslationFinder';
-import TableFooter from '../../../../UIComponents/Table/TableFooter';
-import IconButton from '../../../../UIComponents/IconButton';
-import DeleteForeverIcon from '../../../../UIComponents/icons/DeleteForeverIcon';
-import TableRowColumn from '../../../../UIComponents/Table/TableRowColumn';
-import VariantsAutocomplete from '../Variants/VariantsAutocomplete';
-import VariantsSelection from '../Variants/VariantsSelection';
-import VariantsSortFilter from './VariantsSortFilter';
-import VariantsEditorDialog from './VariantsEditorDialog';
-import '../Styles.scss';
-
-const styles = () => ({
-    cancelButton: {
-        position: 'absolute',
-        right: '315px',
-        bottom: '32px',
-    },
-    FormWrapper: {
-        '& div': {
-            '& div.form': {
-                textAlign: 'initial',
-                '& div.form-inner': {
-                    maxWidth: '100%',
-                },
-            },
-        },
-    },
-});
-
-const getGroupsFromChildren = children => {
-    const groups = {};
-    const groupIdsInOrder = [];
-
-    for (const child of children) {
-        for (const group of child.groups) {
-            if (groupIdsInOrder.indexOf(group.id) !== -1) {
-                continue;
-            }
-
-            groupIdsInOrder.push(group.id);
-
-            groups[group.id] = _.cloneDeep(group);
-
-            delete groups[group.id].groupEntry;
-        }
-    }
-
-    return { groups, groupIdsInOrder: uniq(groupIdsInOrder) };
-};
-
-const prepareDataForRendering = children => {
-    const variants = [];
-
-    for (const child of children) {
-        const variant = {
-            id: child.id,
-            identifier: child.identifier,
-            title: child.title,
-            groupEntries: {},
-        };
-
-        for (const group of child.groups) {
-            if (!group.groupEntry) {
-                continue;
-            }
-
-            variant.groupEntries[group.id] = {
-                id: group.groupEntry.id,
-                identifier: group.groupEntry.identifier,
-                translation: group.groupEntry.translation,
-                translations: group.groupEntry.translations,
-            };
-        }
-
-        variants.push(variant);
-    }
-
-    return variants;
-};
-
-const mergeVariants = (currentVariants, newVariants) => {
-    const children = _.cloneDeep(currentVariants);
-    const newItems = {};
-
-    for (const newVariant of newVariants) {
-        newItems[newVariant.id] = {
-            id: newVariant.id,
-            identifier: newVariant.identifier,
-            title: newVariant.title ? newVariant.title : newVariant.translated_title,
-            groups: [],
-        };
-    }
-
-    _.remove(children, function(child) {
-        const itemDoesntExist = !newItems[child.id];
-
-        delete newItems[child.id];
-
-        return itemDoesntExist;
-    });
-
-    for (const newItemId in newItems) {
-        if (!newItems.hasOwnProperty(newItemId)) {
-            continue;
-        }
-
-        children.push(newItems[newItemId]);
-    }
-
-    return children;
-};
-
-const NarrowTableCell = withStyles({
-    root: {
-        paddingRight: 24,
-    },
-})(TableCell);
-
-class VariantsEditor extends Component {
-    constructor(props) {
-        super(props);
-
-        const { groups, groupIdsInOrder } = getGroupsFromChildren(this.props.entityState.data.children.value);
-
-        this.state = {
-            groups,
-            groupIdsInOrder,
-            showVariantsSelectionDialog: false,
-            currentPage: props.currentPage || 0,
-            selectedRow: [],
-            page: 0,
-            rowsPerPage: 20,
-            value: null,
-            sort: 'asc',
-            sortKey: '',
-            listParams: {},
-        };
-
-        this.lastActiveAutocompleteField = null;
-        this.mountEntityListener = { MOUNT_ENTITY: this.onMountEntity };
-    }
-
-    componentDidMount() {
-        addReduxListener(this.mountEntityListener);
-    }
-
-    componentWillUnmount() {
-        removeReduxListener(this.mountEntityListener);
-    }
-
-    addGroupEntryToVariant = (variantId, groupId, entry) => {
-        const children = _.cloneDeep(this.props.entityState.data.children.value);
-
-        const variant = _.find(children, function(o) {
-            return o.id === variantId;
-        });
-        let group = _.find(variant.groups, function(o) {
-            return o.id === groupId;
-        });
-
-        if (!group) {
-            group = _.cloneDeep(this.state.groups[groupId]);
-
-            variant.groups.push(group);
-        }
-
-        group.groupEntry = entry;
-
-        this.props.setData('children', children);
-    };
-
-    onMountEntity = action => {
-        if (action.key === GROUPENTRY_DATA_KEY) {
-            const entry = _.cloneDeep(action.data);
-
-            if (entry && this.lastActiveAutocompleteField && action.isSaved) {
-                const { variantId, groupId } = this.lastActiveAutocompleteField;
-
-                this.addGroupEntryToVariant(variantId, groupId, entry);
-            }
-        } else if (action.key === GROUP_DATA_KEY) {
-            const group = _.cloneDeep(action.data);
-
-            if (group && action.isSaved) {
-                this.addGroup(group);
-            }
-        }
-    };
-
-    addGroup = group => {
-        let { groups, groupIdsInOrder } = this.state;
-
-        if (groupIdsInOrder.indexOf(group.id.toString()) !== -1) {
-            return;
-        }
-
-        groups = _.cloneDeep(groups);
-        groupIdsInOrder = _.cloneDeep(groupIdsInOrder);
-
-        groups[group.id] = group;
-
-        groupIdsInOrder.push(group.id);
-
-        this.setState({
-            groups,
-            groupIdsInOrder: uniq(groupIdsInOrder),
-        });
-    };
-
-    onGroupEntryChange = (variantId, groupId, entry) => {
-        this.addGroupEntryToVariant(variantId, groupId, entry);
-    };
-
-    onGroupEntryAddClick = (variantId, groupId) => {
-        const { onAction } = this.props;
-
-        this.lastActiveAutocompleteField = {
-            variantId,
-            groupId,
-        };
-
-        onAction('CREATE_ENTITY', { target: GROUPENTRY_DATA_KEY });
-    };
-
-    onAddGroupClick = () => {
-        const { onAction } = this.props;
-
-        onAction('CREATE_ENTITY', { target: GROUP_DATA_KEY });
-    };
-
-    onEditBaseDataClick = id => {
-        this.props.loadVariantDetails({ id: id });
-    };
-
-    closeEditBaseDataDialog = () => {
-        this.props.hideVariantDetails();
-    };
-
-    renderDeleteButton = () => {
-        const showDelete = _.isArray(this.state.selectedRow) && this.state.selectedRow.length > 0;
-        return (
-            showDelete && (
-                <IconButton onClick={this.deleteRow}>
-                    <DeleteForeverIcon />
-                </IconButton>
-            )
-        );
-    };
-
-    deleteRow = () => {
-        const { entityState } = this.props;
-        const { selectedRow } = this.state;
-        let result = [].concat(entityState.data.children.value);
-        result = _.filter(result, o => selectedRow.indexOf(o.identifier) < 0);
-        this.props.setData('children', result);
-        this.setState({ selectedRow: [] });
-    };
-
-    selectRow = variant => ({ target }) => {
-        if (!target || target.type !== 'checkbox') {
-            return;
-        }
-        const { selectedRow } = this.state;
-        const selectedIndex = selectedRow.indexOf(variant.identifier);
-        let newSelected = [];
-
-        if (selectedIndex === -1) {
-            newSelected = newSelected.concat(selectedRow, variant.identifier);
-        } else if (selectedIndex === 0) {
-            newSelected = newSelected.concat(selectedRow.slice(1));
-        } else if (selectedIndex === selectedRow.length - 1) {
-            newSelected = newSelected.concat(selectedRow.slice(0, -1));
-        } else if (selectedIndex > 0) {
-            newSelected = newSelected.concat(
-                selectedRow.slice(0, selectedIndex),
-                selectedRow.slice(selectedIndex + 1)
-            );
-        }
-        this.setState({ selectedRow: newSelected });
-    };
-
-    handleSelectAllClick = event => {
-        if (event.target.checked) {
-            this.setState({ selectedRow: this.props.entityState.data.children.value.map(n => n.identifier) });
-            return;
-        }
-        this.setState({ selectedRow: [] });
-    };
-
-    onVariantsSetSelection = selectedVariants => {
-        const children = mergeVariants(this.props.entityState.data.children.value, selectedVariants);
-
-        this.setState({ showVariantsSelectionDialog: false });
-
-        this.props.setData('children', children);
-    };
-
-    onVariantsCloseSelection = () => {
-        this.setState({ showVariantsSelectionDialog: false });
-    };
-
-    onAddVariantClick = () => {
-        this.setState({ showVariantsSelectionDialog: true });
-    };
-
-    handleChangePage = (event, page) => {
-        this.setState({ page });
-    };
-
-    handleChangeRowsPerPage = event => {
-        this.setState({ rowsPerPage: event.target.value });
-    };
-
-    isSelected = id => this.state.selectedRow.indexOf(id) !== -1;
-
-    updateList = listParams => {
-        this.setState({ listParams });
-    };
-
-    callActionWithValidation = actionCreator => (...args) => {
-        // check if all the groups are selected
-        const children = this.props.entityState.data.children.value;
-        const requiredGroupNumber = this.state.groupIdsInOrder.length;
-        const childWithEmptyGroup = children.find(
-            ({ groups }) =>
-                groups.length < requiredGroupNumber ||
-                groups.filter(({ groupEntry }) => !groupEntry).length > 0
-        );
-
-        const isValid = !childWithEmptyGroup;
-
-        return isValid && actionCreator(...args);
-    };
-
-    render() {
-        const { classes, postData, itemId } = this.props;
-        const { groups, groupIdsInOrder, showVariantsSelectionDialog, rowsPerPage, page } = this.state;
-        const children = this.props.entityState.data.children.value;
-        const variants = prepareDataForRendering(children);
-
-        return (
-            <div className="variantsEditor">
-                <div className="label">
-                    <TranslateComponent value={'variants.headline'}>
-                        <a href="javascript:void(0);" onClick={this.onAddGroupClick} key="addGroup" />
-                        <a href="javascript:void(0);" onClick={this.onAddVariantClick} key="addChildItems" />
-                    </TranslateComponent>
-                </div>
-                <div className={classes.FormWrapper}>
-                    <Form onSubmit={this.callActionWithValidation(postData)}>
-                        <Table className={classes.table}>
-                            <TableHead>
-                                <TableRow>
-                                    <TableCell padding="checkbox">
-                                        <Checkbox
-                                            indeterminate={
-                                                this.state.selectedRow.length > 0 &&
-                                                this.state.selectedRow.length < variants.length
-                                            }
-                                            checked={this.state.selectedRow.length === variants.length}
-                                            onChange={this.handleSelectAllClick}
-                                        />
-                                    </TableCell>
-
-                                    <NarrowTableCell>
-                                        <VariantsSortFilter
-                                            id={'Identifier'}
-                                            value={this.state.value}
-                                            sort={this.state.listParams.sort}
-                                            label={t('Identifier')}
-                                            updateList={listParams => this.updateList(listParams)}
-                                            sortKey={'identifier'}
-                                            listParams={this.state.listParams}
-                                        />
-                                    </NarrowTableCell>
-                                    <NarrowTableCell>
-                                        <VariantsSortFilter
-                                            id={'Title'}
-                                            value={this.state.value}
-                                            sort={this.state.listParams.sort}
-                                            label={t('Title')}
-                                            updateList={listParams => this.updateList(listParams)}
-                                            sortKey={'title'}
-                                            listParams={this.state.listParams}
-                                        />
-                                    </NarrowTableCell>
-                                    {groupIdsInOrder.map(groupId => (
-                                        <NarrowTableCell key={groupId}>
-                                            {groups[groupId].translation ? (
-                                                <VariantsSortFilter
-                                                    id={groups[groupId].translation}
-                                                    value={this.state.value}
-                                                    sort={this.state.listParams.sort}
-                                                    label={groups[groupId].translation}
-                                                    updateList={listParams => this.updateList(listParams)}
-                                                    sortKey={groups[groupId].id}
-                                                    listParams={this.state.listParams}
-                                                />
-                                            ) : (
-                                                <VariantsSortFilter
-                                                    id={groups[groupId].translation}
-                                                    value={this.state.value}
-                                                    sort={this.state.listParams.sort}
-                                                    label={
-                                                        <TranslationFinder
-                                                            data={groups[groupId].translations}
-                                                            property={'translation'}
-                                                            fallback={groups[groupId].identifier}
-                                                        />
-                                                    }
-                                                    updateList={listParams => this.updateList(listParams)}
-                                                    sortKey={groups[groupId].id}
-                                                    listParams={this.state.listParams}
-                                                />
-                                            )}
-                                        </NarrowTableCell>
-                                    ))}
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {variants
-                                    .slice()
-                                    .filter(variant => {
-                                        const filters = this.state.listParams.filters;
-                                        const newVariants = [];
-                                        if (filters) {
-                                            for (let filter of Object.keys(filters)) {
-                                                if (
-                                                    variant[filter] &&
-                                                    variant[filter]
-                                                        .toLowerCase()
-                                                        .indexOf(filters[filter].toLowerCase()) > -1
-                                                ) {
-                                                    return newVariants.push(variant);
-                                                } else if (
-                                                    !variant[filter] &&
-                                                    variant.groupEntries[filter].translation
-                                                        .toLowerCase()
-                                                        .indexOf(filters[filter].toLowerCase()) > -1
-                                                ) {
-                                                    return newVariants.push(variant);
-                                                }
-                                            }
-                                        } else {
-                                            return variants.slice();
-                                        }
-                                    })
-                                    .sort((a, b) => {
-                                        const prop = this.state.listParams.sortKey;
-                                        const orderDir = this.state.listParams.sort;
-
-                                        let modifier = orderDir === 'desc' ? -1 : 1;
-                                        if (a[prop] < b[prop]) return -modifier;
-                                        else if (a[prop] > b[prop]) return modifier;
-                                        else return 0;
-                                    })
-                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                    .map(variant => (
-                                        <TableRow
-                                            key={variant.id}
-                                            onClick={this.selectRow(variant)}
-                                            selected={this.state.selectedRow.indexOf(variant.identifier) > -1}
-                                        >
-                                            <TableCell padding="checkbox">
-                                                <Checkbox checked={this.isSelected(variant.identifier)} />
-                                            </TableCell>
-                                            <NarrowTableCell>
-                                                <a
-                                                    href="javascript:void(0);"
-                                                    onClick={() => this.onEditBaseDataClick(variant.id)}
-                                                >
-                                                    {variant.identifier}
-                                                </a>
-                                            </NarrowTableCell>
-                                            <NarrowTableCell>{variant.title}</NarrowTableCell>
-                                            {groupIdsInOrder.map(groupId => {
-                                                const groupEntry = variant.groupEntries[groupId];
-                                                const searchText =
-                                                    !groupEntry || !groupEntry.identifier
-                                                        ? ''
-                                                        : this.props.findTranslation(
-                                                              groupEntry.translations,
-                                                              groupEntry.translation
-                                                          ) + ` (${groupEntry.identifier})`;
-                                                return (
-                                                    <NarrowTableCell
-                                                        key={groupId}
-                                                        className={'variantsEditor-tableCell'}
-                                                    >
-                                                        <VariantsAutocomplete
-                                                            searchText={searchText}
-                                                            variantId={variant.id}
-                                                            groupId={groupId}
-                                                            onChange={this.onGroupEntryChange}
-                                                            onAddClick={this.onGroupEntryAddClick}
-                                                            error={
-                                                                variant.groupEntries[groupId]
-                                                                    ? null
-                                                                    : 'Missing group entry'
-                                                            }
-                                                        />
-                                                    </NarrowTableCell>
-                                                );
-                                            })}
-                                        </TableRow>
-                                    ))}
-                            </TableBody>
-                            <TableFooter>
-                                <TableRow>
-                                    <VariantsEditorDialog
-                                        loadVariantDetails={this.props.loadVariantDetails}
-                                        closeEditBaseDataDialog={this.closeEditBaseDataDialog}
-                                        showBaseDataDialog={this.props.variants.showDetails}
-                                    />
-                                    <TableRowColumn>
-                                        {this.renderDeleteButton(this.state.selectedRow)}
-                                    </TableRowColumn>
-                                    <TablePagination
-                                        rowsPerPageOptions={[10, 20, 50, 100]}
-                                        count={variants.length}
-                                        rowsPerPage={this.state.rowsPerPage}
-                                        page={this.state.page}
-                                        backIconButtonProps={{ 'aria-label': 'Previous Page' }}
-                                        nextIconButtonProps={{ 'aria-label': 'Next Page' }}
-                                        onChangePage={this.handleChangePage}
-                                        onChangeRowsPerPage={this.handleChangeRowsPerPage}
-                                        labelDisplayedRows={({ from, to, count }) =>
-                                            t('pagination.labelDisplayedRows', {
-                                                from,
-                                                to,
-                                                count,
-                                            })
-                                        }
-                                        labelRowsPerPage={t('pagination.labelRowsPerPage')}
-                                    />
-                                </TableRow>
-                            </TableFooter>
-                        </Table>
-                        <VariantsSelection
-                            showSelectionDialog={showVariantsSelectionDialog}
-                            setSelection={this.onVariantsSetSelection}
-                            closeSelection={this.onVariantsCloseSelection}
-                            selectedItems={children}
-                            selectedParentItem={itemId}
-                        />
-                    </Form>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles)(
-    connectDefault(
-        withTranslationFinder(VariantsEditor),
-        ITEM_REDUCER_NAME,
-        Actions.setFieldData,
-        Actions.postData,
-        Actions.hideDetails,
-        Actions.customAction
-    )
-);