mirror of
https://github.com/strapi/strapi.git
synced 2025-11-02 10:55:37 +00:00
Merge branch 'front/dynamic-zones-ctb-listview' of github.com:strapi/strapi into front/dz-post-data
This commit is contained in:
soupette
commit
b7b2f0e469
@ -6,51 +6,103 @@
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { List as StyledList } from '@buffetjs/styles';
|
||||
import { get } from 'lodash';
|
||||
|
||||
import ListRow from '../ListRow';
|
||||
import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
|
||||
import useDataManager from '../../hooks/useDataManager';
|
||||
|
||||
import Wrapper from './List';
|
||||
|
||||
function List({ className, customRowComponent, items }) {
|
||||
const { modifiedData } = useDataManager();
|
||||
|
||||
const getComponentSchema = componentName => {
|
||||
return get(modifiedData, ['components', componentName], {});
|
||||
};
|
||||
|
||||
const renderComponentList = ({ component }) => {
|
||||
const {
|
||||
schema: { attributes },
|
||||
} = getComponentSchema(component);
|
||||
|
||||
function List({ className, items, customRowComponent }) {
|
||||
const renderSelf = props => {
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<div>yo {List(props)}</div>
|
||||
<tr className="component-row">
|
||||
<td colSpan={12}>
|
||||
{List({
|
||||
customRowComponent,
|
||||
items: convertAttrObjToArray(attributes),
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
renderComponentList.defaultProps = {
|
||||
component: null,
|
||||
};
|
||||
|
||||
renderComponentList.propTypes = {
|
||||
component: PropTypes.stringÒ,
|
||||
};
|
||||
|
||||
const renderDynamicZoneList = ({ components }) => {
|
||||
return (
|
||||
<tr className="dynamiczone-row">
|
||||
<td colSpan={12}>
|
||||
{components.map(component => renderComponentList({ component }))}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
renderDynamicZoneList.defaultProps = {
|
||||
components: [],
|
||||
};
|
||||
|
||||
renderDynamicZoneList.propTypes = {
|
||||
components: PropTypes.instanceOf(Array),
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledList className={className}>
|
||||
<Wrapper className={className}>
|
||||
<table>
|
||||
<tbody>
|
||||
{items.map(item => {
|
||||
const { type } = item;
|
||||
return (
|
||||
<React.Fragment key={JSON.stringify(item)}>
|
||||
{customRowComponent(item)}
|
||||
|
||||
{item.type === 'component' &&
|
||||
renderSelf({ ok: false, customRowComponent, items: [] })}
|
||||
{type === 'component' &&
|
||||
renderComponentList({
|
||||
...item,
|
||||
})}
|
||||
|
||||
{type === 'dynamiczone' &&
|
||||
renderDynamicZoneList({
|
||||
...item,
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</StyledList>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
List.defaultProps = {
|
||||
className: null,
|
||||
items: [],
|
||||
customRowComponent: null,
|
||||
items: [],
|
||||
isSub: false,
|
||||
};
|
||||
|
||||
List.propTypes = {
|
||||
className: PropTypes.string,
|
||||
customRowComponent: PropTypes.func,
|
||||
items: PropTypes.instanceOf(Array),
|
||||
isSub: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default List;
|
||||
|
||||
@ -7,6 +7,7 @@ import { AttributeIcon } from '@buffetjs/core';
|
||||
import pluginId from '../../pluginId';
|
||||
|
||||
import Wrapper from './Wrapper';
|
||||
import Component from '../../icons/Component';
|
||||
|
||||
function ListRow({
|
||||
attributeId,
|
||||
@ -21,6 +22,14 @@ function ListRow({
|
||||
const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type)
|
||||
? 'number'
|
||||
: type;
|
||||
|
||||
let readableType = type;
|
||||
if (['integer', 'biginteger', 'float', 'decimal'].includes(type)) {
|
||||
readableType = 'number';
|
||||
} else if (['string'].includes(type)) {
|
||||
readableType = 'text';
|
||||
}
|
||||
|
||||
const src = target ? 'relation' : ico;
|
||||
|
||||
const handleClick = () => {
|
||||
@ -39,6 +48,7 @@ function ListRow({
|
||||
>
|
||||
<td>
|
||||
<AttributeIcon key={src} type={src} />
|
||||
<Component fill="#f3f4f4" />
|
||||
</td>
|
||||
<td styles={{ fontWeight: 600 }}>
|
||||
<p>{name}</p>
|
||||
@ -61,7 +71,7 @@ function ListRow({
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
) : (
|
||||
<FormattedMessage id={`${pluginId}.attribute.${type}`} />
|
||||
<FormattedMessage id={`${pluginId}.attribute.${readableType}`} />
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { get, has, isEqual } from 'lodash';
|
||||
import { get, isEqual } from 'lodash';
|
||||
import { Header } from '@buffetjs/custom';
|
||||
import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
|
||||
import ListRow from '../../components/ListRow';
|
||||
import List from '../../components/List';
|
||||
|
||||
@ -33,8 +34,8 @@ const ListPage = () => {
|
||||
initialData,
|
||||
modifiedData,
|
||||
isInContentTypeView,
|
||||
removeAttribute,
|
||||
removeComponentFromDynamicZone,
|
||||
// removeAttribute,
|
||||
// removeComponentFromDynamicZone,
|
||||
} = useDataManager();
|
||||
const { formatMessage } = useGlobalContext();
|
||||
const { push } = useHistory();
|
||||
@ -60,66 +61,70 @@ const ListPage = () => {
|
||||
const search = `modalType=chooseAttribute&forTarget=${forTarget}&targetUid=${targetUid}&headerDisplayName=${currentDataName}`;
|
||||
push({ search });
|
||||
};
|
||||
const handleClickAddAttributeNestedData = (
|
||||
targetUid,
|
||||
headerDisplayName,
|
||||
headerDisplayCategory = null,
|
||||
headerDisplaySubCategory = null,
|
||||
subTargetUid = null
|
||||
) => {
|
||||
const displayCategory = headerDisplayCategory
|
||||
? `&headerDisplayCategory=${headerDisplayCategory}`
|
||||
: '';
|
||||
const displaySubCategory = headerDisplaySubCategory
|
||||
? `&headerDisplaySubCategory=${headerDisplaySubCategory}`
|
||||
: '';
|
||||
const search = `modalType=chooseAttribute&forTarget=components&targetUid=${targetUid}&headerDisplayName=${headerDisplayName}${displayCategory}${displaySubCategory}${
|
||||
subTargetUid ? `&subTargetUid=${subTargetUid}` : ''
|
||||
}`;
|
||||
|
||||
push({ search });
|
||||
};
|
||||
const handleClickAddComponentToDZ = dzName => {
|
||||
const search = `modalType=addComponentToDynamicZone&forTarget=contentType&targetUid=${targetUid}&headerDisplayCategory=${currentDataName}&dynamicZoneTarget=${dzName}&settingType=base&step=1&actionType=edit&headerDisplayName=${dzName}`;
|
||||
push({ search });
|
||||
};
|
||||
// const handleClickAddAttributeNestedData = (
|
||||
// targetUid,
|
||||
// headerDisplayName,
|
||||
// headerDisplayCategory = null,
|
||||
// headerDisplaySubCategory = null,
|
||||
// subTargetUid = null
|
||||
// ) => {
|
||||
// const displayCategory = headerDisplayCategory
|
||||
// ? `&headerDisplayCategory=${headerDisplayCategory}`
|
||||
// : '';
|
||||
// const displaySubCategory = headerDisplaySubCategory
|
||||
// ? `&headerDisplaySubCategory=${headerDisplaySubCategory}`
|
||||
// : '';
|
||||
// const search = `modalType=chooseAttribute&forTarget=components&targetUid=${targetUid}&headerDisplayName=${headerDisplayName}${displayCategory}${displaySubCategory}${
|
||||
// subTargetUid ? `&subTargetUid=${subTargetUid}` : ''
|
||||
// }`;
|
||||
|
||||
// TODO just a util not sure it should be kept
|
||||
const getType = attrName => {
|
||||
const type = has(modifiedData, [
|
||||
...mainDataTypeAttributesPath,
|
||||
attrName,
|
||||
'nature',
|
||||
])
|
||||
? 'relation'
|
||||
: get(
|
||||
modifiedData,
|
||||
[...mainDataTypeAttributesPath, attrName, 'type'],
|
||||
''
|
||||
);
|
||||
// push({ search });
|
||||
// };
|
||||
|
||||
return type;
|
||||
};
|
||||
const getComponentSchema = componentName => {
|
||||
return get(modifiedData, ['components', componentName], {});
|
||||
};
|
||||
const getFirstLevelComponentName = compoName => {
|
||||
return get(
|
||||
modifiedData,
|
||||
[...mainDataTypeAttributesPath, compoName, 'component'],
|
||||
''
|
||||
);
|
||||
};
|
||||
const getComponent = attrName => {
|
||||
const componentToGet = get(
|
||||
modifiedData,
|
||||
[...mainDataTypeAttributesPath, attrName, 'component'],
|
||||
''
|
||||
);
|
||||
const componentSchema = getComponentSchema(componentToGet);
|
||||
// const handleClickAddComponentToDZ = dzName => {
|
||||
// const search = `modalType=addComponentToDynamicZone&forTarget=contentType&targetUid=${targetUid}&headerDisplayCategory=${currentDataName}&dynamicZoneTarget=${dzName}&settingType=base&step=1&actionType=edit&headerDisplayName=${dzName}`;
|
||||
// push({ search });
|
||||
// };
|
||||
|
||||
// // TODO just a util not sure it should be kept
|
||||
// const getType = attrName => {
|
||||
// const type = has(modifiedData, [
|
||||
// ...mainDataTypeAttributesPath,
|
||||
// attrName,
|
||||
// 'nature',
|
||||
// ])
|
||||
// ? 'relation'
|
||||
// : get(
|
||||
// modifiedData,
|
||||
// [...mainDataTypeAttributesPath, attrName, 'type'],
|
||||
// ''
|
||||
// );
|
||||
|
||||
// return type;
|
||||
// };
|
||||
|
||||
// const getComponentSchema = componentName => {
|
||||
// return get(modifiedData, ['components', componentName], {});
|
||||
// };
|
||||
// const getFirstLevelComponentName = compoName => {
|
||||
// return get(
|
||||
// modifiedData,
|
||||
// [...mainDataTypeAttributesPath, compoName, 'component'],
|
||||
// ''
|
||||
// );
|
||||
// };
|
||||
// const getComponent = attrName => {
|
||||
// const componentToGet = get(
|
||||
// modifiedData,
|
||||
// [...mainDataTypeAttributesPath, attrName, 'component'],
|
||||
// ''
|
||||
// );
|
||||
// const componentSchema = getComponentSchema(componentToGet);
|
||||
|
||||
// return componentSchema;
|
||||
// };
|
||||
|
||||
return componentSchema;
|
||||
};
|
||||
const handleClickEditField = (
|
||||
forTarget,
|
||||
targetUid,
|
||||
@ -244,12 +249,6 @@ const ListPage = () => {
|
||||
|
||||
const listActions = [{ ...addButtonProps }];
|
||||
|
||||
const convertDataToArray = () => {
|
||||
return Object.keys(attributes).map((key, index) => {
|
||||
return { ...attributes[key], name: key, index };
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickOnTrashIcon = () => {};
|
||||
|
||||
const CustomRow = ({ index, name, ...rest }) => {
|
||||
@ -285,7 +284,7 @@ const ListPage = () => {
|
||||
<ListWrapper>
|
||||
<ListHeader actions={listActions} title={listTitle} />
|
||||
<List
|
||||
items={convertDataToArray()}
|
||||
items={convertAttrObjToArray(attributes)}
|
||||
customRowComponent={props => <CustomRow {...props} />}
|
||||
></List>
|
||||
<ListButton {...addButtonProps}></ListButton>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"model": "Content Type",
|
||||
"group": "Group",
|
||||
"attribute.WYSIWYG": "Text (WYSIWYG)",
|
||||
|
||||
"button.attributes.add": "Add New Field",
|
||||
"button.attributes.add.another": "Add Another Field",
|
||||
"button.contentType.add": "Add a Content Type",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user