Better public create ticket form with the initialization of the datepicker for due date as a media.

Reformat code to improve readability.
Add an include to get an alert when there are errors in a form.

helpdesk/forms.py

@@ -173,9 +173,9 @@ class AbstractTicketForm(CustomFieldMixin, forms.Form):
     )
 
     due_date = forms.DateTimeField(
-        widget=forms.TextInput(attrs={'class': 'form-control'}),
+        widget=forms.TextInput(attrs={'class': 'form-control', 'autocomplete': 'off'}),
         required=False,
-        input_formats=['%d/%m/%Y', '%m/%d/%Y', "%d.%m.%Y", ],
+        input_formats=['%d/%m/%Y', '%m/%d/%Y', "%d.%m.%Y"],
         label=_('Due on'),
     )
 
@@ -186,6 +186,9 @@ class AbstractTicketForm(CustomFieldMixin, forms.Form):
         help_text=_('You can attach a file such as a document or screenshot to this ticket.'),
     )
 
+    class Media:
+        js = ('helpdesk/js/init_due_date.js',)
+
     def __init__(self, kbcategory=None, *args, **kwargs):
         super().__init__(*args, **kwargs)
         if kbcategory:

helpdesk/static/helpdesk/helpdesk-extend.css

@@ -61,8 +61,12 @@ table.table caption {
 table.ticket-stats caption {color: #fbff00; font-style: italic;}
 table.ticket-stats tbody th, table.ticket-stats tbody tr {padding-left: 20px}
 
-.errorlist {list-style: none;}
-.errorlist {padding: 0;}
+.errorlist {
+    list-style: none;
+    padding: 0;
+    color: red;
+}
+
 .has-error .input-group input, .has-error .input-group select, .has-error .input-group textarea {border-color: #b94a48}
 
 #helpdesk-nav-collapse #searchform {

helpdesk/static/helpdesk/js/init_due_date.js

@@ -0,0 +1,3 @@
+$(() => {
+    $("#id_due_date").datepicker();
+});

helpdesk/templates/helpdesk/create_ticket.html

@@ -3,30 +3,42 @@
 {% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
 
 {% block helpdesk_breadcrumb %}
-<li class="breadcrumb-item">
+    <li class="breadcrumb-item">
         <a href="#">{% trans "Tickets" %}</a>
-</li>
-<li class="breadcrumb-item active">{% trans "Create Ticket" %}</li>
+    </li>
+    <li class="breadcrumb-item active">{% trans "Create Ticket" %}</li>
 {% endblock %}
 
 {% block helpdesk_head %}
 {% endblock %}
 
 {% block helpdesk_body %}
-
     <div class="container">
         <div class="card card-register mx-auto mt-5">
             <div class="card-header">{% trans "Submit a Ticket" %}</div>
             <div class="card-body">
-          <p>{% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}</p>
-          <form method='post' action='./' enctype='multipart/form-data'>
+                <p>
+                    {% trans "Unless otherwise stated, all fields are required." %}
+                    {% trans "Please provide as descriptive a title and description as possible." %}
+                </p>
+
+                {% if form.errors %}
+                    {% include 'helpdesk/include/alert_form_errors.html' %}
+                {% endif %}
+
+                <form method='post' enctype='multipart/form-data'>
+                    {% csrf_token %}
                     {% for field in form %}
                         {% if field.is_hidden %}
                             {{ field }}
                         {% else %}
                             <div class="form-group">
-                    <!--<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="required">-->
-                    <label for='id_{{ field.name }}'>{% trans field.label %}{% if not field.field.required %}&nbsp;({% trans "Optional" %}){% endif %}</label>
+                                <label for='id_{{ field.name }}'>
+                                    {% trans field.label %}
+                                    {% if not field.field.required %}
+                                        ({% trans "Optional" %})
+                                    {% endif %}
+                                </label>
                                 {{ field }}
                                 {% if field.errors %}
                                     <small class='error'>{{ field.errors }}</small>
@@ -37,8 +49,10 @@
                             </div>
                         {% endif %}
                     {% endfor %}
-            <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-send"></i>&nbsp;{% trans "Submit Ticket" %}</button>
-          {% csrf_token %}</form>
+                    <button type="submit" class="btn btn-primary btn-lg btn-block">
+                        <i class="fa fa-send"></i> {% trans "Submit Ticket" %}
+                    </button>
+                </form>
             </div>
         </div>
     </div>
@@ -46,22 +60,17 @@
 {% endblock %}
 
 {% block helpdesk_js %}
-<script type='text/javascript' language='javascript'>
-// this function listens for changes on any file input, and
-// emits the appropriate event to update the input's text.
-// Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
-$(document).on('change', ':file', function() {
-    var input = $(this),
+    {{ form.media.js }}
+    <script>
+        // this function listens for changes on any file input, and
+        // emits the appropriate event to update the input's text.
+        // Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
+        $(document).on('change', ':file', function () {
+            const input = $(this),
                 inputWidgetNum = $(this).attr('id').split("file")[1],
                 numFiles = input.get(0).files ? input.get(0).files.length : 1,
                 label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
             input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
-});
-</script>
-
-<script>
-    $( function() {
-        $( "#id_due_date" ).datepicker();
-    } );
-</script>
+        });
+    </script>
 {% endblock %}

helpdesk/templates/helpdesk/include/alert_form_errors.html

@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+      {% trans "There are errors in the form" %}.
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+      </button>
+</div>

helpdesk/templates/helpdesk/public_create_ticket.html

@@ -4,20 +4,23 @@
 {% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
 
 {% block helpdesk_breadcrumb %}
-<li class="breadcrumb-item">
+    <li class="breadcrumb-item">
         <a href="{% url 'helpdesk:home' %}">Public</a>
-</li>
-<li class="breadcrumb-item active">Create Ticket</li>
+    </li>
+    <li class="breadcrumb-item active">Create Ticket</li>
 {% endblock %}
 
 {% block helpdesk_body %}
-<div class="container">
+    <div class="container">
         <div class="card card-register mx-auto mt-5">
             <div class="card-header">{% trans "Submit a Ticket" %}</div>
             <div class="card-body">
                 {% include 'helpdesk/public_create_ticket_base.html' %}
             </div>
         </div>
-</div>
-
+    </div>
+{% endblock %}
+
+{% block helpdesk_js %}
+    {{ form.media.js }}
 {% endblock %}

helpdesk/templates/helpdesk/public_create_ticket_base.html

@@ -1,16 +1,24 @@
 {% load i18n bootstrap4form %}
 {% load load_helpdesk_settings %}
-{% with request|load_helpdesk_settings as helpdesk_settings %}
 
-{% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
-{% block form_header %}
-<p>{% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}</p>
-{% endblock %}
-<form method='post' enctype='multipart/form-data'>
+{% with request|load_helpdesk_settings as helpdesk_settings %}
+    {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
+        <p>
+            {% trans "Unless otherwise stated, all fields are required." %}
+            {% trans "Please provide as descriptive a title and description as possible." %}
+        </p>
+
+        {% if form.errors %}
+            {% include 'helpdesk/include/alert_form_errors.html' %}
+        {% endif %}
+        <form role="form" method='post' enctype='multipart/form-data'>
+            {% csrf_token %}
             {{ form|bootstrap4form }}
-    <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-send"></i>&nbsp;{% trans "Submit Ticket" %}</button>
-    {% csrf_token %}</form>
-{% else %}
-<h2>{% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}</h2>
-{% endif %}
+            <button type="submit" class="btn btn-primary btn-lg btn-block">
+                {% trans "Submit Ticket" %} <i class="fa fa-paper-plane"></i>
+            </button>
+        </form>
+    {% else %}
+        <p>{% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}</p>
+    {% endif %}
 {% endwith %}

helpdesk/templates/helpdesk/public_homepage.html

@@ -4,101 +4,81 @@
 {% block helpdesk_title %}{% trans "Welcome to Helpdesk" %}{% endblock %}
 
 {% block helpdesk_breadcrumb %}
-<li class="breadcrumb-item">
+    <li class="breadcrumb-item">
         <a href="#">Public</a>
-</li>
-<li class="breadcrumb-item active">Homepage</li>
+    </li>
+    <li class="breadcrumb-item active">Homepage</li>
 {% endblock %}
 
 {% block helpdesk_body %}
-
-<div class="container-fluid">
+    <div class="container-fluid">
         <div class="row">
-
-{% if kb_categories %}
-<div class="col-sm">
-<h2>{% trans "Knowledgebase Articles" %}</h2>
-{% for category in kb_categories %}
-<div class="card">
+            {% if kb_categories %}
+                <div class="col-sm">
+                    <h2>{% trans "Knowledgebase Articles" %}</h2>
+                    {% for category in kb_categories %}
+                        <div class="card" style="margin-top: 15px">
                             <div class="card-body">
                                 <h5 class="card-title">{{ category.title }}</h5>
                                 <p class="card-text">{{ category.description }}</p>
-        <p class="card-text"><small class="text-muted"><a href='{{ category.get_absolute_url }}'>{% trans 'View articles' %}<i class="fa fa-arrow-right"></i></a></small></p>
+                                <p class="card-text">
+                                    <small class="text-muted">
+                                        <a href='{{ category.get_absolute_url }}'>
+                                            {% trans 'View articles' %} <i class="fa fa-arrow-right"></i>
+                                        </a>
+                                    </small>
+                                </p>
                             </div>
-</div>
-{% endfor %}
-</div>
-{% endif %}
-
-{% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
-<div class="col-sm">
-<div class="panel panel-default">
-
-<div class="panel-body">
-    <h2 name='submit'>{% trans "Submit a Ticket" %}</h2>
-<p>{% trans "Please provide as descriptive a title and description as possible." %}</p>
-
-<form role="form" method='post' action='./#submit' enctype='multipart/form-data'>
-<fieldset>
-        {{ form|bootstrap4form }}
-        {% comment %}
-        {% for field in form %}
-
-            {% if field.is_hidden %}
-                {{ field }}
-            {% else %}
-
-
-            <div class="form-group {% if field.errors %}has-error{% endif %}">
-                <label class="control-label" for='id_{{ field.name }}'>{{ field.label }}</label>{% if not field.field.required %} <span class='form_optional'>{% trans "(Optional)" %}</span>{% endif %}</dt>
-                <div class="input-group">{{ field }}</div>
-                {% if field.errors %}<div class="help-block">{{ field.errors }}</div>{% endif %}
-                {% if field.help_text %}<span class='fhelp-block'>{{ field.help_text }}</span>{% endif %}
                         </div>
-
+                    {% endfor %}
+                </div>
             {% endif %}
 
-        {% endfor %}
-        {% endcomment %}
-
-    <div class='buttons form-group'>
-        <input type='submit' class="btn btn-primary" value='{% trans "Submit Ticket" %}' />
+            <div class="col-sm">
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <h2>{% trans "Submit a Ticket" %}</h2>
+                        {% include 'helpdesk/public_create_ticket_base.html' %}
+                    </div>
+                </div>
             </div>
-</fieldset>
 
-{% csrf_token %}</form>
-</div>
-</div>
-</div>
-{% endif %}
-
-{% if not helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC and not helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
+            {% if not helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC and not helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
                 <h2>{% trans "Please use button at upper right to login first." %}</h2>
-{% endif %}
+            {% endif %}
 
-{% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %}
-<div class="col-sm">
+            {% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %}
+                <div class="col-sm">
                     <div class="panel panel-default">
                         <div class="panel-body">
                             <h2>{% trans "View a Ticket" %}</h2>
-
                             <form method='get' action="{% url 'helpdesk:public_view' %}">
                                 <fieldset>
                                     <div class="form-group {% if field.errors %}has-error{% endif %}">
                                         <label for='id_ticket'>{% trans "Ticket" %}</label>
-            <div class="input-group"><input type='text' name='ticket' /></div>
+                                        <div class="input-group">
+                                            <input type='text' name='ticket' class='form-control'/>
+                                        </div>
                                     </div>
                                     <div class="form-group {% if field.errors %}has-error{% endif %}">
                                         <label for='id_email'>{% trans "Your E-mail Address" %}</label>
-            <div class="input-group"><input type='text' name='email' /></div>
+                                        <div class="input-group">
+                                            <input type='text' name='email' class='form-control'/>
+                                        </div>
                                     </div>
                                     <div class='buttons form-group'>
-        <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
+                                        <input type='submit' class="btn btn-primary" value='{% trans "View Ticket" %}'/>
                                     </div>
                                 </fieldset>
-    {% csrf_token %}</form>
-    </div></div>
-</div>
-{% endif %}
-
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
+
+{% block helpdesk_js %}
+    {{ form.media.js }}
 {% endblock %}

helpdesk/views/public.py

@@ -137,6 +137,12 @@ class SuccessIframeView(TemplateView):
 class CreateTicketView(BaseCreateTicketView):
     template_name = 'helpdesk/public_create_ticket.html'
 
+    def get_form(self, form_class=None):
+        form = super().get_form(form_class)
+        # Add the CSS error class to the form in order to better see them in the page
+        form.error_css_class = 'text-danger'
+        return form
+
 
 class Homepage(CreateTicketView):
     template_name = 'helpdesk/public_homepage.html'