Better workflow for creating new ticket checklist, into a modal

helpdesk/forms.py

@@ -641,15 +641,8 @@ class CreateChecklistForm(ChecklistForm):
         required=False,
     )
 
-    def __init__(self, *args, **kwargs):
+    class Meta(ChecklistForm.Meta):
-        super().__init__(*args, **kwargs)
+        fields = ('checklist_template', 'name')
-        self.fields['name'].required = False
-
-    def clean(self):
-        if not self.cleaned_data.get('checklist_template') and not self.cleaned_data.get('name'):
-            raise ValidationError(_('Please choose at least a name or a template for the new checklist'))
-        if self.cleaned_data.get('checklist_template') and self.cleaned_data.get('name'):
-            raise ValidationError(_('Please choose either a name or a template for the new checklist'))
 
 
 class FormControlDeleteFormSet(forms.BaseInlineFormSet):

helpdesk/models.py

@@ -2028,12 +2028,6 @@ class ChecklistTemplate(models.Model):
     def __str__(self):
         return self.name
 
-    def create_checklist_for_ticket(self, ticket):
-        checklist = ticket.checklists.create(name=self.name)
-        for position, task in enumerate(self.task_list):
-            checklist.tasks.create(description=task, position=position)
-        return checklist
-
 
 class Checklist(models.Model):
     ticket = models.ForeignKey(
@@ -2054,6 +2048,10 @@ class Checklist(models.Model):
     def __str__(self):
         return self.name
 
+    def create_tasks_from_template(self, template):
+        for position, task in enumerate(template.task_list):
+            self.tasks.create(description=task, position=position)
+
 
 class ChecklistTaskQuerySet(models.QuerySet):
     def todo(self):

helpdesk/templates/helpdesk/ticket.html

@@ -245,6 +245,33 @@
 
             </div>
         </div>
+
+        <div class="modal fade" id="createChecklistModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="modal-header">
+                            <h5 class="modal-title">{% trans "Add a new checklist" %}</h5>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="{% trans 'Close' %}">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <p>{% trans "You can select a template to generate a checklist with a predefined set of tasks." %}</p>
+                            <p>{% trans "Ignore it and only give a name to create an empty checklist." %}</p>
+                            {{ checklist_form.as_p }}
+                        </div>
+                        <div class="modal-footer">
+                            <a class="btn btn-secondary" href="{% url 'helpdesk:checklist_templates' %}">
+                                Manage templates
+                            </a>
+                            <button type="submit" class="btn btn-primary">{% trans "Add" %}</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
     {% endif %}
 {% endblock %}
 
@@ -280,6 +307,19 @@ $(document).ready(function() {
         }
     });
 
+    // Preset name of checklist when a template is selected
+    $('#id_checklist_template').on('change', function() {
+        const nameField = $('#id_name')
+        const selectedTemplate = $(this).children(':selected')
+        if (nameField.val() === '' && selectedTemplate.val()) {
+            nameField.val(selectedTemplate.text())
+        }
+    })
+
+    $('.disabledTask').on('click', () => {
+        alert('{% trans 'If you want to update state of checklist tasks, please do a Follow-Up response and click on "Update checklists"' %}')
+    })
+
     $("[data-toggle=tooltip]").tooltip();
 
     // lists for file input change events, then updates the associated text label

helpdesk/templates/helpdesk/ticket_desc_table.html

@@ -196,7 +196,7 @@
                                                     <div class="list-group">
                                                         {% for task in checklist.tasks.all %}
                                                             <div class="list-group-item"{% if task.completion_date %} title="{% trans "Completed on" %} {{ task.completion_date }}" {% endif %}>
-                                                                <label>
+                                                                <label class="disabledTask">
                                                                     <input type="checkbox" disabled{% if task.completion_date %} checked{% endif %}>
                                                                     {{ task }}
                                                                 </label>
@@ -218,20 +218,10 @@
                                         </div>
                                     {% endfor %}
                                     <div class="col-sm-4 col-xs-12">
-                                        <div class="card mb-4">
+                                        <button type="button" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#createChecklistModal">
-                                            <div class="card-header">
+                                            <i class="fas fa-plus"></i>
-                                                <h5>Add a checklist</h5>
+                                            {% trans "Create new checklist" %}
-                                            </div>
+                                        </button>
-                                            <div class="card-body">
-                                                <form method="post">
-                                                    {% csrf_token %}
-                                                    {{ checklist_form.as_p }}
-                                                    <button type="submit" class="btn btn-primary">
-                                                        {% trans "Add" %}
-                                                    </button>
-                                                </form>
-                                            </div>
-                                        </div>
                                     </div>
                                 </div>
                             </div>

helpdesk/views/staff.py

@@ -416,14 +416,16 @@ def view_ticket(request, ticket_id):
 
     checklist_form = CreateChecklistForm(request.POST or None)
     if checklist_form.is_valid():
+        checklist = checklist_form.save(commit=False)
+        checklist.ticket = ticket
+        checklist.save()
+
         checklist_template = checklist_form.cleaned_data.get('checklist_template')
+        # Add predefined tasks if template has been selected
         if checklist_template:
-            checklist_template.create_checklist_for_ticket(ticket)
+            checklist.create_tasks_from_template(checklist_template)
-        else:
+
-            checklist = checklist_form.save(commit=False)
+        return redirect('helpdesk:edit_ticket_checklist', ticket.id, checklist.id)
-            checklist.ticket = ticket
-            checklist.save()
-        return redirect(ticket)
 
     return render(request, 'helpdesk/ticket.html', {
         'ticket': ticket,