From 909ad19e20d9b5229d37dcc3037c468c29fc1aae Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 12 Feb 2022 18:01:41 +0100
Subject: [PATCH] #658 - re-designed global account in navbar

---
 .../accounts/AccountController.java           |  9 +++++
 .../resources/languages/base_de.properties    |  3 +-
 .../resources/languages/base_en.properties    |  3 +-
 src/main/resources/static/css/style.css       | 28 +++++++++----
 src/main/resources/static/js/about.js         |  2 +-
 src/main/resources/static/js/main.js          | 19 ++++-----
 .../templates/globalAccountSelectModal.ftl    | 25 ++++++++++++
 .../resources/templates/helpers/navbar.ftl    | 40 ++++++++++++-------
 8 files changed, 91 insertions(+), 38 deletions(-)
 create mode 100644 src/main/resources/templates/globalAccountSelectModal.ftl

diff --git a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
index 976bd6f56..3021685d1 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
@@ -46,6 +46,7 @@ public class AccountController extends BaseController
 		public static final String DELETE_ENTITY = "accounts/deleteAccountModal";
 		public static final String IMPORT_STEP_2 = "redirect:/settings/database/import/step2";
 		public static final String SETTINGS = "redirect:/settings";
+		public static final String GLOBAL_ACCOUNT_SELECT_MODAL = "globalAccountSelectModal";
 	}
 
 	private final AccountService accountService;
@@ -217,4 +218,12 @@ public class AccountController extends BaseController
 			return true;
 		}
 	}
+
+	@GetMapping("/globalAccountSelectModal")
+	public String globalAccountSelectModal(Model model)
+	{
+		model.addAttribute(ModelAttributes.ALL_ENTITIES, accountService.getAllReadableAccounts());
+
+		return ReturnValues.GLOBAL_ACCOUNT_SELECT_MODAL;
+	}
 }
\ No newline at end of file
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 33e37c56a..764cf1d90 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -304,6 +304,8 @@ settings.database.delete.verification=Bestätigungscodes
 
 settings.search.itemsPerPage=Anzahl der Suchergebnisse pro Seite
 
+account.select=Konto auswählen
+
 account.new.label.name=Name
 account.new.label.icon=Icon
 account.new.label.icon.fontcolor=Schriftfarbe
@@ -314,7 +316,6 @@ account.new.icon.upload=Hochladen
 account.new.label.state=Sichtbarkeit
 account.default.name=Standardkonto
 account.all=Alle Konten
-account.budget.asof=Stand
 account.tooltip.default=Als Standardkonto festlegen
 
 account.state.full.access=Vollzugriff
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 00169876e..9a51aa6db 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -305,6 +305,8 @@ settings.database.delete.verification=Verification Code
 
 settings.search.itemsPerPage=Number of search results per page
 
+account.select=Choose account
+
 account.new.label.name=Name
 account.new.label.icon=Icon
 account.new.label.icon.fontcolor=Font color
@@ -315,7 +317,6 @@ account.new.icon.upload=Upload
 account.new.label.state=Visibility
 account.default.name=Default Account
 account.all=All Accounts
-account.budget.asof=as of
 account.tooltip.default=Set as default account
 
 account.state.full.access=Full access
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ee21e1d18..3248950b1 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -317,20 +317,32 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     border: 2px solid var(--color-blue);
 }
 
-.account-budget {
-    font-size: 20px !important;
+#globalAccountSelect {
+    padding: 1rem 32px 1rem 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
-.account-budget-date {
-    font-size: 12px !important;
+#globalAccountSelect:hover {
+    cursor: pointer;
 }
 
-.account-navbar {
-    padding: 5px 32px 12px 32px;
+#globalAccountSelect .account-select-icon {
+    height: 3.5rem;
+    width: 3.5rem;
 }
 
-.all-account-placeholder {
-    font-weight: bold;
+.global-account-select-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 2rem;
+    font-size: 1.1rem;
+}
+
+.global-account-select-budget {
+    font-size: 1.8rem;
 }
 
 .login-button {
diff --git a/src/main/resources/static/js/about.js b/src/main/resources/static/js/about.js
index 1e57ffcdf..860ea9e5d 100644
--- a/src/main/resources/static/js/about.js
+++ b/src/main/resources/static/js/about.js
@@ -2,6 +2,6 @@ $(document).ready(function()
 {
     $('.whatsNewLink').click(function()
     {
-        fetchAndShowWhatsNewModal(this, 'whatsNewModelContainerOnDemand');
+        fetchAndShowModal(this, 'whatsNewModelContainerOnDemand', '#modalWhatsNew');
     });
 });
diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js
index a72329d95..77a8c5bc1 100644
--- a/src/main/resources/static/js/main.js
+++ b/src/main/resources/static/js/main.js
@@ -5,6 +5,11 @@ $(document).ready(function()
         document.getElementById('logout-form').submit();
     });
 
+    $('#globalAccountSelect').click(function()
+    {
+        fetchAndShowModal(this, 'globalAccountSelectModalOnDemand', '#modalGlobalAccountSelect');
+    });
+
     $('.sidenav').sidenav();
 
     $('.modal').modal();
@@ -16,21 +21,13 @@ $(document).ready(function()
 
     if($("#whatsNewModelContainer").length)
     {
-        fetchAndShowWhatsNewModal(document.getElementById('whatsNewModelContainer'), 'whatsNewModelContainer');
+        fetchAndShowModal(document.getElementById('whatsNewModelContainer'), 'whatsNewModelContainer', '#modalWhatsNew');
     }
 
     $('.tooltipped').tooltip();
 
     $('select').formSelect();
 
-    $("#selectWrapper ul.dropdown-content.select-dropdown li span").each(function()
-    {
-        if($(this).text() === accountPlaceholderName)
-        {
-            $(this).addClass("all-account-placeholder");
-        }
-    });
-
     if($("#login-password").length)
     {
         document.getElementById("login-password").focus();
@@ -63,10 +60,8 @@ $(document).ready(function()
     });
 });
 
