Merge pull request #1378 from weseek/fetch-customize-options

Fetch customize options

src/client/js/components/Admin/Common/AdminDropdownOption.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-class AdminDropdownOption extends React.PureComponent {
-
-  render() {
-
-    const menuItem = this.props.options.map((option) => {
-      return (
-        <li key={option} role="presentation" type="button" onClick={() => this.props.onChangeValue(option)}>
-          <a role="menuitem" tabIndex="-1">{option}</a>
-        </li>
-      );
-    });
-
-    return (
-      <div className="my-0 btn-group">
-        <label>{this.props.label}</label>
-        <div className="dropdown">
-          <button className="btn btn-default dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span className="pull-left">{this.props.selectedValue}</span>
-            <span className="bs-caret pull-right">
-              <span className="caret" />
-            </span>
-          </button>
-          {/* TODO adjust dropdown after BS4 */}
-          <ul className="dropdown-menu" role="menu">
-            {menuItem}
-          </ul>
-        </div>
-        {this.props.children}
-      </div>
-    );
-  }
-
-}
-
-AdminDropdownOption.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-
-  selectedValue: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
-  label: PropTypes.string.isRequired,
-  onChangeValue: PropTypes.func.isRequired,
-  options: PropTypes.array.isRequired,
-  children: PropTypes.object.isRequired,
-};
-
-export default withTranslation()(AdminDropdownOption);

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

@@ -20,9 +20,18 @@ class CustomizeCssSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeCss } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeCss || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -37,7 +46,7 @@ class CustomizeCssSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -50,7 +59,7 @@ class CustomizeCssSetting extends React.Component {
           <div className="col-xs-12">
             <CustomCssEditor
               // The value passed must be immutable
-              value={appContainer.config.customizeCss}
+              value={this.state.editorInputValue}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeCss(inputValue) }}
             />
           </div>

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

@@ -12,7 +12,6 @@ import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import CustomizeFunctionOption from './CustomizeFunctionOption';
-import AdminDropdownOption from '../Common/AdminDropdownOption';
 
 const logger = loggerFactory('growi:importer');
 
@@ -95,16 +94,32 @@ class CustomizeBehaviorSetting extends React.Component {
 
         <div className="form-group row">
           <div className="col-xs-offset-3 col-xs-6 text-left">
-            <AdminDropdownOption
-              label={t('customize_page.recent_created__n_draft_num_desc')}
-              selectedValue={adminCustomizeContainer.state.currentRecentCreatedLimit}
-              onChangeValue={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
-              options={[10, 30, 50]}
-            >
+            <div className="my-0 btn-group">
+              <label>{t('customize_page.recent_created__n_draft_num_desc')}</label>
+              <div className="dropdown">
+                <button className="btn btn-default dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <span className="pull-left">{adminCustomizeContainer.state.currentRecentCreatedLimit}</span>
+                  <span className="bs-caret pull-right">
+                    <span className="caret" />
+                  </span>
+                </button>
+                {/* TODO adjust dropdown after BS4 */}
+                <ul className="dropdown-menu" role="menu">
+                  <li key={10} role="presentation" type="button" onClick={() => { adminCustomizeContainer.switchRecentCreatedLimit(10) }}>
+                    <a role="menuitem">10</a>
+                  </li>
+                  <li key={30} role="presentation" type="button" onClick={() => { adminCustomizeContainer.switchRecentCreatedLimit(30) }}>
+                    <a role="menuitem">30</a>
+                  </li>
+                  <li key={50} role="presentation" type="button" onClick={() => { adminCustomizeContainer.switchRecentCreatedLimit(50) }}>
+                    <a role="menuitem">50</a>
+                  </li>
+                </ul>
+              </div>
               <p className="help-block">
                 { t('customize_page.recently_created_n_draft_num_desc') }
               </p>
-            </AdminDropdownOption>
+            </div>
           </div>
         </div>
 

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

@@ -20,9 +20,18 @@ class CustomizeHeaderSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeHeader } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeHeader || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -37,7 +46,7 @@ class CustomizeHeaderSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -59,8 +68,8 @@ class CustomizeHeaderSetting extends React.Component {
 
         <div className="col-xs-12">
           <CustomHeaderEditor
-              // The value passed must be immutable
-            value={appContainer.config.customizeHeader}
+            // The value passed must be immutable
+            value={this.state.editorInputValue}
             onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeHeader(inputValue) }}
           />
         </div>

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

