Merge pull request #459 from elixir-luxembourg/433-feedkback-on-wizar…

…d-form-for-enhanced-user-experience Add success notification improve form layout
elixir-luxembourg · Sep 8, 2023 · 3b09328 · 3b09328
2 parents c24d0e3 + c4c65ee
commit 3b09328
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/web/templates/datasets/dataset_wizard_form.html b/web/templates/datasets/dataset_wizard_form.html
@@ -7,8 +7,8 @@
 
 {% block content %}
     <div class="row">
-        <div class="jumbotron mt-5 py-2 pt-4 px-4 w-100">
-            <ul class="step-wizard-list">
+        <div class="mt-3 py-0 pt-3 w-100">
+            <ul class="step-wizard-list shadow-sm">
                 {% for step, step_verbose_name, skipped in steps_verbose_data %}
                     <li class="step-wizard-item {% if wizard.steps.current == step %}current-item{% endif %}">
                         <span class="progress-count {% if skipped %}skipped{% endif %}">{{ forloop.counter }}</span>
@@ -19,13 +19,6 @@
         </div>
 
         <div class="col-md-12 card">
-            <div class="d-flex justify-content-end mt-3">
-                {% if wizard.steps.step0 != 0 %}
-                    <a type="button" id="skipButton" class="btn btn-outline-secondary btn-raised float-left">
-                        <i class="material-icons" style="line-height:1.5;">skip_next</i>
-                    </a>
-                {% endif %}
-            </div>
             <form action="" method="post" class="form col-md-12 nice-selects" id="wizard-form">
                 {% csrf_token %}
                 <table>
@@ -44,8 +37,15 @@ <h1 class="display-4">{{ form.Meta.heading }}</h1>
                     {% else %}
                         <!-- If wizard.form.forms is empty or evaluates to False -->
                         <!-- Display form information -->
-                        <div class="jumbotron mt-2 p-4">
-                            <h1 class="display-4">{{ form.Meta.heading }}</h1>
+                        <div class="mt-2 p-0">
+                            <div class="d-flex justify-content-between mt-3">
+                                <h1 class="display-4">{{ form.Meta.heading }}</h1>
+                                {% if wizard.steps.step0 != 0 %}
+                                    <a type="button" id="skipButton" class="btn btn-secondary float-left text-secondary">
+                                        Skip <i class="material-icons" style="vertical-align: bottom;">skip_next</i>
+                                    </a>
+                                {% endif %}
+                            </div>
                             <p class="text-muted">{{ form.Meta.heading_help }}</p>
                         </div>
                         {% include '_includes/forms.html' with form=wizard.form %}

diff --git a/web/views/datasets.py b/web/views/datasets.py
@@ -1,6 +1,7 @@
 from django.conf import settings
 from django.shortcuts import render, redirect, get_object_or_404
 from django.urls import reverse_lazy
+from django.contrib import messages
 from django.views.generic import CreateView, DetailView, UpdateView, DeleteView
 from formtools.wizard.views import NamedUrlSessionWizardView
 from django.http import HttpResponseRedirect, Http404
@@ -50,6 +51,10 @@ def render_done(self, form, **kwargs) -> HttpResponseRedirect:
         dataset_id = self.storage.extra_data.get("dataset_id")
         self.storage.reset()
         if dataset_id:
+            messages.success(
+                self.request,
+                "Your dataset was created successfully. You can add more details below.",
+            )
             done_response = HttpResponseRedirect(
                 reverse_lazy("dataset", kwargs={"pk": dataset_id})
             )