Commit fe575d64 authored by Oleksii Savran's avatar Oleksii Savran Committed by Maxym Borodenko

CMS UI with View mode

parent 966903dc
......@@ -2,6 +2,7 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core';
// actions
import { loadArticle, updateArticle, createGlobalArticle } from 'cms/actions/admin';
......@@ -13,6 +14,15 @@ import { log } from 'utilities/debug';
import { PageContents } from 'ui/layout/PageLayout';
import Grid from '@material-ui/core/Grid';
import ArticleForm from './c/ArticleForm';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import ActionButton from 'ui/common/buttons/ActionButton';
import ArticleSection from '../c/ArticleSection';
const styles = () => ({
article: {
maxWidth: '100%',
},
});
interface IArticleEditPageProps extends React.ClassAttributes<any> {
t: any;
......@@ -34,6 +44,10 @@ class ArticleEditPage extends React.Component<IArticleEditPageProps, any> {
({ params, state }) => loadArticle(state.applicationConfig.lang, params.slug, params.targetId, params.className),
];
private constructor(props, context) {
super(props, context);
this.state = { isEdit: true };
}
private onSave = (article: any) => {
const { slug, createGlobalArticle, updateArticle } = this.props;
......@@ -61,7 +75,8 @@ class ArticleEditPage extends React.Component<IArticleEditPageProps, any> {
}
public render() {
const { slug, t } = this.props;
const { slug, t, classes } = this.props;
const { isEdit } = this.state;
let { article } = this.props;
if (!article && !slug) {
......@@ -74,16 +89,28 @@ class ArticleEditPage extends React.Component<IArticleEditPageProps, any> {
}
return (
<PageContents className="pt-1rem pb-1rem">
<Grid item xs={ 12 }>
<ArticleForm
showIsTemplate={ !slug }
initialValues={ article }
onSubmit={ this.onSave }
t={ t }
<div>
<ContentHeaderWithButton title={ article.title } buttons={
<ActionButton
title={ isEdit ? t('common:action.view') : t('common:action.edit') }
action={ () => this.setState({ isEdit: !isEdit }) }
/>
</Grid>
</PageContents>
}/>
<PageContents className="pt-1rem pb-1rem">
<Grid item xs={ 12 }>
{ isEdit ? (
<ArticleForm
showIsTemplate={ !slug }
initialValues={ article }
onSubmit={ this.onSave }
t={ t }
/>
) : (
<ArticleSection article={ article } className={ classes.article }/>
) }
</Grid>
</PageContents>
</div>
);
}
......@@ -103,4 +130,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
createGlobalArticle,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(translate()(ArticleEditPage));
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(ArticleEditPage)));
......@@ -40,14 +40,15 @@ const styles = () => ({
interface IArticleSectionProps extends React.ClassAttributes<any> {
article: Article;
classes: any;
className?: string;
}
class ArticleSection extends React.Component<IArticleSectionProps> {
public render() {
const {article, classes} = this.props;
const {article, classes, className} = this.props;
return(
<Grid item xs={ 9 }>
<Grid item xs={ 9 } className={ className }>
<div className={ classes.root } dangerouslySetInnerHTML={ {__html: article.body} }/>
</Grid>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment