Merge pull request #479 from elixir-luxembourg/438-dish-import-button

Import datasets, projects and partners using the ui

conftest.py

@@ -141,6 +141,26 @@ def user_data_steward(django_user_model):
     return u
 
 
+@pytest.fixture
+def user_legal(django_user_model):
+    u = django_user_model.objects.create_user(
+        username="user.legal", password="password", email="legal@email.com"
+    )
+    g, _ = Group.objects.get_or_create(name=GroupConstants.LEGAL.value)
+    u.groups.add(g)
+    return u
+
+
+@pytest.fixture
+def user_auditor(django_user_model):
+    u = django_user_model.objects.create_user(
+        username="user.auditor", password="password", email="auditor@email.com"
+    )
+    g, _ = Group.objects.get_or_create(name=GroupConstants.AUDITOR.value)
+    u.groups.add(g)
+    return u
+
+
 @pytest.fixture
 def user_admin(django_user_model):
     u = django_user_model.objects.create_superuser(

core/forms/importer.py

@@ -0,0 +1,5 @@
+from django import forms
+
+
+class ImportForm(forms.Form):
+    file = forms.FileField(required=True, label="Choose File")

data/demo/elu-core.json

@@ -0,0 +1,84 @@
+{
+  "$id": "https://raw.githubusercontent.com/elixir-luxembourg/json-schemas/v0.0.5/schemas/elu-core.json",
+  "title": "ELIXIR Luxembourg Core json schema",
+  "description": "Schema containing core attributes for any json serialisable ELIXIR Luxembourg record.",
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "type": "object",
+  "required": [
+    "source",
+    "name"
+  ],
+  "properties": {
+    "source": {
+      "type": "string",
+      "format": "uri"
+    },
+    "acronym": {
+      "type": ["string", "null"]
+    },
+    "name": {
+      "type": "string"
+    },
+    "description": {
+      "type":  ["string", "null"]
+    },
+    "external_id": {
+      "type": ["string", "null"]
+    },
+    "elu_uuid": {
+      "type": ["string", "null"]
+    },
+    "other_external_id": {
+      "type": ["string", "null"]
+    },
+    "url": {
+      "type":  ["string", "null"]
+    },
+    "contacts": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "first_name": {
+            "type": "string"
+          },
+          "last_name": {
+            "type": "string"
+          },
+          "role": {
+            "type": "string",
+            "enum": [
+              "Principal_Investigator",
+              "Researcher",
+              "Data_Manager",
+              "Data_Protection_Officer",
+              "Legal_Representative",
+              "Other"
+            ]
+          },
+          "email": {
+            "type": "string",
+            "format": "email"
+          },
+          "affiliations": {
+            "description": "Names of the affiliated institutions.",
+            "type": "array",
+            "minItems": 1,
+            "uniqueItems": true,
+            "items": {
+              "type": ["string", "null"]
+            }
+          }
+        },
+        "required": [
+          "first_name",
+          "last_name",
+          "role",
+          "email",
+          "affiliations"
+        ]
+      }
+    }
+  }
+}
+

data/demo/partners.json

@@ -0,0 +1,26 @@
+{
+    "items": [
+        {
+            "name": "Centre Hospitalier de Togo",
+            "external_id": "ELU_I_19309",
+            "acronym": "CHT",
+            "is_clinical": true,
+            "geo_category": "National",
+            "sector_category": "PUBLIC",
+            "address": "Ave De La 6, Espoir Vie Togo, Lome",
+            "country_code": "TO",
+            "source": "example.com"
+        },
+        {
+            "name": "Hospitalier de Madagascar",
+            "external_id": "ELU_I_1939",
+            "acronym": "HMDGSK",
+            "is_clinical": true,
+            "geo_category": "National",
+            "sector_category": "PUBLIC",
+            "address": "Ave De La 6, Espoir Vie Togo, Antananarivo",
+            "country_code": "MG",
+            "source": "example.com"
+        }
+    ]
+}

web/static/css/daisy.scss

@@ -424,3 +424,8 @@ a.no-underline:hover {
     text-align: left !important;
   }
 }
+.log-container {
+    max-height: 500px;
+    overflow-y: auto;
+    white-space: pre-line;
+}

web/static/js/importer.js

@@ -0,0 +1,46 @@
+$(document).ready(function () {
+    // Show the modal when the button is clicked
+    $('#importModalButton').click(function () {
+        $('#importModal').modal('show');
+        fetchForm();
+    });
+
+    // Fetch the form via AJAX
+    function fetchForm() {
+        $.get(importDataUrl, function (data) {
+            $("#importForm").html(data.form_html);
+            // Initially disable the submit button
+            $("#ajaxSubmitButton").prop("disabled", true);
+            // Monitor changes on the file input
+            $("#id_file").on("change", function () {
+                // If file input has a file, enable the submit button
+                if ($(this).val()) {
+                    $("#ajaxSubmitButton").prop("disabled", false);
+                } else {
+                    $("#ajaxSubmitButton").prop("disabled", true);
+                }
+            });
+            $('#ajaxSubmitButton').on('click', function () {
+                submitForm();
+            });
+        });
+    }
+});
+
+function submitForm() {
+    const formData = new FormData($('#importForm form')[0]);
+    $.ajax({
+        url: importDataUrl,
+        type: 'POST',
+        data: formData,
+        cache: false,
+        contentType: false,
+        processData: false,
+        success: function (data) {
+            $("#importForm form").html(data.form_html);
+        },
+        error: function (data) {
+            $("#importForm form").html(data.form_html);
+        }
+    });
+}

