mirror of
https://github.com/strapi/strapi.git
synced 2025-12-12 15:32:42 +00:00
Created Edit and EditRelations components
This commit is contained in:
parent
77b660fb36
commit
1db543653a
@ -0,0 +1,20 @@
|
||||
/**
|
||||
*
|
||||
* Edit
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styles from './styles.scss';
|
||||
|
||||
function Edit() {
|
||||
return (
|
||||
<div className={styles.form}>
|
||||
<div className="row">
|
||||
init
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Edit;
|
||||
@ -0,0 +1,4 @@
|
||||
.form { /* stylelint-disable */
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/**
|
||||
*
|
||||
* EditRelations
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import styles from './styles.scss';
|
||||
|
||||
function EditRelations() {
|
||||
return (
|
||||
<div className={styles.editFormRelations}>
|
||||
<FormattedMessage id="content-manager.EditRelations.title">
|
||||
{(message) => <h3>{message}</h3>}
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditRelations;
|
||||
@ -0,0 +1,13 @@
|
||||
.editFormRelations { /* stylelint-disable */
|
||||
h3{
|
||||
height: 41px;
|
||||
margin: 0 -25px 14px;
|
||||
padding: 0 25px;
|
||||
background: #F3F3F3;
|
||||
line-height: 41px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
letter-spacing: 0.03rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -9,6 +9,7 @@ import {
|
||||
GET_DATA,
|
||||
GET_DATA_SUCCEEDED,
|
||||
INIT_MODEL_PROPS,
|
||||
RESET_PROPS,
|
||||
} from './constants';
|
||||
|
||||
export function changeData({ target }) {
|
||||
@ -49,3 +50,9 @@ export function initModelProps(modelName, isCreating, source, attributes) {
|
||||
form,
|
||||
};
|
||||
}
|
||||
|
||||
export function resetProps() {
|
||||
return {
|
||||
type: RESET_PROPS,
|
||||
};
|
||||
}
|
||||
|
||||
@ -8,3 +8,4 @@ export const CHANGE_DATA = 'ContentManager/EditPage/CHANGE_DATA';
|
||||
export const GET_DATA = 'ContentManager/EditPage/GET_DATA';
|
||||
export const GET_DATA_SUCCEEDED = 'ContentManager/EditPage/GET_DATA_SUCCEEDED';
|
||||
export const INIT_MODEL_PROPS = 'ContentManager/EditPage/INIT_MODEL_PROPS';
|
||||
export const RESET_PROPS = 'ContentManager/EditPage/RESET_PROPS';
|
||||
|
||||
@ -10,7 +10,7 @@ import { connect } from 'react-redux';
|
||||
import { bindActionCreators, compose } from 'redux';
|
||||
import { createStructuredSelector } from 'reselect';
|
||||
import PropTypes from 'prop-types';
|
||||
import { get, toNumber, toString } from 'lodash';
|
||||
import { get, toNumber, toString, size } from 'lodash';
|
||||
import cn from 'classnames';
|
||||
|
||||
// You can find these components in either
|
||||
@ -19,6 +19,10 @@ import cn from 'classnames';
|
||||
import BackHeader from 'components/BackHeader';
|
||||
import PluginHeader from 'components/PluginHeader';
|
||||
|
||||
// Plugin's components
|
||||
import Edit from 'components/Edit';
|
||||
import EditRelations from 'components/EditRelations';
|
||||
|
||||
// App selectors
|
||||
import { makeSelectModels, makeSelectSchema } from 'containers/App/selectors';
|
||||
|
||||
@ -35,6 +39,7 @@ import {
|
||||
changeData,
|
||||
getData,
|
||||
initModelProps,
|
||||
resetProps,
|
||||
} from './actions';
|
||||
|
||||
import reducer from './reducer';
|
||||
@ -56,6 +61,10 @@ export class EditPage extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.resetProps();
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrive the model
|
||||
* @type {Object}
|
||||
@ -116,6 +125,8 @@ export class EditPage extends React.Component {
|
||||
|
||||
isCreating = () => this.props.match.params.id === 'create';
|
||||
|
||||
isRelationComponentNull = () => size(get(this.getSchema(), 'relations')) === 0;
|
||||
|
||||
pluginHeaderActions = [
|
||||
{
|
||||
label: 'content-manager.containers.Edit.reset',
|
||||
@ -136,13 +147,27 @@ export class EditPage extends React.Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BackHeader onClick={() => this.props.history.goBack()} />
|
||||
<div className={cn('container-fluid', styles.containerFluid)}>
|
||||
<PluginHeader
|
||||
actions={this.pluginHeaderActions}
|
||||
title={{ id: toString(editPage.pluginHeaderTitle) }}
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={(e) => { e.preventDefault(); }}>
|
||||
<BackHeader onClick={() => this.props.history.goBack()} />
|
||||
<div className={cn('container-fluid', styles.containerFluid)}>
|
||||
<PluginHeader
|
||||
actions={this.pluginHeaderActions}
|
||||
title={{ id: toString(editPage.pluginHeaderTitle) }}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className={this.isRelationComponentNull() ? 'col-lg-12' : 'col-lg-9'}>
|
||||
<div className={styles.main_wrapper}>
|
||||
<Edit />
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn('col-lg-3', this.isRelationComponentNull() ? 'hidden-xl-down' : '')}>
|
||||
<div className={styles.sub_wrapper}>
|
||||
<EditRelations />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -165,6 +190,7 @@ EditPage.propTypes = {
|
||||
location: PropTypes.object.isRequired,
|
||||
match: PropTypes.object.isRequired,
|
||||
models: PropTypes.object,
|
||||
resetProps: PropTypes.func.isRequired,
|
||||
schema: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
@ -174,6 +200,7 @@ function mapDispatchToProps(dispatch) {
|
||||
changeData,
|
||||
getData,
|
||||
initModelProps,
|
||||
resetProps,
|
||||
},
|
||||
dispatch,
|
||||
);
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
CHANGE_DATA,
|
||||
GET_DATA_SUCCEEDED,
|
||||
INIT_MODEL_PROPS,
|
||||
RESET_PROPS,
|
||||
} from './constants';
|
||||
|
||||
const initialState = fromJS({
|
||||
@ -36,6 +37,8 @@ function editPageReducer(state = initialState, action) {
|
||||
.update('isCreating', () => action.isCreating)
|
||||
.update('modelName', () => action.modelName)
|
||||
.update('source', () => action.source);
|
||||
case RESET_PROPS:
|
||||
return initialState;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
"components.LimitSelect.itemsPerPage": "Einträge pro Seite",
|
||||
"containers.List.errorFetchRecords": "Fehler",
|
||||
|
||||
"EditRelations.title": "Relational data",
|
||||
|
||||
"emptyAttributes.title": "Es gibt noch keine Felder",
|
||||
"emptyAttributes.description": "Füge deinem Content-Typen das erste Feld hinzu",
|
||||
"emptyAttributes.button": "Den Content-Typ-Generator öffnen",
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
"components.LimitSelect.itemsPerPage": "Items per page",
|
||||
"containers.List.errorFetchRecords": "Error",
|
||||
|
||||
"EditRelations.title": "Relational data",
|
||||
|
||||
"emptyAttributes.title": "There are no fields yet",
|
||||
"emptyAttributes.description": "Add your first field to your Content Type",
|
||||
"emptyAttributes.button": "Go to content type builder",
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
"components.LimitSelect.itemsPerPage": "Éléments par page",
|
||||
"containers.List.errorFetchRecords": "Erreur",
|
||||
|
||||
"EditRelations.title": "Donées associées",
|
||||
|
||||
"emptyAttributes.title": "Il n'y a pas encore de champs",
|
||||
"emptyAttributes.description": "Ajoutez votre premier champ a votre modèle",
|
||||
"emptyAttributes.button": "Ouvrir le Content Type Builder",
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
"components.LimitSelect.itemsPerPage": "Wpisów na stronę",
|
||||
"containers.List.errorFetchRecords": "Błąd",
|
||||
|
||||
"EditRelations.title": "Relational data",
|
||||
|
||||
"emptyAttributes.title": "Nie ma jeszcze żadnych atrybutów",
|
||||
"emptyAttributes.description": "Dodaj swoje pierwszy atrybut do modelu",
|
||||
"emptyAttributes.button": "Przejdź do konstruktora modeli",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user