more redminenish ticket filters

This commit is contained in:
Jachym Cepicky 2019-07-06 22:24:08 +02:00
parent 61d8df932c
commit e7465ab2fd
9 changed files with 219 additions and 85 deletions

View File

@ -16,6 +16,27 @@ $(document).ready(function() {
$(boxName).children("select").each(function() {
this.selectedIndex = -1;
});
var selectId = $(this).parents(".filterBox").attr('id');
var attr = selectId.replace("filterBox", "");
$("#filterBuilderSelect-" + attr)[0].disabled = "";
return false;
});
});
/**
* Called, when filterBuilderSelect input changed - will make input div appear
* to the user. Also disable this option in the Add filter menu
*
* @param {string} val name of selected filter value
*/
var onFilterChange = function(val) {
if (val) {
var boxName = "#filterBox" + val;
$(boxName).slideDown();
$(boxName)[0].style.display="block";
$("#filterBuilderSelect-" + val)[0].disabled = "disabled";
}
};

View File

@ -24,7 +24,6 @@ Bootstrap overrides
}
.thumbnail.filterBox {
display: none;
float: left;
border: solid #ccc 1px;
padding: 10px;
@ -33,10 +32,14 @@ Bootstrap overrides
min-height: 200px;
}
.thumbnail.filterBoxShow {
.filterBox {
display: none;
}
.filterBoxShow {
display: block;
}
.filterBox label {
clear: both;
display: block;

View File

@ -0,0 +1,20 @@
{% load i18n humanize %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_date_from'>{% trans "Date (From)" %}</label>
</div>
<div class="col col-sm-3">
<input type='text' name='date_from' value='{{ query_params.filtering.created__gte }}' id='id_date_from' />
</div>
<div class="col col-sm-2">
<label for='id_date_to'>{% trans "Date (To)" %}</label>
</div>
<div class="col col-sm-3">
<input type='text' name='date_to' value='{{ query_params.filtering.created__lte }}' id='id_date_to' />
</div>
<div class="col col-sm-1">
<button class='float-right filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
<p class='filterHelp'>{% trans "Use YYYY-MM-DD date format, eg 2018-01-30" %}</p>
</div>

View File

@ -0,0 +1,13 @@
{% load i18n humanize %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_query'>{% trans "Keywords" %}</label>
</div>
<div class="col col-sm-3">
<input type='text' name='q' value='{{ query }}' id='id_query' />
</div>
<div class="col col-sm-6">
<button class='filterBuilderRemove btn btn-danger btn-sm float-right'><i class="fas fa-trash-alt"></i></button>
</div>
<p class='filterHelp'>{% trans "Keywords are case-insensitive, and will be looked for in the title, body and submitter fields." %}</p>
</div>

View File

@ -0,0 +1,21 @@
{% load i18n humanize %}
{% load static from staticfiles %}
{% load in_list %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_owners' class="col-form-label">{% trans "Owner(s)" %}:</label>
</div>
<div class="col col-sm-3">
<select id='id_owners' name='assigned_to' multiple='selected' size='5'>
{% for u in user_choices %}
<option value='{{ u.id }}'{% if u.id|in_list:query_params.filtering.assigned_to__id__in %} selected='selected'{% endif %}>
{{ u.get_username }}{% ifequal u user %} {% trans "(ME)" %}{% endifequal %}
</option>
{% endfor %}
</select>
</div>
<div class="col col-sm-6">
<button class="filterBuilderRemove btn btn-danger btn-sm float-right"><i class="fas fa-trash-alt"></i></button>
</div>
<div class='form-row filterHelp'>{% trans "Ctrl-Click to select multiple options" %}</div>
</div>

View File

@ -0,0 +1,20 @@
{% load i18n humanize %}
{% load static from staticfiles %}
{% load in_list %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_queues'>{% trans "Queue(s)" %}:</label>
</div>
<div class="col col-sm-3">
<select id='id_queues' name='queue' multiple='selected' size='5'>
{% for q in queue_choices %}
<option value='{{ q.id }}'{% if q.id|in_list:query_params.filtering.queue__id__in %} selected="selected"{% endif %}>{{ q.title }}</option>
{% endfor %}
</select>
</div>
<div class="col col-sm-6">
<button class="filterBuilderRemove btn btn-danger btn-sm float-right"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="form-row filterHelp">{% trans "Ctrl-click to select multiple options" %}</div>
</div>

View File

@ -0,0 +1,39 @@
{% load i18n humanize %}
{% load static from staticfiles %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_sort' class="col-form-label">{% trans "Sorting" %}:</label>
</div>
<div class="col col-sm-3">
<select id='id_sortx' name='sortx' class="">
<option value='created'{% ifequal query_params.sorting "created"%} selected='selected'{% endifequal %}>
{% trans "Created" %}
</option>
<option value='title'{% ifequal query_params.sorting "title"%} selected='selected'{% endifequal %}>
{% trans "Title" %}
</option>
<option value='queue'{% ifequal query_params.sorting "queue"%} selected='selected'{% endifequal %}>
{% trans "Queue" %}
</option>
<option value='status'{% ifequal query_params.sorting "status"%} selected='selected'{% endifequal %}>
{% trans "Status" %}
</option>
<option value='priority'{% ifequal query_params.sorting "priority"%} selected='selected'{% endifequal %}>
{% trans "Priority" %}
</option>
<option value='assigned_to'{% ifequal query_params.sorting "assigned_to"%} selected='selected'{% endifequal %}>
{% trans "Owner" %}
</option>
</select>
</div>
<div class="col col-sm-2">
<label for='id_sortreverse' class="col-form-label">{% trans "Reverse" %}</label>
</div>
<div class="col col-sm-3">
<input type='checkbox' name='sortreverse' id='id_sortreverse'{% if query_params.sortreverse %} checked='checked'{% endif %} />
</div>
<div class="col col-sm-1">
<button class="filterBuilderRemove btn btn-danger btn-sm float-right"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="form-row filterHelp">{% trans "Ordering applied to tickets" %}</div>
</div>

View File

@ -0,0 +1,15 @@
{% load i18n humanize %}
{% load static from staticfiles %}
{% load in_list %}
<div class="form-row">
<div class="col col-sm-3">
<label for='id_statuses'>{% trans "Status(es)" %}:</label>
</div>
<div class="col col-sm-3">
<select id='id_statuses' name='status' multiple='selected' size='5'>{% for s in status_choices %}<option value='{{ s.0 }}'{% if s.0|in_list:query_params.filtering.status__in %} selected='selected'{% endif %}>{{ s.1 }}</option>{% endfor %}</select>
</div>
<div class="col col-sm-6">
<button class="filterBuilderRemove btn btn-danger btn-sm float-right"><i class="fas fa-trash-alt"></i></button>
</div>
<div class='form-row filterHelp'>{% trans "Ctrl-click to select multiple options" %}</div>
</div>

View File

@ -42,8 +42,8 @@
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link btn-sm" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-question-circle"></i>
<strong>{% trans "Change Query" %}</strong>
<i class="fas fa-filter"></i>
{% trans "Filters" %}
</button>
</h5>
</div>
@ -51,90 +51,44 @@
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#queryAccordion">
<div class="card-body">
<form>
<div class="form-group">
<label for="filterBuilderSelect">{% trans "Select filter" %}:</label>
<select aria-describedby="select-description" name='select' id='filterBuilderSelect'>
<option value='Sort'>{% trans "Sorting" %}</option>
<option value='Owner'>{% trans "Owner" %}</option>
<option value='Queue'>{% trans "Queue" %}</option>
<option value='Status'>{% trans "Status" %}</option>
<option value='Keywords'>{% trans "Keywords" %}</option>
<option value='Dates'>{% trans "Date Range" %}</option>
<div class="form-group float-right">
<label for="filterBuilderSelect">{% trans "Add filter" %}:</label>
<select class="custom-select custom-select-sm mb-0" aria-describedby="select-description" name="select" id="filterBuilderSelect"
onChange="onFilterChange(this.value)">
<option value="">--</option>
<option id="filterBuilderSelect-Sort" value="Sort">{% trans "Sorting" %}</option>
<option id="filterBuilderSelect-Owner" value="Owner">{% trans "Owner" %}</option>
<option id="filterBuilderSelect-Queue" value="Queue">{% trans "Queue" %}</option>
<option id="filterBuilderSelect-Status" value="Status">{% trans "Status" %}</option>
<option id="filterBuilderSelect-Keywords" value="Keywords">{% trans "Keywords" %}</option>
<option id="filterBuilderSelect-Dates" value="Dates">{% trans "Date Range" %}</option>
</select>
<small id="select-description" class="form-text text-muted">{% trans "Add another filter to list of filers for finer selection of displayed tickets" %}</small>
<button class='btn btn-success btn-sm' id='filterBuilderButton'>{% trans "Add selected filter" %} <i class="fas fa-plus-circle"></i></button>
{% csrf_token %}</form>
{% csrf_token %}
</form>
</div>
<form method='get' action='./'>
<div class="d-flex align-items-stretch">
<div class='thumbnail filterBox{% if query_params.sorting %} filterBoxShow{% endif %}' id='filterBoxSort'>
<label for='id_sort'>{% trans "Sorting" %}</label>
<select id='id_sort' name='sort'>
<option value='created'{% ifequal query_params.sorting "created"%} selected='selected'{% endifequal %}>
{% trans "Created" %}
</option>
<option value='title'{% ifequal query_params.sorting "title"%} selected='selected'{% endifequal %}>
{% trans "Title" %}
</option>
<option value='queue'{% ifequal query_params.sorting "queue"%} selected='selected'{% endifequal %}>
{% trans "Queue" %}
</option>
<option value='status'{% ifequal query_params.sorting "status"%} selected='selected'{% endifequal %}>
{% trans "Status" %}
</option>
<option value='priority'{% ifequal query_params.sorting "priority"%} selected='selected'{% endifequal %}>
{% trans "Priority" %}
</option>
<option value='assigned_to'{% ifequal query_params.sorting "assigned_to"%} selected='selected'{% endifequal %}>
{% trans "Owner" %}
</option>
</select>
<label for='id_sortreverse'>{% trans "Reverse" %}</label>
<input type='checkbox' name='sortreverse' id='id_sortreverse'{% if query_params.sortreverse %} checked='checked'{% endif %} />
<p class='filterHelp'>{% trans "Ordering applied to tickets" %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
<ul class="list-group list-group-flush">
<li id="filterBoxSort" class="filterBox{% if query_params.sorting %} filterBoxShow{% endif %} list-group-item" id="filterBoxSort">
{% include './filters/sorting.html' %}
</li>
<li class="filterBox{% if query_params.filtering.assigned_to__id__in %} filterBoxShow{% endif %} list-group-item" id=filterBoxOwner>
{% include './filters/owner.html' %}
</li>
<li class="list-group-item filterBox{% if query_params.filtering.queue__id__in %} filterBoxShow{% endif %}" id="filterBoxQueue">
{% include './filters/queue.html' %}
</li>
<li class="list-group-item filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}" id="filterBoxStatus">
{% include './filters/status.html' %}
</li>
<li class="list-group-item filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}" id='filterBoxDates'>
{% include './filters/date.html' %}
</li>
<li class="list-group-item filterBox{% if query %} filterBoxShow{% endif %}" id="filterBoxKeywords">
{% include './filters/keywords.html' %}
</li>
</ul>
<div class='thumbnail filterBox{% if query_params.filtering.assigned_to__id__in %} filterBoxShow{% endif %}' id='filterBoxOwner'>
<label for='id_owners'>{% trans "Owner(s)" %}</label>
<select id='id_owners' name='assigned_to' multiple='selected' size='5'>
{% for u in user_choices %}
<option value='{{ u.id }}'{% if u.id|in_list:query_params.filtering.assigned_to__id__in %} selected='selected'{% endif %}>
{{ u.get_username }}{% ifequal u user %} {% trans "(ME)" %}{% endifequal %}
</option>
{% endfor %}
</select>
<p class='filterHelp'>{% trans "Ctrl-Click to select multiple options" %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button></a>
</div>
<div class='thumbnail filterBox{% if query_params.filtering.queue__id__in %} filterBoxShow{% endif %}' id='filterBoxQueue'>
<label for='id_queues'>{% trans "Queue(s)" %}</label><select id='id_queues' name='queue' multiple='selected' size='5'>{% for q in queue_choices %}<option value='{{ q.id }}'{% if q.id|in_list:query_params.filtering.queue__id__in %} selected='selected'{% endif %}>{{ q.title }}</option>{% endfor %}</select>
<p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
<div class='thumbnail filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}' id='filterBoxStatus'>
<label for='id_statuses'>{% trans "Status(es)" %}</label><select id='id_statuses' name='status' multiple='selected' size='5'>{% for s in status_choices %}<option value='{{ s.0 }}'{% if s.0|in_list:query_params.filtering.status__in %} selected='selected'{% endif %}>{{ s.1 }}</option>{% endfor %}</select>
<p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
<div class='thumbnail filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}' id='filterBoxDates'>
<label for='id_date_from'>{% trans "Date (From)" %}</label><input type='text' name='date_from' value='{{ query_params.filtering.created__gte }}' id='id_date_from' />
<label for='id_date_to'>{% trans "Date (To)" %}</label><input type='text' name='date_to' value='{{ query_params.filtering.created__lte }}' id='id_date_to' />
<p class='filterHelp'>{% trans "Use YYYY-MM-DD date format, eg 2018-01-30" %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
<div class='thumbnail filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
<label for='id_query'>{% trans "Keywords" %}</label><input type='text' name='q' value='{{ query }}' id='id_query' />
<p class='filterHelp'>{% trans "Keywords are case-insensitive, and will be looked for in the title, body and submitter fields." %}</p>
<button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
</div>
</div> <!-- end div d-flex class -->
<hr style='clear: both;' />
<input class="btn btn-primary btn-sm" type='submit' value='{% trans "Apply Filters" %}' />
{% if from_saved_query and saved_query.user == user %}
<p>{% blocktrans with saved_query.title as query_name %}You are currently viewing saved query <strong>"{{ query_name }}"</strong>.{% endblocktrans %} <a href='{% url 'helpdesk:delete_query' saved_query.id %}'>{% trans "Delete Saved Query" %}</a></p>
@ -153,7 +107,7 @@
<h5 class="mb-0">
<button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-save"></i>
<strong>{% trans "Save Query" %}</strong>
{% trans "Save Query" %}
</button>
</h5>
</div>
@ -184,7 +138,7 @@
<h5 class="mb-0">
<button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-clipboard-check"></i>
<strong>{% trans "Use Saved Query" %}</strong>
{% trans "Use Saved Query" %}
</button>
</h5>
</div>
@ -380,6 +334,34 @@
});
});
})
/**
* Disable active filtering options in filter select menu
*/
$(document).ready(function() {
{% if query_params.sorting %}
$("#filterBuilderSelect-Sort")[0].disabled = "disabled";
{% endif %}
{% if query_params.filtering.assigned_to__id__in %}
$("#filterBuilderSelect-Owner")[0].disabled = "disabled";
{% endif %}
{% if query_params.filtering.queue__id__in %}
$("#filterBuilderSelect-Queue")[0].disabled = "disabled";
{% endif %}
{% if query_params.filtering.status__in %}
$("#filterBuilderSelect-Status")[0].disabled = "disabled";
{% endif %}
{% if query_params.filtering.created__gte or query_params.filtering.created__lte %}
$("#filterBuilderSelect-Dates")[0].disabled = "disabled";
{% endif %}
{% if query %}
$("#filterBuilderSelect-Keywords")[0].disabled = "disabled";
{% endif %}
});
{% for f in query_params.filtering %}
{% endfor %}
</script>
{% endblock %}