yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-28 10:45:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format layout for editRelations and refacto st container

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-10-23 15:16:13 +02:00
parent 8c2bc447cb
commit 430cb0dc11
6 changed files with 108 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/getstarted/api/homepage/models/homepage.settings.json
View File

@ -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"
]
}
}
}

37
packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
View File

@ -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 && (
<SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
<div style={{ paddingTop: '22px' }}>
{currentContentTypeLayoutData.layouts.editRelations.map(relationName => {
const relation = get(
currentContentTypeLayoutData,
['schema', 'attributes', relationName],
{}
);
const relationMetas = get(
currentContentTypeLayoutData,
['metadatas', relationName, 'edit'],
{}
);
{currentContentTypeLayoutData.layouts.editRelations.map(
({ name, fieldSchema, metadatas }) => {
return (
<SelectWrapper
{...relation}
{...relationMetas}
key={relationName}
name={relationName}
relationsType={relation.relationType}
{...fieldSchema}
{...metadatas}
key={name}
name={name}
relationsType={fieldSchema.relationType}
/>
);
})}
}
)}
</div>
</SubWrapper>
)}
@ -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,

101
packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js
View File

@ -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 <LoadingIndicatorPage />;
}
return (
<EditViewProvider
allowedActions={allowedActions}
allLayoutData={allLayoutData}
allLayoutData={layout}
components={components}
isSingleType
layout={currentContentTypeLayoutData}
models={models}
>
<EditViewDataManagerProvider
allLayoutData={allLayoutData}
allLayoutData={layout}
redirectToPreviousPage={goBack}
isSingleType
slug={slug}
@ -163,31 +150,22 @@ const EditView = ({
<div className="col-md-12 col-lg-3">
<InformationCard />
<Padded size="smd" top />
{currentContentTypeLayoutRelations.length > 0 && (
{currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
<SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
<div style={{ paddingTop: '22px' }}>
{currentContentTypeLayoutRelations.map(relationName => {
const relation = get(
currentContentTypeLayoutData,
['schema', 'attributes', relationName],
{}
);
const relationMetas = get(
currentContentTypeLayoutData,
['metadatas', relationName, 'edit'],
{}
);
{currentContentTypeLayoutData.layouts.editRelations.map(
({ name, fieldSchema, metadatas }) => {
return (
<SelectWrapper
{...relation}
{...relationMetas}
key={relationName}
name={relationName}
relationsType={relation.relationType}
{...fieldSchema}
{...metadatas}
key={name}
name={name}
relationsType={fieldSchema.relationType}
/>
);
})}
}
)}
</div>
</SubWrapper>
)}
@ -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,

6
packages/strapi-plugin-content-manager/admin/src/hooks/index.js Normal file
View File

@ -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';

25
packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js
View File

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

1
packages/strapi-plugin-content-manager/admin/src/utils/index.js
View File

@ -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';