From 4ee74e6667ca59deb8376f29a6e32a0b1e4899ef Mon Sep 17 00:00:00 2001 From: bbe Date: Fri, 23 Oct 2020 16:23:47 +0200 Subject: [PATCH] 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 | 7 +- helpdesk/static/helpdesk/helpdesk-extend.css | 8 +- helpdesk/static/helpdesk/js/init_due_date.js | 3 + .../templates/helpdesk/create_ticket.html | 105 ++++++------ .../helpdesk/include/alert_form_errors.html | 8 + .../helpdesk/public_create_ticket.html | 25 +-- .../helpdesk/public_create_ticket_base.html | 32 ++-- .../templates/helpdesk/public_homepage.html | 158 ++++++++---------- helpdesk/views/public.py | 6 + 9 files changed, 188 insertions(+), 164 deletions(-) create mode 100644 helpdesk/static/helpdesk/js/init_due_date.js create mode 100644 helpdesk/templates/helpdesk/include/alert_form_errors.html diff --git a/helpdesk/forms.py b/helpdesk/forms.py index d0462b4b..39cf8bcd 100644 --- a/helpdesk/forms.py +++ b/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: diff --git a/helpdesk/static/helpdesk/helpdesk-extend.css b/helpdesk/static/helpdesk/helpdesk-extend.css index 8f5fa1e3..cdd6f2f0 100644 --- a/helpdesk/static/helpdesk/helpdesk-extend.css +++ b/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 { diff --git a/helpdesk/static/helpdesk/js/init_due_date.js b/helpdesk/static/helpdesk/js/init_due_date.js new file mode 100644 index 00000000..7889c249 --- /dev/null +++ b/helpdesk/static/helpdesk/js/init_due_date.js @@ -0,0 +1,3 @@ +$(() => { + $("#id_due_date").datepicker(); +}); \ No newline at end of file diff --git a/helpdesk/templates/helpdesk/create_ticket.html b/helpdesk/templates/helpdesk/create_ticket.html index 2aa3bb8b..ccb33d20 100644 --- a/helpdesk/templates/helpdesk/create_ticket.html +++ b/helpdesk/templates/helpdesk/create_ticket.html @@ -3,65 +3,74 @@ {% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %} {% block helpdesk_breadcrumb %} -
  • - {% trans "Tickets" %} -
    • -
  • {% trans "Create Ticket" %}
    • +
  • + {% trans "Tickets" %} +
    • +
  • {% trans "Create Ticket" %}
    • {% endblock %} {% block helpdesk_head %} {% endblock %} {% block helpdesk_body %} -
    -
    -
    {% trans "Submit a Ticket" %}
    -
    -

    {% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}

    -
    - {% for field in form %} - {% if field.is_hidden %} - {{ field }} - {% else %} -
    - - - {{ field }} - {% if field.errors %} - {{ field.errors }} - {% endif %} - {% if field.help_text %} - {% trans field.help_text %} - {% endif %} -
    - {% endif %} - {% endfor %} - - {% csrf_token %}
    +
    +
    {% trans "Submit a Ticket" %}
    +
    +

    + {% trans "Unless otherwise stated, all fields are required." %} + {% trans "Please provide as descriptive a title and description as possible." %} +

    + + {% if form.errors %} + {% include 'helpdesk/include/alert_form_errors.html' %} + {% endif %} + +
    + {% csrf_token %} + {% for field in form %} + {% if field.is_hidden %} + {{ field }} + {% else %} +
    + + {{ field }} + {% if field.errors %} + {{ field.errors }} + {% endif %} + {% if field.help_text %} + {% trans field.help_text %} + {% endif %} +
    + {% endif %} + {% endfor %} + +
    +
    -
    {% endblock %} {% block helpdesk_js %} - - - + {{ form.media.js }} + {% endblock %} diff --git a/helpdesk/templates/helpdesk/include/alert_form_errors.html b/helpdesk/templates/helpdesk/include/alert_form_errors.html new file mode 100644 index 00000000..b6d1bbc9 --- /dev/null +++ b/helpdesk/templates/helpdesk/include/alert_form_errors.html @@ -0,0 +1,8 @@ +{% load i18n %} + + \ No newline at end of file diff --git a/helpdesk/templates/helpdesk/public_create_ticket.html b/helpdesk/templates/helpdesk/public_create_ticket.html index fca1d845..d7a8edaf 100644 --- a/helpdesk/templates/helpdesk/public_create_ticket.html +++ b/helpdesk/templates/helpdesk/public_create_ticket.html @@ -4,20 +4,23 @@ {% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %} {% block helpdesk_breadcrumb %} -
  • - Public -
    • -
  • Create Ticket
    • +
  • + Public +
    • +
  • Create Ticket
    • {% endblock %} {% block helpdesk_body %} -
    -
    -
    {% trans "Submit a Ticket" %}
    -
    - {% include 'helpdesk/public_create_ticket_base.html' %} +
    +
    +
    {% trans "Submit a Ticket" %}
    +
    + {% include 'helpdesk/public_create_ticket_base.html' %} +
    -
    - +{% endblock %} + +{% block helpdesk_js %} + {{ form.media.js }} {% endblock %} diff --git a/helpdesk/templates/helpdesk/public_create_ticket_base.html b/helpdesk/templates/helpdesk/public_create_ticket_base.html index 45325642..a051a5fb 100644 --- a/helpdesk/templates/helpdesk/public_create_ticket_base.html +++ b/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 %} -

    {% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}

    -{% endblock %} -
    - {{ form|bootstrap4form }} - - {% csrf_token %}
    -{% else %} -

    {% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}

    -{% endif %} +{% with request|load_helpdesk_settings as helpdesk_settings %} + {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %} +

    + {% trans "Unless otherwise stated, all fields are required." %} + {% trans "Please provide as descriptive a title and description as possible." %} +

    + + {% if form.errors %} + {% include 'helpdesk/include/alert_form_errors.html' %} + {% endif %} +
    + {% csrf_token %} + {{ form|bootstrap4form }} + +
    + {% else %} +

    {% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}

    + {% endif %} {% endwith %} diff --git a/helpdesk/templates/helpdesk/public_homepage.html b/helpdesk/templates/helpdesk/public_homepage.html index 01dafe92..4f5193ef 100644 --- a/helpdesk/templates/helpdesk/public_homepage.html +++ b/helpdesk/templates/helpdesk/public_homepage.html @@ -4,101 +4,81 @@ {% block helpdesk_title %}{% trans "Welcome to Helpdesk" %}{% endblock %} {% block helpdesk_breadcrumb %} -
  • - Public -
    • -
  • Homepage
    • +
  • + Public +
    • +
  • Homepage
    • {% endblock %} {% block helpdesk_body %} +
    +
    + {% if kb_categories %} +
    +

    {% trans "Knowledgebase Articles" %}

    + {% for category in kb_categories %} +
    +
    +
    {{ category.title }}
    +

    {{ category.description }}

    +

    + + + {% trans 'View articles' %} + + +

    +
    +
    + {% endfor %} +
    + {% endif %} -
    -
    - -{% if kb_categories %} -
    -

    {% trans "Knowledgebase Articles" %}

    -{% for category in kb_categories %} -
    -
    -
    {{ category.title }}
    -

    {{ category.description }}

    -

    {% trans 'View articles' %}

    -
    -
    -{% endfor %} -
    -{% endif %} - -{% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %} -
    -
    - -
    -

    {% trans "Submit a Ticket" %}

    -

    {% trans "Please provide as descriptive a title and description as possible." %}

    - -
    -
    - {{ form|bootstrap4form }} - {% comment %} - {% for field in form %} - - {% if field.is_hidden %} - {{ field }} - {% else %} - - -
    - {% if not field.field.required %} {% trans "(Optional)" %}{% endif %} -
    {{ field }}
    - {% if field.errors %}
    {{ field.errors }}
    {% endif %} - {% if field.help_text %}{{ field.help_text }}{% endif %} +
    +
    +
    +

    {% trans "Submit a Ticket" %}

    + {% include 'helpdesk/public_create_ticket_base.html' %} +
    +
    - {% endif %} + {% if not helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC and not helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %} +

    {% trans "Please use button at upper right to login first." %}

    + {% endif %} - {% endfor %} - {% endcomment %} - -
    - + {% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %} +
    +
    +
    +

    {% trans "View a Ticket" %}

    + +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    + {% endif %} +
    -
    - -{% csrf_token %} -
    -
    -
    -{% endif %} - -{% if not helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC and not helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %} -

    {% trans "Please use button at upper right to login first." %}

    -{% endif %} - -{% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %} -
    -
    -
    -

    {% trans "View a Ticket" %}

    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    - {% csrf_token %}
    -
    -
    -{% endif %} - +{% endblock %} + +{% block helpdesk_js %} + {{ form.media.js }} {% endblock %} diff --git a/helpdesk/views/public.py b/helpdesk/views/public.py index c268b15f..e5a424c7 100644 --- a/helpdesk/views/public.py +++ b/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'