@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/containers/EditView/InformationCard.js

@@ -0,0 +1,100 @@
+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 { InjectionZone, useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+import { SubWrapper, StatusWrapper } from './components';
+import pluginId from '../../pluginId';
+import { getTrad } from '../../utils';
+
+const BaselineAlignment = styled.div`
+  padding-top: ${({ size }) => size};
+`;
+
+const InformationCard = () => {
+  const { initialData, hasDraftAndPublish, layout } = useContentManagerEditViewDataManager();
+  const { formatMessage } = useIntl();
+
+  const updatedAtName = useMemo(
+    () => get(layout, ['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" fontWeight="semiBold">
+                {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" fontWeight="semiBold">
+                {formatMessage({
+                  id: getTrad('containers.Edit.information.by'),
+                })}
+              </Text>
+              <Text lineHeight="12px">{isEmpty(initialData) ? '-' : updatedBy}</Text>
+            </Flex>
+          </Padded>
+        </Padded>
+        <InjectionZone area={`${pluginId}.editView.informations`} />
+      </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;

package/admin/src/containers/EditView/components.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { Flex, Text } from '@buffetjs/core';
+
+const SubWrapper = styled.div`
+  background: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+`;
+
+const MainWrapper = styled(SubWrapper)`
+  > div {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  padding: 22px 10px;
+`;
+
+const LinkWrapper = styled(SubWrapper)`
+  background: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #e3e9f3;
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+  li {
+    padding: 7px 20px;
+    border-top: 1px solid #f6f6f6;
+    &:first-of-type {
+      border-color: transparent;
+    }
+    &:not(:first-of-type) {
+      margin-top: 0;
+    }
+  }
+`;
+
+const DeleteButton = styled(Flex)`
+  color: ${({ theme }) => theme.main.colors.lightOrange};
+  align-items: center;
+  cursor: pointer;
+  margin-left: 0.2rem;
+  svg {
+    width: 1.1rem !important;
+    margin-right: 1rem;
+  }
+`;
+
+const StatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+
+  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 };

package/admin/src/containers/EditView/index.js

@@ -0,0 +1,297 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import {
+  BackHeader,
+  BaselineAlignment,
+  LiLink,
+  CheckPermissions,
+  useGlobalContext,
+} from 'strapi-helper-plugin';
+import { Padded } from '@buffetjs/core';
+import pluginId from '../../pluginId';
+import pluginPermissions from '../../permissions';
+import Container from '../../components/Container';
+import DynamicZone from '../../components/DynamicZone';
+import FormWrapper from '../../components/FormWrapper';
+import FieldComponent from '../../components/FieldComponent';
+import Inputs from '../../components/Inputs';
+import SelectWrapper from '../../components/SelectWrapper';
+import { getInjectedComponents } from '../../utils';
+import CollectionTypeFormWrapper from '../CollectionTypeFormWrapper';
+import EditViewDataManagerProvider from '../EditViewDataManagerProvider';
+import SingleTypeFormWrapper from '../SingleTypeFormWrapper';
+import Header from './Header';
+import { createAttributesLayout, getFieldsActionMatchingPermissions } from './utils';
+import { LinkWrapper, SubWrapper } from './components';
+import DeleteLink from './DeleteLink';
+import InformationCard from './InformationCard';
+
+/* eslint-disable  react/no-array-index-key */
+const EditView = ({
+  allowedActions,
+  isSingleType,
+  goBack,
+  layout,
+  slug,
+  id,
+  origin,
+  userPermissions,
+}) => {
+  const { currentEnvironment, plugins } = useGlobalContext();
+
+  const {
+    createActionAllowedFields,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useMemo(() => {
+    return getFieldsActionMatchingPermissions(userPermissions, slug);
+  }, [userPermissions, slug]);
+  const configurationPermissions = useMemo(() => {
+    return isSingleType
+      ? pluginPermissions.singleTypesConfigurations
+      : pluginPermissions.collectionTypesConfigurations;
+  }, [isSingleType]);
+
+  const configurationsURL = `/plugins/${pluginId}/${
+    isSingleType ? 'singleType' : 'collectionType'
+  }/${slug}/configurations/edit`;
+  const currentContentTypeLayoutData = useMemo(() => get(layout, ['contentType'], {}), [layout]);
+
+  const DataManagementWrapper = useMemo(
+    () => (isSingleType ? SingleTypeFormWrapper : CollectionTypeFormWrapper),
+    [isSingleType]
+  );
+
+  // Check if a block is a dynamic zone
+  const isDynamicZone = useCallback(block => {
+    return block.every(subBlock => {
+      return subBlock.every(obj => obj.fieldSchema.type === 'dynamiczone');
+    });
+  }, []);
+
+  const formattedContentTypeLayout = useMemo(() => {
+    if (!currentContentTypeLayoutData.layouts) {
+      return [];
+    }
+
+    return createAttributesLayout(
+      currentContentTypeLayoutData.layouts.edit,
+      currentContentTypeLayoutData.attributes
+    );
+  }, [currentContentTypeLayoutData]);
+
+  return (
+    <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
+      {({
+        componentsDataStructure,
+        contentTypeDataStructure,
+        data,
+        isCreatingEntry,
+        isLoadingForData,
+        onDelete,
+        onDeleteSucceeded,
+        onPost,
+        onPublish,
+        onPut,
+        onUnpublish,
+        redirectionLink,
+        status,
+      }) => {
+        return (
+          <EditViewDataManagerProvider
+            allowedActions={allowedActions}
+            allLayoutData={layout}
+            createActionAllowedFields={createActionAllowedFields}
+            componentsDataStructure={componentsDataStructure}
+            contentTypeDataStructure={contentTypeDataStructure}
+            from={redirectionLink}
+            initialValues={data}
+            isCreatingEntry={isCreatingEntry}
+            isLoadingForData={isLoadingForData}
+            isSingleType={isSingleType}
+            onPost={onPost}
+            onPublish={onPublish}
+            onPut={onPut}
+            onUnpublish={onUnpublish}
+            readActionAllowedFields={readActionAllowedFields}
+            redirectToPreviousPage={goBack}
+            slug={slug}
+            status={status}
+            updateActionAllowedFields={updateActionAllowedFields}
+          >
+            <BackHeader onClick={goBack} />
+            <Container className="container-fluid">
+              <Header allowedActions={allowedActions} />
+              <div className="row" style={{ paddingTop: 3 }}>
+                <div className="col-md-12 col-lg-9" style={{ marginBottom: 13 }}>
+                  {formattedContentTypeLayout.map((block, blockIndex) => {
+                    if (isDynamicZone(block)) {
+                      const {
+                        0: {
+                          0: { name, fieldSchema, metadatas, labelIcon },
+                        },
+                      } = block;
+                      const baselineAlignementSize = blockIndex === 0 ? '3px' : '0';
+
+                      return (
+                        <BaselineAlignment key={blockIndex} top size={baselineAlignementSize}>
+                          <DynamicZone
+                            name={name}
+                            fieldSchema={fieldSchema}
+                            labelIcon={labelIcon}
+                            metadatas={metadatas}
+                          />
+                        </BaselineAlignment>
+                      );
+                    }
+
+                    return (
+                      <FormWrapper key={blockIndex}>
+                        {block.map((fieldsBlock, fieldsBlockIndex) => {
+                          return (
+                            <div className="row" key={fieldsBlockIndex}>
+                              {fieldsBlock.map(
+                                ({ name, size, fieldSchema, labelIcon, metadatas }, fieldIndex) => {
+                                  const isComponent = fieldSchema.type === 'component';
+
+                                  if (isComponent) {
+                                    const { component, max, min, repeatable = false } = fieldSchema;
+                                    const componentUid = fieldSchema.component;
+
+                                    return (
+                                      <FieldComponent
+                                        key={componentUid}
+                                        componentUid={component}
+                                        labelIcon={labelIcon}
+                                        isRepeatable={repeatable}
+                                        label={metadatas.label}
+                                        max={max}
+                                        min={min}
+                                        name={name}
+                                      />
+                                    );
+                                  }
+
+                                  return (
+                                    <div className={`col-${size}`} key={name}>
+                                      <Inputs
+                                        autoFocus={
+                                          blockIndex === 0 &&
+                                          fieldsBlockIndex === 0 &&
+                                          fieldIndex === 0
+                                        }
+                                        fieldSchema={fieldSchema}
+                                        keys={name}
+                                        labelIcon={labelIcon}
+                                        metadatas={metadatas}
+                                      />
+                                    </div>
+                                  );
+                                }
+                              )}
+                            </div>
+                          );
+                        })}
+                      </FormWrapper>
+                    );
+                  })}
+                </div>
+                <div className="col-md-12 col-lg-3">
+                  <InformationCard />
+                  <Padded size="smd" top />
+                  {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
+                    <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
+                      <div style={{ paddingTop: '22px' }}>
+                        {currentContentTypeLayoutData.layouts.editRelations.map(
+                          ({ name, fieldSchema, labelIcon, metadatas, queryInfos }) => {
+                            return (
+                              <SelectWrapper
+                                {...fieldSchema}
+                                {...metadatas}
+                                key={name}
+                                labelIcon={labelIcon}
+                                name={name}
+                                relationsType={fieldSchema.relationType}
+                                queryInfos={queryInfos}
+                              />
+                            );
+                          }
+                        )}
+                      </div>
+                    </SubWrapper>
+                  )}
+                  <LinkWrapper>
+                    <ul>
+                      <CheckPermissions permissions={configurationPermissions}>
+                        <LiLink
+                          message={{
+                            id: 'app.links.configure-view',
+                          }}
+                          icon="layout"
+                          url={configurationsURL}
+                          onClick={() => {
+                            // emitEvent('willEditContentTypeLayoutFromEditView');
+                          }}
+                        />
+                      </CheckPermissions>
+                      {getInjectedComponents(
+                        'editView',
+                        'right.links',
+                        plugins,
+                        currentEnvironment,
+                        slug
+                      )}
+                      {allowedActions.canDelete && (
+                        <DeleteLink
+                          isCreatingEntry={isCreatingEntry}
+                          onDelete={onDelete}
+                          onDeleteSucceeded={onDeleteSucceeded}
+                        />
+                      )}
+                    </ul>
+                  </LinkWrapper>
+                </div>
+              </div>
+            </Container>
+          </EditViewDataManagerProvider>
+        );
+      }}
+    </DataManagementWrapper>
+  );
+};
+
+EditView.defaultProps = {
+  id: null,
+  isSingleType: false,
+  origin: null,
+  userPermissions: [],
+};
+
+EditView.propTypes = {
+  allowedActions: PropTypes.shape({
+    canRead: PropTypes.bool.isRequired,
+    canUpdate: PropTypes.bool.isRequired,
+    canCreate: PropTypes.bool.isRequired,
+    canDelete: PropTypes.bool.isRequired,
+  }).isRequired,
+  layout: PropTypes.shape({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      settings: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      options: PropTypes.object.isRequired,
+      attributes: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+  id: PropTypes.string,
+  isSingleType: PropTypes.bool,
+  goBack: PropTypes.func.isRequired,
+  origin: PropTypes.string,
+  slug: PropTypes.string.isRequired,
+  userPermissions: PropTypes.array,
+};
+
+export { EditView };
+export default memo(EditView);

package/admin/src/containers/EditView/utils/createAttributesLayout.js

@@ -0,0 +1,39 @@
+import { get, isEmpty } from 'lodash';
+
+/* eslint-disable no-restricted-syntax */
+
+const createAttributesLayout = (currentLayout, attributes) => {
+  const getType = name => get(attributes, [name, 'type'], '');
+  let currentRowIndex = 0;
+  const newLayout = [];
+
+  for (let row of currentLayout) {
+    const hasDynamicZone = row.some(
+      ({ name }) => getType(name) === 'dynamiczone'
+    );
+
+    if (!newLayout[currentRowIndex]) {
+      newLayout[currentRowIndex] = [];
+    }
+
+    if (hasDynamicZone) {
+      currentRowIndex =
+        currentRowIndex === 0 && isEmpty(newLayout[0])
+          ? 0
+          : currentRowIndex + 1;
+
+      if (!newLayout[currentRowIndex]) {
+        newLayout[currentRowIndex] = [];
+      }
+      newLayout[currentRowIndex].push(row);
+
+      currentRowIndex += 1;
+    } else {
+      newLayout[currentRowIndex].push(row);
+    }
+  }
+
+  return newLayout.filter(arr => arr.length > 0);
+};
+
+export default createAttributesLayout;

package/admin/src/containers/EditView/utils/getFieldsActionMatchingPermissions.js

@@ -0,0 +1,23 @@
+import { uniq, flatMap } from 'lodash';
+import { findMatchingPermissions } from 'strapi-helper-plugin';
+
+const getFieldsActionMatchingPermissions = (userPermissions, slug) => {
+  const getMatchingPermissions = action => {
+    const matched = findMatchingPermissions(userPermissions, [
+      {
+        action: `plugins::content-manager.explorer.${action}`,
+        subject: slug,
+      },
+    ]);
+
+    return uniq(flatMap(matched, 'properties.fields'));
+  };
+
+  return {
+    createActionAllowedFields: getMatchingPermissions('create'),
+    readActionAllowedFields: getMatchingPermissions('read'),
+    updateActionAllowedFields: getMatchingPermissions('update'),
+  };
+};
+
+export default getFieldsActionMatchingPermissions;

package/admin/src/containers/EditView/utils/index.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as createAttributesLayout } from './createAttributesLayout';
+export { default as getFieldsActionMatchingPermissions } from './getFieldsActionMatchingPermissions';