-
-function fetchAndShowWhatsNewModal(item, containerID)
+function fetchAndShowModal(item, containerID, modalID)
 {
-    let modalID = '#modalWhatsNew';
     let modal = $(modalID).modal();
     if(modal.isOpen)
     {
diff --git a/src/main/resources/templates/globalAccountSelectModal.ftl b/src/main/resources/templates/globalAccountSelectModal.ftl
new file mode 100644
index 000000000..b85ca68a9
--- /dev/null
+++ b/src/main/resources/templates/globalAccountSelectModal.ftl
@@ -0,0 +1,25 @@
+<#global locale = static["de.thecodelabs.utils.util.Localization"]>
+<#import "/spring.ftl" as s>
+<#import "helpers/header.ftl" as header>
+
+<div id="modalGlobalAccountSelect" class="modal modal-fixed-footer background-color">
+    <div class="modal-content">
+        <div class="row">
+            <div class="col s12">
+                <h3>${locale.getString("account.select")}</h3>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s12">
+                <#list accounts as account>
+                    ${account.getName()}<br>
+                </#list>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer background-color">
+        <@header.buttonLink url='' icon='cancel' localizationKey='cancel' color='red' id='buttonCloseGlobalAccountSelect' classes='modal-action modal-close text-white' isDataUrl=false noUrl=true/>
+    </div>
+</div>
+
diff --git a/src/main/resources/templates/helpers/navbar.ftl b/src/main/resources/templates/helpers/navbar.ftl
index 8a70e5106..0e12863d6 100644
--- a/src/main/resources/templates/helpers/navbar.ftl
+++ b/src/main/resources/templates/helpers/navbar.ftl
@@ -55,6 +55,8 @@
 
     <@backupReminder settings/>
     <@whatsNewModal settings/>
+
+    <div id="globalAccountSelectModalOnDemand"></div>
 </#macro>
 
 <#macro itemLogo>
@@ -86,22 +88,30 @@
 </#macro>
 
 <#macro itemAccountSelect>
-    <div class="account-navbar">
-        <#import 'customSelectMacros.ftl' as customSelectMacros/>
-        <@customSelectMacros.globalAccountSelect/>
-
-        <div class="center-align">
-            <a href="<@s.url '/accounts'/>">${locale.getString("home.menu.accounts.action.manage")}</a>
-
-            <#assign accountBudget = helpers.getAccountBudget()/>
-            <#if accountBudget <= 0>
-                <div class="account-budget ${redTextColor}">${currencyService.getCurrencyString(accountBudget)}</div>
-            <#else>
-                <div class="account-budget ${greenTextColor}">${currencyService.getCurrencyString(accountBudget)}</div>
-            </#if>
-            <div class="account-budget-date text-default">(${locale.getString("account.budget.asof")}: ${dateService.getDateStringNormal(dateService.getCurrentDate())})</div>
+    <#import "customSelectMacros.ftl" as customSelectMacros>
+
+    <a id="globalAccountSelect" class="center-align" data-url="<@s.url '/accounts/globalAccountSelectModal'/>">
+        <#assign selectedAccount=helpers.getCurrentAccount()/>
+        <#if selectedAccount.getType().name() == "ALL">
+            <#assign accountName=locale.getString("account.all")/>
+        <#else>
+            <#assign accountName=selectedAccount.getName()/>
+        </#if>
+
+        <@customSelectMacros.accountIcon selectedAccount accountName "category-circle-preview"/>
+        <div class="global-account-select-right">
+            <div>${accountName}</div>
+
+            <div>
+                <#assign accountBudget = helpers.getAccountBudget()/>
+                <#if accountBudget <= 0>
+                    <div class="global-account-select-budget ${redTextColor}">${currencyService.getCurrencyString(accountBudget)}</div>
+                <#else>
+                    <div class="global-account-select-budget ${greenTextColor}">${currencyService.getCurrencyString(accountBudget)}</div>
+                </#if>
+            </div>
         </div>
-    </div>
+    </a>
 </#macro>
 
 <#macro itemPlain ID link text activeID>
-- 
GitLab