Manage CSV edtion and line by line import (refs #3975)

1 files changed, 197 insertions, 18 deletions

diff --git a/ishtar_common/templates/ishtar/import_step_by_step.html b/ishtar_common/templates/ishtar/import_step_by_step.html
index c827156c5..293ce3dce 100644
--- a/ishtar_common/templates/ishtar/import_step_by_step.html
+++ b/ishtar_common/templates/ishtar/import_step_by_step.html
@@ -2,28 +2,109 @@
 {% load i18n inline_formset link_to_window %}
 
 {% block content %}
+
+{% comment %}
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-center">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+{% endcomment %}
+
+
 <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>
-    <ul>{% for error in errors %}
-        <li>{{error}}</li>
-    {% endfor %}</ul>
+    <table class="table table-striped">
+        <tr>
+            <th>{% trans "Column" %}</th>
+            <th>{% trans "Error" %}</th>
+        </tr>
+        {% for line, column, error in errors %}<tr>
+            <td>
+                {% if column %}
+                <a href="#col-{{column}}">
+                    <span class="badge badge-info">
+                        {% trans "Col."%} {{column}}
+                    </span>
+                </a>
+                {% else %}
+                &ndash;
+                {% endif %}
+            </td>
+            <td>{{error}}</td>
+        </tr>{% endfor %}
+    </table>
 </div>
 
 {% if values %}
-<table class="table table-striped">
-    {% for header, value in values %}
-    <tr>
-        <th>{{header}}</th>
-        <td>{{value}}</td>
-    </tr>
-    {% endfor %}
-</table>
+<form action="." class='step-by-step-csv' method="post" name='step-by-step-csv'>
+    {% csrf_token %}
+    <table class="table table-striped">
+        <tr>
+            <th>{% trans "Column number" %}</th>
+            <th>{% trans "Name" %}</th>
+            <th>{% trans "Raw value" %}</th>
+            <th>{% trans "New value" %}</th>
+        </tr>
+        {% for idx, name, raw in values %}<tr id="col-{{idx}}">
+            <td>{{idx}}</td>
+            <td>{{name|safe}}</td>
+            <td>{{raw}}</td>
+            <td><textarea name="col-{{idx}}">{{raw}}</textarea></td>
+        </tr>{% endfor %}
+    </table>
+
+    <div id="footer">
+        <div id="validation-bar" class="row text-center">
+            <div class="col-sm">
+                <button type="submit" name="valid" id="btn-change-csv"
+                        value="change-csv" class="btn btn-success">
+                    {% trans "Update source file" %}
+                </button>
+            </div>
+            <div class="col-sm">
+                <a href="{% url 'import_step_by_step' import.pk line_number_displayed %}">
+                    <button type="button" class="btn btn-secondary" id="btn-cancel">
+                        {% trans "Cancel" %}
+                    </button>
+                </a>
+            </div>
+            <div class="col-sm">
+                <a href="{% url 'current_imports' %}">
+                    <button type="button" class="btn btn-secondary"
+                            id="btn-back">
+                        {% trans "Back to import list" %}
+                    </button>
+                </a>
+            </div>
+        </div>
+        {% include 'ishtar/blocks/footer.html' %}
+    </div>
+</form>
 {% endif %}
 
 {% else %}
 
+{% if not have_change %}
+<div class="alert alert-success" role="alert">
+    <p>{% trans "No change for this item." %}</p>
+</div>
+{% else %}
+<div class="alert alert-warning" role="alert">
+    <p>{% trans "Changes will be made for this item" %}</p>
+</div>
+{% endif %}
+
 {% if new_objects %}
 <h3>{% trans "Objects to be created" %}</h3>
 {% for path, cls, values in new_objects %}
@@ -39,7 +120,7 @@
         </tr>
         {% for k, value in values.items %}<tr>
             <th>{{k|safe}}</th>
-            <td>{{value}}</td>
+            <td>{{value|safe}}</td>
         </tr>{% endfor %}
     </table>
   </div>
@@ -49,6 +130,7 @@
 {% endif %}
 
 {% if updated_objects %}
+
 <h3>{% trans "Objects to be updated" %}</h3>
 {% for path, obj, values, old_and_updated in updated_objects %}
 
@@ -70,7 +152,6 @@
             </tr>{% endfor %}
         </table>
 
-
         <h5>{% trans "Updated values" %}</h5>
         <table class="table table-striped">
             <tr>
@@ -93,29 +174,127 @@
 
 <hr/>
 {% endfor %}
+{% endif %}
+
+{% if matched_objects %}
+<h3>{% trans "Objects matched with no changes" %}</h3>
+{% for path, obj, values in matched_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>
+    </div>
+</div>
+
+<hr/>
+{% endfor %}
 
 {% endif %}
 
-<h3>{% trans "CSV values" %}</h3>
 
-<div>
+
+<h3>{% trans "Source file" %}</h3>
+
+<form action="." class='step-by-step-csv' method="post" name='step-by-step-csv'>
+    {% csrf_token %}
     <table class="table table-striped">
         <tr>
             <th>{% trans "Column number" %}</th>
             <th>{% trans "Name" %}</th>
-            <th>{% trans "Raw CSV value" %}</th>
+            <th>{% trans "Raw value" %}</th>
             <th>{% trans "Interpreted value" %}</th>
-            {% comment %}<th>{% trans "Merged value" %}</th>{% endcomment %}
+            <th>{% trans "New value" %}</th>
         </tr>
         {% for idx, name, raw, interpreted in values %}<tr id="col-{{idx}}">
             <td>{{idx}}</td>
             <td>{{name|safe}}</td>
             <td>{{raw}}</td>
             <td>{{interpreted|safe}}</td>
+            <td><textarea name="col-{{idx}}">{{raw}}</textarea></td>
         </tr>{% endfor %}
     </table>
 
-</div>
+    <div id="footer">
+        <div id="validation-bar" class="row text-center">
+            <div class="col-sm">
+                <button type="submit" name="valid" id="btn-change-csv"
+                        value="change-csv" class="btn btn-success"
+                        disabled="disabled">
+                    {% trans "Update source file" %}
+                </button>
+            </div>
+            <div class="col-sm">
+                <button type="submit" name="valid" id="btn-import"
+                        value="import" class="btn btn-success">
+                    {% trans "Import this line" %}
+                </button>
+            </div>
+            <div class="col-sm">
+                <a href="{% url 'import_step_by_step' import.pk line_number_displayed %}">
+                    <button type="button" class="btn btn-secondary"
+                        disabled="disabled" id="btn-cancel">
+                        {% trans "Cancel" %}
+                    </button>
+                </a>
+            </div>
+            <div class="col-sm">
+                <a href="{% url 'current_imports' %}">
+                    <button type="button" class="btn btn-secondary"
+                            id="btn-back">
+                        {% trans "Back to import list" %}
+                    </button>
+                </a>
+            </div>
+        </div>
+        {% include 'ishtar/blocks/footer.html' %}
+    </div>
+
+</form>
+<script type="text/javascript">
+    var modified = false;
+    var no_modif_msg = "{% trans "No modification made to the source file" %}";
+    var modif_msg = "{% trans "Modification to the source file have been made. Save or cancel theses modification before import." %}";
+
+    var no_modif_made = function(){
+        $("#btn-cancel").prop("title", no_modif_msg);
+        $("#btn-change-csv").prop("title", no_modif_msg);
+    };
+    var modif_made = function(){
+        if (modified) return;
+        modified = true;
+        $("#btn-cancel").prop("title", '');
+        $("#btn-cancel").prop("disabled", false);
+        $("#btn-change-csv").prop("title", '');
+        $("#btn-change-csv").prop("disabled", false);
+        $("#btn-import").prop("title", modif_msg);
+        $("#btn-import").prop("disabled", true);
+        $("#btn-back").prop("title", modif_msg);
+        $("#btn-back").prop("disabled", true);
+    };
+    $(function(){
+        $('textarea').bind('input propertychange', function() {
+            modif_made();
+        });
+        no_modif_made();
+    });
+</script>
 {% endif %}
+
 {% endblock %}
 
+{% block footer %}
+{% endblock %}