Added 'category' filter to tasks view.

This commit is contained in:
geoff 2023-12-24 14:54:03 -05:00
parent ee01f41979
commit 7b646f64d4
2 changed files with 30 additions and 0 deletions

View File

@ -34,12 +34,28 @@ $("#status-filter").on("change", function()
tasksTable.column(tasksTable.colReorder.transpose(5)).search(value).draw(); tasksTable.column(tasksTable.colReorder.transpose(5)).search(value).draw();
}); });
$("#category-filter").on("change", function()
{
var value = $(this).val();
if (value === "all")
{
value = "";
}
// Transfer CSS classes of selected element to dropdown element (for background)
$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
tasksTable.column(tasksTable.colReorder.transpose(6)).search(value).draw();
});
$("#clear-filter-button").on("click", function() $("#clear-filter-button").on("click", function()
{ {
$("#search").val(""); $("#search").val("");
$("#status-filter").val("all"); $("#status-filter").val("all");
$("#category-filter").val("all");
$("#search").trigger("keyup"); $("#search").trigger("keyup");
$("#status-filter").trigger("change"); $("#status-filter").trigger("change");
$("#category-filter").trigger("change");
$("#show-done-tasks").trigger('checked', false); $("#show-done-tasks").trigger('checked', false);
}); });

View File

@ -81,6 +81,20 @@
</select> </select>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-xl-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Category') }}</span>
</div>
<select class="custom-control custom-select"
id="category-filter">
<option value="all">{{ $__t('All') }}</option>
@foreach($taskCategories as $taskCategory)
<option value="{{ $taskCategory->name }}">{{ $__t($taskCategory->name) }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="form-check custom-control custom-checkbox"> <div class="form-check custom-control custom-checkbox">
<input class="form-check-input custom-control-input" <input class="form-check-input custom-control-input"