#590 - use select with icons

src/main/java/de/deadlocker8/budgetmaster/accounts/AccountState.java

@@ -2,7 +2,35 @@ package de.deadlocker8.budgetmaster.accounts;
 
 public enum AccountState
 {
-	FULL_ACCESS,
-	READ_ONLY,
-	HIDDEN
+	FULL_ACCESS("fas fa-edit", "account.state.full.access"),
+	READ_ONLY("fas fa-lock", "account.state.read.only"),
+	HIDDEN("far fa-eye-slash", "account.state.hidden");
+
+	private final String icon;
+	private final String localizationKey;
+
+	AccountState(String icon, String localizationKey)
+	{
+		this.icon = icon;
+		this.localizationKey = localizationKey;
+	}
+
+	public String getIcon()
+	{
+		return icon;
+	}
+
+	public String getLocalizationKey()
+	{
+		return localizationKey;
+	}
+
+	@Override
+	public String toString()
+	{
+		return "AccountState{" +
+				"icon='" + icon + '\'' +
+				", localizationKey='" + localizationKey + '\'' +
+				"} " + super.toString();
+	}
 }

src/main/resources/languages/base_de.properties

@@ -271,12 +271,15 @@ account.new.label.icon=Icon
 account.new.icon.placeholder=Hier klicken um ein Icon auszuwählen
 account.new.icon.upload.choose.file=Datei auswählen
 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.tooltip.readonly.activate=Konto aktivieren
-account.tooltip.readonly.deactivate=Konto deaktivieren
+
+account.state.full.access=Vollzugriff
+account.state.read.only=Lesezugriff
+account.state.hidden=Versteckt
 
 transaction.new.label.name=Name
 transaction.new.label.amount=Betrag

src/main/resources/languages/base_en.properties

@@ -271,12 +271,15 @@ account.new.label.icon=Icon
 account.new.icon.placeholder=Click here to select an icon
 account.new.icon.upload.choose.file=Choose file
 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.tooltip.readonly.activate=Enable account
-account.tooltip.readonly.deactivate=Disable account
+
+account.state.full.access=Vollzugriff
+account.state.read.only=Lesezugriff
+account.state.hidden=Versteckt
 
 transaction.new.label.name=Name
 transaction.new.label.amount=Amount

src/main/resources/static/js/customSelect.js

@@ -26,6 +26,14 @@ $(document).ready(function()
         allCustomSelects.push(transferAccountSelect);
     }
 
+    let selectorAccountStateSelect = '.account-state-select-wrapper';
+    if($(selectorAccountStateSelect).length)
+    {
+        let accountStateSelect = new CustomSelect(selectorAccountStateSelect);
+        accountStateSelect.init();
+        allCustomSelects.push(accountStateSelect);
+    }
+
     let selectorGlobalAccountSelect = '.global-account-select-wrapper';
     if($(selectorGlobalAccountSelect).length)
     {

src/main/resources/templates/accounts/newAccount.ftl

@@ -17,6 +17,7 @@
         <@navbar.navbar "accounts" settings/>
 
         <#import "accountFunctions.ftl" as accountFunctions>
+        <#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
 
         <main>
             <div class="card main-card background-color">
@@ -63,15 +64,12 @@
                         </div>
 
                         <#-- state -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2" id="account-state">
-                                <select name="accountState">
-                                    <#list availableAccountStates as state>
-                                        <option value="${state}">${state}</option>
-                                    </#list>
-                                </select>
-                            </div>
-                        </div>
+                        <#if account.getAccountState()??>
+                            <#assign selectedState=account.getAccountState()>
+                        <#else>
+                            <#assign selectedState=availableAccountStates[0]>
+                        </#if>
+                        <@customSelectMacros.customAccountStateSelect "account-state-select-wrapper" "accountState" availableAccountStates selectedState "col s12 m12 l8 offset-l2" locale.getString("account.new.label.state") "account-state"/>
 
                         <br>
 

src/main/resources/templates/helpers/customSelectMacros.ftl

@@ -101,6 +101,41 @@
     </div>
 </#macro>
 
+<#macro customAccountStateSelect selector inputName availableStates selectedState inputClasses labelText id >
+    <div class="row">
+        <div class="input-field ${inputClasses}">
+            <i class="material-icons prefix">visibility</i>
+            <label class="input-label" for="${id}">${labelText}</label>
+            <div class="custom-select-wrapper ${selector}" id="${id}">
+                <div class="custom-select">
+                    <div class="custom-select-trigger" tabindex="0">
+                        <div class="custom-select-selected-item">
+                            <#if selectedState??><@customSelectOptionAccountStateContent selectedState "no-margin-left"/></#if>
+                        </div>
+                        <div class="custom-select-arrow"></div>
+                    </div>
+                    <div class="custom-select-options">
+                        <#list availableStates as state>
+                            <#if selectedState??>
+                                <#if selectedState == state>
+                                    <@customSelectAccountStateOption state true/>
+                                <#else>
+                                    <@customSelectAccountStateOption state false/>
+                                </#if>
+                                <#continue>
+                            </#if>
+
+                            <@customSelectAccountStateOption state false/>
+                        </#list>
+                    </div>
+                </div>
+
+                <input type="hidden" name="${inputName}" class="hidden-input-custom-select" <#if selectedState??>value="${selectedState.name()}"</#if>/>
+            </div>
+        </div>
+    </div>
+</#macro>
+
 <#macro customSelectCategoryOption category isSelected>
     <div class="custom-select-option <#if isSelected>selected</#if>" data-value="${category.getID()?c}">
         <@customSelectOptionCategoryContent category/>
@@ -140,3 +175,18 @@
         </#if>
     </div>
 </#macro>
+
+<#macro customSelectAccountStateOption state isSelected>
+    <div class="custom-select-option <#if isSelected>selected</#if>" data-value="${state.name()}">
+        <@customSelectOptionAccountStateContent state=state/>
+    </div>
+</#macro>
+
+<#macro customSelectOptionAccountStateContent state classes="">
+    <div class="category-circle category-circle-small ${classes}" data-value="${state.name()}">
+        <span class="text-blue">
+            <i class="${state.getIcon()}"></i>
+        </span>
+    </div>
+    <span class="custom-select-item-name">${locale.getString(state.getLocalizationKey())}</span>
+</#macro>
\ No newline at end of file