From 2dde6fbaf0edfdf9326c633e835ad23756a62faf Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Mon, 19 Jul 2021 22:50:13 +0200
Subject: [PATCH] #585 - show filter reset button; show badge if filter is
active; cleanup
---
.../resources/languages/base_de.properties | 1 +
.../resources/languages/base_en.properties | 1 +
src/main/resources/static/css/charts.css | 5 ++
src/main/resources/static/js/charts.js | 58 ++++++++-----------
.../resources/templates/charts/charts.ftl | 9 +--
.../templates/filter/filterMacros.ftl | 38 ------------
6 files changed, 36 insertions(+), 76 deletions(-)
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 4a0529eed..f06777022 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -388,6 +388,7 @@ report.budget.rest=Restbudget:
# filter
filter.active=Filter aktiv
+filter.active.short=aktiv
filter.apply=Filter anwenden
filter.reset=Zurücksetzen
filter.type=Art
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index cd72f649b..a08650762 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -389,6 +389,7 @@ report.budget.rest=Remaining Budget:
# filter
filter.active=Filter active
+filter.active.short=active
filter.apply=Apply Filter
filter.reset=Reset
filter.type=Type
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index d23b28886..d08831bef 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -61,4 +61,9 @@
#chart-date-card {
background-color: var(--color-grey-dark-almost-transparent);
+}
+
+#filterActiveBadge {
+ float: none;
+ margin-left: 1rem;
}
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index b605ab720..1da6d0fd9 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -1,4 +1,3 @@
-let modalFilter;
let chartPickerStartDate;
let chartPickerEndDate;
@@ -19,11 +18,6 @@ $(document).ready(function()
$('#modalConfirmDelete').modal('open');
}
- if($("#modalFilter").length)
- {
- modalFilter = $('#modalFilter').modal();
- }
-
if($(".datepicker").length)
{
chartPickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
@@ -72,15 +66,10 @@ $(document).ready(function()
}
}
- $(".filter-button-close").click(function()
- {
- applyFilter(modalFilter);
- });
-
$(".filter-button-reset").click(function()
{
resetFilter();
- applyFilter(modalFilter);
+ applyFilter();
});
$(".quick-date").click(function()
@@ -111,6 +100,20 @@ $(document).ready(function()
checkShowChartButton();
});
+ let filterCheckBoxes = document.querySelectorAll('#filterSettings input[type=checkbox]');
+ for(let i = 0; i < filterCheckBoxes.length; i++)
+ {
+ filterCheckBoxes[i].addEventListener('change', (event) =>
+ {
+ applyFilter();
+ });
+ }
+
+ $('#filter-name').on('change keydown paste input', function()
+ {
+ applyFilter();
+ });
+
filterChartPreviews();
});
@@ -151,23 +154,10 @@ function createDatePickerEnd(minDate, selectedDate)
});
}
-function applyFilter(modal)
+function applyFilter()
{
- let filterButton = document.getElementById("modalFilterTrigger");
-
- if(isDefaultFilter())
- {
- filterButton.classList.toggle("background-blue", true);
- filterButton.classList.toggle("background-red", false);
- filterButton.childNodes[1].nodeValue = filterNotActive;
- } else
- {
- filterButton.classList.toggle("background-blue", false);
- filterButton.classList.toggle("background-red", true);
- filterButton.childNodes[1].nodeValue = filterActive;
- }
-
- modal.modal('close');
+ let badge = document.getElementById("filterActiveBadge");
+ badge.classList.toggle("hidden", isDefaultFilter());
}
function isDefaultFilter()
@@ -208,16 +198,16 @@ function handleQuickDate(element)
endDate = moment("2100-01-01");
break;
case '4':
- startDate = moment().subtract(1,'weeks').startOf('isoWeek');
- endDate = moment().subtract(1,'weeks').endOf('isoWeek');
+ startDate = moment().subtract(1, 'weeks').startOf('isoWeek');
+ endDate = moment().subtract(1, 'weeks').endOf('isoWeek');
break;
case '5':
- startDate = moment().subtract(1,'months').startOf('month');
- endDate = moment().subtract(1,'months').endOf('month');
+ startDate = moment().subtract(1, 'months').startOf('month');
+ endDate = moment().subtract(1, 'months').endOf('month');
break;
case '6':
- startDate = moment().subtract(1,'years').startOf('year');
- endDate = moment().subtract(1,'years').endOf('year');
+ startDate = moment().subtract(1, 'years').startOf('year');
+ endDate = moment().subtract(1, 'years').endOf('year');
break;
case '7':
startDate = moment("2000-01-01");
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 68ac7dc85..6ec06b092 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -222,13 +222,14 @@
<div class="col s12 no-margin-top center-align">
<ul class="collapsible">
<li>
- <div class="collapsible-header"><i class="fas fa-filter"></i>Filter</div>
- <div class="collapsible-body"><@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/></div>
+ <div class="collapsible-header"><i class="fas fa-filter"></i>${locale.getString("title.filter")} <span class="badge background-red hidden text-white" id="filterActiveBadge">${locale.getString("filter.active.short")}</span></div>
+ <div class="collapsible-body">
+ <@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/>
+ <@filterMacros.buttonResetChart/>
+ </div>
</li>
</ul>
</div>
</div>
</div>
-
- <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
</#macro>
diff --git a/src/main/resources/templates/filter/filterMacros.ftl b/src/main/resources/templates/filter/filterMacros.ftl
index 35f871588..e1de7a060 100644
--- a/src/main/resources/templates/filter/filterMacros.ftl
+++ b/src/main/resources/templates/filter/filterMacros.ftl
@@ -25,31 +25,6 @@
</div>
</#macro>
-<#macro buttonsCharts>
- <div class="row hide-on-small-only valign-wrapper">
- <div class="col s6 right-align">
- <@buttonResetChart/>
- </div>
-
- <div class="col s6 left-align">
- <@buttonClose/>
- </div>
- </div>
-
- <div class="hide-on-med-and-up valign-wrapper">
- <div class="row center-align">
- <div class="col s12">
- <@buttonResetChart/>
- </div>
- </div>
- <div class="row center-align">
- <div class="col s12">
- <@buttonClose/>
- </div>
- </div>
- </div>
-</#macro>
-
<#macro buttonReset>
<a href="<@s.url '/filter/reset'/>" class="waves-effect waves-light btn background-blue"><i class="material-icons left">settings_backup_restore</i>${locale.getString("filter.reset")}</a>
</#macro>
@@ -95,19 +70,6 @@
</div>
</#macro>
-<#macro filterModalCharts filterConfiguration>
- <div id="modalFilter" class="modal background-color">
- <div class="modal-content">
- <h4>${locale.getString("title.filter")}</h4>
- <@filterModalContent filterConfiguration "filterConfiguration"/>
- <@buttonsCharts/>
- </div>
- <div class="modal-footer background-color">
- <@header.buttonLink url='' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white'/>
- </div>
- </div>
-</#macro>
-
<#macro filterModalContent filterConfiguration prefix="">
<#if prefix?length gt 0>
<#assign prefixValue = prefix + "."/>
--
GitLab