#133 - show icon in transaction overview if available

src/main/resources/templates/categories/categories.ftl

@@ -41,7 +41,7 @@
                             <#assign categoryName=categoriesFunctions.getCategoryName(category)>
                             <#assign usageCount=helpers.getUsageCountForCategory(category)/>
                             <tr>
-                                <@categoryCircle category categoryName/>
+                                <td><@categoriesFunctions.categoryCircle category/></td>
                                 <td>${categoryName} </td>
                                 <td>${usageCount}</td>
                                 <td>
@@ -97,18 +97,3 @@
         <script src="<@s.url '/js/categorySelect.js'/>"></script>
     </@header.body>
 </html>
-
-
-<#macro categoryCircle category categoryName>
-    <td>
-        <div class="category-circle" style="background-color: ${category.color}">
-            <span style="color: ${category.getAppropriateTextColor()}">
-                <#if category.getIcon()??>
-                    <i class="${category.getIcon()}"></i>
-                <#else>
-                    ${categoryName?capitalize[0]}
-                </#if>
-            </span>
-        </div>
-    </td>
-</#macro>
\ No newline at end of file

src/main/resources/templates/categories/categoriesFunctions.ftl

@@ -11,3 +11,17 @@
         <#return "">
     </#if>
 </#function>
+
+<#macro categoryCircle category classes="">
+    <#assign categoryName=getCategoryName(category)>
+
+    <div class="category-circle ${classes}" style="background-color: ${category.color}">
+        <span style="color: ${category.getAppropriateTextColor()}">
+            <#if category.getIcon()??>
+                <i class="${category.getIcon()}"></i>
+            <#else>
+                ${categoryName?capitalize[0]}
+            </#if>
+        </span>
+    </div>
+</#macro>
\ No newline at end of file

src/main/resources/templates/transactions/transactionsMacros.ftl

@@ -17,18 +17,10 @@
     <#import "../categories/categoriesFunctions.ftl" as categoriesFunctions>
     <div class="col s3 l1 xl1 ${alignment}">
         <div class="hide-on-med-and-down">
-            <div class="category-circle" style="background-color: ${transaction.category.color}">
-                <span style="color: ${transaction.category.getAppropriateTextColor()}">
-                    ${categoriesFunctions.getCategoryName(transaction.category)?capitalize[0]}
-                </span>
-            </div>
+            <@categoriesFunctions.categoryCircle transaction.category/>
         </div>
         <div class="hide-on-large-only">
-            <div class="category-circle-small" style="background-color: ${transaction.category.color}">
-                <span style="color: ${transaction.category.getAppropriateTextColor()}">
-                    ${categoriesFunctions.getCategoryName(transaction.category)?capitalize[0]}
-                </span>
-            </div>
+            <@categoriesFunctions.categoryCircle transaction.category "category-circle-small"/>
         </div>
     </div>
 </#macro>