Skip to content

Commit

Permalink
fix: finish missing actions in the revisions list tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrians5j
adrians5j committed May 17, 2020
1 parent f132a84 commit cd2e6b5
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 70 deletions.
86 changes: 38 additions & 48 deletions packages/app-headless-cms/src/admin/plugins/contentDetails/contentRevisions/Revision.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,12 @@ import { ReactComponent as AddIcon } from "@webiny/app-headless-cms/admin/icons/
import { ReactComponent as EditIcon } from "@webiny/app-headless-cms/admin/icons/edit.svg";
import { ReactComponent as PublishIcon } from "@webiny/app-headless-cms/admin/icons/publish.svg";
import { ReactComponent as DeleteIcon } from "@webiny/app-headless-cms/admin/icons/delete.svg";
import { ReactComponent as PreviewIcon } from "@webiny/app-headless-cms/admin/icons/visibility.svg";

import { useRevisionHandlers } from "./useRevisionHandlers";
import useReactRouter from "use-react-router";
import { CmsContentModelModel } from "@webiny/app-headless-cms/types";
import { I18NValue } from "@webiny/app-i18n/components";
import { i18n } from "@webiny/app/i18n";

type RevisionProps = {
content: any;
dataList: any;
contentModel: CmsContentModelModel;
};
const t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");

const primaryColor = css({ color: "var(--mdc-theme-primary)" });

Expand Down Expand Up @@ -61,23 +57,16 @@ const getIcon = (rev: CmsContentModelModel) => {
}
};

