@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Creator/Components/VisualizationAndMediaData/VisualizationAndMediaData.js

@@ -1,766 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
-import first from 'lodash/first';
-import get from 'lodash/get';
-import find from 'lodash/find';
-import padStart from 'lodash/padStart';
-import sortBy from 'lodash/sortBy';
-import withStyles from '@material-ui/core/styles/withStyles';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { SortableContainer, SortableElement } from 'react-sortable-hoc';
-import arrayMove from 'array-move';
-
-import { T, t } from '../../../../App/i18n';
-import Dialog from '../../../../UIComponents/Dialog';
-import Button from '../../../../UIComponents/Button';
-import { Tab, Tabs } from '../../../../UIComponents/Tabs';
-import Paper from '../../../../UIComponents/Paper';
-import IconButton from '../../../../UIComponents/IconButton';
-import DeleteIcon from '../../../../UIComponents/icons/DeleteIcon';
-import { withAsyncProps } from '../../../../Utils/HOCs/AsyncProps';
-import { withRemappedProps } from '../../../../Utils/HOCs/RemappedProps';
-import { loadItemById } from '../../../Designer/SubScreens/Visualization/ApiCalls';
-import Api from '../../../../App/Api';
-import { networkError } from '../../../../App/Reducers/Api/Actions';
-import Image from './Components/Image';
-import PathStructure from './Components/PathStructure';
-import ConfirmDelete from './Components/ConfirmDelete';
-import ViewEdit from './Components/ViewEdit';
-import EditableText from './Components/EditableText';
-import ImageEditTools from './Components/ImageEditTools';
-import './Translations';
-
-const ImageTile = withStyles(theme => ({
-    imageTile: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        '&:hover $imageEditTools': {
-            transform: 'scale(1, 1)',
-        },
-    },
-    imageLabel: {
-        marginTop: theme.spacing.unit,
-        height: 38,
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-    },
-    imageLabelText: {
-        flex: 1,
-        fontWeight: 'bold',
-    },
-    fileName: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: '100%',
-        margin: 'auto',
-    },
-    imageEditTools: {
-        transform: 'scale(0, 0)',
-        transition: 'transform ease-in-out 0.3s',
-        position: 'absolute',
-        top: 0,
-        left: '50%',
-        width: 100,
-        marginLeft: -50,
-    },
-}))(({ src, fileName, expectedSrc, label, classes, uploadUrl, removeUrl, onUpdate }) => {
-    return (
-        <div className={classes.imageTile}>
-            {expectedSrc ? <PathStructure path={expectedSrc} /> : <Image src={src} />}
-
-            {uploadUrl && removeUrl && (
-                <ImageEditTools
-                    className={classes.imageEditTools}
-                    deleteEnabled={!!src}
-                    uploadUrl={uploadUrl}
-                    removeUrl={removeUrl}
-                    onUpdate={onUpdate}
-                />
-            )}
-            <div className={classes.imageLabel}>
-                <div className={classes.imageLabelText}>{label}&nbsp;</div>
-                {uploadUrl && removeUrl && (
-                    <div className={classes.fileName} title={fileName}>
-                        {fileName || t('visualizationAndMediaData.imageStatus.noImage')}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});
-ImageTile.displayName = 'ImageTile';
-
-const ItemTile = withStyles(theme => ({
-    root: {
-        padding: theme.spacing.unit * 2,
-        textAlign: 'center',
-        marginBottom: theme.spacing.unit * 2,
-        height: 202,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        fontSize: '0.8em',
-    },
-    title: {
-        fontWeight: 'bold',
-    },
-    titleSubtitle: {},
-}))(({ title, subTitle, children, classes }) => (
-    <Paper className={classes.root}>
-        <div className={classes.titleSubtitle} title={title}>
-            <span className={classes.title}>{title}</span> {subTitle}
-        </div>
-        {children}
-    </Paper>
-));
-ItemTile.displayName = 'ItemTile';
-
-const TabTile = withStyles(theme => ({
-    root: {
-        textAlign: 'center',
-        height: 170,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textTransform: 'none',
-        position: 'relative',
-    },
-    title: {
-        display: 'flex',
-        width: 133,
-        height: 24,
-        marginBottom: theme.spacing.unit,
-        marginRight: 8,
-    },
-    iconButton: {
-        font: 'inherit',
-        fontSize: '1em',
-        padding: 4,
-        color: 'white',
-        position: 'absolute',
-        right: -20,
-        top: -2,
-    },
-}))(({ title, onDeleteClick, children, classes }) => (
-    <div className={classes.root}>
-        {title && <div className={classes.title}>{title}</div>}
-        {onDeleteClick && (
-            <IconButton className={classes.iconButton} aria-label="Remove" onClick={onDeleteClick}>
-                <DeleteIcon fontSize="small" />
-            </IconButton>
-        )}
-        {children}
-    </div>
-));
-TabTile.displayName = 'TabTile';
-
-const SortableTabs = SortableContainer(Tabs);
-const SortableTab = SortableElement(Tab);
-
-const editorModes = {
-    componentsAndOptions: 0,
-    viewsAndVisualization: 1,
-};
-
-export const VisualizationAndMediaData = withStyles(theme => ({
-    dialog: {
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: 700,
-        minWidth: 900,
-    },
-    missingImageNotice: {
-        marginBottom: theme.spacing.unit,
-    },
-    buttonProgress: {
-        position: 'absolute',
-    },
-    progressContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1000,
-        background: 'lightgrey',
-        opacity: 0.5,
-        textAlign: 'center',
-    },
-    progressOverlay: {
-        position: 'absolute',
-        top: '50%',
-        margin: '-15px',
-    },
-    tabs: {
-        minHeight: 182,
-        marginTop: 5,
-        '&.empty': {
-            minHeight: 'fit-content',
-        },
-    },
-    tabRoot: {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.common.white,
-        '& + $addViewButton': {
-            marginLeft: theme.spacing.unit * 4,
-        },
-        width: 184,
-    },
-    addViewButton: {
-        alignSelf: 'flex-start',
-        marginBottom: theme.spacing.unit,
-    },
-    container: {
-        overflowX: 'visible',
-        overflowY: 'auto',
-    },
-    componentsContainer: {
-        paddingTop: theme.spacing.unit,
-        paddingBottom: theme.spacing.unit,
-        marginLeft: theme.spacing.unit,
-        marginRight: theme.spacing.unit,
-    },
-    componentsScroller: {
-        display: 'flex',
-    },
-    optionsContainer: {
-        paddingTop: theme.spacing.unit,
-        paddingLeft: theme.spacing.unit,
-        marginLeft: theme.spacing.unit * 2,
-        flex: 1,
-        overflowX: 'auto',
-        overflowY: 'visible',
-    },
-    optionsScroller: {
-        display: 'inline-flex',
-        flexDirection: 'column',
-    },
-    optionRow: {
-        display: 'inline-flex',
-        flexDirection: 'row',
-        '& > *': {
-            marginRight: theme.spacing.unit * 2,
-        },
-        minHeight: 218,
-    },
-    itemTitle: {
-        alignSelf: 'flex-start',
-        marginBottom: theme.spacing.unit,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        maxWidth: 300,
-        '&.withViewImage': {
-            maxWidth: 220,
-        },
-    },
-    itemTileViews: {
-        width: 220,
-    },
-    imageList: {
-        flex: 1,
-        display: 'grid',
-        gridTemplateColumns: 'repeat(2, minmax(0%, 1fr))',
-        gridGap: '10px',
-        width: 150 * 2,
-        '&.withViewImage': {
-            gridTemplateColumns: 'repeat(1, minmax(0%, 1fr))',
-            width: 150,
-        },
-    },
-    infoBox: {
-        background: 'rgba(0, 0, 0, 0.1)',
-        marginBottom: theme.spacing.unit * 2,
-        borderRadius: 4,
-        padding: theme.spacing.unit,
-        fontSize: '0.8em',
-        '& > p': {
-            margin: 0,
-        },
-    },
-    infoLabel: {
-        fontSize: '0.8em',
-        padding: theme.spacing.unit,
-    },
-    possibleNamingIssues: {
-        marginTop: theme.spacing.unit * 2,
-        '& > ul': {
-            margin: 0,
-        },
-        overflowY: 'auto',
-        maxHeight: '15%',
-    },
-    noTabIndicator: {
-        display: 'none',
-    },
-    sortable: {
-        zIndex: 9999,
-    },
-}))(({ enabled, item, itemId, loadData, saveView, updateView, removeView, classes }) => {
-    const [open, setOpen] = useState(false);
-    const [mediaEditData, setMediaEditData] = useState({
-        viewMediaInfo: [],
-        componentMediaInfo: [],
-        possibleNamingIssues: [],
-    });
-    const [loading, setLoading] = useState(false);
-    const [loadingDialog, setLoadingDialog] = useState(false);
-    const [editorMode, setEditorMode] = useState(0);
-    const [selectedDesignView, setSelectedDesignView] = useState(false);
-    const [showAddView, setShowAddView] = useState(false);
-    const [idToDelete, setIdToDelete] = useState(false);
-    const currentDesignViewIdentifier = selectedDesignView && selectedDesignView.identifier;
-
-    const { viewMediaInfo, componentMediaInfo, possibleNamingIssues } = mediaEditData;
-
-    const [orderedViews, setOrderedViews] = useState(viewMediaInfo);
-
-    const refreshData = async () => {
-        try {
-            setLoadingDialog(true);
-            const data = await loadData(itemId);
-            setMediaEditData(data);
-        } finally {
-            setLoadingDialog(false);
-        }
-    };
-
-    useEffect(() => {
-        setOrderedViews(viewMediaInfo);
-    }, [viewMediaInfo]);
-
-    useEffect(() => {
-        if (editorMode === editorModes.viewsAndVisualization) {
-            if (!selectedDesignView) {
-                setSelectedDesignView(first(viewMediaInfo));
-            } else {
-                setSelectedDesignView(find(viewMediaInfo, { id: selectedDesignView.id }));
-            }
-        } else {
-            setSelectedDesignView(false);
-        }
-    }, [viewMediaInfo, editorMode, selectedDesignView]);
-
-    useEffect(() => {
-        (async () => {
-            if (open) {
-                setLoading(true);
-                try {
-                    setMediaEditData(await loadData(itemId));
-                } finally {
-                    setLoading(false);
-                }
-            }
-        })();
-    }, [open, loadData, setMediaEditData, itemId]);
-
-    const handleViewSortEnd = async ({ oldIndex, newIndex }) => {
-        const views = arrayMove(orderedViews, oldIndex, newIndex).map((view, index) => ({
-            ...view,
-            sequenceNumber: padStart('' + (index + 1), 2, '0'),
-        }));
-        setOrderedViews(views);
-
-        let refreshNeeded = false;
-
-        try {
-            setLoadingDialog(true);
-            await Promise.all(
-                views.map(view => {
-                    if (view.sequenceNumber !== orderedViews.sequenceNumber) {
-                        refreshNeeded = true;
-                        return updateView({
-                            ...view,
-                            itemId,
-                        });
-                    }
-                })
-            );
-        } finally {
-            refreshNeeded ? await refreshData() : setLoadingDialog(false);
-        }
-    };
-
-    // an image is treated as missing if its src is empty, so finding empty src props gives the correct result
-    const showMissingImageNotice = useMemo(() => {
-        return (function findEmptySrc(obj) {
-            if (obj instanceof Array) {
-                return obj.some(findEmptySrc);
-            } else if (obj instanceof Object) {
-                return obj.hasOwnProperty('src') ? !obj.src : findEmptySrc(Object.values(obj));
-            }
-        })(componentMediaInfo);
-    }, [componentMediaInfo]);
-
-    if (!enabled) {
-        return null;
-    }
-
-    return (
-        <>
-            <Button
-                variant="contained"
-                color="primary"
-                size="large"
-                onClick={() => setOpen(true)}
-                disabled={loading}
-            >
-                <T>visualizationAndMediaData.openButtonLabel</T>
-                {loading && <CircularProgress className={classes.buttonProgress} size={24} />}
-            </Button>
-
-            <Dialog
-                title={T('visualizationAndMediaData.dialogTitle', {
-                    item: `${get(item, 'translated_title')} (${get(item, 'identifier')})`,
-                })}
-                modal={'true'}
-                open={!loading && open}
-                scroll={'paper'}
-                onClose={() => setOpen(false)}
-                maxWidth={false}
-                classes={{
-                    dialogContentTextRoot: classes.dialog,
-                }}
-            >
-                <div className={classes.missingImageNotice}>
-                    {T(
-                        `visualizationAndMediaData.missingImageNotice.${
-                            showMissingImageNotice ? 'imagesAreMissing' : 'noMissingImage'
-                        }`
-                    )}
-                </div>
-
-                <div className={classes.infoBox}>{T('visualizationAndMediaData.infoBoxText')}</div>
-
-                <Tabs value={editorMode} onChange={(evt, value) => setEditorMode(value)}>
-                    {Object.keys(editorModes).map(key => (
-                        <Tab
-                            key={key}
-                            component="div"
-                            value={editorModes[key]}
-                            label={T(`visualizationAndMediaData.editorModes.${key}`)}
-                        />
-                    ))}
-                </Tabs>
-                {editorMode === editorModes.componentsAndOptions ? (
-                    <div className={classes.infoLabel}>
-                        {T('visualizationAndMediaData.infoBoxTextComponentsAndOptions')}
-                    </div>
-                ) : (
-                    <div className={classes.infoLabel}>
-                        {T('visualizationAndMediaData.infoBoxTextViewsAndVisualization')}
-                    </div>
-                )}
-                {editorMode === editorModes.viewsAndVisualization && (
-                    <SortableTabs
-                        onSortEnd={handleViewSortEnd}
-                        distance={10}
-                        axis={'x'}
-                        lockAxis={'x'}
-                        lockToContainerEdges
-                        helperClass={classes.sortable}
-                        value={currentDesignViewIdentifier || 0}
-                        onChange={(evt, value) =>
-                            setSelectedDesignView(orderedViews.find(({ identifier }) => identifier === value))
-                        }
-                        className={classes.tabs + (selectedDesignView ? '' : ' empty')}
-                        classes={{
-                            indicator: !viewMediaInfo.length ? classes.noTabIndicator : '',
-                        }}
-                    >
-                        {selectedDesignView &&
-                            orderedViews &&
-                            orderedViews.map((designView, index) => {
-                                const { id, identifier, sequenceNumber } = designView;
-                                return (
-                                    <SortableTab
-                                        key={identifier}
-                                        index={index}
-                                        component="div"
-                                        label={
-                                            <TabTile
-                                                title={
-                                                    <EditableText
-                                                        aria-label={'identifier'}
-                                                        value={identifier}
-                                                        onChange={async value => {
-                                                            await updateView({
-                                                                id,
-                                                                itemId,
-                                                                sequenceNumber,
-                                                                identifier: value,
-                                                            });
-                                                            setMediaEditData(await loadData(itemId));
-                                                        }}
-                                                    />
-                                                }
-                                                onDeleteClick={() => {
-                                                    setIdToDelete(id);
-                                                }}
-                                            >
-                                                <ImageTile
-                                                    {...get(designView, 'thumbnail')}
-                                                    label={'Thumbnail:'}
-                                                    uploadUrl={`/creator_views/${id}/upload/thumbnail`}
-                                                    removeUrl={`/creator_views/${id}/thumbnail`}
-                                                    onUpdate={refreshData}
-                                                />
-                                            </TabTile>
-                                        }
-                                        value={identifier}
-                                        classes={{
-                                            root: classes.tabRoot,
-                                        }}
-                                    />
-                                );
-                            })}
-                        <Button
-                            variant="contained"
-                            color="primary"
-                            size="large"
-                            onClick={() => setShowAddView(true)}
-                            className={classes.addViewButton}
-                        >
-                            <T>visualizationAndMediaData.addViewButtonLabel</T>
-                        </Button>
-                    </SortableTabs>
-                )}
-
-                <ViewEdit
-                    item={item}
-                    open={showAddView}
-                    onClose={() => setShowAddView(false)}
-                    onSubmit={async data => {
-                        try {
-                            await saveView({
-                                ...data,
-                                itemId,
-                                sequenceNumber: '999',
-                            });
-                        } catch (e) {
-                            // eslint-disable-next-line no-console
-                            console.error(e);
-                        }
-                        refreshData();
-                        setShowAddView(false);
-                    }}
-                />
-
-                <ConfirmDelete
-                    id={'confirmDeleteView'}
-                    open={!!idToDelete}
-                    onCancel={() => setIdToDelete(false)}
-                    onConfirm={async () => {
-                        await removeView(idToDelete);
-                        setIdToDelete(false);
-                        setMediaEditData(await loadData(itemId));
-                    }}
-                    title={t('visualizationAndMediaData.viewDeleteConfirm.title')}
-                    message={t('visualizationAndMediaData.viewDeleteConfirm.message')}
-                />
-
-                {componentMediaInfo &&
-                    componentMediaInfo.length > 0 &&
-                    (editorMode === editorModes.componentsAndOptions ||
-                        (orderedViews && orderedViews.length > 0)) && (
-                        <div className={classes.container}>
-                            <div className={classes.componentsScroller}>
-                                <div className={classes.componentsContainer}>
-                                    {componentMediaInfo.map(oc => {
-                                        return (
-                                            <ItemTile
-                                                key={oc.identifier}
-                                                title={`${oc.translated_title}`}
-                                                subTitle={`(${oc.identifier})`}
-                                                classes={{
-                                                    titleSubtitle: classes.itemTitle,
-                                                }}
-                                            >
-                                                <ImageTile
-                                                    {...get(oc, 'images.componentThumbnail')}
-                                                    label={
-                                                        editorMode === editorModes.componentsAndOptions
-                                                            ? 'Thumbnail:'
-                                                            : ''
-                                                    }
-                                                    uploadUrl={
-                                                        editorMode === editorModes.componentsAndOptions &&
-                                                        `/optionclassifications/${oc.id}/upload/thumbnail`
-                                                    }
-                                                    removeUrl={
-                                                        editorMode === editorModes.componentsAndOptions &&
-                                                        `/optionclassifications/${oc.id}/thumbnail`
-                                                    }
-                                                    onUpdate={refreshData}
-                                                />
-                                            </ItemTile>
-                                        );
-                                    })}
-                                </div>
-                                <div className={classes.optionsContainer}>
-                                    <div className={classes.optionsScroller}>
-                                        {componentMediaInfo.map(oc => (
-                                            <div key={oc.identifier} className={classes.optionRow}>
-                                                {oc.options.map(option => (
-                                                    <ItemTile
-                                                        key={option.identifier}
-                                                        title={`${option.translated_title}`}
-                                                        subTitle={`(${option.identifier})`}
-                                                        classes={{
-                                                            root:
-                                                                currentDesignViewIdentifier &&
-                                                                classes.itemTileViews,
-                                                            titleSubtitle:
-                                                                classes.itemTitle +
-                                                                currentDesignViewIdentifier
-                                                                    ? ' withViewImage'
-                                                                    : '',
-                                                        }}
-                                                    >
-                                                        <div
-                                                            className={
-                                                                currentDesignViewIdentifier
-                                                                    ? classes.imageList + ' withViewImage'
-                                                                    : ''
-                                                            }
-                                                        >
-                                                            {currentDesignViewIdentifier && (
-                                                                <ImageTile
-                                                                    {...get(
-                                                                        option,
-                                                                        `images.visualizationImages.${currentDesignViewIdentifier}`
-                                                                    )}
-                                                                    label={'Visualization:'}
-                                                                    uploadUrl={`/items/${itemId}/upload/layer_image/${oc.id}/${option.id}/${selectedDesignView.id}`}
-                                                                    removeUrl={`/items/${itemId}/layer_image/${oc.id}/${option.id}/${selectedDesignView.id}`}
-                                                                    onUpdate={refreshData}
-                                                                />
-                                                            )}
-                                                            {editorMode ===
-                                                                editorModes.componentsAndOptions && (
-                                                                <div className={classes.imageList}>
-                                                                    <ImageTile
-                                                                        {...get(
-                                                                            option,
-                                                                            'images.optionThumbnail'
-                                                                        )}
-                                                                        label={'Thumbnail:'}
-                                                                        uploadUrl={`/options/${option.id}/upload/thumbnail`}
-                                                                        removeUrl={`/options/${option.id}/thumbnail`}
-                                                                        onUpdate={refreshData}
-                                                                    />
-                                                                    <ImageTile
-                                                                        {...get(
-                                                                            option,
-                                                                            'images.optionDetailImage'
-                                                                        )}
-                                                                        label={'Detail:'}
-                                                                        uploadUrl={`/options/${option.id}/upload/detail_image`}
-                                                                        removeUrl={`/options/${option.id}/detail_image`}
-                                                                        onUpdate={refreshData}
-                                                                    />
-                                                                </div>
-                                                            )}
-                                                        </div>
-                                                    </ItemTile>
-                                                ))}
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                {possibleNamingIssues && possibleNamingIssues.length > 0 && (
-                    <div className={classes.possibleNamingIssues}>
-                        {T('visualizationAndMediaData.possibleNamingIssuesNotice')}
-                        <ul>
-                            {possibleNamingIssues.map(fileName => (
-                                <li key={fileName}>{fileName}</li>
-                            ))}
-                        </ul>
-                    </div>
-                )}
-                {loadingDialog && (
-                    <div className={classes.progressContainer}>
-                        <CircularProgress className={classes.progressOverlay} size={30} />
-                    </div>
-                )}
-            </Dialog>
-        </>
-    );
-});
-VisualizationAndMediaData.displayName = 'VisualizationAndMediaData';
-
-function mapStateToProps() {
-    return {};
-}
-
-function mapDispatchToProps(dispatch) {
-    return {
-        loadData: async id => {
-            try {
-                const { data } = await Api.request(`/mediainfo/${id}`);
-                return {
-                    componentMediaInfo: [],
-                    possibleNamingIssues: [],
-                    ...data,
-                    viewMediaInfo: sortBy(data.viewMediaInfo, ['sequenceNumber']),
-                };
-            } catch (e) {
-                dispatch(networkError('mediainfo', 'mediainfo', e));
-                throw e;
-            }
-        },
-        saveView: async data => {
-            try {
-                return await Api.request({ method: 'post', url: `/creator_views`, data });
-            } catch (e) {
-                dispatch(networkError('views', 'views', e));
-                throw e;
-            }
-        },
-        updateView: async data => {
-            try {
-                return await Api.request({ method: 'post', url: `/creator_views`, data });
-            } catch (e) {
-                dispatch(networkError('views', 'views', e));
-                throw e;
-            }
-        },
-        removeView: id => {
-            try {
-                return Api.request({ method: 'delete', url: `/creator_views/${id}` });
-            } catch (e) {
-                dispatch(networkError('views', 'views', e));
-                throw e;
-            }
-        },
-    };
-}
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(
-    withAsyncProps(
-        async ({ itemId, item: _item }) => {
-            // use the item from the props if it's provided explicitly
-            const item = _item || (itemId && (await loadItemById(itemId)));
-            return { item };
-        },
-        ['itemIdentifier'],
-        {
-            renderError: () => T('visualizationAndMediaData.failedToLoadData'),
-            renderLoading: () => <CircularProgress />,
-        }
-    )(
-        withRemappedProps(({ item }) => ({
-            enabled: ['2dVariant', '2dLayer'].indexOf(get(item, 'visualizationMode.identifier')) !== -1,
-        }))(VisualizationAndMediaData)
-    )
-);