Step by step: large improvments on step display (refs #3975)

Show modified, sheet access for existing items, link between created,
updated fields and associated column.

1 files changed, 67 insertions, 49 deletions

diff --git a/ishtar_common/templates/ishtar/import_step_by_step.html b/ishtar_common/templates/ishtar/import_step_by_step.html
index 233889df4..c827156c5 100644
--- a/ishtar_common/templates/ishtar/import_step_by_step.html
+++ b/ishtar_common/templates/ishtar/import_step_by_step.html
@@ -1,9 +1,8 @@
 {% extends "base.html" %}
-{% load i18n inline_formset %}
+{% load i18n inline_formset link_to_window %}
 
 {% block content %}
-<h2>{% trans "Import step by step" %}</h2>
-<h3>{{import.name}} &ndash; {% trans "line " %} {{line_number_displayed}}</h3>
+<h2>{% trans "Import step by step" %} &ndash; {{import.name}} &ndash; {% trans "line " %} {{line_number_displayed}}</h2>
 {% if errors %}
 <div class="alert alert-danger" role="alert">
     <p>{% trans "The following error(s) has been encountered while parsing the source file:" %}</p>
@@ -26,74 +25,93 @@
 {% else %}
 
 {% if new_objects %}
-<h4>{% trans "Objects to be created" %}</h4>
-<div>
-    <table class="table table-striped">
-        <tr>
-            <th>{% trans "Path" %}</th>
-            <th>{% trans "Type" %}</th>
-            <th>{% trans "Values" %}</th>
-        </tr>
+<h3>{% trans "Objects to be created" %}</h3>
 {% for path, cls, values in new_objects %}
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">{{path|safe}} ({{cls.get_verbose_name}})</h5>
+  </div>
+  <div class="card-body">
+    <table class="table table-striped">
         <tr>
-            <td>{{path}}</td>
-            <td>{{cls.get_verbose_name}}</td>
-            <td>{% for k, value in values.items %}<div class="row">
-                <div class="col-6"><strong>{{k}}{% trans ":"%}</strong></div>
-                <div class="col-6">{{value}}</div>
-            </div>{% endfor %}
-            </td>
+            <th>{% trans "Key" %}</th>
+            <th>{% trans "Value" %}</th>
         </tr>
-{% endfor %}
+        {% for k, value in values.items %}<tr>
+            <th>{{k|safe}}</th>
+            <td>{{value}}</td>
+        </tr>{% endfor %}
     </table>
+  </div>
 </div>
+<hr/>
+{% endfor %}
 {% endif %}
 
 {% if updated_objects %}
-<h4>{% trans "Objects to be updated" %}</h4>
-<div>
-    <table class="table table-striped">
-        <tr>
-            <th>{% trans "Path" %}</th>
-            <th>{% trans "Object" %}</th>
-            <th>{% trans "Matching values" %}</th>
-            <th>{% trans "Updated values" %}</th>
-        </tr>
-        {% for path, obj, values, updated_values in updated_objects %}
-        <tr>
-            <td>{{path}}</td>
-            <td>{{obj}} ({{obj.get_verbose_name}})</td>
-            <td>{% for k, value in values.items %}<div class="row">
-                <div class="col-6"><strong>{{k}}{% trans ":"%}</strong></div>
-                <div class="col-6">{{value}}</div>
-            </div>{% endfor %}
-            <td>{% for k, value in updated_values.items %}<div class="row">
-                <div class="col-6"><strong>{{k}}{% trans ":"%}</strong></div>
-                <div class="col-6">{{value}}</div>
-            </div>{% endfor %}
-            </td>
-        </tr>
-        {% endfor %}
-    </table>
+<h3>{% trans "Objects to be updated" %}</h3>
+{% for path, obj, values, old_and_updated in updated_objects %}
+
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">{{path}} &ndash; {{obj}} {{obj|link_to_window}} ({{obj.get_verbose_name}})</h5>
+    </div>
+    <div class="card-body">
+
+        <h5>{% trans "Matching values" %}</h5>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Key" %}</th>
+                <th>{% trans "Value" %}</th>
+            </tr>
+            {% for k, value in values.items %}<tr>
+                <th>{{k|safe}}</th>
+                <td>{{value}}</td>
+            </tr>{% endfor %}
+        </table>
+
+
+        <h5>{% trans "Updated values" %}</h5>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Key" %}</th>
+                <th>{% trans "Old value" %}</th>
+                <th>{% trans "New value" %}</th>
+                <th>{% trans "Changed" %}</th>
+            </tr>
+            {% for k, value in old_and_updated.items %}<tr>
+                <th>{{k|safe}}</th>
+                <td>{{value.0|safe}}</td>
+                <td>{{value.1|safe}}</td>
+                <td class="text-center">{% if value.2%}
+                    <i class="fa fa-check-circle-o text-info text-large"
+                       aria-hidden="true"></i>{% else %}&ndash;{% endif %}</td>
+            </tr>{% endfor %}
+        </table>
+    </div>
 </div>
+
+<hr/>
+{% endfor %}
+
 {% endif %}
 
+<h3>{% trans "CSV values" %}</h3>
+
 <div>
     <table class="table table-striped">
         <tr>
             <th>{% trans "Column number" %}</th>
             <th>{% trans "Name" %}</th>
             <th>{% trans "Raw CSV value" %}</th>
-            <th>{% trans "Current value" %}</th>
-            <th>{% trans "New value" %}</th>
+            <th>{% trans "Interpreted value" %}</th>
             {% comment %}<th>{% trans "Merged value" %}</th>{% endcomment %}
         </tr>
-        {% for idx, name, raw, interpreted in values %}<tr>
+        {% for idx, name, raw, interpreted in values %}<tr id="col-{{idx}}">
             <td>{{idx}}</td>
             <td>{{name|safe}}</td>
             <td>{{raw}}</td>
-        <td></td>
-            <td>{{interpreted}}</td>
+            <td>{{interpreted|safe}}</td>
         </tr>{% endfor %}
     </table>