Merge pull request #1211 from weseek/imprv/reactify-admin-customize

Imprv/reactify admin customize

src/client/js/app.jsx

@@ -40,6 +40,7 @@ import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import MarkdownSetting from './components/Admin/MarkdownSetting/MarkDownSetting';
 import UserPage from './components/Admin/Users/Users';
 import UserGroupPage from './components/Admin/UserGroup/UserGroupPage';
+import Customize from './components/Admin/Customize/Customize';
 import Importer from './components/Admin/Importer';
 import FullTextSearchManagement from './components/Admin/FullTextSearchManagement/FullTextSearchPage';
 
@@ -105,6 +106,7 @@ let componentMappings = {
   'admin-markdown-setting': <MarkdownSetting />,
   'admin-user-page': <UserPage />,
   'admin-full-text-search-management': <FullTextSearchManagement />,
+  'admin-customize': <Customize />,
 
   'staff-credit': <StaffCredit />,
   'admin-importer': <Importer />,

src/client/js/components/Admin/Customize/Customize.jsx

@@ -0,0 +1,51 @@
+
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import AppContainer from '../../../services/AppContainer';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+class Customize extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        {/* fieldset + legend ではなく、row + header + フォームコンポーネントに書き換える(GC244着手時に対応) */}
+        <fieldset>
+          <legend>{t('customize_page.Layout')}</legend>
+          {/* レイアウトフォームの react componentをここで呼ぶ(GW-244) */}
+          <legend>{t('customize_page.Theme')}</legend>
+          {/* テーマフォームの react componentをここで呼ぶ(GW-245) */}
+          <legend>{t('customize_page.Behavior')}</legend>
+          {/* 挙動フォームの react componentをここで呼ぶ(GW-246) */}
+          <legend>{t('customize_page.Function')}</legend>
+          {/* 機能フォームの react componentをここで呼ぶ(GW-276) */}
+          <legend>{t('customize_page.Code Highlight')}</legend>
+          {/* コードハイライトフォームの react componentをここで呼ぶ(GW-277) */}
+          <legend>{t('customize_page.custom_title')}</legend>
+          {/* カスタムタイトルフォームの react componentをここで呼ぶ(GW-278) */}
+          <legend>{t('customize_page.Custom CSS')}</legend>
+          {/* カスタムCSSフォームの react componentをここで呼ぶ(GW-279) */}
+          <legend>{t('customize_page.Custom script')}</legend>
+          {/* カスタムスクリプトフォームの react componentをここで呼ぶ(GW-280) */}
+        </fieldset>
+      </Fragment>
+    );
+  }
+
+}
+
+const CustomizeWrapper = (props) => {
+  return createSubscribedElement(Customize, props, [AppContainer]);
+};
+
+Customize.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(CustomizeWrapper);

src/server/views/admin/customize.html

@@ -51,7 +51,11 @@
       {% include './widget/menu.html' with {current: 'customize'} %}
     </div>
     <div class="col-md-9">
-      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="customlayoutSettingForm" role="form">
+
+      <div id="admin-customize"></div>
+
+      <!-- 以下、念の為削除せずコメントアウト。GW-176終了時には消す -->
+      <!-- <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="customlayoutSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Layout') }}</legend>
         <div class="form-group">
@@ -519,13 +523,13 @@ window.addEventListener('load', (event) => {
         </div>
 
       </fieldset>
-      </form>
+      </form> -->
 
     </div>
   </div>
 {% endblock content_main %}
 
-{% block body_end %}
+<!-- {% block body_end %}
   {% parent %}
   <script>
     $(`#customlayoutSettingForm, #custombehaviorSettingForm, #customhighlightJsStyleSettingForm,
@@ -646,7 +650,7 @@ window.addEventListener('load', (event) => {
   </script>
 
 </div>
-{% endblock %}
+{% endblock %} -->
 
 {% block content_footer %}
 {% endblock content_footer %}