const Div = ({ children }) => {
return <div>{children}</div>;
};
const Revision = props => {
const { revision, createContentFrom, deleteContent, publishContent } = props;
const { icon, text: tooltipText } = getIcon(revision);

const Revision = ({ contentModel, content, dataList }: RevisionProps) => {
const { icon, text: tooltipText } = getIcon(content);
return null;
const { deleteContent, createContent, publishRevision, updateContent } = useRevisionHandlers({
content,
contentModel,
dataList
});
const { history } = useReactRouter();

return (
<ConfirmationDialog
title="Confirmation required!"
message={<span>Are you sure you want to delete this revision?</span>}
title={t`Confirmation required!`}
message={<span>{t`Are you sure you want to delete this revision?`}</span>}
>
{({ showConfirmation }) => (
<ListItem>
Expand All @@ -87,66 +76,67 @@ const Revision = ({ contentModel, content, dataList }: RevisionProps) => {
</Tooltip>
</ListItemGraphic>
<ListItemText>
<ListItemTextPrimary>{content.title}</ListItemTextPrimary>
<ListItemTextPrimary>
<I18NValue value={revision.meta.title} default={t`N/A`} />
</ListItemTextPrimary>
<ListItemTextSecondary>
Last modified <TimeAgo datetime={content.savedOn} /> (#
{content.version})
{t`Last modified: {time} (#{version})`({
time: <TimeAgo datetime={revision.savedOn} />,
version: revision.meta.version
})}
</ListItemTextSecondary>
</ListItemText>
<ListItemMeta>
<Menu
handle={<IconButton icon={<MoreVerticalIcon />} />}
className={revisionsMenu}
>
<MenuItem onClick={createContent}>
<MenuItem onClick={() => createContentFrom(revision)}>
<ListItemGraphic>
<Icon icon={<AddIcon />} />
</ListItemGraphic>
New from current
{t`New from current`}
</MenuItem>
{!content.meta.locked && (

{!revision.meta.locked && (
<MenuItem
onClick={() => {
updateContent; // TODO: Fix this
const { id } = revision;
const query = new URLSearchParams(location.search);
query.set("id", id);
history.push({ search: query.toString() });
}}
>
<ListItemGraphic>
<Icon icon={<EditIcon />} />
</ListItemGraphic>
Edit
{t` Edit`}
</MenuItem>
)}

{!content.meta.published && (
<MenuItem onClick={() => publishRevision(content)}>
{!revision.meta.published && (
<MenuItem onClick={() => publishContent(revision)}>
<ListItemGraphic>
<Icon icon={<PublishIcon />} />
</ListItemGraphic>
Publish
{t`Publish`}
</MenuItem>
)}

<MenuItem
onClick={() => {
console.log("Go");
}}
>
<ListItemGraphic>
<Icon icon={<PreviewIcon />} />
</ListItemGraphic>
Preview
</MenuItem>

{!content.locked && content.id !== content.parent && (
<Div>
{!revision.meta.locked && revision.id !== revision.meta.parent && (
<div>
<MenuDivider />
<MenuItem onClick={() => showConfirmation(deleteContent)}>
<MenuItem
onClick={() =>
showConfirmation(() => deleteContent(revision))
}
>
<ListItemGraphic>
<Icon icon={<DeleteIcon />} />
</ListItemGraphic>
Delete
{t` Delete`}
</MenuItem>
</Div>
</div>
)}
</Menu>
</ListItemMeta>
Expand Down
164 changes: 142 additions & 22 deletions ...ages/app-headless-cms/src/admin/plugins/contentDetails/contentRevisions/RevisionsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,160 @@
import React from "react";
import React, { useCallback, useMemo } from "react";
import { css } from "emotion";
import { List } from "@webiny/ui/List";
import { Elevation } from "@webiny/ui/Elevation";
import { CircularProgress } from "@webiny/ui/Progress";
import Revision from "./Revision";
import get from "lodash/get";
import { CircularProgress } from "@webiny/ui/Progress";
import { useMutation } from "@webiny/app-headless-cms/admin/hooks";
import {
createCreateFromMutation,
createDeleteMutation,
createPublishMutation
} from "@webiny/app-headless-cms/admin/components/ContentModelForm/graphql";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import useReactRouter from "use-react-router";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");

const listWrapper = css({
margin: 25,
display: "flex",
flexDirection: "column",
overflow: "scroll",
maxHeight: "calc(100vh - 160px)",
".mdc-list .mdc-list-item": {
borderBottom: "1px solid var(--mdc-theme-on-background)"
},
".mdc-list .mdc-list-item:last-child": {
borderBottom: "none"
}
});
const style = {
list: css({
position: "relative",
margin: 25,
display: "flex",
flexDirection: "column",
overflow: "scroll",
maxHeight: "calc(100vh - 160px)",
".mdc-list .mdc-list-item": {
borderBottom: "1px solid var(--mdc-theme-on-background)"
},
".mdc-list .mdc-list-item:last-child": {
borderBottom: "none"
}
}),
nothingToShow: css({
padding: 20,
margin: 25,
textAlign: "center"
})
};

const RevisionsList = props => {
const { content, loading } = props;
const { showSnackbar } = useSnackbar();
const { content, contentModel, setLoading, dataList } = props;
const { history } = useReactRouter();

const revisions = get(content, "meta.revisions", []);

const { CREATE_CONTENT_FROM, DELETE_CONTENT, PUBLISH_CONTENT } = useMemo(() => {
return {
CREATE_CONTENT_FROM: createCreateFromMutation(contentModel),
DELETE_CONTENT: createDeleteMutation(contentModel),
PUBLISH_CONTENT: createPublishMutation(contentModel)
};
}, [contentModel.modelId]);

const [createFromMutation] = useMutation(CREATE_CONTENT_FROM);
const [deleteMutation] = useMutation(DELETE_CONTENT);
const [publishMutation] = useMutation(PUBLISH_CONTENT);

const createContentFrom = useCallback(async revision => {
setLoading(true);
const response = await createFromMutation({
variables: { revision: revision.id }
});
setLoading(false);

if (response.data.content.error) {
showSnackbar(response.data.content.error.message);
return;
}

showSnackbar(t`New content entry revision created.`);
const { id } = response.data.content.data;
const query = new URLSearchParams(location.search);
query.set("id", id);
history.push({ search: query.toString() });
dataList.refresh();
}, []);

const deleteContent = useCallback(async revision => {
setLoading(true);
const response = await deleteMutation({
variables: { revision: revision.id }
});
setLoading(false);

if (response.data.content.error) {
showSnackbar(response.data.content.error.message);
return;
}

dataList.refresh();

if (revision.id === revision.meta.parent) {
history.push(`/cms/content-models/manage/${contentModel.modelId}`);
showSnackbar(t`Content entry and all of its revisions deleted.`);
} else if (revision.id === content.id) {
let revisionId;
for (let i = 0; i < content.revisions.length; i++) {
const current = content.revisions[i];
if (current.id !== content.id) {
revisionId = current.id;
break;
}
}

if (revisionId) {
const query = new URLSearchParams(location.search);
query.set("id", revisionId);
history.push({ search: query.toString() });
}
}
showSnackbar(t`Content entry revision deleted.`);
}, []);

const publishContent = useCallback(async revision => {
setLoading(true);
const response = await publishMutation({
variables: { revision: revision.id }
});

const content = get(response, "data.content");
setLoading(false);
if (content.error) {
return showSnackbar(content.error.message);
}

dataList.refresh();

showSnackbar(
<span>
{t`Successfully published revision {revision}.`({
revision: <strong>#{revision.meta.version}</strong>
})}
</span>
);
}, []);

return (
<Elevation className={listWrapper} z={2}>
<div style={{ position: "relative" }}>
{loading && <CircularProgress />}
<Elevation className={style.list} z={2}>
{props.getLoading() && <CircularProgress />}
{revisions.length ? (
<List nonInteractive twoLine>
{revisions.map(rev => (
<Revision {...props} key={rev.id} />
{revisions.map(revisions => (
<Revision
{...props}
revision={revisions}
key={revisions.id}
createContentFrom={createContentFrom}
deleteContent={deleteContent}
publishContent={publishContent}
/>
))}
</List>
</div>
) : (
<div className={style.nothingToShow}>{t`No revisions to show.`}</div>
)}
</Elevation>
);
};
Expand Down

0 comments on commit cd2e6b5

Please sign in to comment.