From 3b4bda41bd94e16659f3946d0dff7cf95a864ff7 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 17 Nov 2018 15:34:29 +0100
Subject: [PATCH] Fixed #336 - Show category colored circles in new transaction
 select

---
 .../budgetmaster/services/HelpersService.java |  9 +++++
 src/main/resources/static/css/categories.css  | 16 ++++++++
 .../resources/static/css/dark/categories.css  | 16 ++++++++
 src/main/resources/static/js/transactions.js  | 39 +++++++++++++++++++
 .../templates/transactions/newTransaction.ftl | 22 ++++++++---
 5 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
index 9f0ec74b4..77dc12055 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
@@ -4,6 +4,7 @@ import de.deadlocker8.budgetmaster.database.accountmatches.AccountMatch;
 import de.deadlocker8.budgetmaster.entities.*;
 import de.deadlocker8.budgetmaster.repeating.modifier.RepeatingModifierType;
 import de.deadlocker8.budgetmaster.repositories.AccountRepository;
+import de.deadlocker8.budgetmaster.repositories.CategoryRepository;
 import de.deadlocker8.budgetmaster.repositories.SettingsRepository;
 import de.deadlocker8.budgetmaster.repositories.TagRepository;
 import de.deadlocker8.budgetmaster.utils.Colors;
@@ -44,6 +45,9 @@ public class HelpersService
 	@Autowired
 	private TransactionService transactionService;
 
+	@Autowired
+	private CategoryRepository categoryRepository;
+
 	public String getCurrencyString(int amount)
 	{
 		return getCurrencyString(amount / 100.0);
@@ -271,4 +275,9 @@ public class HelpersService
 
 		return accountMatches;
 	}
+
+	public int getIDOfNoCatgeory()
+	{
+		return categoryRepository.findByType(CategoryType.NONE).getID();
+	}
 }
\ No newline at end of file
diff --git a/src/main/resources/static/css/categories.css b/src/main/resources/static/css/categories.css
index 5fabd1446..e713bd53f 100644
--- a/src/main/resources/static/css/categories.css
+++ b/src/main/resources/static/css/categories.css
@@ -9,6 +9,22 @@
     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 {
     height: 35px;
     width: 90%;
diff --git a/src/main/resources/static/css/dark/categories.css b/src/main/resources/static/css/dark/categories.css
index 5fabd1446..e713bd53f 100644
--- a/src/main/resources/static/css/dark/categories.css
+++ b/src/main/resources/static/css/dark/categories.css
@@ -9,6 +9,22 @@
     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 {
     height: 35px;
     width: 90%;
diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js
index d4c95e608..5d1470ff0 100644
--- a/src/main/resources/static/js/transactions.js
+++ b/src/main/resources/static/js/transactions.js
@@ -154,6 +154,8 @@ $( document ).ready(function() {
             return false;
         }
     });
+
+    beautifyCategorySelect();
 });
 
 var transactionRepeatingModifierID = "#transaction-repeating-modifier";
@@ -283,4 +285,41 @@ function validateForm()
     }
 
     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
diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl
index b32c134b7..547181d0d 100644
--- a/src/main/resources/templates/transactions/newTransaction.ftl
+++ b/src/main/resources/templates/transactions/newTransaction.ftl
@@ -4,6 +4,7 @@
         <@header.header "BudgetMaster"/>
         <@header.style "transactions"/>
         <@header.style "datepicker"/>
+        <@header.style "categories"/>
     </head>
     <body class="budgetmaster-blue-light">
         <#import "../navbar.ftl" as navbar>
@@ -62,21 +63,21 @@
 
                         <#-- category -->
                         <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"/>>
                                     <#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().getID() == category.getID()>
-                                                <option selected value="${category.getID()}">${categoryName}</option>
+                                                <option selected value="${category.getID()}">${categoryInfos}</option>
                                             <#elseif category.getType() != "REST">
-                                                <option value="${category.getID()}">${categoryName}</option>
+                                                <option value="${category.getID()}">${categoryInfos}</option>
                                             </#if>
                                         <#elseif category.getType() == "NONE">
-                                            <option selected value="${category.getID()}">${categoryName}</option>
+                                            <option selected value="${category.getID()}">${categoryInfos}</option>
                                         <#elseif category.getType() != "REST">
-                                            <option value="${category.getID()}">${categoryName}</option>
+                                            <option value="${category.getID()}">${categoryInfos}</option>
                                         </#if>
                                     </#list>
                                 </select>
@@ -305,6 +306,15 @@
             }
         </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-->
         <#import "../scripts.ftl" as scripts>
         <@scripts.scripts/>
-- 
GitLab