web/templates/_includes/search_form.html

@@ -1,10 +1,19 @@
+{% load static daisy_utils %}
 <div class="row">
     <div class="col-6">
         <h1 class="display-4">
             Browse {{title}}
         </h1>
     </div>
-    <div class="col-5">
+    <div class="col-5 d-flex align-items-center justify-content-end">
+        {% if request.user|has_group:"daisy-data-steward" %}
+            {% if search_url == 'projects' or search_url == 'datasets' or search_url == 'partners' %}
+                <button id="importModalButton" type="button" class="btn btn-secondary btn-outline float-right mx-2">
+                    Import
+                </button>
+                {% include 'importer/import_modal.html' %}
+            {% endif %}
+        {% endif %}
         {% if request.user.is_superuser %}
             <a class="btn btn-secondary btn-outline float-right" href="export?{% if filters %}filters={{ filters }}&{% endif %}{% if order_by %}order_by={{ order_by | default:'' }}&{% endif %}{% if query %}query={{ query | default:'' }}{% endif %}">Save the results as xlsx</a>
         {% endif %}
@@ -29,13 +38,13 @@ <h1 class="display-4">
                         </div>
                         {% endif %}
                     </div>
-                    
+
                     <span class="form-group bmd-form-group"> <!-- needed to match padding for floating labels -->
                         <button type="submit" class="btn btn-primary">Search</button>
                     </span>
                 </form>
             </div>
-    
+
             <div class="col-xl-7 col-lg-12 mt-4 mb-2">
                 {% if order_by_fields %}
                 <div class="mr-auto float-right">
@@ -50,3 +59,8 @@ <h1 class="display-4">
         </div>
     </div>
 </div>
+<script>
+    const importDataUrl = `/import_data/{{ search_url }}/`;
+</script>
+<script defer src="{% static 'js/daisy.js' %}"></script>
+<script defer src="{% static 'js/importer.js' %}"></script>

web/templates/importer/import_form.html

@@ -0,0 +1,49 @@
+<div id="importForm">
+    {% if form %}
+        <!-- Display the form -->
+        <form class="form col-md-12 nice-selects" method="post" enctype="multipart/form-data" novalidate
+              action="{% url 'import_data' model_type=model_type %}">
+            {% csrf_token %}
+            <!-- File Upload Field -->
+            <div class="form-group required">
+                <strong>{{ form.file.label_tag }}</strong>
+                <input type="file" name="{{ form.file.name }}" class="form-control" required
+                       id="{{ form.file.id_for_label }}" accept=".json">
+                {% if form.file.errors %}
+                    <div class="text-danger">
+                        {{ form.file.errors|striptags }}
+                    </div>
+                {% endif %}
+            </div>
+            <button id="ajaxSubmitButton" type="button" class="btn btn-primary btn-raised btn-block">Submit</button>
+        </form>
+    {% else %}
+        <div class="p-0">
+            <!-- Display output message -->
+            {% if output.message %}
+                <div class="alert alert-{% if not output.error %}success{% else %}info{% endif %} rounded" role="alert">
+                    <strong>Output:</strong>
+                    <p>{{ output.message|linebreaksbr }}</p>
+                </div>
+            {% endif %}
+            <!-- Display error -->
+            {% if output.error %}
+                <div class="alert alert-danger rounded" role="alert">
+                    <strong>Error:</strong>
+                    <p>{{ output.error|linebreaksbr }}</p>
+                </div>
+            {% endif %}
+            <!-- Display logs -->
+            {% if output.logs %}
+                <div class="alert alert-secondary rounded" role="alert">
+                    <strong> Logs:</strong>
+                    <div class="log-container">
+                        <p>{{ output.logs|linebreaksbr }}</p>
+                    </div>
+                </div>
+            {% endif %}
+
+
+        </div>
+    {% endif %}
+</div>

web/templates/importer/import_modal.html

@@ -0,0 +1,16 @@
+<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modalLabel">Import {{ search_url }}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body px-2">
+                <div id="importForm">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

web/templatetags/daisy_utils.py

@@ -30,6 +30,11 @@ def form_add_class(field, css_class):
     return field.as_widget(attrs={"class": css_class})
 
 
+@register.filter(name="has_group")
+def has_group(user, group_name):
+    return user.is_part_of(group_name)
+
+
 @register.filter
 def can_see_protected(user, obj: Union[Project, Contract, Dataset]):
     has_perm = user.can_see_protected(obj)