andrew
/
perfin
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Refactored the account tile design.

This commit is contained in:
Andrew Lalis 2024-01-04 20:19:27 -05:00
parent 9e0e0a51c5
commit e0e73cddae
1 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/main/java/com/andrewlalis/perfin/view/component/AccountTile.java
View File

@ -3,11 +3,16 @@ package com.andrewlalis.perfin.view.component;
import com.andrewlalis.perfin.model.Account; import com.andrewlalis.perfin.model.Account;
import com.andrewlalis.perfin.model.AccountType; import com.andrewlalis.perfin.model.AccountType;
import com.andrewlalis.perfin.model.Profile; import com.andrewlalis.perfin.model.Profile;
import javafx.beans.value.ObservableValue; import javafx.geometry.HPos;
import javafx.scene.Node;
import javafx.scene.control.Label; import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent; import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*; import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color; import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import java.util.Map; import java.util.Map;
@ -17,20 +22,14 @@ import static com.andrewlalis.perfin.PerfinApp.router;
* A compact tile that displays information about an account. * A compact tile that displays information about an account.
*/ */
public class AccountTile extends BorderPane { public class AccountTile extends BorderPane {
public final Label accountNumberLabel = newPropertyValue();
public final Label accountBalanceLabel = newPropertyValue();
public final VBox accountNameBox = new VBox();
public final Label accountNameLabel = newPropertyValue();
private static final Map<AccountType, Color> ACCOUNT_TYPE_COLORS = Map.of( private static final Map<AccountType, Color> ACCOUNT_TYPE_COLORS = Map.of(
AccountType.CHECKING, Color.rgb(214, 222, 255), AccountType.CHECKING, Color.rgb(3, 127, 252),
AccountType.SAVINGS, Color.rgb(219, 255, 214), AccountType.SAVINGS, Color.rgb(57, 158, 74),
AccountType.CREDIT_CARD, Color.rgb(255, 250, 214) AccountType.CREDIT_CARD, Color.rgb(207, 8, 68)
); );
public AccountTile(Account account) { public AccountTile(Account account) {
setPrefWidth(300.0); setPrefWidth(350.0);
setPrefHeight(100.0);
setStyle(""" setStyle("""
-fx-border-color: lightgray; -fx-border-color: lightgray;
-fx-border-width: 1px; -fx-border-width: 1px;
@ -39,43 +38,69 @@ public class AccountTile extends BorderPane {
-fx-padding: 5px; -fx-padding: 5px;
-fx-cursor: hand; -fx-cursor: hand;
"""); """);
Color color = ACCOUNT_TYPE_COLORS.get(account.getType()); final Color color = ACCOUNT_TYPE_COLORS.get(account.getType());
var fill = new BackgroundFill(color, new CornerRadii(3.0), null); // var fill = new BackgroundFill(color, new CornerRadii(3.0), null);
setBackground(new Background(fill)); // setBackground(new Background(fill));
accountNameBox.getChildren().setAll( setTop(getHeader(account));
newPropertyLabel("Account Name"), setBottom(getFooter(account));
accountNameLabel setCenter(getBody(account));
);
this.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> router.navigate("account", account));
}
private Node getHeader(Account account) {
Text title = new Text("Account #" + account.id);
title.setStyle("-fx-font-size: large; -fx-font-weight: bold;");
return title;
}
private Node getFooter(Account account) {
Label currencyLabel = new Label(account.getCurrency().getCurrencyCode()); Label currencyLabel = new Label(account.getCurrency().getCurrencyCode());
Label typeLabel = new Label(account.getType().toString() + " Account"); Label typeLabel = new Label(account.getType().toString() + " Account");
HBox footerHBox = new HBox(currencyLabel, typeLabel); HBox footerHBox = new HBox(currencyLabel, typeLabel);
footerHBox.setStyle("-fx-font-size: x-small; -fx-spacing: 3px;"); footerHBox.setStyle("-fx-font-size: x-small; -fx-spacing: 3px;");
setBottom(footerHBox); return footerHBox;
}
setCenter(new VBox( private Node getBody(Account account) {
newPropertyLabel("Account Number"), PropertiesPane propertiesPane = new PropertiesPane();
accountNumberLabel, propertiesPane.setHgap(3);
newPropertyLabel("Account Balance"), propertiesPane.setVgap(3);
accountBalanceLabel, ColumnConstraints keyConstraints = new ColumnConstraints();
accountNameBox keyConstraints.setMinWidth(150);
)); keyConstraints.setHgrow(Priority.NEVER);
keyConstraints.setHalignment(HPos.LEFT);
ColumnConstraints valueConstraints = new ColumnConstraints();
valueConstraints.setHgrow(Priority.ALWAYS);
valueConstraints.setHalignment(HPos.RIGHT);
propertiesPane.getColumnConstraints().setAll(keyConstraints, valueConstraints);
ObservableValue<Boolean> accountNameTextPresent = accountNameLabel.textProperty().map(t -> t != null && !t.isBlank()); Label accountNameLabel = newPropertyValue(account.getName());
accountNameBox.visibleProperty().bind(accountNameTextPresent); accountNameLabel.setWrapText(true);
accountNameBox.managedProperty().bind(accountNameTextPresent);
accountNumberLabel.setText(account.getAccountNumber()); Label accountTypeLabel = newPropertyValue(account.getType().toString());
accountNameLabel.setText(account.getName()); accountTypeLabel.setTextFill(ACCOUNT_TYPE_COLORS.get(account.getType()));
accountBalanceLabel.setText("Loading balance..."); accountTypeLabel.setStyle("-fx-font-weight: bold;");
accountBalanceLabel.setDisable(true);
Profile.getCurrent().getDataSource().getAccountBalanceText(account, balanceText -> { Label balanceLabel = newPropertyValue("Computing balance...");
accountBalanceLabel.setText(balanceText); balanceLabel.setDisable(true);
accountBalanceLabel.setDisable(false); Profile.getCurrent().getDataSource().getAccountBalanceText(account, text -> {
balanceLabel.setText(text);
balanceLabel.setDisable(false);
}); });
this.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> router.navigate("account", account)); propertiesPane.getChildren().addAll(
newPropertyLabel("Account Name"),
accountNameLabel,
newPropertyLabel("Account Number"),
newPropertyValue(account.getAccountNumber()),
newPropertyLabel("Account Type"),
accountTypeLabel,
newPropertyLabel("Current Balance"),
balanceLabel
);
return propertiesPane;
} }
private static Label newPropertyLabel(String text) { private static Label newPropertyLabel(String text) {
@ -86,8 +111,8 @@ public class AccountTile extends BorderPane {
return lbl; return lbl;
} }
private static Label newPropertyValue() { private static Label newPropertyValue(String text) {
Label lbl = new Label(); Label lbl = new Label(text);
lbl.setStyle(""" lbl.setStyle("""
-fx-font-family: monospace; -fx-font-family: monospace;
-fx-font-size: large; -fx-font-size: large;