From 89957757fcfc48cec9d1a937b9895d416454a81a Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Fri, 19 Aug 2022 22:49:17 +0200
Subject: [PATCH] #400 - group transactions by date
---
.../src/main/resources/static/css/colors.css | 4 ++
.../resources/static/css/transactions.css | 12 ++++--
.../templates/transactions/transactions.ftl | 39 ++++++++++---------
.../transactions/transactionsMacros.ftl | 14 +++----
4 files changed, 40 insertions(+), 29 deletions(-)
diff --git a/BudgetMasterServer/src/main/resources/static/css/colors.css b/BudgetMasterServer/src/main/resources/static/css/colors.css
index 1180c6202..213991007 100644
--- a/BudgetMasterServer/src/main/resources/static/css/colors.css
+++ b/BudgetMasterServer/src/main/resources/static/css/colors.css
@@ -114,6 +114,10 @@
background-color: var(--color-black) !important;
}
+.background-light {
+ background-color: var(--color-background-light) !important;
+}
+
/* text colors*/
.text-blue {
diff --git a/BudgetMasterServer/src/main/resources/static/css/transactions.css b/BudgetMasterServer/src/main/resources/static/css/transactions.css
index dba193019..6798b857a 100644
--- a/BudgetMasterServer/src/main/resources/static/css/transactions.css
+++ b/BudgetMasterServer/src/main/resources/static/css/transactions.css
@@ -39,12 +39,12 @@
}
.transaction-row-top {
- padding-top: 14px;
+ padding: 14px 0.5rem 0 0.5rem;
+ min-height: 3.4rem;
}
.transaction-row-bottom {
- padding-bottom: 5px;
- margin-bottom: 0;
+ padding-bottom: 14px;
}
.transaction-row-transparent {
@@ -55,6 +55,10 @@
opacity: 1.0 !important;
}
+.transaction-card {
+ margin: 0.4rem 0 0.8rem 0;
+}
+
.transaction-text {
font-size: 1.2rem;
}
@@ -71,6 +75,8 @@
.transaction-date {
min-width: 5.5rem;
+ margin-top: 1.6rem;
+ margin-bottom: 0.5rem;
}
.new-transaction-button {
diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
index 28a841526..e9e671fae 100644
--- a/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
@@ -50,39 +50,42 @@
<@transactionsMacros.buttons filterConfiguration.isActive()/>
<#-- transactions list -->
- <br>
+ <#assign lastDate=''/>
+
<#list transactions as transaction>
<#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/>
- <div class="hide-on-large-only transaction-row-top <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
- <div class="row valign-wrapper transaction-row-bottom">
- <div class="col s3 center-align bold transaction-text">
- ${dateService.getDateStringWithoutYear(transaction.date)}
- </div>
- <@transactionsMacros.transactionType transaction/>
- <@transactionsMacros.transactionButtons transaction/>
+ <#assign transactionDate=dateService.getDateStringWithoutYear(transaction.date)/>
+ <#if transactionDate != lastDate>
+ <div class="col s12 left-align bold transaction-text transaction-date">
+ ${transactionDate}
+ </div>
+ <#assign lastDate=transactionDate/>
+ </#if>
+
+ <div class="hide-on-large-only transaction-row-top card transaction-card background-light <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
+ <div class="row valign-wrapper transaction-row-bottom no-margin-bottom">
+ <@transactionsMacros.transactionNameAndDescription transaction "s6"/>
+ <@transactionsMacros.transactionAmount transaction account "s6"/>
</div>
<div class="row valign-wrapper transaction-row-bottom">
<@transactionsMacros.transactionCategory transaction "left-align no-margin-left"/>
<@transactionsMacros.transactionAccountIcon transaction/>
- <@transactionsMacros.transactionNameAndDescription transaction "s5"/>
- <@transactionsMacros.transactionAmount transaction account "s4"/>
+ <@transactionsMacros.transactionType transaction "s2"/>
+ <@transactionsMacros.transactionButtons transaction "s6 right-align"/>
</div>
</div>
- <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
+
+ <div class="hide-on-med-and-down transaction-row-top card transaction-card transaction-row-bottom background-light <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
<div class="row valign-wrapper no-margin-bottom">
- <div class="col l1 xl1 bold transaction-text transaction-line-height">
- ${dateService.getDateStringWithoutYear(transaction.date)}
- </div>
<@transactionsMacros.transactionCategory transaction "left-align"/>
<@transactionsMacros.transactionAccountIcon transaction/>
- <@transactionsMacros.transactionType transaction/>
+ <@transactionsMacros.transactionType transaction "l1 xl1"/>
<@transactionsMacros.transactionNameAndDescription transaction "l4 xl5"/>
- <@transactionsMacros.transactionAmount transaction account "l3 xl3"/>
- <@transactionsMacros.transactionButtons transaction/>
+ <@transactionsMacros.transactionAmount transaction account "l3 xl3 center-align"/>
+ <@transactionsMacros.transactionButtons transaction "l2 xl1"/>
</div>
</div>
- <hr>
</#list>
<#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
index 98519d63f..5580e2cec 100644
--- a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -1,8 +1,8 @@
<#import "/spring.ftl" as s>
<#import "../helpers/header.ftl" as header>
-<#macro transactionType transaction>
- <div class="col s3 l1 xl1 left-align">
+<#macro transactionType transaction size>
+ <div class="col ${size} left-align">
<#if transaction.isRepeating()>
<i class="material-icons">repeat</i>
</#if>
@@ -48,8 +48,8 @@
</#if>
</#macro>
-<#macro transactionButtons transaction>
- <div class="col s6 l2 xl1 right-align transaction-buttons no-wrap">
+<#macro transactionButtons transaction classes>
+ <div class="col ${classes} transaction-buttons no-wrap">
<#if transaction.isEditable()>
<@header.buttonFlat url='/transactions/' + transaction.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
<@header.buttonFlat url='/transactions/' + transaction.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-transaction" isDataUrl=true/>
@@ -87,11 +87,9 @@
<#macro placeholder transactions>
- <#assign isOnlyRest = transactions?size == 1 && transactions[0].category.type.name() == "REST"/>
- <#if isOnlyRest>
- <br>
- </#if>
+ <br>
+ <#assign isOnlyRest = transactions?size == 1 && transactions[0].category.type.name() == "REST"/>
<#if transactions?size == 0 || isOnlyRest>
<div class="row">
<div class="col s12">
--
GitLab