Manage autorefresh for import page (refs #3951)

3 files changed, 95 insertions, 64 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index c11ae524e..bbf030409 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -40,6 +40,8 @@
     var activate_own_search_msg = "{% trans 'Searches in the shortcut menu deal with only your items.' %}";
     var YES = "{% trans 'yes' %}";
     var NO = "{% trans 'no' %}";
+    var autorefresh_message_start = "{% trans 'Autorefresh start. The form is disabled.' %}";
+    var autorefresh_message_end =  "{% trans 'Autorefresh end. The form is re-enabled.' %}";
     </script>
     {% endcompress %}
     {% compress css %}
@@ -67,9 +69,6 @@
 <p><strong class='lbl'>{{lbl}}{% trans ":"%}</strong> <span class='value'>{{value}}</span></p>
 {% endfor %}
 </div> {%endif%}
-    <button class="nav-button btn btn-sm btn-secondary" id="to_bottom_arrow">
-        <i class="fa fa-arrow-down" aria-hidden="true"></i>
-    </button>
     <button class="nav-button btn btn-sm btn-secondary" id="to_top_arrow">
         <i class="fa fa-arrow-up" aria-hidden="true"></i>
     </button>
@@ -97,6 +96,7 @@
         <div id="window_wrapper">
             <div id="window" role="tablist"></div>
         </div>
+        <div id="message_list">
         {% if MESSAGES %}{% for message, message_type in MESSAGES %}
         <div class="alert alert-{{message_type}} alert-dismissible fade show"
              role="alert">
@@ -107,6 +107,7 @@
             </button>
         </div>
         {% endfor %}{% endif %}
+        </div>
         {% if warnings %}{% for warning in warnings %}
         <div class="alert alert-warning alert-dismissible fade show" role="alert">
             {{warning}}<button type="button" class="close" data-dismiss="alert" aria-label="Close">
diff --git a/ishtar_common/templates/ishtar/import_list.html b/ishtar_common/templates/ishtar/import_list.html
index 4ac8a79be..a5fa34660 100644
--- a/ishtar_common/templates/ishtar/import_list.html
+++ b/ishtar_common/templates/ishtar/import_list.html
@@ -2,71 +2,20 @@
 {% load i18n inline_formset %}
 
 {% block pre_container %}
+<button id="autorefreshpage"
+        class="nav-button btn btn-sm btn-secondary disabled"
+        data-link="{% url 'current_imports_table' %}"
+        data-div="import-container"
+        title="{% trans 'Autorefresh the table (useful when waiting for an import result)' %}">
+  <i class="fa fa-refresh" aria-hidden="true"></i>
+</button>
+
 <form action="." method="post">{% csrf_token %}
 {% endblock %}
 
 {% block content %}
-<h2>{{page_name}}</h2>
-<div class='form'>
-{% if not object_list %}
-<p>{% trans "No pending imports." %}</p>
-{% else %}
-<table class="table table-striped">
-<tr>
-  <th>{% trans "Name" %}</th>
-  <th>{% trans "Type" %}</th>
-  <th>{% trans "File" context "file" %}</th>
-  <th>{% trans "Creation" %}</th>
-  <th>{% trans "Status" %}</th>
-  <th>{% trans "Action" %}</th>
-  <th>{% trans "Unmatched items" %}</th>
-  <th>{% trans "Error" %}</th>
-  <th>{% trans "Control" %}</th>
-  <th>{% trans "Match" %}</th>
-</tr>
-{% for import in object_list %}
-<tr>
-  <td>
-    {{import.name|default:"-"}}
-  </td>
-  <td>
-    {{import.importer_type}}
-  </td>
-  <td>
-    <a href='{{import.imported_file.url}}'>{% trans "Source file" %}</a>
-  </td>
-  <td>
-    {{import.creation_date}} ({{import.user}})
-  </td>
-  <td>
-    {{import.status}}
-  </td>
-  <td>
-    <select name='import-action-{{import.pk}}'>
-        <option value=''>--------</option>
-        {% for action, lbl in import.get_actions %}
-        <option value='{{action}}'>{{lbl}}</option>
-        {% endfor%}
-    </select>
-  </td>
-  <td>
-    {% if import.need_matching %}
-    <a href='{% url "import_link_unmatched" import.pk %}'>{% trans "Match"%}</a>
-    {% endif %}
-  </td>
-  <td style="white-space: nowrap;">{% if import.error_file %}
-      <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{import.error_file.url}}'>{% trans "File" context "not a directory" %}</a>
-  {% endif %}</td>
-  <td>{% if import.result_file %}
-    <a href='{{import.result_file.url}}'>{% trans "File" context "not a directory" %}</a>
-  {% endif %}</td>
-  <td>{% if import.match_file %}
-    <a href='{{import.match_file.url}}'>{% trans "File" context "not a directory" %}</a>
-  {% endif %}</td>
-</tr>
-{% endfor %}
-</table>
-{% endif %}
+<div id="import-container">
+  {% include "ishtar/import_table.html" %}
 </div>
 {% endblock %}
 
