yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-23 21:53:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'front/dynamic-zones-ctb-listview' of github.com:strapi/strapi into front/dz-post-data

Browse Source
This commit is contained in:
soupette 2019-12-03 20:28:42 +01:00
commit b7b2f0e469
4 changed files with 140 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js
View File

@ -6,51 +6,103 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; 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 ( return (
<tr> <tr className="component-row">
<td> <td colSpan={12}>
<div>yo {List(props)}</div> {List({
customRowComponent,
items: convertAttrObjToArray(attributes),
})}
</td> </td>
</tr> </tr>
); );
}; };
renderComponentList.defaultProps = {
component: null,
};
renderComponentList.propTypes = {
component: PropTypes.stringÒ,
};
const renderDynamicZoneList = ({ components }) => {
return ( return (
<StyledList className={className}> <tr className="dynamiczone-row">
<td colSpan={12}>
{components.map(component => renderComponentList({ component }))}
</td>
</tr>
);
};
renderDynamicZoneList.defaultProps = {
components: [],
};
renderDynamicZoneList.propTypes = {
components: PropTypes.instanceOf(Array),
};
return (
<Wrapper className={className}>
<table> <table>
<tbody> <tbody>
{items.map(item => { {items.map(item => {
const { type } = item;
return ( return (
<React.Fragment key={JSON.stringify(item)}> <React.Fragment key={JSON.stringify(item)}>
{customRowComponent(item)} {customRowComponent(item)}
{item.type === 'component' && {type === 'component' &&
renderSelf({ ok: false, customRowComponent, items: [] })} renderComponentList({
...item,
})}
{type === 'dynamiczone' &&
renderDynamicZoneList({
...item,
})}
</React.Fragment> </React.Fragment>
); );
})} })}
</tbody> </tbody>
</table> </table>
</StyledList> </Wrapper>
); );
} }
List.defaultProps = { List.defaultProps = {
className: null, className: null,
items: [],
customRowComponent: null, customRowComponent: null,
items: [],
isSub: false,
}; };
List.propTypes = { List.propTypes = {
className: PropTypes.string, className: PropTypes.string,
customRowComponent: PropTypes.func, customRowComponent: PropTypes.func,
items: PropTypes.instanceOf(Array), items: PropTypes.instanceOf(Array),
isSub: PropTypes.bool,
}; };
export default List; export default List;

12
packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
View File

