Convert requirement addition to a modal

templates/index.html

@@ -45,8 +45,8 @@
             <div class="list-group list-group-flush">
                 <a class="list-group-item list-group-item-action text-info" href="{% url 'trainee_detail' %}"><span class="fas fa-file-signature align-middle"></span><span class="align-middle"> My Training Record</span></a>
                 <a class="list-group-item list-group-item-action" href="{% url 'trainee_list' %}"><span class="fas fa-users"></span> Trainee List</a>
-                <a class="list-group-item list-group-item-action" href="{% url 'item_list' %}"><span class="fas fa-layer-group"></span> Level List</a></a>
-                <a class="list-group-item list-group-item-action" href="{% url 'session_log' %}"><span class="fas fa-sitemap"></span> Item List</a></a>
+                <a class="list-group-item list-group-item-action" href="{% url 'level_list' %}"><span class="fas fa-layer-group"></span> Level List</a></a>
+                <a class="list-group-item list-group-item-action" href="{% url 'item_list' %}"><span class="fas fa-sitemap"></span> Item List</a></a>
             </div>
         </div>
     </div>

training/templates/add_level_requirement.html

@@ -1,4 +1,4 @@
-{% extends 'base_training.html' %}
+{% extends request.is_ajax|yesno:'base_ajax.html,base_training.html' %}
 
 {% load static %}
 {% load widget_tweaks %}
@@ -34,6 +34,14 @@
       <label for="depth" class="col-sm-2 col-form-label">Depth</label>
       {% render_field form.depth|add_class:'form-control col-sm'|attr:'required' %}
     </div>
-   <input type="submit" class="btn btn-primary">
+   {% if not request.is_ajax %}
+   <button type="submit" class="btn btn-primary">Save</button>
+   {% endif %}
 </form>
 {% endblock %}
+
+{% block footer %}
+<div class="col-sm-12 text-right pr-0">
+    <button type="submit" class="btn btn-primary" title="Save" form="requirement-form"><span class="fas fa-save align-middle"></span> <span class="d-none d-sm-inline align-middle">Save</span></button>
+</div>
+{% endblock %}

training/templates/level_detail.html

@@ -2,11 +2,50 @@
 
 {% load user_has_qualification from tags %}
 {% load user_level_if_present from tags %}
+{% load static %}
+
+{% block css %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static 'css/selects.css' %}"/>
+{% endblock %}
+
+{% block preload_js %}
+    {{ block.super }}
+    <script src="{% static 'js/selects.js' %}"></script>
+{% endblock %}
+
+{% block js %}
+    <script src="{% static 'js/autocompleter.js' %}"></script>
+    <script src="{% static 'js/tooltip.js' %}"></script>
+    <script>
+    $('document').ready(function(){
+        $('#requirement_button').click(function (e) {
+             e.preventDefault();
+             var url = $(this).attr("href");
+             $.ajax({
+                url: url,
+                success: function(){
+                    $link = $(this);
+                    // Anti modal inception
+                    if ($link.parents('#modal').length === 0) {
+                        modaltarget = $link.data('target');
+                        modalobject = "";
+                        $('#modal').load(url, function (e) {
+                            $('#modal').modal();
+                            $(".selectpicker").selectpicker().each(function(){initPicker($(this))});
+                        });
+                    }
+                }
+             });
+        });
+    });
+    </script>
+{% endblock %}
 
 {% block content %}
 {% if request.user.is_supervisor or perms.training.change_traininglevel %}
 <div class="col-sm-12 text-right pr-0">
-<a type="button" class="btn btn-success mb-3" href="{% url 'add_requirement' pk=object.pk %}">
+<a type="button" class="btn btn-success mb-3" href="{% url 'add_requirement' pk=object.pk %}" id="requirement_button">
 	<span class="fas fa-plus"></span> Add New Requirement
 </a>
 </div>

training/templates/trainee_detail.html

@@ -45,10 +45,10 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-12 text-right">
-    <a type="button" class="btn btn-success" href="{% url 'edit_record' object.pk %}" id="add_record">
-	    <span class="fas fa-plus"></span> Add New Training Record
-    </a>
-    <a href="{% url 'trainee_item_detail' object.pk %}" class="btn btn-info"><span class="fas fa-info-circle"></span> View Detailed Record</a><br/>
+        <a type="button" class="btn btn-success" href="{% url 'edit_record' object.pk %}" id="add_record">
+	        <span class="fas fa-plus"></span> Add New Training Record
+        </a>
+        <a href="{% url 'trainee_item_detail' object.pk %}" class="btn btn-info"><span class="fas fa-info-circle"></span> View Detailed Record</a><br/>
     </div>
 </div>
 <div class="row mb-3">

training/views.py

@@ -55,6 +55,17 @@ class TraineeItemDetail(generic.ListView):
         return context
 
 
+class LevelDetail(generic.DetailView):
+    template_name = "level_detail.html"
+    model = models.TrainingLevel
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["page_title"] = "Training Level {} <span class='badge badge-{} badge-pill'><span class='fas fa-{}'></span></span>".format(self.object, self.object.get_department_colour(), self.object.icon)
+        context["users_with"] = map(lambda qual: qual.trainee, models.TrainingLevelQualification.objects.filter(level=self.object))
+        return context
+
+
 class LevelList(generic.ListView):
     model = models.TrainingLevel
     template_name = "level_list.html"
@@ -112,7 +123,7 @@ class AddQualification(generic.CreateView, ModalURLMixin):
 
 
 class AddLevelRequirement(generic.CreateView, ModalURLMixin):
-    template_name = "edit_training_level.html"
+    template_name = "add_level_requirement.html"
     model = models.TrainingLevelRequirement
     form_class = forms.RequirementForm
 
@@ -137,17 +148,6 @@ class AddLevelRequirement(generic.CreateView, ModalURLMixin):
         return super().form_valid(form, *args, **kwargs)
 
 
-class LevelDetail(generic.DetailView):
-    template_name = "level_detail.html"
-    model = models.TrainingLevel
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["page_title"] = "Training Level {} <span class='badge badge-{} badge-pill'><span class='fas fa-{}'></span></span>".format(self.object, self.object.get_department_colour(), self.object.icon)
-        context["users_with"] = map(lambda qual: qual.trainee, models.TrainingLevelQualification.objects.filter(level=self.object))
-        return context
-
-
 class RemoveRequirement(generic.DeleteView):
     model = models.TrainingLevelRequirement
     template_name = 'traininglevelrequirement_confirm_delete.html'