diff --git a/ishtar_common/templates/ishtar/import_table.html b/ishtar_common/templates/ishtar/import_table.html
new file mode 100644
index 000000000..95940a4ab
--- /dev/null
+++ b/ishtar_common/templates/ishtar/import_table.html
@@ -0,0 +1,81 @@
+{% load i18n inline_formset %}
+<script type="text/javascript">
+var html = $("#message_list").html();
+{% if MESSAGES and AJAX %}{% for message, message_type in MESSAGES %}
+html += '<div class="alert alert-{{message_type}} alert-dismissible fade show"';
+html += '   role="alert">';
+html += '     {{message}}';
+html += '     <button type="button" class="close" data-dismiss="alert"';
+html += '             aria-label="Close">';
+html += '         <span aria-hidden="true">&times;</span>';
+html += '     </button>';
+html += ' </div>';
+{% endfor %}{% endif %}
+$("#message_list").html(html);
+
+$("#import-list").find('select').prop('disabled', true);
+$("#import-list").find('input').prop('disabled', true);
+
+</script>
+<h2>{{page_name}}</h2>
+<div class='form' id="import-list">
+    {% if not object_list %}
+    <p>{% trans "No pending imports." %}</p>
+    {% else %}
+    <table class="table table-striped">
+        <tr>
+            <th>{% trans "Name" %}</th>
+            <th>{% trans "Type" %}</th>
+            <th>{% trans "File" context "file" %}</th>
+            <th>{% trans "Creation" %}</th>
+            <th>{% trans "Status" %}</th>
+            <th>{% trans "Action" %}</th>
+            <th>{% trans "Unmatched items" %}</th>
+            <th>{% trans "Error" %}</th>
+            <th>{% trans "Control" %}</th>
+            <th>{% trans "Match" %}</th>
+        </tr>
+        {% for import in object_list %}
+        <tr{% if import.pk in refreshed_pks %} class='bg-info'{% endif %}>
+            <td>
+                {{import.name|default:"-"}}
+            </td>
+            <td>
+                {{import.importer_type}}
+            </td>
+            <td>
+                <a href='{{import.imported_file.url}}'>{% trans "Source file" %}</a>
+            </td>
+            <td>
+                {{import.creation_date}} ({{import.user}})
+            </td>
+            <td>
+                {{import.status}}
+            </td>
+            <td>
+                <select name='import-action-{{import.pk}}'>
+                    <option value=''>--------</option>
+                    {% for action, lbl in import.get_actions %}
+                    <option value='{{action}}'>{{lbl}}</option>
+                    {% endfor%}
+                </select>
+            </td>
+            <td>
+                {% if import.need_matching %}
+                <a href='{% url "import_link_unmatched" import.pk %}'>{% trans "Match"%}</a>
+                {% endif %}
+            </td>
+            <td style="white-space: nowrap;">{% if import.error_file %}
+                <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{import.error_file.url}}'>{% trans "File" context "not a directory" %}</a>
+                {% endif %}</td>
+            <td>{% if import.result_file %}
+                <a href='{{import.result_file.url}}'>{% trans "File" context "not a directory" %}</a>
+                {% endif %}</td>
+            <td>{% if import.match_file %}
+                <a href='{{import.match_file.url}}'>{% trans "File" context "not a directory" %}</a>
+                {% endif %}</td>
+        </tr>
+        {% endfor %}
+    </table>
+    {% endif %}
+</div>