Merge branch 'reactify-admin/CustomizePage' into create-custom-script-setting-frontside

# Conflicts:
#	resource/locales/en-US/translation.json
#	resource/locales/ja/translation.json

resource/locales/en-US/translation.json

@@ -649,6 +649,7 @@
   },
 
   "customize_page": {
+    "recommended":"Recommended",
     "Behavior": "Behavior",
     "Layout": "Layout",
     "Function": "Function",
@@ -680,7 +681,21 @@
     "update_layout_success": "Succeeded to update layout",
     "update_behavior_success": "Succeeded to update behavior",
     "update_function_success": "Succeeded to update function",
-    "update_script_success": "Succeeded to update custom script"
+    "update_script_success": "Succeeded to update custom script",
+    "layout_description":{
+      "growi_title":"Simple and Clear",
+      "growi_text1":"Full screen layout and thin margins/paddings",
+      "growi_text2":"Show and post comments at the bottom of the page",
+      "growi_text3":"Affix Table-of-contents",
+      "kibela_title":"Easy Viewing Structure",
+      "kibela_text1":"Center aligned contents",
+      "kibela_text2":"Show and post comments at the bottom of the page",
+      "kibela_text3":"Affix Table-of-contents",
+      "crowi_title":"Separated Functions",
+      "crowi_text1":"Collapsible Sidebar",
+      "crowi_text2":"Show and post comments in Sidebar",
+      "crowi_text3":"Collapsible Table-of-contents"
+    }
   },
 
   "user_management": {

resource/locales/ja/translation.json

@@ -633,7 +633,8 @@
   },
 
   "customize_page": {
-    "Behavior": "挙動",
+    "recommended":"おすすめ",
+    "Behavior": "動作",
     "Layout": "レイアウト",
     "Function": "機能",
     "function_choose": "機能の有効/無効を選択できます。",
@@ -662,9 +663,23 @@
     "recent_created__n_draft_num_desc": "最近作成したページと下書きの表示数",
     "recently_created_n_draft_num_desc": "ホーム画面の Recently Created での、1ページの表示数を設定します。",
     "update_layout_success": "レイアウトを更新しました",
-    "update_behavior_success": "挙動を更新しました",
+    "update_behavior_success": "動作を更新しました",
     "update_function_success": "機能を更新しました",
-    "update_script_success": "カスタムスクリプトを更新しました"
+    "update_script_success": "カスタムスクリプトを更新しました",
+    "layout_description":{
+      "growi_title":"シンプル・明瞭",
+      "growi_text1":"全画面レイアウトで、余白は少なくなります。",
+      "growi_text2":"コメントはページの下部に表示されます。",
+      "growi_text3":"ページ情報は下部に表示されます。",
+      "kibela_title":"閲覧重視の構造",
+      "kibela_text1":"コンテンツが中心に表示されます。",
+      "kibela_text2":"コメントはページの下部に表示されます。",
+      "kibela_text3":"ページ情報は下部に表示されます。",
+      "crowi_title":"ビュー・コントロールの分離",
+      "crowi_text1":"サイドバーを開くと情報が表示されます。",
+      "crowi_text2":"コメントはサイドバーに表示されます。",
+      "crowi_text3":"ページ情報はサイドバーに表示されます。"
+    }
   },
 
   "user_management": {

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

@@ -11,7 +11,7 @@ import CustomizeLayoutOption from './CustomizeLayoutOption';
 class CustomizeLayoutOptions extends React.Component {
 
   render() {
-    const { adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <div className="row">
@@ -20,14 +20,13 @@ class CustomizeLayoutOptions extends React.Component {
             layoutType="crowi-plus"
             isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
             onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
-            labelHtml={'GROWI Enhanced Layout <small class="text-success">(Recommended)</small>'}
+            labelHtml={`GROWI Enhanced Layout <small class="text-success">${t('customize_page.recommended')}</small>`}
           >
-            {/* TODO i18n */}
-            <h4>Simple and Clear</h4>
+            <h4>{t('customize_page.layout_description.growi_title')}</h4>
             <ul>
-              <li>Full screen layout and thin margins/paddings</li>
-              <li>Show and post comments at the bottom of the page</li>
-              <li>Affix Table-of-contents</li>
+              <li>{t('customize_page.layout_description.growi_text1')}</li>
+              <li>{t('customize_page.layout_description.growi_text2')}</li>
+              <li>{t('customize_page.layout_description.growi_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>
@@ -39,12 +38,11 @@ class CustomizeLayoutOptions extends React.Component {
             onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
             labelHtml="Kibela Like Layout"
           >
-            {/* TODO i18n */}
-            <h4>Easy Viewing Structure</h4>
+            <h4>{t('customize_page.layout_description.kibela_title')}</h4>
             <ul>
-              <li>Center aligned contents</li>
-              <li>Show and post comments at the bottom of the page</li>
-              <li>Affix Table-of-contents</li>
+              <li>{t('customize_page.layout_description.kibela_text1')}</li>
+              <li>{t('customize_page.layout_description.kibela_text2')}</li>
+              <li>{t('customize_page.layout_description.kibela_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>
@@ -56,12 +54,11 @@ class CustomizeLayoutOptions extends React.Component {
             onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
             labelHtml="Crowi Classic Layout"
           >
-            {/* TODO i18n */}
-            <h4>Separated Functions</h4>
+            <h4>{t('customize_page.layout_description.crowi_title')}</h4>
             <ul>
-              <li>Collapsible Sidebar</li>
-              <li>Show and post comments in Sidebar</li>
-              <li>Collapsible Table-of-contents</li>
+              <li>{t('customize_page.layout_description.crowi_text1')}</li>
+              <li>{t('customize_page.layout_description.crowi_text2')}</li>
+              <li>{t('customize_page.layout_description.crowi_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>

src/client/js/services/AdminCustomizeContainer.js

@@ -124,7 +124,14 @@ export default class AdminCustomizeContainer extends Container {
    * @return {string} Functions
    */
   async updateCustomizeFunction() {
-    // TODO GW-506 create apiV3
+    const response = await this.appContainer.apiv3.put('/customize-setting/function', {
+      isEnabledTimeline: this.state.isEnabledTimeline,
+      isSavedStatesOfTabChanges: this.state.isSavedStatesOfTabChanges,
+      isEnabledAttachTitleHeader: this.state.isEnabledAttachTitleHeader,
+      recentCreatedLimit: this.state.currentRecentCreatedLimit,
+    });
+    const { customizedParams } = response.data;
+    return customizedParams;
   }
 
   /**

src/server/routes/apiv3/customize-setting.js

@@ -25,10 +25,22 @@ module.exports = (crowi) => {
 
   const { ApiV3FormValidator } = crowi.middlewares;
 
-  validator.layoutTheme = [
-    body('layoutType').isString(),
-    body('themeType').isString(),
-  ];
+  // TODO GW-533 implement accurate validation
+  const validator = {
+    layoutTheme: [
+      body('layoutType').isString(),
+      body('themeType').isString(),
+    ],
+    behavior: [
+      body('behaviorType').isString(),
+    ],
+    function: [
+      body('isEnabledTimeline').isBoolean(),
+      body('isSavedStatesOfTabChanges').isBoolean(),
+      body('isEnabledAttachTitleHeader').isBoolean(),
+      body('recentCreatedLimit').isInt(),
+    ],
+  };
 
   /**
    * @swagger
@@ -75,10 +87,6 @@ module.exports = (crowi) => {
     }
   });
 
-  validator.behavior = [
-    body('behaviorType').isString(),
-  ];
-
   /**
    * @swagger
    *
@@ -119,5 +127,60 @@ module.exports = (crowi) => {
     }
   });
 
+  /**
+   * @swagger
+   *
+   *    /customize-setting/function:
+   *      put:
+   *        tags: [CustomizeSetting]
+   *        description: Update function
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schama:
+   *                type: object
+   *                properties:
+   *                  isEnabledTimeline:
+   *                    description: is enabled timeline
+   *                    type: boolean
+   *                  isSavedStatesOfTabChanges:
+   *                    description: is saved states of tabChanges
+   *                    type: boolean
+   *                  isEnabledAttachTitleHeader:
+   *                    description: is enabled attach titleHeader
+   *                    type: boolean
+   *                  recentCreatedLimit:
+   *                    description: limit of recent created
+   *                    type: number
+   *      responses:
+   *          200:
+   *            description: Succeeded to update function
+   */
+  router.put('/function', loginRequiredStrictly, adminRequired, csrf, validator.function, ApiV3FormValidator, async(req, res) => {
+    const requestParams = {
+      'customize:isEnabledTimeline': req.body.isEnabledTimeline,
+      'customize:isSavedStatesOfTabChanges': req.body.isSavedStatesOfTabChanges,
+      'customize:isEnabledAttachTitleHeader': req.body.isEnabledAttachTitleHeader,
+      'customize:showRecentCreatedNumber': req.body.recentCreatedLimit,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
+      const customizedParams = {
+        isEnabledTimeline: await crowi.configManager.getConfig('crowi', 'customize:isEnabledTimeline'),
+        isSavedStatesOfTabChanges: await crowi.configManager.getConfig('crowi', 'customize:isSavedStatesOfTabChanges'),
+        isEnabledAttachTitleHeader: await crowi.configManager.getConfig('crowi', 'customize:isEnabledAttachTitleHeader'),
+        recentCreatedLimit: await crowi.configManager.getConfig('crowi', 'customize:showRecentCreatedNumber'),
+      };
+      return res.apiv3({ customizedParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating function';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-function-failed'));
+    }
+  });
+
   return router;
 };