From a5bf8793b9d1c7248f6a6dc2811889b9e991ca25 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 2 Mar 2019 12:02:29 +0100
Subject: [PATCH] #293 - converted filter page to modal
---
.../controller/FilterController.java | 13 +-
.../controller/ReportController.java | 2 +-
.../controller/TransactionController.java | 4 +-
.../resources/templates/filter/filter.ftl | 126 ------------------
.../templates/filter/filterMacros.ftl | 110 +++++++++++++++
.../resources/templates/reports/reports.ftl | 7 +-
.../templates/transactions/transactions.ftl | 7 +-
.../transactions/transactionsMacros.ftl | 6 +-
8 files changed, 131 insertions(+), 144 deletions(-)
delete mode 100644 src/main/resources/templates/filter/filter.ftl
diff --git a/src/main/java/de/deadlocker8/budgetmaster/controller/FilterController.java b/src/main/java/de/deadlocker8/budgetmaster/controller/FilterController.java
index b27898612..27daf9794 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/controller/FilterController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/controller/FilterController.java
@@ -31,26 +31,19 @@ public class FilterController extends BaseController
@Autowired
private FilterHelpersService filterHelpers;
- @RequestMapping("/filter")
- public String filter(HttpServletRequest request, Model model)
- {
- model.addAttribute("filterConfiguration", filterHelpers.getFilterConfiguration(request));
- return "filter/filter";
- }
-
@RequestMapping(value = "/filter/apply", method = RequestMethod.POST)
public String post(WebRequest request, @ModelAttribute("NewFilterConfiguration") FilterConfiguration filterConfiguration)
{
request.setAttribute("filterConfiguration", filterConfiguration, WebRequest.SCOPE_SESSION);
- return "redirect:/filter";
+ return "redirect:" + request.getHeader("Referer");
}
@RequestMapping("/filter/reset")
- public String reset(WebRequest request, Model model)
+ public String reset(WebRequest request)
{
FilterConfiguration filterConfiguration = FilterConfiguration.DEFAULT;
filterConfiguration.setFilterCategories(filterHelpers.getFilterCategories());
request.setAttribute("filterConfiguration", filterConfiguration, WebRequest.SCOPE_SESSION);
- return "redirect:/filter";
+ return "redirect:" + request.getHeader("Referer");
}
}
\ No newline at end of file
diff --git a/src/main/java/de/deadlocker8/budgetmaster/controller/ReportController.java b/src/main/java/de/deadlocker8/budgetmaster/controller/ReportController.java
index 2dc51d543..abfefd06e 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/controller/ReportController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/controller/ReportController.java
@@ -66,7 +66,7 @@ public class ReportController extends BaseController
model.addAttribute("reportSettings", reportSettingsService.getReportSettings());
model.addAttribute("currentDate", date);
- model.addAttribute("isFilterActive", filterHelpers.getFilterConfiguration(request).isActive());
+ model.addAttribute("filterConfiguration", filterHelpers.getFilterConfiguration(request));
return "reports/reports";
}
diff --git a/src/main/java/de/deadlocker8/budgetmaster/controller/TransactionController.java b/src/main/java/de/deadlocker8/budgetmaster/controller/TransactionController.java
index 3a2f6cb53..d295ec901 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/controller/TransactionController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/controller/TransactionController.java
@@ -81,7 +81,7 @@ public class TransactionController extends BaseController
model.addAttribute("paymentSum", paymentSum);
model.addAttribute("currentDate", date);
model.addAttribute("rest", rest);
- model.addAttribute("isFilterActive", filterConfiguration.isActive());
+ model.addAttribute("filterConfiguration", filterConfiguration);
return "transactions/transactions";
}
@@ -108,7 +108,7 @@ public class TransactionController extends BaseController
model.addAttribute("currentDate", date);
model.addAttribute("currentTransaction", transactionRepository.getOne(ID));
model.addAttribute("rest", rest);
- model.addAttribute("isFilterActive", filterConfiguration.isActive());
+ model.addAttribute("filterConfiguration", filterConfiguration);
return "transactions/transactions";
diff --git a/src/main/resources/templates/filter/filter.ftl b/src/main/resources/templates/filter/filter.ftl
deleted file mode 100644
index c73cf9297..000000000
--- a/src/main/resources/templates/filter/filter.ftl
+++ /dev/null
@@ -1,126 +0,0 @@
-<html>
- <head>
- <#import "../helpers/header.ftl" as header>
- <@header.header "BudgetMaster"/>
- <@header.style "filter"/>
- <#import "/spring.ftl" as s>
- </head>
- <body class="budgetmaster-blue-light">
- <#import "../helpers/navbar.ftl" as navbar>
- <@navbar.navbar ""/>
-
- <#import "filterMacros.ftl" as filterMacros>
-
-
- <main>
- <div class="card main-card background-color">
- <div class="container">
- <form name="NewFilterConfiguration" action="<@s.url '/filter/apply'/>" method="post">
- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-
- <div class="row">
- <div class="s12">
- <ul class="collapsible z-depth-2" id="filterSettings">
- <li id="section-type">
- <div class="collapsible-header">
- <i class="fas fa-piggy-bank"></i>
- ${locale.getString("filter.type")}
- <div class="collapsible-header-status"></div>
- </div>
- <div class="collapsible-body">
- <div class="row no-margin">
- <div class="col s6 m6 l6">
- <label>
- <input type="checkbox" name="includeIncome" <#if filterConfiguration.isIncludeIncome()>checked="checked"</#if>>
- <span class="text-color">${locale.getString('filter.type.income')}</span>
- </label>
- </div>
- <div class="col s6 m6 l6">
- <label>
- <input type="checkbox" name="includeExpenditure" <#if filterConfiguration.isIncludeExpenditure()>checked="checked"</#if>>
- <span class="text-color">${locale.getString('filter.type.expenditure')}</span>
- </label>
- </div>
- </div>
- </div>
- </li>
-
- <li id="section-repeating">
- <div class="collapsible-header">
- <i class="material-icons">repeat</i>
- ${locale.getString("filter.repeating")}
- <div class="collapsible-header-status"></div>
- </div>
- <div class="collapsible-body">
- <div class="row no-margin">
- <div class="col s6 m6 l6">
- <label>
- <input type="checkbox" name="includeNotRepeating" <#if filterConfiguration.isIncludeNotRepeating()>checked="checked"</#if>>
- <span class="text-color">${locale.getString('filter.repeating.false')}</span>
- </label>
- </div>
- <div class="col s6 m6 l6">
- <label>
- <input type="checkbox" name="includeRepeating" <#if filterConfiguration.isIncludeRepeating()>checked="checked"</#if>>
- <span class="text-color">${locale.getString('filter.repeating.true')}</span>
- </label>
- </div>
- </div>
- </div>
- </li>
-
- <li id="section-categories">
- <div class="collapsible-header">
- <i class="material-icons">label</i>
- ${locale.getString("filter.categories")}
- <div class="collapsible-header-status"></div>
- </div>
- <div class="collapsible-body">
- <div class="row no-margin">
- <div class="col s12">
- <#list filterConfiguration.getFilterCategories() as filterCategory>
- <div>
- <label>
- <input type="checkbox" name="filterCategories['${filterCategory?index}'].include" <#if filterCategory.isInclude()>checked="checked"</#if>>
- <span class="text-color">${filterCategory.getName()}</span>
- </label>
- <input type="hidden" name="filterCategories['${filterCategory?index}'].ID" value="${filterCategory.getID()}"/>
- <input type="hidden" name="filterCategories['${filterCategory?index}'].name" value="${filterCategory.getName()}"/>
- </div>
- </#list>
- </div>
- </div>
- </div>
- </li>
-
- <li id="section-name">
- <div class="collapsible-header">
- <i class="material-icons">subject</i>
- ${locale.getString("filter.name")}
- <div class="collapsible-header-status"></div>
- </div>
- <div class="collapsible-body">
- <div class="row no-margin">
- <div class="input-field col s12">
- <input id="filter-name" type="text" name="name" value="<#if filterConfiguration.getName()??>${filterConfiguration.getName()}</#if>">
- <label for="filter-name">${locale.getString("filter.name.contains")}</label>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
-
- <@filterMacros.buttons/>
- </form>
- </div>
- </div>
- </main>
-
- <!-- Scripts-->
- <#import "../helpers/scripts.ftl" as scripts>
- <@scripts.scripts/>
- <script src="<@s.url '/js/filter.js'/>"></script>
- </body>
-</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/filter/filterMacros.ftl b/src/main/resources/templates/filter/filterMacros.ftl
index ad2378042..a76321771 100644
--- a/src/main/resources/templates/filter/filterMacros.ftl
+++ b/src/main/resources/templates/filter/filterMacros.ftl
@@ -34,3 +34,113 @@
<i class="fas fa-filter left"></i>${locale.getString("filter.apply")}
</button>
</#macro>
+
+<#macro filterModal filterConfiguration>
+ <div id="modalFilter" class="modal background-color">
+ <div class="modal-content">
+ <h4>${locale.getString("title.filter")}</h4>
+ <form name="NewFilterConfiguration" action="<@s.url '/filter/apply'/>" method="post">
+ <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+
+ <div class="row">
+ <div class="s12">
+ <ul class="collapsible z-depth-2" id="filterSettings">
+ <li id="section-type">
+ <div class="collapsible-header">
+ <i class="fas fa-piggy-bank"></i>
+ ${locale.getString("filter.type")}
+ <div class="collapsible-header-status"></div>
+ </div>
+ <div class="collapsible-body">
+ <div class="row no-margin">
+ <div class="col s6 m6 l6">
+ <label>
+ <input type="checkbox" name="includeIncome" <#if filterConfiguration.isIncludeIncome()>checked="checked"</#if>>
+ <span class="text-color">${locale.getString('filter.type.income')}</span>
+ </label>
+ </div>
+ <div class="col s6 m6 l6">
+ <label>
+ <input type="checkbox" name="includeExpenditure" <#if filterConfiguration.isIncludeExpenditure()>checked="checked"</#if>>
+ <span class="text-color">${locale.getString('filter.type.expenditure')}</span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li id="section-repeating">
+ <div class="collapsible-header">
+ <i class="material-icons">repeat</i>
+ ${locale.getString("filter.repeating")}
+ <div class="collapsible-header-status"></div>
+ </div>
+ <div class="collapsible-body">
+ <div class="row no-margin">
+ <div class="col s6 m6 l6">
+ <label>
+ <input type="checkbox" name="includeNotRepeating" <#if filterConfiguration.isIncludeNotRepeating()>checked="checked"</#if>>
+ <span class="text-color">${locale.getString('filter.repeating.false')}</span>
+ </label>
+ </div>
+ <div class="col s6 m6 l6">
+ <label>
+ <input type="checkbox" name="includeRepeating" <#if filterConfiguration.isIncludeRepeating()>checked="checked"</#if>>
+ <span class="text-color">${locale.getString('filter.repeating.true')}</span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li id="section-categories">
+ <div class="collapsible-header">
+ <i class="material-icons">label</i>
+ ${locale.getString("filter.categories")}
+ <div class="collapsible-header-status"></div>
+ </div>
+ <div class="collapsible-body">
+ <div class="row no-margin">
+ <div class="col s12">
+ <#list filterConfiguration.getFilterCategories() as filterCategory>
+ <div>
+ <label>
+ <input type="checkbox" name="filterCategories['${filterCategory?index}'].include" <#if filterCategory.isInclude()>checked="checked"</#if>>
+ <span class="text-color">${filterCategory.getName()}</span>
+ </label>
+ <input type="hidden" name="filterCategories['${filterCategory?index}'].ID" value="${filterCategory.getID()}"/>
+ <input type="hidden" name="filterCategories['${filterCategory?index}'].name" value="${filterCategory.getName()}"/>
+ </div>
+ </#list>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li id="section-name">
+ <div class="collapsible-header">
+ <i class="material-icons">subject</i>
+ ${locale.getString("filter.name")}
+ <div class="collapsible-header-status"></div>
+ </div>
+ <div class="collapsible-body">
+ <div class="row no-margin">
+ <div class="input-field col s12">
+ <input id="filter-name" type="text" name="name" value="<#if filterConfiguration.getName()??>${filterConfiguration.getName()}</#if>">
+ <label for="filter-name">${locale.getString("filter.name.contains")}</label>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <@buttons/>
+ </form>
+ </div>
+ <div class="modal-footer background-color">
+ <a href="" class="modal-action modal-close waves-effect waves-light red btn-flat white-text">${locale.getString("cancel")}</a>
+ </div>
+ </div>
+</#macro>
diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl
index 4f13257a8..1489b47e3 100644
--- a/src/main/resources/templates/reports/reports.ftl
+++ b/src/main/resources/templates/reports/reports.ftl
@@ -4,6 +4,7 @@
<@header.header "BudgetMaster"/>
<@header.style "reports"/>
<@header.style "globalDatepicker"/>
+ <@header.style "filter"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
@@ -11,6 +12,7 @@
<@navbar.navbar "reports"/>
<#import "../transactions/transactionsMacros.ftl" as transactionsMacros>
+ <#import "../filter/filterMacros.ftl" as filterMacros>
<main>
<div class="card main-card background-color">
@@ -27,7 +29,7 @@
<div class="row">
<div class="col s12 center-align">
- <@transactionsMacros.buttonFilter isFilterActive/>
+ <@transactionsMacros.buttonFilter filterConfiguration.isActive()/>
</div>
</div>
@@ -102,6 +104,8 @@
</form>
</div>
</div>
+
+ <@filterMacros.filterModal filterConfiguration/>
</main>
<!-- Scripts-->
@@ -110,6 +114,7 @@
<script src="<@s.url '/sortable-1.8.1/Sortable.min.js'/>"></script>
<script src="<@s.url '/js/reports.js'/>"></script>
<script src="<@s.url '/js/globalDatePicker.js'/>"></script>
+ <script src="<@s.url '/js/filter.js'/>"></script>
<script>document.cookie = "currentDate=${helpers.getDateString(currentDate)}";</script>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index a463bbb90..ec9e72a84 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -4,6 +4,7 @@
<@header.header "BudgetMaster"/>
<@header.style "categories"/>
<@header.style "globalDatepicker"/>
+ <@header.style "filter"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
@@ -11,6 +12,7 @@
<@navbar.navbar "transactions"/>
<#import "transactionsMacros.ftl" as transactionsMacros>
+ <#import "../filter/filterMacros.ftl" as filterMacros>
<main>
<div class="card main-card background-color">
@@ -42,7 +44,7 @@
</div>
<#-- buttons -->
- <@transactionsMacros.buttons isFilterActive/>
+ <@transactionsMacros.buttons filterConfiguration.isActive()/>
<#-- transactions list -->
<br>
@@ -71,6 +73,8 @@
<#if currentTransaction??>
<@transactionsMacros.deleteModal currentTransaction/>
</#if>
+
+ <@filterMacros.filterModal filterConfiguration/>
</main>
<!-- Scripts-->
@@ -78,6 +82,7 @@
<@scripts.scripts/>
<script src="<@s.url '/js/transactions.js'/>"></script>
<script src="<@s.url '/js/globalDatePicker.js'/>"></script>
+ <script src="<@s.url '/js/filter.js'/>"></script>
<script>document.cookie = "currentDate=${helpers.getDateString(currentDate)}";</script>
</body>
</html>
diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl
index 87bc28188..284c3c83c 100644
--- a/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -106,8 +106,8 @@
<#macro buttonFilter isFilterActive>
<#if isFilterActive>
- <a href="<@s.url '/filter'/>" class="waves-effect waves-light btn budgetmaster-red"><i class="fas fa-filter left"></i>${locale.getString("filter.active")}</a>
+ <a href="#modalFilter" class="modal-trigger waves-effect waves-light btn budgetmaster-red"><i class="fas fa-filter left"></i>${locale.getString("filter.active")}</a>
<#else>
- <a href="<@s.url '/filter'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="fas fa-filter left"></i>${locale.getString("title.filter")}</a>
+ <a href="#modalFilter" class="modal-trigger waves-effect waves-light btn budgetmaster-blue"><i class="fas fa-filter left"></i>${locale.getString("title.filter")}</a>
</#if>
-</#macro>
\ No newline at end of file
+</#macro>
--
GitLab