Created Edit and EditRelations components

This commit is contained in:
cyril lopez 2018-02-21 15:33:58 +01:00
parent 77b660fb36
commit 1db543653a
12 changed files with 112 additions and 8 deletions

View File

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

View File

@ -0,0 +1,4 @@
.form { /* stylelint-disable */
width: 100%;
padding: 0 15px;
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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,
);

View File

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

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",