diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/Header.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/Header.js index a08e6da595..a1c0a6e29f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/Header.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/Header.js @@ -148,7 +148,7 @@ const Header = () => { content={{ title: `${pluginId}.popUpWarning.title`, message: `${pluginId}.popUpWarning.warning.unpublish`, - // secondMessage: `${pluginId}.popUpWarning.warning.unpublish-question`, + secondMessage: `${pluginId}.popUpWarning.warning.unpublish-question`, cancel: `${pluginId}.popUpWarning.button.cancel`, confirm: `${pluginId}.popUpWarning.button.confirm`, }} diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/InformationCard.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/InformationCard.js new file mode 100644 index 0000000000..a1296cd409 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/InformationCard.js @@ -0,0 +1,102 @@ +import React, { useMemo } from 'react'; +import { Padded, Text, Flex } from '@buffetjs/core'; +import { get, isEmpty } from 'lodash'; +import moment from 'moment'; +import styled from 'styled-components'; +import { useIntl } from 'react-intl'; + +import { SubWrapper, StatusWrapper } from './components'; +import useDataManager from '../../hooks/useDataManager'; +import { getTrad } from '../../utils'; + +const BaselineAlignment = styled.div` + padding-top: ${({ size }) => size}; +`; + +const InformationCard = () => { + const { initialData, layout } = useDataManager(); + const { formatMessage } = useIntl(); + const hasDraftAndPublish = useMemo( + () => get(layout, ['schema', 'options', 'draftAndPublish'], false), + [layout] + ); + const updatedAtName = useMemo( + () => get(layout, ['schema', 'options', 'timestamps'], ['created_at', 'updated_at'])[1], + [layout] + ); + + const updatedBy = useMemo(() => { + const firstname = get(initialData, ['updated_by', 'firstname'], ''); + const lastname = get(initialData, ['updated_by', 'lastname'], ''); + + return `${firstname} ${lastname}`; + }, [initialData]); + + return ( + <> + + + + + {formatMessage({ + id: getTrad('containers.Edit.information'), + })} + + + + + + {formatMessage({ + id: getTrad('containers.Edit.information.lastUpdate'), + })} + + + {isEmpty(initialData) ? '-' : moment(initialData[updatedAtName]).fromNow()} + + + + + + + + {formatMessage({ + id: getTrad('containers.Edit.information.by'), + })} + + {isEmpty(initialData) ? '-' : updatedBy} + + + + + + {hasDraftAndPublish && ( + + + • + + + + + {formatMessage({ + id: getTrad('containers.Edit.information.editing'), + })} + +   + + {formatMessage({ + id: getTrad( + initialData.published_at + ? 'containers.Edit.information.publishedVersion' + : 'containers.Edit.information.draftVersion' + ), + })} + + + + )} + + + ); +}; + +export default InformationCard; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/components.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/components.js index 76a4f17554..5957f2ba6a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/components.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { Flex } from '@buffetjs/core'; +import { Flex, Text } from '@buffetjs/core'; const SubWrapper = styled.div` background: #ffffff; @@ -46,4 +46,29 @@ const DeleteButton = styled(Flex)` } `; -export { LinkWrapper, MainWrapper, SubWrapper, DeleteButton }; +const StatusWrapper = styled.div` + display: flex; + align-items: center; + border-radius: 2px; + box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey}; + height: 36px; + padding: 0 15px; + ${({ theme, isGreen }) => + isGreen + ? ` + ${Text} { + color: ${theme.main.colors.green}; + } + background-color: #E6F8D4; + border: 1px solid #AAD67C; + ` + : ` + ${Text} { + color: ${theme.main.colors.mediumBlue}; + } + background-color: ${theme.main.colors.lightBlue}; + border: 1px solid #a5d5ff; + `} +`; + +export { LinkWrapper, MainWrapper, SubWrapper, DeleteButton, StatusWrapper }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js index bf942cc9b9..40ecca34c1 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { get } from 'lodash'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import { BackHeader, LiLink, CheckPermissions, useUserPermissions } from 'strapi-helper-plugin'; +import { Padded } from '@buffetjs/core'; import pluginId from '../../pluginId'; import pluginPermissions from '../../permissions'; @@ -22,6 +23,7 @@ import { LinkWrapper, SubWrapper } from './components'; import init from './init'; import reducer, { initialState } from './reducer'; import DeleteLink from './DeleteLink'; +import InformationCard from './InformationCard'; /* eslint-disable react/no-array-index-key */ @@ -200,8 +202,9 @@ const EditView = ({ components, currentEnvironment, deleteLayout, layouts, plugi ); })} -
+ + {currentContentTypeLayoutRelations.length > 0 && (
diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/en.json b/packages/strapi-plugin-content-manager/admin/src/translations/en.json index e9a5697e68..6fa7047d64 100644 --- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json @@ -52,6 +52,12 @@ "containers.Edit.returnList": "Return to list", "containers.Edit.seeDetails": "Details", "containers.Edit.submit": "Save", + "containers.Edit.information": "Information", + "containers.Edit.information.lastUpdate": "Last update", + "containers.Edit.information.by": "By", + "containers.Edit.information.editing": "Editing", + "containers.Edit.information.draftVersion": "draft version", + "containers.Edit.information.publishedVersion": "published version", "containers.EditSettingsView.modal-form.edit-field": "Edit the field", "containers.EditView.add.new": "ADD NEW ENTRY", "containers.EditView.components.missing.plural": "There is {count} missing components",