holm/django-helpdesk
1
0
Fork 0
forked from extern/django-helpdesk
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Reformat code to improve readability.
Add an include to get an alert when there are errors in a form.
This commit is contained in:
bbe 2020-10-23 16:23:47 +02:00
parent ab5e07e295
commit 4ee74e6667
9 changed files with 188 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
helpdesk/forms.py
View File

@ -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:

8
helpdesk/static/helpdesk/helpdesk-extend.css
View File

@ -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 {

3
helpdesk/static/helpdesk/js/init_due_date.js Normal file
View File

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

105
helpdesk/templates/helpdesk/create_ticket.html
View File

@ -3,65 +3,74 @@
{% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
{% block helpdesk_breadcrumb %}
<li class="breadcrumb-item">
<a href="#">{% trans "Tickets" %}</a>
</li>
<li class="breadcrumb-item active">{% trans "Create Ticket" %}</li>
<li class="breadcrumb-item">
<a href="#">{% trans "Tickets" %}</a>
</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'>
{% 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>
{{ field }}
{% if field.errors %}
<small class='error'>{{ field.errors }}</small>
{% endif %}
{% if field.help_text %}
<small class='form_help_text help-block'>{% trans field.help_text %}</small>
{% endif %}
</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>
<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>
{% 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">
<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>
{% endif %}
{% if field.help_text %}
<small class='form_help_text help-block'>{% trans field.help_text %}</small>
{% endif %}
</div>
{% endif %}
{% endfor %}
<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>
</div>
{% 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),
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>
{{ 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>
{% endblock %}

8
helpdesk/templates/helpdesk/include/alert_form_errors.html Normal file
View File

@ -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>

25
helpdesk/templates/helpdesk/public_create_ticket.html
View File

@ -4,20 +4,23 @@
{% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
{% block helpdesk_breadcrumb %}
<li class="breadcrumb-item">
<a href="{% url 'helpdesk:home' %}">Public</a>
</li>
<li class="breadcrumb-item active">Create Ticket</li>
<li class="breadcrumb-item">
<a href="{% url 'helpdesk:home' %}">Public</a>
</li>
<li class="breadcrumb-item active">Create Ticket</li>
{% 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">
{% include 'helpdesk/public_create_ticket_base.html' %}
<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 %}

32
helpdesk/templates/helpdesk/public_create_ticket_base.html
View File

@ -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'>
{{ 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 %}
{% 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">
{% 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 %}

158
helpdesk/templates/helpdesk/public_homepage.html
View File

@ -4,101 +4,81 @@
{% block helpdesk_title %}{% trans "Welcome to Helpdesk" %}{% endblock %}
{% block helpdesk_breadcrumb %}
<li class="breadcrumb-item">
<a href="#">Public</a>
</li>
<li class="breadcrumb-item active">Homepage</li>
<li class="breadcrumb-item">
<a href="#">Public</a>
</li>
<li class="breadcrumb-item active">Homepage</li>
{% endblock %}
{% block helpdesk_body %}
<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" 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>
</div>
</div>
{% endfor %}
</div>
{% endif %}
<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">
<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>
</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 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>
{% endif %}
{% 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 %}
{% endfor %}
{% endcomment %}
<div class='buttons form-group'>
<input type='submit' class="btn btn-primary" value='{% trans "Submit Ticket" %}' />
{% 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' 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' class='form-control'/>
</div>
</div>
<div class='buttons form-group'>
<input type='submit' class="btn btn-primary" value='{% trans "View Ticket" %}'/>
</div>
</fieldset>
</form>
</div>
</div>
</div>
{% endif %}
</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 %}
<h2>{% trans "Please use button at upper right to login first." %}</h2>
{% endif %}
{% 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>
<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>
<div class='buttons form-group'>
<input type='submit' class="btn btn-primary" value='{% trans "View Ticket" %}' />
</div>
</fieldset>
{% csrf_token %}</form>
</div></div>
</div>
{% endif %}
{% endblock %}
{% block helpdesk_js %}
{{ form.media.js }}
{% endblock %}

6
helpdesk/views/public.py
View File

@ -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'