diff --git a/examples/getstarted/api/homepage/models/homepage.settings.json b/examples/getstarted/api/homepage/models/homepage.settings.json index 0ff01efa1d..4628162b64 100644 --- a/examples/getstarted/api/homepage/models/homepage.settings.json +++ b/examples/getstarted/api/homepage/models/homepage.settings.json @@ -2,7 +2,8 @@ "kind": "singleType", "collectionName": "homepages", "info": { - "name": "Homepage" + "name": "Homepage", + "description": "" }, "options": { "draftAndPublish": true, @@ -21,16 +22,32 @@ "single": { "model": "file", "via": "related", - "allowedTypes": ["images", "files", "videos"], + "allowedTypes": [ + "images", + "files", + "videos" + ], "plugin": "upload", "required": false }, "multiple": { "collection": "file", "via": "related", - "allowedTypes": ["images", "videos"], + "allowedTypes": [ + "images", + "videos" + ], "plugin": "upload", "required": false + }, + "dz": { + "type": "dynamiczone", + "components": [ + "default.closingperiod", + "default.dish", + "default.openingtimes", + "default.restaurantservice" + ] } } } 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 4230b48bef..96a919d8e0 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 @@ -10,18 +10,15 @@ import { useUserPermissions, } from 'strapi-helper-plugin'; import { Padded } from '@buffetjs/core'; - -import pluginId from '../../pluginId'; import pluginPermissions from '../../permissions'; -import { generatePermissionsObject } from '../../utils'; +import { generatePermissionsObject, getInjectedComponents } from '../../utils'; 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 useFetchContentTypeLayout from '../../hooks/useFetchContentTypeLayout'; -import getInjectedComponents from '../../utils/getComponents'; +import { useFetchContentTypeLayout } from '../../hooks'; import EditViewDataManagerProvider from '../EditViewDataManagerProvider'; import EditViewProvider from '../EditViewProvider'; import Header from './Header'; @@ -154,28 +151,19 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) => {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
- {currentContentTypeLayoutData.layouts.editRelations.map(relationName => { - const relation = get( - currentContentTypeLayoutData, - ['schema', 'attributes', relationName], - {} - ); - const relationMetas = get( - currentContentTypeLayoutData, - ['metadatas', relationName, 'edit'], - {} - ); - - return ( - - ); - })} + {currentContentTypeLayoutData.layouts.editRelations.map( + ({ name, fieldSchema, metadatas }) => { + return ( + + ); + } + )}
)} @@ -187,7 +175,6 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) => id: 'app.links.configure-view', }} icon="layout" - key={`${pluginId}.link`} url="ctm-configurations/edit-settings/content-types" onClick={() => { // emitEvent('willEditContentTypeLayoutFromEditView'); @@ -221,9 +208,7 @@ EditView.defaultProps = { EditView.propTypes = { components: PropTypes.array.isRequired, currentEnvironment: PropTypes.string, - deleteLayout: PropTypes.func.isRequired, emitEvent: PropTypes.func, - layouts: PropTypes.object.isRequired, models: PropTypes.array.isRequired, plugins: PropTypes.object, slug: PropTypes.string.isRequired, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js index d483d500e7..ab369416d2 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js @@ -1,62 +1,44 @@ -import React, { memo, useCallback, useMemo, useEffect } from 'react'; +import React, { memo, useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { useHistory, useLocation } from 'react-router-dom'; -import { BackHeader, LiLink, CheckPermissions, useUserPermissions } from 'strapi-helper-plugin'; +import { + BackHeader, + LiLink, + CheckPermissions, + LoadingIndicatorPage, + useUserPermissions, +} from 'strapi-helper-plugin'; import { Padded } from '@buffetjs/core'; - -import pluginId from '../../pluginId'; import pluginPermissions from '../../permissions'; -import { generatePermissionsObject } from '../../utils'; +import { generatePermissionsObject, getInjectedComponents } from '../../utils'; 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/getComponents'; +import { useFetchContentTypeLayout } from '../../hooks'; import EditViewDataManagerProvider from '../SingleTypeEditViewDataManagerProvider'; import EditViewProvider from '../EditViewProvider'; import Header from './Header'; -import { createAttributesLayout, formatLayoutWithMetas } from './utils'; +import { createAttributesLayout } from './utils'; import { LinkWrapper, SubWrapper } from './components'; - import DeleteLink from './DeleteLink'; import InformationCard from './InformationCard'; /* eslint-disable react/no-array-index-key */ -const EditView = ({ - components, - currentEnvironment, - deleteLayout, - layouts, - models, - plugins, - slug, -}) => { +const EditView = ({ components, currentEnvironment, models, plugins, slug }) => { // TODO REFACTO THIS CONTAINER SINCE IT IS VERY SIMILAR TO THE CT ONE - + const { isLoading, layout } = useFetchContentTypeLayout(slug); const { goBack } = useHistory(); // DIFF WITH CT const { pathname } = useLocation(); const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]); const { allowedActions } = useUserPermissions(viewPermissions); - const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]); - - const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [ - allLayoutData, - ]); - - const currentContentTypeLayoutRelations = useMemo( - () => get(currentContentTypeLayoutData, ['layouts', 'editRelations'], []), - [currentContentTypeLayoutData] - ); - const currentContentTypeSchema = useMemo( - () => get(currentContentTypeLayoutData, ['schema'], {}), - [currentContentTypeLayoutData] - ); + const currentContentTypeLayoutData = useMemo(() => get(layout, ['contentType'], {}), [layout]); // Check if a block is a dynamic zone const isDynamicZone = useCallback(block => { @@ -65,27 +47,32 @@ const EditView = ({ }); }, []); - useEffect(() => { - return () => deleteLayout(slug); - }, [deleteLayout, slug]); - const formattedContentTypeLayout = useMemo(() => { - const enhancedLayout = formatLayoutWithMetas(currentContentTypeLayoutData); + if (!currentContentTypeLayoutData.layouts) { + return []; + } - return createAttributesLayout(enhancedLayout, currentContentTypeSchema.attributes); - }, [currentContentTypeLayoutData, currentContentTypeSchema.attributes]); + return createAttributesLayout( + currentContentTypeLayoutData.layouts.edit, + currentContentTypeLayoutData.schema.attributes + ); + }, [currentContentTypeLayoutData]); + + if (isLoading) { + return ; + } return ( - {currentContentTypeLayoutRelations.length > 0 && ( + {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
- {currentContentTypeLayoutRelations.map(relationName => { - const relation = get( - currentContentTypeLayoutData, - ['schema', 'attributes', relationName], - {} - ); - const relationMetas = get( - currentContentTypeLayoutData, - ['metadatas', relationName, 'edit'], - {} - ); - - return ( - - ); - })} + {currentContentTypeLayoutData.layouts.editRelations.map( + ({ name, fieldSchema, metadatas }) => { + return ( + + ); + } + )}
)} @@ -200,7 +178,6 @@ const EditView = ({ id: 'app.links.configure-view', }} icon="layout" - key={`${pluginId}.link`} // DIFF WITH CT url={`${pathname}/ctm-configurations/edit-settings/content-types`} onClick={() => { @@ -235,9 +212,7 @@ EditView.defaultProps = { EditView.propTypes = { components: PropTypes.array.isRequired, currentEnvironment: PropTypes.string, - deleteLayout: PropTypes.func.isRequired, emitEvent: PropTypes.func, - layouts: PropTypes.object.isRequired, models: PropTypes.array.isRequired, plugins: PropTypes.object, slug: PropTypes.string.isRequired, diff --git a/packages/strapi-plugin-content-manager/admin/src/hooks/index.js b/packages/strapi-plugin-content-manager/admin/src/hooks/index.js new file mode 100644 index 0000000000..0f6f1a4dc0 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/hooks/index.js @@ -0,0 +1,6 @@ +export { default as useFetchContentTypeLayout } from './useFetchContentTypeLayout'; +export { default as useDataManager } from './useDataManager'; +export { default as useEditView } from './useEditView'; +export { default as useLayoutDnd } from './useLayoutDnd'; +export { default as useListView } from './useListView'; +export { default as useWysiwyg } from './useWysiwyg'; diff --git a/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js b/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js index 01cf72db2c..ae73ef85f9 100644 --- a/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js +++ b/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js @@ -3,6 +3,7 @@ import { get, set } from 'lodash'; const formatLayoutWithMetas = obj => { const formatted = obj.layouts.edit.reduce((acc, current) => { const row = current.map(attribute => { + // TODO handle relations endpoint.... return { ...attribute, fieldSchema: get(obj, ['schema', 'attributes', attribute.name], {}), @@ -18,10 +19,32 @@ const formatLayoutWithMetas = obj => { return formatted; }; +// editRelations is an array of strings... +const formatEditRelationsLayoutWithMetas = obj => { + const formatted = obj.layouts.editRelations.reduce((acc, current) => { + const fieldSchema = get(obj, ['schema', 'attributes', current], {}); + const metadatas = get(obj, ['metadatas', current, 'edit'], {}); + const size = 6; + + acc.push({ + name: current, + size, + fieldSchema, + metadatas, + }); + + return acc; + }, []); + + return formatted; +}; + const formatLayouts = data => { const formattedCTEditLayout = formatLayoutWithMetas(data.contentType); + const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType); set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout); + set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout); Object.keys(data.components).forEach(compoUID => { const formattedCompoEditLayout = formatLayoutWithMetas(data.components[compoUID]); @@ -33,4 +56,4 @@ const formatLayouts = data => { }; export default formatLayouts; -export { formatLayoutWithMetas }; +export { formatEditRelationsLayoutWithMetas, formatLayoutWithMetas }; diff --git a/packages/strapi-plugin-content-manager/admin/src/utils/index.js b/packages/strapi-plugin-content-manager/admin/src/utils/index.js index 5bfe03ccd3..21eeebd401 100644 --- a/packages/strapi-plugin-content-manager/admin/src/utils/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/utils/index.js @@ -1,6 +1,7 @@ export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable'; export { default as dateFormats } from './dateFormats'; export { default as generatePermissionsObject } from './generatePermissionsObject'; +export { default as getInjectedComponents } from './getComponents'; export { default as getFieldName } from './getFieldName'; export { default as getRequestUrl } from './getRequestUrl'; export { default as getTrad } from './getTrad';