@ -7,6 +7,7 @@ import { AttributeIcon } from '@buffetjs/core';
import pluginId from '../../pluginId'; import pluginId from '../../pluginId';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
import Component from '../../icons/Component';
function ListRow({ function ListRow({
attributeId, attributeId,
@ -21,6 +22,14 @@ function ListRow({
const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type) const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type)
? 'number' ? 'number'
: type; : 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 src = target ? 'relation' : ico;
const handleClick = () => { const handleClick = () => {
@ -39,6 +48,7 @@ function ListRow({
> >
<td> <td>
<AttributeIcon key={src} type={src} /> <AttributeIcon key={src} type={src} />
<Component fill="#f3f4f4" />
</td> </td>
<td styles={{ fontWeight: 600 }}> <td styles={{ fontWeight: 600 }}>
<p>{name}</p> <p>{name}</p>
@ -61,7 +71,7 @@ function ListRow({
</FormattedMessage> </FormattedMessage>
</div> </div>
) : ( ) : (
<FormattedMessage id={`${pluginId}.attribute.${type}`} /> <FormattedMessage id={`${pluginId}.attribute.${readableType}`} />
)} )}
</td> </td>
<td> <td>

131
packages/strapi-plugin-content-type-builder/admin/src/containers/ListView/index.js
View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { get, has, isEqual } from 'lodash'; import { get, isEqual } from 'lodash';
import { Header } from '@buffetjs/custom'; import { Header } from '@buffetjs/custom';
import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
import ListRow from '../../components/ListRow'; import ListRow from '../../components/ListRow';
import List from '../../components/List'; import List from '../../components/List';
@ -33,8 +34,8 @@ const ListPage = () => {
initialData, initialData,
modifiedData, modifiedData,
isInContentTypeView, isInContentTypeView,
removeAttribute, // removeAttribute,
removeComponentFromDynamicZone, // removeComponentFromDynamicZone,
} = useDataManager(); } = useDataManager();
const { formatMessage } = useGlobalContext(); const { formatMessage } = useGlobalContext();
const { push } = useHistory(); const { push } = useHistory();
@ -60,66 +61,70 @@ const ListPage = () => {
const search = `modalType=chooseAttribute&forTarget=${forTarget}&targetUid=${targetUid}&headerDisplayName=${currentDataName}`; const search = `modalType=chooseAttribute&forTarget=${forTarget}&targetUid=${targetUid}&headerDisplayName=${currentDataName}`;
push({ search }); 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 handleClickAddAttributeNestedData = (
}; // targetUid,
const handleClickAddComponentToDZ = dzName => { // headerDisplayName,
const search = `modalType=addComponentToDynamicZone&forTarget=contentType&targetUid=${targetUid}&headerDisplayCategory=${currentDataName}&dynamicZoneTarget=${dzName}&settingType=base&step=1&actionType=edit&headerDisplayName=${dzName}`; // headerDisplayCategory = null,
push({ search }); // 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 // push({ search });
const getType = attrName => { // };
const type = has(modifiedData, [
...mainDataTypeAttributesPath,
attrName,
'nature',
])
? 'relation'
: get(
modifiedData,
[...mainDataTypeAttributesPath, attrName, 'type'],
''
);
return type; // const handleClickAddComponentToDZ = dzName => {
}; // const search = `modalType=addComponentToDynamicZone&forTarget=contentType&targetUid=${targetUid}&headerDisplayCategory=${currentDataName}&dynamicZoneTarget=${dzName}&settingType=base&step=1&actionType=edit&headerDisplayName=${dzName}`;
const getComponentSchema = componentName => { // push({ search });
return get(modifiedData, ['components', componentName], {}); // };
};
const getFirstLevelComponentName = compoName => { // // TODO just a util not sure it should be kept
return get( // const getType = attrName => {
modifiedData, // const type = has(modifiedData, [
[...mainDataTypeAttributesPath, compoName, 'component'], // ...mainDataTypeAttributesPath,
'' // attrName,
); // 'nature',
}; // ])
const getComponent = attrName => { // ? 'relation'
const componentToGet = get( // : get(
modifiedData, // modifiedData,
[...mainDataTypeAttributesPath, attrName, 'component'], // [...mainDataTypeAttributesPath, attrName, 'type'],
'' // ''
); // );
const componentSchema = getComponentSchema(componentToGet);
// 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 = ( const handleClickEditField = (
forTarget, forTarget,
targetUid, targetUid,
@ -244,12 +249,6 @@ const ListPage = () => {
const listActions = [{ ...addButtonProps }]; const listActions = [{ ...addButtonProps }];
const convertDataToArray = () => {
return Object.keys(attributes).map((key, index) => {
return { ...attributes[key], name: key, index };
});
};
const handleClickOnTrashIcon = () => {}; const handleClickOnTrashIcon = () => {};
const CustomRow = ({ index, name, ...rest }) => { const CustomRow = ({ index, name, ...rest }) => {
@ -285,7 +284,7 @@ const ListPage = () => {
<ListWrapper> <ListWrapper>
<ListHeader actions={listActions} title={listTitle} /> <ListHeader actions={listActions} title={listTitle} />
<List <List
items={convertDataToArray()} items={convertAttrObjToArray(attributes)}
customRowComponent={props => <CustomRow {...props} />} customRowComponent={props => <CustomRow {...props} />}
></List> ></List>
<ListButton {...addButtonProps}></ListButton> <ListButton {...addButtonProps}></ListButton>

1
packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
View File

@ -2,7 +2,6 @@
"model": "Content Type", "model": "Content Type",
"group": "Group", "group": "Group",
"attribute.WYSIWYG": "Text (WYSIWYG)", "attribute.WYSIWYG": "Text (WYSIWYG)",
"button.attributes.add": "Add New Field", "button.attributes.add": "Add New Field",
"button.attributes.add.another": "Add Another Field", "button.attributes.add.another": "Add Another Field",
"button.contentType.add": "Add a Content Type", "button.contentType.add": "Add a Content Type",