@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
280 lines (271 loc) • 9.21 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// Next UI code disabled temporarily
import { makeStyles } from 'tss-react/mui';
import React from 'react';
import { useSelection } from '../../hooks/useSelection';
const getLegacyDialogStyles = makeStyles()(() => ({
iframe: {
border: 'none',
height: '80vh'
}
}));
export function CompareVersions(props) {
const { a, b } = props.resource.read();
const { classes } = getLegacyDialogStyles();
const authoringUrl = useSelection((state) => state.env.authoringBase);
return React.createElement('iframe', {
title: 'Comparing versions',
className: classes.iframe,
src: `${authoringUrl}/diff?site=${a.site}&path=${a.path}&oldPath=${b.path}&version=${a.versionNumber}&versionTO=${b.versionNumber}&mode=iframe&ui=next`
});
}
/*export function CompareVersions(props: CompareVersionsProps) {
const classes = CompareVersionsStyles({});
const { a, b, contentTypes } = props.resource.read();
const values = Object.values(contentTypes[a.craftercms.contentTypeId].fields) as ContentTypeField[];
return (
<>
<section className={classes.compareBoxHeader}>
<div className={classes.compareBoxHeaderItem}>
<ListItemText
primary={<AsDayMonthDateTime date={a.craftercms.dateModified} />}
secondary={
<FormattedMessage
id="historyDialog.versionNumber"
defaultMessage="Version: <span>{versionNumber}</span>"
values={{
versionNumber: a.craftercms.versionNumber,
span: (msg) => <span className="blackText">{msg}</span>
}}
/>
}
/>
</div>
<div className={classes.compareBoxHeaderItem}>
<ListItemText
primary={<AsDayMonthDateTime date={b.craftercms.dateModified} />}
secondary={
<FormattedMessage
id="historyDialog.versionNumber"
defaultMessage="Version: <span>{versionNumber}</span>"
values={{
versionNumber: b.craftercms.versionNumber,
span: (msg) => <span className="blackText">{msg}</span>
}}
/>
}
/>
</div>
</section>
<section className={classes.compareVersionsContent}>
<Paper>
{
contentTypes &&
values.filter(value => !systemProps.includes(value.id)).map((field) => (
<CompareFieldPanel a={a} b={b} field={field} key={field.id} />
))
}
</Paper>
</section>
</>
);
} */
/*interface CompareFieldPanelProps {
a: ContentInstance;
b: ContentInstance;
field: ContentTypeField;
} */
/*function CompareFieldPanel(props: CompareFieldPanelProps) {
const classes = CompareVersionsStyles({});
const { a, b, field } = props;
const [unChanged, setUnChanged] = useState(false);
const { formatMessage } = useIntl();
let contentA = a[field.id];
let contentB = b[field.id];
useMount(() => {
switch (field.type) {
case 'text':
case 'html':
case 'image':
if (contentA === contentB) {
setUnChanged(true);
}
break;
case 'node-selector': {
setUnChanged(false);
break;
}
default:
if (contentA === contentB) {
setUnChanged(true);
}
break;
}
});
return (
<Accordion
key={field.id}
classes={{ root: classes.root }}
TransitionProps={{ mountOnEnter: true }}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>
<span className={classes.bold}>{field.name} </span>({field.id})
</Typography>
{
unChanged &&
<Chip label={formatMessage(translations.unchanged)} className={classes.unchangedChip} />
}
{
field.type === 'node-selector' && !contentA.length && !contentB.length &&
<Chip label={formatMessage(translations.empty)} className={classes.unchangedChip} />
}
</AccordionSummary>
<AccordionDetails>
{
(field.type === 'text' || field.type === 'html') && (!unChanged ? (
<MonacoWrapper
contentA={contentA}
contentB={contentB}
/>
) : (
<Typography>
{contentA}
</Typography>
)
)
}
{
(field.type === 'image') && (!unChanged ? (
<div className={classes.imagesCompare}>
<img src={contentA} alt="" />
<img src={contentB} alt="" />
</div>
) : (
<div className={classes.singleImage}>
<img src={contentA} alt="" />
</div>
)
)
}
{
(field.type === 'node-selector') &&
<ContentInstanceComponents contentA={contentA} contentB={contentB} />
}
</AccordionDetails>
</Accordion>
);
} */
/*interface ContentInstanceComponentsProps {
contentA: ContentInstance[];
contentB: ContentInstance[];
} */
/*function ContentInstanceComponents(props: ContentInstanceComponentsProps) {
const { contentA, contentB } = props;
const classes = ContentInstanceComponentsStyles({});
const [mergeContent, setMergeContent] = useState([]);
const [status, setStatus] = useState<any>({});
const { formatMessage } = useIntl();
useEffect(() => {
let itemStatus = {};
let merged = {};
contentA.forEach((itemA, index: number) => {
const itemB = contentB[index];
if (!itemB || itemA.craftercms.id !== itemB.craftercms.id) {
itemStatus[index] = 'deleted';
} else {
itemStatus[index] = itemA.craftercms.dateModified !== itemB.craftercms.dateModified ? 'changed' : 'unchanged';
}
merged[index] = itemA;
});
contentB.forEach((itemB, index: number) => {
const itemA = contentA[index];
if (!itemA || (itemB.craftercms.id !== itemA.craftercms.id)) {
itemStatus[index] = 'new';
}
merged[index] = itemB;
});
setMergeContent(Object.values(merged));
setStatus(itemStatus);
}, [contentA, contentB]);
return (
<section className={classes.componentsWrapper}>
{
mergeContent.length ? (
mergeContent.map((item, index) =>
<div
className={clsx(classes.component, status[index] ?? '')}
key={item.craftercms.id}
>
<Typography> {item.craftercms.label ?? item.craftercms.id}</Typography>
{
status[index] && status[index] !== 'new' &&
<Typography className={classes.status}>
{formatMessage(translations[status[index]])}
</Typography>
}
</div>
)
) : (
<EmptyState title={formatMessage(translations.noItemsStatus)} />
)
}
</section>
);
} */
/*interface MonacoWrapperProps {
contentA: string;
contentB: string;
} */
/*function MonacoWrapper(props: MonacoWrapperProps) {
const classes = CompareVersionsStyles({});
const { contentA, contentB } = props;
const ref = useRef();
useEffect(() => {
if (ref.current) {
const originalModel = monaco.editor.createModel(contentA, 'text/plain');
const modifiedModel = monaco.editor.createModel(contentB, 'text/plain');
const diffEditor = monaco.editor.createDiffEditor(ref.current, {
scrollbar: {
alwaysConsumeMouseWheel: false
}
});
diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
}
}, [contentA, contentB]);
return (
<div ref={ref} className={classes.monacoWrapper} />
);
} */