@@ -20,9 +20,18 @@ class CustomizeScriptSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      editorInputValue: '',
+    };
+
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { customizeScript } = this.props.appContainer.getConfig();
+    this.setState({ editorInputValue: customizeScript || '' });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -45,7 +54,7 @@ class CustomizeScriptSetting extends React.Component {
   }
 
   render() {
-    const { t, appContainer, adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -81,7 +90,7 @@ class CustomizeScriptSetting extends React.Component {
           <div className="col-xs-12">
             <CustomScriptEditor
               // The value passed must be immutable
-              value={appContainer.config.customizeScript}
+              value={this.state.editorInputValue}
               onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
             />
           </div>

src/client/js/services/AdminCustomizeContainer.js

@@ -19,19 +19,19 @@ export default class AdminCustomizeContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      // TODO GW-575 set data from apiV3
-      currentTheme: appContainer.config.themeType,
-      currentLayout: appContainer.config.layoutType,
-      currentBehavior: appContainer.config.behaviorType,
-      isEnabledTimeline: appContainer.config.isEnabledTimeline,
-      isSavedStatesOfTabChanges: appContainer.config.isSavedStatesOfTabChanges,
-      isEnabledAttachTitleHeader: appContainer.config.isEnabledAttachTitleHeader,
-      currentRecentCreatedLimit: appContainer.config.recentCreatedLimit,
-      currentHighlightJsStyleId: appContainer.config.highlightJsStyle,
-      isHighlightJsStyleBorderEnabled: appContainer.config.highlightJsStyleBorder,
-      currentCustomizeHeader: appContainer.config.customizeHeader,
-      currentCustomizeCss: appContainer.config.customizeCss,
-      currentCustomizeScript: appContainer.config.customizeScript,
+      currentTheme: '',
+      currentLayout: '',
+      currentBehavior: '',
+      isEnabledTimeline: true,
+      isSavedStatesOfTabChanges: true,
+      isEnabledAttachTitleHeader: true,
+      currentRecentCreatedLimit: 10,
+      currentHighlightJsStyleId: '',
+      isHighlightJsStyleBorderEnabled: true,
+      currentCustomizeTitle: '',
+      currentCustomizeHeader: '',
+      currentCustomizeCss: '',
+      currentCustomizeScript: '',
       /* eslint-disable quote-props, no-multi-spaces */
       highlightJsCssSelectorOptions: {
         'github':           { name: '[Light] GitHub',         border: false },
@@ -63,10 +63,28 @@ export default class AdminCustomizeContainer extends Container {
    * retrieve customize data
    */
   async init() {
-    // TODO GW-575 fetch data with apiV3
     try {
+      const response = await this.appContainer.apiv3.get('/customize-setting/');
+      const { customizeParams } = response.data;
+
+      this.setState({
+        currentTheme: customizeParams.themeType,
+        currentLayout: customizeParams.layoutType,
+        currentBehavior: customizeParams.behaviorType,
+        isEnabledTimeline: customizeParams.isEnabledTimeline,
+        isSavedStatesOfTabChanges: customizeParams.isSavedStatesOfTabChanges,
+        isEnabledAttachTitleHeader: customizeParams.isEnabledAttachTitleHeader,
+        currentRecentCreatedLimit: customizeParams.recentCreatedLimit,
+        currentHighlightJsStyleId: customizeParams.styleName,
+        isHighlightJsStyleBorderEnabled: customizeParams.styleBorder,
+        currentCustomizeTitle: customizeParams.customizeTitle,
+        currentCustomizeHeader: customizeParams.customizeHeader,
+        currentCustomizeCss: customizeParams.customizeCss,
+        currentCustomizeScript: customizeParams.customizeScript,
+      });
+
       // search style name from object for display
-      this.setState({ currentHighlightJsStyleName: this.state.highlightJsCssSelectorOptions[this.state.currentHighlightJsStyleId].name });
+      this.setState({ currentHighlightJsStyleName: this.state.highlightJsCssSelectorOptions[customizeParams.styleName].name });
     }
     catch (err) {
       logger.error(err);
@@ -74,16 +92,6 @@ export default class AdminCustomizeContainer extends Container {
     }
   }
 
-  /**
-   * Fetch highLight theme
-   */
-  async fetchHighLightTheme() {
-    const response = await this.appContainer.apiv3.get('/customize-setting/');
-    this.setState({
-      highlightJsCssSelectorOptions: response.data.highlightJsCssSelectorOptions,
-    });
-  }
-
   /**
    * Switch layoutType
    */

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

@@ -21,45 +21,46 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *
  *  components:
  *    schemas:
- *      CustomizeLayoutTheme:
+ *      CustomizeParams:
  *        type: object
- *        properties:
- *          layoutType:
- *            type: string
- *          themeType:
- *            type: string
- *      CustomizeBehavior:
- *        type: object
- *          behaviorType
- *            type: string
- *      CustomizeFunction:
- *        type: object
- *          isEnabledTimeline:
- *            type: boolean
- *          isSavedStatesOfTabChanges:
- *            type: boolean
- *          isEnabledAttachTitleHeader:
- *            type: boolean
- *          recentCreatedLimit:
- *            type: number
- *      CustomizeHighlight:
- *        type: object
- *          styleName:
- *            type: string
- *          styleBorder:
- *            type: boolean
- *      CustomizeHeader:
- *        type: object
- *          customizeHeader:
- *            type: string
- *      CustomizeCss:
- *        type: object
- *          customizeCss:
- *            type: string
- *      CustomizeScript:
- *        type: object
- *          customizeScript:
- *            type: string
+ *          CustomizeLayoutTheme:
+ *            type: object
+ *              layoutType:
+ *                type: string
+ *              themeType:
+ *                type: string
+ *          CustomizeBehavior:
+ *            type: object
+ *              behaviorType
+ *                type: string
+ *          CustomizeFunction:
+ *            type: object
+ *              isEnabledTimeline:
+ *                type: boolean
+ *              isSavedStatesOfTabChanges:
+ *                type: boolean
+ *              isEnabledAttachTitleHeader:
+ *                type: boolean
+ *              recentCreatedLimit:
+ *                type: number
+ *          CustomizeHighlight:
+ *            type: object
+ *              styleName:
+ *                type: string
+ *              styleBorder:
+ *                type: boolean
+ *          CustomizeHeader:
+ *            type: object
+ *              customizeHeader:
+ *                type: string
+ *          CustomizeCss:
+ *            type: object
+ *              customizeCss:
+ *                type: string
+ *          CustomizeScript:
+ *            type: object
+ *              customizeScript:
+ *                type: string
  */
 module.exports = (crowi) => {
   const loginRequiredStrictly = require('../../middleware/login-required')(crowi);
@@ -101,11 +102,42 @@ module.exports = (crowi) => {
     ],
   };
 
-  // TODO GW-575 writte swagger
+  /**
+   * @swagger
+   *
+   *    /customize-setting/:
+   *      get:
+   *        tags: [CustomizeSetting]
+   *        description: Get customize paramators
+   *        responses:
+   *          200:
+   *            description: params of customize
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    customizedParams:
+   *                      $ref: '#/components/schemas/CustomizeParams'
+   */
   router.get('/', loginRequiredStrictly, adminRequired, async(req, res) => {
 
-    // TODO GW-575 return others customize settings
-    return res.apiv3();
+    const customizeParams = {
+      layoutType: await crowi.configManager.getConfig('crowi', 'customize:layout'),
+      themeType: await crowi.configManager.getConfig('crowi', 'customize:theme'),
+      behaviorType: await crowi.configManager.getConfig('crowi', 'customize:behavior'),
+      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'),
+      styleName: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyle'),
+      styleBorder: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
+      customizeTitle: await crowi.configManager.getConfig('crowi', 'customize:title'),
+      customizeHeader: await crowi.configManager.getConfig('crowi', 'customize:header'),
+      customizeCss: await crowi.configManager.getConfig('crowi', 'customize:header'),
+      customizeScript: await crowi.configManager.getConfig('crowi', 'customize:script'),
+    };
+
+    return res.apiv3({ customizeParams });
   });
 
   /**
@@ -136,7 +168,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeLayoutTheme'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeLayoutTheme'
    */
   router.put('/layoutTheme', loginRequiredStrictly, adminRequired, csrf, validator.layoutTheme, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -184,7 +216,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeBehavior'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeBehavior'
    */
   router.put('/behavior', loginRequiredStrictly, adminRequired, csrf, validator.behavior, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -239,7 +271,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeFunction'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeFunction'
    */
   router.put('/function', loginRequiredStrictly, adminRequired, csrf, validator.function, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -294,7 +326,7 @@ module.exports = (crowi) => {
    *                schema:
    *                  properties:
    *                    customizedParams:
-   *                      $ref: '#/components/schemas/CustomizeHighlight'
+   *                      $ref: '#/components/schemas/CustomizeParams/CustomizeHighlight'
    */
   router.put('/highlight', loginRequiredStrictly, adminRequired, csrf, validator.highlight, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -342,7 +374,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeHeader'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeHeader'
    */
   router.put('/customize-header', loginRequiredStrictly, adminRequired, csrf, validator.customizeHeader, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -351,7 +383,7 @@ module.exports = (crowi) => {
     try {
       await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
       const customizedParams = {
-        customizeCss: await crowi.configManager.getConfig('crowi', 'customize:header'),
+        customizeHeader: await crowi.configManager.getConfig('crowi', 'customize:header'),
       };
       return res.apiv3({ customizedParams });
     }
@@ -387,7 +419,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeCss'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeCss'
    */
   router.put('/customize-css', loginRequiredStrictly, adminRequired, csrf, validator.customizeCss, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -432,7 +464,7 @@ module.exports = (crowi) => {
    *              schema:
    *                properties:
    *                  customizedParams:
-   *                    $ref: '#/components/schemas/CustomizeScript'
+   *                    $ref: '#/components/schemas/CustomizeParams/CustomizeScript'
    */
   router.put('/customize-script', loginRequiredStrictly, adminRequired, csrf, validator.customizeScript, ApiV3FormValidator, async(req, res) => {
     const requestParams = {