Information Card

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

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`,
         }}

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 (
+    <>
+      <SubWrapper>
+        <BaselineAlignment size="3px" />
+        <Padded top left right bottom size="smd">
+          <Text fontWeight="bold">
+            {formatMessage({
+              id: getTrad('containers.Edit.information'),
+            })}
+          </Text>
+          <Padded top size="smd">
+            <BaselineAlignment size="2px" />
+            <Flex justifyContent="space-between">
+              <Text fontSize="xs" color="grey" textTransform="uppercase">
+                {formatMessage({
+                  id: getTrad('containers.Edit.information.lastUpdate'),
+                })}
+              </Text>
+              <Text lineHeight="12px">
+                {isEmpty(initialData) ? '-' : moment(initialData[updatedAtName]).fromNow()}
+              </Text>
+            </Flex>
+          </Padded>
+          <Padded top size="smd">
+            <BaselineAlignment size="3px" />
+            <Flex justifyContent="space-between">
+              <Text fontSize="xs" color="grey" textTransform="uppercase">
+                {formatMessage({
+                  id: getTrad('containers.Edit.information.by'),
+                })}
+              </Text>
+              <Text lineHeight="12px">{isEmpty(initialData) ? '-' : updatedBy}</Text>
+            </Flex>
+          </Padded>
+        </Padded>
+      </SubWrapper>
+      <Padded top size="sm" />
+      {hasDraftAndPublish && (
+        <StatusWrapper isGreen={initialData.published_at}>
+          <Text fontSize="sm" lineHeight="18px">
+            •
+          </Text>
+          <Padded left size="xs" />
+          <Flex>
+            <Text lineHeight="18px">
+              {formatMessage({
+                id: getTrad('containers.Edit.information.editing'),
+              })}
+            </Text>
+            &nbsp;
+            <Text lineHeight="18px" fontWeight="bold">
+              {formatMessage({
+                id: getTrad(
+                  initialData.published_at
+                    ? 'containers.Edit.information.publishedVersion'
+                    : 'containers.Edit.information.draftVersion'
+                ),
+              })}
+            </Text>
+          </Flex>
+        </StatusWrapper>
+      )}
+      <BaselineAlignment size="2px" />
+    </>
+  );
+};
+
+export default InformationCard;

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 };

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
                 );
               })}
             </div>
-
             <div className="col-md-12 col-lg-3">
+              <InformationCard />
+              <Padded size="smd" top />
               {currentContentTypeLayoutRelations.length > 0 && (
                 <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
                   <div style={{ paddingTop: '22px' }}>

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",