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

package/admin/src/containers/EditSettingsView/utils/layout.js

@@ -0,0 +1,98 @@
+/* eslint-disable indent */
+const getRowSize = arr => arr.reduce((sum, value) => sum + value.size, 0);
+
+const createLayout = arr => {
+  return arr.reduce((acc, current, index) => {
+    const row = { rowId: index, rowContent: current };
+
+    return acc.concat(row);
+  }, []);
+};
+
+const formatLayout = arr => {
+  return arr
+    .reduce((acc, current) => {
+      let toPush = [];
+      const currentRow = current.rowContent.reduce((acc2, curr) => {
+        const acc2Size = getRowSize(acc2);
+
+        if (curr.name === '_TEMP_') {
+          return acc2;
+        }
+
+        if (acc2Size + curr.size <= 12) {
+          acc2.push(curr);
+        } else {
+          toPush.push(curr);
+        }
+
+        return acc2;
+      }, []);
+      const rowId =
+        acc.length === 0
+          ? 0
+          : Math.max.apply(
+              Math,
+              acc.map(o => o.rowId)
+            ) + 1;
+
+      const currentRowSize = getRowSize(currentRow);
+
+      if (currentRowSize < 12) {
+        currentRow.push({ name: '_TEMP_', size: 12 - currentRowSize });
+      }
+
+      acc.push({ rowId, rowContent: currentRow });
+
+      if (toPush.length > 0) {
+        const toPushSize = getRowSize(toPush);
+
+        if (toPushSize < 12) {
+          toPush.push({ name: '_TEMP_', size: 12 - toPushSize });
+        }
+
+        acc.push({ rowId: rowId + 1, rowContent: toPush });
+        toPush = [];
+      }
+
+      return acc;
+    }, [])
+    .filter(row => row.rowContent.length > 0)
+    .filter(row => {
+      if (row.rowContent.length === 1) {
+        return row.rowContent[0].name !== '_TEMP_';
+      }
+
+      return true;
+    });
+};
+
+const unformatLayout = arr => {
+  return arr.reduce((acc, current) => {
+    const currentRow = current.rowContent.filter(content => content.name !== '_TEMP_');
+
+    return acc.concat([currentRow]);
+  }, []);
+};
+
+const getInputSize = type => {
+  switch (type) {
+    case 'boolean':
+    case 'date':
+    case 'integer':
+    case 'float':
+    case 'biginteger':
+    case 'decimal':
+    case 'time':
+      return 4;
+    case 'json':
+    case 'component':
+    case 'richtext':
+    case 'dynamiczone':
+      return 12;
+    default:
+      return 6;
+  }
+};
+
+export { createLayout, formatLayout, getInputSize, getRowSize, unformatLayout };

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

@@ -0,0 +1,94 @@
+import React, { memo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { get } from 'lodash';
+import isEqual from 'react-fast-compare';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Text } from '@buffetjs/core';
+import { PopUpWarning } from 'strapi-helper-plugin';
+import PropTypes from 'prop-types';
+import pluginId from '../../../pluginId';
+import { getTrad } from '../../../utils';
+import { DeleteButton } from '../components';
+import { connect, select } from './utils';
+
+const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerProperty }) => {
+  const [showWarningDelete, setWarningDelete] = useState(false);
+  const [didDeleteEntry, setDidDeleteEntry] = useState(false);
+  const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
+  const { formatMessage } = useIntl();
+
+  const toggleWarningDelete = () => setWarningDelete(prevState => !prevState);
+
+  const handleConfirmDelete = async () => {
+    try {
+      // Show the loading state
+      setIsModalConfirmButtonLoading(true);
+
+      await onDelete(trackerProperty);
+
+      // This is used to perform action after the modal is closed
+      // so the transitions are smoother
+      // Actions will be performed in the handleClosed function
+      setDidDeleteEntry(true);
+    } catch (err) {
+      const errorMessage = get(
+        err,
+        'response.payload.message',
+        formatMessage({ id: `${pluginId}.error.record.delete` })
+      );
+      strapi.notification.error(errorMessage);
+    } finally {
+      setIsModalConfirmButtonLoading(false);
+      toggleWarningDelete();
+    }
+  };
+
+  const handleClosed = () => {
+    setDidDeleteEntry(false);
+
+    if (didDeleteEntry) {
+      onDeleteSucceeded();
+    }
+  };
+
+  if (isCreatingEntry) {
+    return null;
+  }
+
+  return (
+    <>
+      <li>
+        <DeleteButton onClick={toggleWarningDelete}>
+          <FontAwesomeIcon icon="trash-alt" />
+          <Text lineHeight="22px" color="lightOrange">
+            {formatMessage({
+              id: getTrad('containers.Edit.delete-entry'),
+            })}
+          </Text>
+        </DeleteButton>
+      </li>
+      <PopUpWarning
+        isOpen={showWarningDelete}
+        toggleModal={toggleWarningDelete}
+        content={{
+          message: getTrad('popUpWarning.bodyMessage.contentType.delete'),
+        }}
+        popUpWarningType="danger"
+        onConfirm={handleConfirmDelete}
+        onClosed={handleClosed}
+        isConfirmButtonLoading={isModalConfirmButtonLoading}
+      />
+    </>
+  );
+};
+
+DeleteLink.propTypes = {
+  isCreatingEntry: PropTypes.bool.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onDeleteSucceeded: PropTypes.func.isRequired,
+  trackerProperty: PropTypes.object.isRequired,
+};
+
+const Memoized = memo(DeleteLink, isEqual);
+
+export default connect(Memoized, select);

