CMS UI with View mode

src/cms/ui/admin/EditPage.tsx

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

src/cms/ui/c/ArticleSection.tsx

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