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.AccountType;
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.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.text.Text;
import java.util.Map;
@ -17,20 +22,14 @@ import static com.andrewlalis.perfin.PerfinApp.router;
* A compact tile that displays information about an account.
*/
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(
AccountType.CHECKING, Color.rgb(214, 222, 255),
AccountType.SAVINGS, Color.rgb(219, 255, 214),
AccountType.CREDIT_CARD, Color.rgb(255, 250, 214)
AccountType.CHECKING, Color.rgb(3, 127, 252),
AccountType.SAVINGS, Color.rgb(57, 158, 74),
AccountType.CREDIT_CARD, Color.rgb(207, 8, 68)
);
public AccountTile(Account account) {
setPrefWidth(300.0);
setPrefHeight(100.0);
setPrefWidth(350.0);
setStyle("""
-fx-border-color: lightgray;
-fx-border-width: 1px;
@ -39,43 +38,69 @@ public class AccountTile extends BorderPane {
-fx-padding: 5px;
-fx-cursor: hand;
""");
Color color = ACCOUNT_TYPE_COLORS.get(account.getType());
var fill = new BackgroundFill(color, new CornerRadii(3.0), null);
setBackground(new Background(fill));
final Color color = ACCOUNT_TYPE_COLORS.get(account.getType());
// var fill = new BackgroundFill(color, new CornerRadii(3.0), null);
// setBackground(new Background(fill));
accountNameBox.getChildren().setAll(
newPropertyLabel("Account Name"),
accountNameLabel
);
setTop(getHeader(account));
setBottom(getFooter(account));
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 typeLabel = new Label(account.getType().toString() + " Account");
HBox footerHBox = new HBox(currencyLabel, typeLabel);
footerHBox.setStyle("-fx-font-size: x-small; -fx-spacing: 3px;");
setBottom(footerHBox);
return footerHBox;
}
setCenter(new VBox(
newPropertyLabel("Account Number"),
accountNumberLabel,
newPropertyLabel("Account Balance"),
accountBalanceLabel,
accountNameBox
));
private Node getBody(Account account) {
PropertiesPane propertiesPane = new PropertiesPane();
propertiesPane.setHgap(3);
propertiesPane.setVgap(3);
ColumnConstraints keyConstraints = new ColumnConstraints();
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());
accountNameBox.visibleProperty().bind(accountNameTextPresent);
accountNameBox.managedProperty().bind(accountNameTextPresent);
Label accountNameLabel = newPropertyValue(account.getName());
accountNameLabel.setWrapText(true);
accountNumberLabel.setText(account.getAccountNumber());
accountNameLabel.setText(account.getName());
accountBalanceLabel.setText("Loading balance...");
accountBalanceLabel.setDisable(true);
Profile.getCurrent().getDataSource().getAccountBalanceText(account, balanceText -> {
accountBalanceLabel.setText(balanceText);
accountBalanceLabel.setDisable(false);
Label accountTypeLabel = newPropertyValue(account.getType().toString());
accountTypeLabel.setTextFill(ACCOUNT_TYPE_COLORS.get(account.getType()));
accountTypeLabel.setStyle("-fx-font-weight: bold;");
Label balanceLabel = newPropertyValue("Computing balance...");
balanceLabel.setDisable(true);
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) {
@ -86,8 +111,8 @@ public class AccountTile extends BorderPane {
return lbl;
}
private static Label newPropertyValue() {
Label lbl = new Label();
private static Label newPropertyValue(String text) {
Label lbl = new Label(text);
lbl.setStyle("""
-fx-font-family: monospace;
-fx-font-size: large;