package/admin/src/containers/EditView/DeleteLink/utils/connect.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    // eslint-disable-next-line react/prop-types
+    const selectors = select();
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

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

@@ -0,0 +1,2 @@
+export { default as connect } from './connect';
+export { default as select } from './select';

package/admin/src/containers/EditView/DeleteLink/utils/select.js

@@ -0,0 +1,21 @@
+import { isEmpty } from 'lodash';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect() {
+  const { hasDraftAndPublish, modifiedData } = useContentManagerEditViewDataManager();
+
+  let trackerProperty = {};
+
+  if (hasDraftAndPublish) {
+    const isDraft = isEmpty(modifiedData.published_at);
+
+    trackerProperty = isDraft ? { status: 'draft' } : { status: 'published' };
+  }
+
+  return {
+    hasDraftAndPublish,
+    trackerProperty,
+  };
+}
+
+export default useSelect;

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

@@ -0,0 +1,258 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Header as PluginHeader } from '@buffetjs/custom';
+import { get, isEqual, isEmpty, toString } from 'lodash';
+import PropTypes from 'prop-types';
+import isEqualFastCompare from 'react-fast-compare';
+import { Text } from '@buffetjs/core';
+import { templateObject, ModalConfirm } from 'strapi-helper-plugin';
+import { getTrad } from '../../../utils';
+import { connect, getDraftRelations, select } from './utils';
+
+const primaryButtonObject = {
+  color: 'primary',
+  type: 'button',
+  style: {
+    minWidth: 150,
+    fontWeight: 600,
+  },
+};
+
+const Header = ({
+  allowedActions: { canUpdate, canCreate, canPublish },
+  componentLayouts,
+  initialData,
+  isCreatingEntry,
+  isSingleType,
+  hasDraftAndPublish,
+  layout,
+  modifiedData,
+  onPublish,
+  onUnpublish,
+  status,
+}) => {
+  const [showWarningUnpublish, setWarningUnpublish] = useState(false);
+  const { formatMessage } = useIntl();
+  const formatMessageRef = useRef(formatMessage);
+  const [draftRelationsCount, setDraftRelationsCount] = useState(0);
+  const [showWarningDraftRelation, setShowWarningDraftRelation] = useState(false);
+  const [shouldUnpublish, setShouldUnpublish] = useState(false);
+  const [shouldPublish, setShouldPublish] = useState(false);
+
+  const currentContentTypeMainField = useMemo(() => get(layout, ['settings', 'mainField'], 'id'), [
+    layout,
+  ]);
+
+  const currentContentTypeName = useMemo(() => get(layout, ['info', 'name']), [layout]);
+
+  const didChangeData = useMemo(() => {
+    return !isEqual(initialData, modifiedData) || (isCreatingEntry && !isEmpty(modifiedData));
+  }, [initialData, isCreatingEntry, modifiedData]);
+  const apiID = useMemo(() => layout.apiID, [layout.apiID]);
+
+  /* eslint-disable indent */
+  const entryHeaderTitle = isCreatingEntry
+    ? formatMessage({
+        id: getTrad('containers.Edit.pluginHeader.title.new'),
+      })
+    : templateObject({ mainField: currentContentTypeMainField }, initialData).mainField;
+  /* eslint-enable indent */
+
+  const headerTitle = useMemo(() => {
+    const title = isSingleType ? currentContentTypeName : entryHeaderTitle;
+
+    return title || currentContentTypeName;
+  }, [currentContentTypeName, entryHeaderTitle, isSingleType]);
+
+  const checkIfHasDraftRelations = useCallback(() => {
+    const count = getDraftRelations(modifiedData, layout, componentLayouts);
+
+    setDraftRelationsCount(count);
+
+    return count > 0;
+  }, [modifiedData, layout, componentLayouts]);
+
+  const headerActions = useMemo(() => {
+    let headerActions = [];
+
+    if ((isCreatingEntry && canCreate) || (!isCreatingEntry && canUpdate)) {
+      headerActions = [
+        {
+          disabled: !didChangeData,
+          color: 'success',
+          label: formatMessage({
+            id: getTrad('containers.Edit.submit'),
+          }),
+          isLoading: status === 'submit-pending',
+          type: 'submit',
+          style: {
+            minWidth: 150,
+            fontWeight: 600,
+          },
+        },
+      ];
+    }
+
+    if (hasDraftAndPublish && canPublish) {
+      const isPublished = !isEmpty(initialData.published_at);
+      const isLoading = isPublished ? status === 'unpublish-pending' : status === 'publish-pending';
+      const labelID = isPublished ? 'app.utils.unpublish' : 'app.utils.publish';
+      /* eslint-disable indent */
+      const onClick = isPublished
+        ? () => setWarningUnpublish(true)
+        : e => {
+            if (!checkIfHasDraftRelations()) {
+              onPublish(e);
+            } else {
+              setShowWarningDraftRelation(true);
+            }
+          };
+      /* eslint-enable indent */
+
+      const action = {
+        ...primaryButtonObject,
+        disabled: isCreatingEntry || didChangeData,
+        isLoading,
+        label: formatMessage({ id: labelID }),
+        onClick,
+      };
+
+      headerActions.unshift(action);
+    }
+
+    return headerActions;
+  }, [
+    isCreatingEntry,
+    canCreate,
+    canUpdate,
+    hasDraftAndPublish,
+    canPublish,
+    didChangeData,
+    formatMessage,
+    status,
+    initialData,
+    onPublish,
+    checkIfHasDraftRelations,
+  ]);
+
+  const headerProps = useMemo(() => {
+    return {
+      title: {
+        label: toString(headerTitle),
+      },
+      content: `${formatMessageRef.current({ id: getTrad('api.id') })} : ${apiID}`,
+      actions: headerActions,
+    };
+  }, [headerActions, headerTitle, apiID]);
+
+  const toggleWarningPublish = () => setWarningUnpublish(prevState => !prevState);
+
+  const toggleWarningDraftRelation = useCallback(() => {
+    setShowWarningDraftRelation(prev => !prev);
+  }, []);
+
+  const handleConfirmPublish = useCallback(() => {
+    setShouldPublish(true);
+    setShowWarningDraftRelation(false);
+  }, []);
+
+  const handleConfirmUnpublish = useCallback(() => {
+    setShouldUnpublish(true);
+    setWarningUnpublish(false);
+  }, []);
+
+  const handleCloseModalPublish = useCallback(
+    e => {
+      if (shouldPublish) {
+        onPublish(e);
+      }
+
+      setShouldUnpublish(false);
+    },
+    [onPublish, shouldPublish]
+  );
+
+  const handleCloseModalUnpublish = useCallback(
+    e => {
+      if (shouldUnpublish) {
+        onUnpublish(e);
+      }
+
+      setShouldUnpublish(false);
+    },
+    [onUnpublish, shouldUnpublish]
+  );
+
+  const contentIdSuffix = draftRelationsCount > 1 ? 'plural' : 'singular';
+
+  return (
+    <>
+      <PluginHeader {...headerProps} />
+      {hasDraftAndPublish && (
+        <>
+          <ModalConfirm
+            isOpen={showWarningUnpublish}
+            toggle={toggleWarningPublish}
+            content={{
+              id: getTrad('popUpWarning.warning.unpublish'),
+              values: {
+                br: () => <br />,
+              },
+            }}
+            type="xwarning"
+            onConfirm={handleConfirmUnpublish}
+            onClosed={handleCloseModalUnpublish}
+          >
+            <Text>{formatMessage({ id: getTrad('popUpWarning.warning.unpublish-question') })}</Text>
+          </ModalConfirm>
+          <ModalConfirm
+            confirmButtonLabel={{
+              id: getTrad('popUpwarning.warning.has-draft-relations.button-confirm'),
+            }}
+            isOpen={showWarningDraftRelation}
+            toggle={toggleWarningDraftRelation}
+            onClosed={handleCloseModalPublish}
+            onConfirm={handleConfirmPublish}
+            type="success"
+            content={{
+              id: getTrad(`popUpwarning.warning.has-draft-relations.message.${contentIdSuffix}`),
+              values: {
+                count: draftRelationsCount,
+                b: chunks => (
+                  <Text as="span" fontWeight="bold">
+                    {chunks}
+                  </Text>
+                ),
+                br: () => <br />,
+              },
+            }}
+          >
+            <Text>{formatMessage({ id: getTrad('popUpWarning.warning.publish-question') })}</Text>
+          </ModalConfirm>
+        </>
+      )}
+    </>
+  );
+};
+
+Header.propTypes = {
+  allowedActions: PropTypes.shape({
+    canUpdate: PropTypes.bool.isRequired,
+    canCreate: PropTypes.bool.isRequired,
+    canPublish: PropTypes.bool.isRequired,
+  }).isRequired,
+  componentLayouts: PropTypes.object.isRequired,
+  initialData: PropTypes.object.isRequired,
+  isCreatingEntry: PropTypes.bool.isRequired,
+  isSingleType: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  layout: PropTypes.object.isRequired,
+  hasDraftAndPublish: PropTypes.bool.isRequired,
+  modifiedData: PropTypes.object.isRequired,
+  onPublish: PropTypes.func.isRequired,
+  onUnpublish: PropTypes.func.isRequired,
+};
+
+const Memoized = memo(Header, isEqualFastCompare);
+
+export default connect(Memoized, select);

