Skip to content
Snippets Groups Projects
Commit 3b4bda41 authored by Robert Goldmann's avatar Robert Goldmann
Browse files

Fixed #336 - Show category colored circles in new transaction select

parent 5072cf17
No related branches found
No related tags found
No related merge requests found
Pipeline #309 passed
...@@ -4,6 +4,7 @@ import de.deadlocker8.budgetmaster.database.accountmatches.AccountMatch; ...@@ -4,6 +4,7 @@ import de.deadlocker8.budgetmaster.database.accountmatches.AccountMatch;
import de.deadlocker8.budgetmaster.entities.*; import de.deadlocker8.budgetmaster.entities.*;
import de.deadlocker8.budgetmaster.repeating.modifier.RepeatingModifierType; import de.deadlocker8.budgetmaster.repeating.modifier.RepeatingModifierType;
import de.deadlocker8.budgetmaster.repositories.AccountRepository; import de.deadlocker8.budgetmaster.repositories.AccountRepository;
import de.deadlocker8.budgetmaster.repositories.CategoryRepository;
import de.deadlocker8.budgetmaster.repositories.SettingsRepository; import de.deadlocker8.budgetmaster.repositories.SettingsRepository;
import de.deadlocker8.budgetmaster.repositories.TagRepository; import de.deadlocker8.budgetmaster.repositories.TagRepository;
import de.deadlocker8.budgetmaster.utils.Colors; import de.deadlocker8.budgetmaster.utils.Colors;
...@@ -44,6 +45,9 @@ public class HelpersService ...@@ -44,6 +45,9 @@ public class HelpersService
@Autowired @Autowired
private TransactionService transactionService; private TransactionService transactionService;
@Autowired
private CategoryRepository categoryRepository;
public String getCurrencyString(int amount) public String getCurrencyString(int amount)
{ {
return getCurrencyString(amount / 100.0); return getCurrencyString(amount / 100.0);
...@@ -271,4 +275,9 @@ public class HelpersService ...@@ -271,4 +275,9 @@ public class HelpersService
return accountMatches; return accountMatches;
} }
public int getIDOfNoCatgeory()
{
return categoryRepository.findByType(CategoryType.NONE).getID();
}
} }
\ No newline at end of file
...@@ -9,6 +9,22 @@ ...@@ -9,6 +9,22 @@
font-size: 20px; font-size: 20px;
} }
.category-circle-small {
width: 34px;
height: 34px;
text-align: center;
font-weight: bold;
border-radius: 50%;
line-height: 34px !important;
font-size: 17px !important;
vertical-align: middle;
margin: 14px 16px;
}
.category-select {
display: inline-block !important;
}
.category-color { .category-color {
height: 35px; height: 35px;
width: 90%; width: 90%;
......
...@@ -9,6 +9,22 @@ ...@@ -9,6 +9,22 @@
font-size: 20px; font-size: 20px;
} }
.category-circle-small {
width: 34px;
height: 34px;
text-align: center;
font-weight: bold;
border-radius: 50%;
line-height: 34px !important;
font-size: 17px !important;
vertical-align: middle;
margin: 14px 16px;
}
.category-select {
display: inline-block !important;
}
.category-color { .category-color {
height: 35px; height: 35px;
width: 90%; width: 90%;
......
...@@ -154,6 +154,8 @@ $( document ).ready(function() { ...@@ -154,6 +154,8 @@ $( document ).ready(function() {
return false; return false;
} }
}); });
beautifyCategorySelect();
}); });
var transactionRepeatingModifierID = "#transaction-repeating-modifier"; var transactionRepeatingModifierID = "#transaction-repeating-modifier";
...@@ -284,3 +286,40 @@ function validateForm() ...@@ -284,3 +286,40 @@ function validateForm()
return true; return true;
} }
function beautifyCategorySelect() {
var counter = 0;
$("#categoryWrapper ul.dropdown-content.select-dropdown li span").each(function () {
var categoryInfos = $(this).text().split("@@@");
var categoryName = categoryInfos[0];
var firstLetter = capitalizeFirstLetter(categoryName);
var categoryColor = categoryInfos[1];
var appropriateTextColor = categoryInfos[2];
$(this).text(categoryName);
$(this).data("infos", categoryInfos);
$(this).addClass("category-select");
$(this).parent().prepend('<div class="category-circle-small category-select" id="category-' + counter + '" style="background-color: ' + categoryColor + '"><span style="color: ' + appropriateTextColor + '"></span></div>');
$('#categoryWrapper').parent().append('<style>#category-' + counter + ':after{content: "' + firstLetter + '";}</style>');
counter++;
});
// select current category from code again in order to avoid showing the full infos text (e.g. Test@@@#FFFFFF@#000000@@@1) in the input field by materialize
if(typeof selectedCategory !== 'undefined')
{
$("#categoryWrapper ul.dropdown-content.select-dropdown li span.category-select").each(function () {
var categoryID = $(this).data("infos")[3];
if(categoryID === selectedCategory)
{
$(this).parent().trigger("click");
}
});
}
}
function capitalizeFirstLetter(text)
{
return text.charAt(0).toUpperCase();
}
\ No newline at end of file
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<@header.header "BudgetMaster"/> <@header.header "BudgetMaster"/>
<@header.style "transactions"/> <@header.style "transactions"/>
<@header.style "datepicker"/> <@header.style "datepicker"/>
<@header.style "categories"/>
</head> </head>
<body class="budgetmaster-blue-light"> <body class="budgetmaster-blue-light">
<#import "../navbar.ftl" as navbar> <#import "../navbar.ftl" as navbar>
...@@ -62,21 +63,21 @@ ...@@ -62,21 +63,21 @@
<#-- category --> <#-- category -->
<div class="row"> <div class="row">
<div class="input-field col s12 m12 l8 offset-l2"> <div class="input-field col s12 m12 l8 offset-l2" id="categoryWrapper">
<select id="transaction-category" name="category" <@validation.validation "category"/>> <select id="transaction-category" name="category" <@validation.validation "category"/>>
<#list categories as category> <#list categories as category>
<#assign categoryName=categoriesFunctions.getCategoryName(category)> <#assign categoryInfos=categoriesFunctions.getCategoryName(category) + "@@@" + category.getColor() + "@@@" + category.getAppropriateTextColor() + "@@@" + category.getID()>
<#if transaction.getCategory()??> <#if transaction.getCategory()??>
<#if transaction.getCategory().getID() == category.getID()> <#if transaction.getCategory().getID() == category.getID()>
<option selected value="${category.getID()}">${categoryName}</option> <option selected value="${category.getID()}">${categoryInfos}</option>
<#elseif category.getType() != "REST"> <#elseif category.getType() != "REST">
<option value="${category.getID()}">${categoryName}</option> <option value="${category.getID()}">${categoryInfos}</option>
</#if> </#if>
<#elseif category.getType() == "NONE"> <#elseif category.getType() == "NONE">
<option selected value="${category.getID()}">${categoryName}</option> <option selected value="${category.getID()}">${categoryInfos}</option>
<#elseif category.getType() != "REST"> <#elseif category.getType() != "REST">
<option value="${category.getID()}">${categoryName}</option> <option value="${category.getID()}">${categoryInfos}</option>
</#if> </#if>
</#list> </#list>
</select> </select>
...@@ -305,6 +306,15 @@ ...@@ -305,6 +306,15 @@
} }
</script> </script>
<#-- pass selected account to JS in order to select current value for materialize select -->
<script>
<#if transaction.getCategory()??>
selectedCategory = "${transaction.getCategory().getID()}";
<#else>
selectedCategory = "${helpers.getIDOfNoCatgeory()}";
</#if>
</script>
<!-- Scripts--> <!-- Scripts-->
<#import "../scripts.ftl" as scripts> <#import "../scripts.ftl" as scripts>
<@scripts.scripts/> <@scripts.scripts/>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment