mirror of
https://github.com/strapi/strapi.git
synced 2025-09-03 13:50:38 +00:00
Add new key in schema to display the editView fields
Design the relation drag & sort
This commit is contained in:
soupette
parent
807ded44a1
commit
6cc063e98c
@ -9,9 +9,9 @@ import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import styles from './styles.scss';
|
||||
|
||||
const Block = ({ children, description, title }) => (
|
||||
const Block = ({ children, description, style, title }) => (
|
||||
<div className="col-md-12">
|
||||
<div className={styles.ctmBlock}>
|
||||
<div className={styles.ctmBlock} style={style}>
|
||||
<div className={styles.ctmBlockTitle}>
|
||||
<FormattedMessage id={title} />
|
||||
<FormattedMessage id={description}>
|
||||
@ -27,12 +27,14 @@ const Block = ({ children, description, title }) => (
|
||||
Block.defaultProps = {
|
||||
children: null,
|
||||
description: 'app.utils.defaultMessage',
|
||||
style: {},
|
||||
title: 'app.utils.defaultMessage',
|
||||
};
|
||||
|
||||
Block.propTypes = {
|
||||
children: PropTypes.any,
|
||||
description: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -88,6 +88,14 @@ class SettingPage extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
getEditPageDisplaySettings = () => {
|
||||
return get(this.props.schema, 'models.'.concat(this.getPath().concat('.editDisplay')), { fields: [], relations: [] });
|
||||
}
|
||||
|
||||
getEditPageFields = () => get(this.getEditPageDisplaySettings(), ['fields'], []);
|
||||
|
||||
getEditPageRelations = () => get(this.getEditPageDisplaySettings(), ['relations'], []);
|
||||
|
||||
getListDisplay = () => (
|
||||
get(this.props.schema, `models.${this.getPath()}.listDisplay`, [])
|
||||
);
|
||||
@ -207,6 +215,19 @@ class SettingPage extends React.PureComponent {
|
||||
return index === -1 ? 0 : index;
|
||||
}
|
||||
|
||||
hasRelations = () => {
|
||||
const relations = get(this.props.schema, 'models.'.concat(this.getPath()).concat('.relations'), {});
|
||||
|
||||
return Object.keys(relations)
|
||||
.filter(relation => {
|
||||
const isUploadRelation = get(relations, [relation, 'plugin'], '') === 'upload';
|
||||
const isMorphSide = get(relations, [relation, 'nature'], '').toLowerCase().includes('morph') && get(relations, [relation, relation]) !== undefined;
|
||||
|
||||
return !isUploadRelation && !isMorphSide;
|
||||
})
|
||||
.length > 0;
|
||||
}
|
||||
|
||||
// We need to remove the Over state on the DraggableAttr component
|
||||
updateSiblingHoverState = () => {
|
||||
this.setState(prevState => ({ isDraggingSibling: !prevState.isDraggingSibling }));
|
||||
@ -234,7 +255,7 @@ class SettingPage extends React.PureComponent {
|
||||
const namePath = this.getPath();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<BackHeader onClick={() => this.props.history.goBack()} />
|
||||
<div className={cn('container-fluid', styles.containerFluid)}>
|
||||
<PluginHeader
|
||||
@ -271,13 +292,16 @@ class SettingPage extends React.PureComponent {
|
||||
this.toggleWarningCancel();
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className={cn('row', styles.container)}>
|
||||
<Block
|
||||
description="content-manager.containers.SettingPage.listSettings.description"
|
||||
title="content-manager.containers.SettingPage.listSettings.title"
|
||||
style={{ marginBottom: '25px' }}
|
||||
>
|
||||
<form onSubmit={this.handleSubmit} className={styles.ctmForm}>
|
||||
<div className={styles.ctmForm}>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-md-12">
|
||||
<div className="row">
|
||||
{forms.inputs.map(input => {
|
||||
@ -296,22 +320,26 @@ class SettingPage extends React.PureComponent {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12">
|
||||
<div className={styles.separator} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.listDisplayWrapper}>
|
||||
<div className="row">
|
||||
|
||||
<div className={cn('col-md-12', styles.draggedDescription)}>
|
||||
<FormattedMessage id="content-manager.containers.SettingPage.attributes" />
|
||||
<p>
|
||||
<FormattedMessage id="content-manager.containers.SettingPage.attributes.description" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-md-5">
|
||||
{this.getListDisplay().map((attr, index) => (
|
||||
<div key={attr.name} className={styles.draggedWrapper}>
|
||||
<div>{index}.</div>
|
||||
<div>{index + 1}.</div>
|
||||
<DraggableAttr
|
||||
index={index}
|
||||
isDraggingSibling={isDraggingSibling}
|
||||
@ -360,6 +388,7 @@ class SettingPage extends React.PureComponent {
|
||||
</ButtonDropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-7">
|
||||
<div className={styles.editWrapper}>
|
||||
<div className="row">
|
||||
@ -391,13 +420,59 @@ class SettingPage extends React.PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
description="content-manager.containers.SettingPage.editSettings.description"
|
||||
title="content-manager.containers.SettingPage.editSettings.title"
|
||||
>
|
||||
<div className="row">
|
||||
|
||||
<div className={cn('col-md-8', styles.draggedDescription, styles.edit_settings)}>
|
||||
<FormattedMessage id="content-manager.containers.SettingPage.attributes" />
|
||||
<div className={cn(styles.sort_wrapper, 'col-md-12')}>
|
||||
<div className="row">
|
||||
{/* GRID SORT */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.hasRelations() && (
|
||||
<div className={cn('col-md-4', styles.draggedDescription, styles.edit_settings)}>
|
||||
<FormattedMessage id="content-manager.containers.SettingPage.relations" />
|
||||
<div className={cn(styles.sort_wrapper, 'col-md-12')}>
|
||||
<div className="row">
|
||||
{this.getEditPageRelations().map((attr, index) => {
|
||||
return (
|
||||
<DraggableAttr
|
||||
index={index}
|
||||
isDraggingSibling={false}
|
||||
isEditing={false}
|
||||
key={attr}
|
||||
keys=""
|
||||
name={attr}
|
||||
label={attr}
|
||||
moveAttr={() => {}}
|
||||
onClickEditListItem={() => {}}
|
||||
onRemove={() => {}}
|
||||
updateSiblingHoverState={() => {}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,4 +125,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit_settings {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.sort_wrapper {
|
||||
margin-top: 7px;
|
||||
padding-top: 10px;
|
||||
border: 1px dashed #E3E9F3;
|
||||
> div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,10 @@
|
||||
"containers.SettingPage.addField": "Add new field",
|
||||
"containers.SettingPage.attributes": "Attributes fields",
|
||||
"containers.SettingPage.attributes.description": "Define the order of the attributes",
|
||||
"containers.SettingPage.relations": "Relational fields",
|
||||
|
||||
"containers.SettingPage.editSettings.description": "Drag & drop the fields to build the layout",
|
||||
"containers.SettingPage.editSettings.title": "Edit - Settings",
|
||||
|
||||
"containers.SettingPage.listSettings.title": "List — Settings",
|
||||
"containers.SettingPage.listSettings.description": "Configure the options for this content type",
|
||||
|
||||
@ -18,7 +18,13 @@
|
||||
"containers.SettingPage.addField": "Ajouter un nouveau champs",
|
||||
"containers.SettingPage.attributes": "Attributs",
|
||||
"containers.SettingPage.attributes.description": "Organiser les attributs du modèle",
|
||||
"containers.SettingPage.relations": "Champs relationnels",
|
||||
|
||||
"containers.SettingPage.pluginHeaderDescription": "Configurez les paramètres de ce modèle",
|
||||
|
||||
"containers.SettingPage.editSettings.description": "Glissez & déposez les champs pour construire le layout",
|
||||
"containers.SettingPage.editSettings.title": "Edit - Paramètres",
|
||||
|
||||
"containers.SettingPage.listSettings.title": "Liste — Paramètres",
|
||||
"containers.SettingPage.listSettings.description": "Configurez les options de ce modèle",
|
||||
|
||||
|
||||
@ -51,19 +51,26 @@ module.exports = async cb => {
|
||||
pageEntries: 10,
|
||||
defaultSort: model.primaryKey,
|
||||
sort: 'ASC',
|
||||
editDisplay: {
|
||||
fields: [],
|
||||
relations: [],
|
||||
},
|
||||
}, model);
|
||||
|
||||
// Fields (non relation)
|
||||
schemaModel.fields = _.mapValues(_.pickBy(model.attributes, attribute =>
|
||||
const fields = _.mapValues(_.pickBy(model.attributes, attribute =>
|
||||
!attribute.model && !attribute.collection
|
||||
), (value, attribute) => ({
|
||||
label: _.upperFirst(attribute),
|
||||
description: '',
|
||||
type: value.type || 'string',
|
||||
}));
|
||||
|
||||
schemaModel.fields = fields;
|
||||
schemaModel.editDisplay.fields = Object.keys(fields);
|
||||
|
||||
|
||||
// Select fields displayed in list view
|
||||
// schemaModel.list = _.slice(_.keys(schemaModel.fields), 0, 4);
|
||||
schemaModel.listDisplay = Object.keys(schemaModel.fields)
|
||||
// Construct Array of attr ex { type: 'string', label: 'Foo', name: 'Foo', description: '' }
|
||||
// NOTE: Do we allow sort on boolean?
|
||||
@ -103,6 +110,15 @@ module.exports = async cb => {
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
const relationsArray = Object.keys(schemaModel.relations).filter(relation => {
|
||||
const isUploadRelation = _.get(schemaModel, ['relations', relation, 'plugin'], '') === 'upload';
|
||||
const isMorphSide = _.get(schemaModel, ['relations', relation, 'nature'], '').toLowerCase().includes('morp') && _.get(schemaModel, ['relations', relation, relation]) !== undefined;
|
||||
|
||||
return !isUploadRelation && !isMorphSide;
|
||||
});
|
||||
|
||||
schemaModel.editDisplay.relations = relationsArray;
|
||||
|
||||
}
|
||||
|
||||
if (plugin) {
|
||||
|
||||
@ -1 +1,25 @@
|
||||
{}
|
||||
{
|
||||
"product": {
|
||||
"attributes": {
|
||||
"name": {
|
||||
"appearance": ""
|
||||
},
|
||||
"price": {
|
||||
"appearance": ""
|
||||
},
|
||||
"description": {
|
||||
"appearance": ""
|
||||
},
|
||||
"description_long": {
|
||||
"appearance": "WYSIWYG"
|
||||
}
|
||||
}
|
||||
},
|
||||
"tag": {
|
||||
"attributes": {
|
||||
"name": {
|
||||
"appearance": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -51,4 +51,4 @@
|
||||
"npm": ">= 5.0.0"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
@ -38,6 +38,10 @@
|
||||
"via": "users",
|
||||
"plugin": "users-permissions",
|
||||
"configurable": false
|
||||
},
|
||||
"products": {
|
||||
"collection": "product",
|
||||
"via": "users"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user