package/admin/src/containers/EditView/Header/utils/connect.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    // eslint-disable-next-line react/prop-types
+    const selectors = select();
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

package/admin/src/containers/EditView/Header/utils/getDraftRelations.js

@@ -0,0 +1,62 @@
+import { get, has, isEmpty, isNil } from 'lodash';
+
+const getDraftRelations = (data, ctSchema, components) => {
+  const getDraftRelationsCount = (data, schema) =>
+    Object.keys(data).reduce((acc, current) => {
+      const type = get(schema, ['attributes', current, 'type'], 'string');
+      const relationType = get(schema, ['attributes', current, 'relationType'], '');
+      const isMorph = relationType.toLowerCase().includes('morph');
+      const oneWayTypes = ['oneWay', 'oneToOne', 'manyToOne'];
+      const currentData = data[current];
+
+      if (isNil(currentData)) {
+        return acc;
+      }
+
+      if (type === 'dynamiczone') {
+        currentData.forEach(curr => {
+          const compoSchema = get(components, curr.__component, {});
+
+          acc += getDraftRelationsCount(curr, compoSchema);
+        });
+      }
+
+      if (type === 'component') {
+        const isRepeatable = get(schema, ['attributes', current, 'repeatable'], false);
+        const compoUID = get(schema, ['attributes', current, 'component'], '');
+        const compoSchema = get(components, compoUID, {});
+
+        if (isRepeatable) {
+          currentData.forEach(curr => {
+            acc += getDraftRelationsCount(curr, compoSchema);
+          });
+        } else {
+          acc += getDraftRelationsCount(currentData, compoSchema);
+        }
+      }
+
+      if (type === 'relation' && !isMorph) {
+        if (oneWayTypes.includes(relationType)) {
+          const hasDraftAndPublish = has(currentData, 'published_at');
+
+          if (hasDraftAndPublish && isEmpty(currentData.published_at)) {
+            acc += 1;
+          }
+        } else {
+          currentData.forEach(value => {
+            if (has(value, 'published_at') && isEmpty(value.published_at)) {
+              acc += 1;
+            }
+          });
+        }
+      }
+
+      return acc;
+    }, 0);
+
+  const count = getDraftRelationsCount(data, ctSchema, components);
+
+  return count;
+};
+
+export default getDraftRelations;

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

@@ -0,0 +1,3 @@
+export { default as connect } from './connect';
+export { default as getDraftRelations } from './getDraftRelations';
+export { default as select } from './select';

package/admin/src/containers/EditView/Header/utils/select.js

@@ -0,0 +1,31 @@
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect() {
+  const {
+    allLayoutData,
+    initialData,
+    isCreatingEntry,
+    isSingleType,
+    status,
+    layout,
+    hasDraftAndPublish,
+    modifiedData,
+    onPublish,
+    onUnpublish,
+  } = useContentManagerEditViewDataManager();
+
+  return {
+    componentLayouts: allLayoutData.components,
+    initialData,
+    isCreatingEntry,
+    isSingleType,
+    status,
+    layout,
+    hasDraftAndPublish,
+    modifiedData,
+    onPublish,
+    onUnpublish,
+  };
+}
+
+export default useSelect;