Merge pull request #1092 from weseek/reactify-admin-importer

Reactify admin importer

src/client/js/app.js

@@ -39,6 +39,7 @@ import CustomScriptEditor from './components/Admin/CustomScriptEditor';
 import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import UserGroupPage from './components/Admin/UserGroup/UserGroupPage';
+import Importer from './components/Admin/Importer';
 import FullTextSearchManagement from './components/Admin/FullTextSearchManagement/FullTextSearchPage';
 
 import AppContainer from './services/AppContainer';
@@ -192,6 +193,14 @@ if (adminUserGroupPageElem != null) {
   );
 }
 
+const adminImporterElem = document.getElementById('admin-importer');
+if (adminImporterElem != null) {
+  ReactDOM.render(
+    <Importer />,
+  );
+}
+
+
 const adminFullTextSearchManagementElem = document.getElementById('admin-full-text-search-management');
 if (adminFullTextSearchManagementElem != null) {
 

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

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+
+class Importer extends React.Component {
+
+  constructor(props) {
+    super();
+  }
+
+  render() {
+    return (
+      <Fragment>
+      </Fragment>
+    );
+  }
+
+}
+
+export default Importer;

src/server/views/admin/importer.html

@@ -1,276 +1,11 @@
-{% extends '../layout/admin.html' %}
-
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Import Data')) }}{% endblock %}
-
-{% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Import Data') }}</h1>
-  </header>
-</div>
-{% endblock %}
-
-{% block content_main %}
-<div class="content-main admin-importer">
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'importer'} %}
-    </div>
-    <div class="col-lg-7 col-md-9">
-
-      <!-- Flash message for success -->
-      {% set smessage = req.flash('successMessage') %}
-      {% if smessage.length %}
-      <div class="alert alert-success">
-        {% for e in smessage %}
-          {{ e }}<br>
-        {% endfor %}
-      </div>
-      {% endif %}
-
-      <!-- Flash message for error -->
-      {% set emessage = req.flash('errorMessage') %}
-      {% if emessage.length %}
-      <div class="alert alert-danger">
-        {% for e in emessage %}
-        {{ e }}<br>
-        {% endfor %}
-      </div>
-      {% endif %}
-
-      <!-- esa Importer management forms -->
-      <form action="/_api/admin/settings/importerEsa" method="post" class="form-horizontal" id="importerSettingFormEsa" role="form"
-          data-success-messaage="{{ ('Updated') }}">
-        <fieldset>
-          <legend>{{ t('importer_management.import_from', 'esa.io') }}</legend>
-          <table class="table table-bordered table-mapping">
-            <thead>
-              <tr>
-                <th width="45%">esa.io</th>
-                <th width="10%"></th>
-                <th>GROWI</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th>{{ t('Article') }}</th>
-                <th><i class="icon-arrow-right-circle text-success"></i></th>
-                <th>{{ t('Page') }}</th>
-              </tr>
-              <tr>
-                <th>{{ t('Category') }}</th>
-                <th><i class="icon-arrow-right-circle text-success"></i></th>
-                <th>{{ t('Page Path') }}</th>
-              </tr>
-              <tr>
-                <th>{{ t('User') }}</th>
-                <th></th>
-                <th>(TBD)</th>
-              </tr>
-            </tbody>
-          </table>
-          <div class="well well-sm mb-0 small">
-            <ul>
-              <li>{{ t("importer_management.page_skip") }}</li>
-            </ul>
-          </div>
-          <div class="form-group">
-            <input type="password" name="dummypass" style="display:none; top: -100px; left: -100px;" />
-          </div>
-          <div class="form-group">
-            <label for="settingForm[importer:esa:team_name]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.team_name') }}</label>
-            <div class="col-xs-6">
-              <input class="form-control" type="text" name="settingForm[importer:esa:team_name]" value="{{ settingForm['importer:esa:team_name'] | default('') }}">
-            </div>
-          </div>
-          <div class="form-group">
-            <label for="settingForm[importer:esa:access_token]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.access_token') }}</label>
-            <div class="col-xs-6">
-              <input class="form-control" type="password" name="settingForm[importer:esa:access_token]" value="{{ settingForm['importer:esa:access_token'] | default('') }}">
-            </div>
-          </div>
-          <div class="form-group">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
-            <div class="col-xs-offset-3 col-xs-6">
-              <button id="testConnectionToEsa" type="button" class="btn btn-primary btn-esa" data-action="/_api/admin/import/esa" name="Esa"
-                  data-success-message="Import posts from esa success." data-error-message="Error occurred in importing pages from esa.io">
-                {{ t("importer_management.import") }}
-              </button>
-              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
-                {{ t('Update') }}
-              </button>
-              <span class="col-xs-offset-1">
-                <button id="importFromEsa" type="button" class="btn btn-default btn-esa" data-action="/_api/admin/import/testEsaAPI" name="Esa"
-                    data-success-message="Test connection to esa success." data-error-message="Test connection to esa failed.">
-                  {{ t("importer_management.esa_settings.test_connection") }}
-                </button>
-              </span>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-
-
-      <!-- qiita:team Importer management forms -->
-      <form action="/_api/admin/settings/importerQiita" method="post" class="form-horizontal mt-5" id="importerSettingFormQiita" role="form"
-          data-success-messaage="Updated">
-        <fieldset>
-          <legend>{{ t('importer_management.import_from', 'Qiita:Team') }}</legend>
-          <table class="table table-bordered table-mapping">
-            <thead>
-              <tr>
-                <th width="45%">Qiita:Team</th>
-                <th width="10%"></th>
-                <th>GROWI</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th>{{ t('Article') }}</th>
-                <th><i class="icon-arrow-right-circle text-success"></i></th>
-                <th>{{ t('Page') }}</th>
-              </tr>
-              <tr>
-                <th>{{ t('Tag')}}</th>
-                <th></th>
-                <th>-</th>
-              </tr>
-              <tr>
-                <th>{{ t("importer_management.Directory_hierarchy_tag") }}</th>
-                <th></th>
-                <th>(TBD)</th>
-              </tr>
-              <tr>
-                <th>{{ t('User') }}</th>
-                <th></th>
-                <th>(TBD)</th>
-              </tr>
-            </tbody>
-          </table>
-          <div class="well well-sm mb-0 small">
-            <ul>
-              <li>{{ t("importer_management.page_skip") }}</li>
-            </ul>
-          </div>
-          <div class="form-group">
-            <input type="password" name="dummypass" style="display: none; top: -100px; left: -100px;" />
-          </div>
-          <div class="form-group">
-            <label for="settingForm[importer:qiita:team_name]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.team_name') }}</label>
-            <div class="col-xs-6">
-              <input class="form-control" type="text" name="settingForm[importer:qiita:team_name]" value="{{ settingForm['importer:qiita:team_name'] | default('') }}">
-            </div>
-          </div>
-          <div class="form-group">
-            <label for="settingForm[importer:qiita:access_token]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.access_token') }}</label>
-            <div class="col-xs-6">
-              <input class="form-control" type="password" name="settingForm[importer:qiita:access_token]" value="{{ settingForm['importer:qiita:access_token'] | default('') }}">
-            </div>
-          </div>
-          <div class="form-group">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
-            <div class="col-xs-offset-3 col-xs-6">
-              <button id="testConnectionToQiita" type="button" class="btn btn-primary btn-qiita" data-action="/_api/admin/import/qiita" name="Qiita"
-                  data-success-message="Import posts from qiita:team success." data-error-message="Error occurred in importing pages from qiita:team">
-                {{ t("importer_management.import") }}
-              </button>
-              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
-                {{ t('Update') }}
-              </button>
-              <span class="col-xs-offset-1">
-                <button id="importFromQiita" type="button" class="btn btn-default btn-qiita" data-action="/_api/admin/import/testQiitaAPI" name="Qiita"
-                    data-success-message="Test connection to qiita:team success." data-error-message="Test connection to qiita:team failed.">
-                  {{ t("importer_management.qiita_settings.test_connection") }}
-                </button>
-              </span>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
-  </div>
-
-</div>
-
-<script>
-  /**
-   * show flash message
-   */
-  function showMessage(formId, msg, status) {
-    $('#' + formId + ' .alert').remove();
-
-    if (!status) {
-      status = 'success';
-    }
-    var $message = $('<p class="alert"></p>');
-    $message.addClass('alert-' + status);
-    $message.html(msg.replace(/\n/g, '<br>'));
-    $message.insertAfter('#' + formId + ' legend');
-
-    if (status == 'success') {
-      setTimeout(function()
-      {
-        $message.fadeOut({
-          complete: function() {
-            $message.remove();
-          }
-        });
-      }, 5000);
-    }
-  }
-
-  /**
-   * Post form data and process UI
-   */
-  function postData(form, button, action, success_msg = "Success", error_msg = " {{ t('Error occurred') }} " ) {
-    var id = form.attr('id');
-    button.attr('disabled', 'disabled');
-    var jqxhr = $.post(action, form.serialize(), function(data)
-      {
-        if (!data.status) {
-          showMessage(id, `${error_msg} ${data.message}`, 'danger');
-        }
-        else {
-          showMessage(id, success_msg);
-        }
-      })
-      .fail(function() {
-        showMessage(id, "{{ t('Error occurred') }}", 'danger');
-      })
-      .always(function() {
-        button.prop('disabled', false);
-      });
-    return false;
-  }
-
-  /**
-   * Handle button esa
-   */
-  $('.btn-esa, .btn-qiita').each(function() {
-    var $form = $('#importerSettingForm' + $(this).attr('name'));
-    var $button = $(this);
-    var $action = $button.attr('data-action');
-    var $success_msg = $button.attr('data-success-message');
-    var $error_msg = $button.attr('data-error-message');
-    $button.click(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
-  });
-
-  /**
-   * Handle submit button esa
-   */
-  $('#importerSettingFormEsa, #importerSettingFormQiita').each(function() {
-    var $form = $(this);
-    var $button = $("#importerSettingForm" + $(this).attr('name') + " button[type='submit']");
-    var $action = $form.attr('action');
-    var $success_msg = $button.attr('data-success-message');
-    var $error_msg = $button.attr('data-error-message');
-    $form.submit(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
-  });
-
-</script>
-
-{% endblock content_main %}
-
-{% block content_footer %}
-{% endblock content_footer %}
+<div id ="admin-importer">
+<h1 style="background : linear-gradient(to right,
+red,
+orange,
+yellow,
+green,
+aqua,
+blue,
+purple);
+display: inline;
+color: white">HELLO REACT!</h1>