Update[UserPage]: Update Visual on UserPage to increase greater UX an…

…d CI
Group-5 · Apr 9, 2026 · 9d915ba · 9d915ba
1 parent 85d6951
commit 9d915ba
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/src/main/java/edu/group5/app/view/userpage/UserPageView.java b/src/main/java/edu/group5/app/view/userpage/UserPageView.java
@@ -13,6 +13,7 @@
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.TextField;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.BorderPane;
@@ -113,29 +114,72 @@ private VBox createDonationsSection() {
     Text title = new Text("PREVIOUS DONATIONS");
     title.getStyleClass().add("section-title");
 
+    HBox searchBox = new HBox(10);
+    searchBox.setStyle("-fx-padding: 10;");
+    TextField searchField = new TextField();
+    searchField.setPromptText("Search by organization name...");
+    searchField.setPrefWidth(300);
+    searchBox.getChildren().add(searchField);
+
     ScrollPane scrollPane = new ScrollPane();
-    scrollPane.setFitToWidth(true);
+    scrollPane.setFitToWidth(false);
+    scrollPane.setPrefWidth(500);
+    scrollPane.setMaxWidth(500);
+    scrollPane.setPrefHeight(400);
     scrollPane.setStyle("-fx-focus-color: transparent; -fx-faint-focus-color: transparent;");
 
     VBox donationsBox = new VBox(12);
     donationsBox.getStyleClass().add("donation-list");
     donationsBox.setPadding(new Insets(10));
 
     User currentUser = appState.getCurrentUser();
-    Map<Integer, Donation> userDonations = donationController.getUserDonations(currentUser.getUserId());
+    Map<Integer, Donation> userDonations = 
+    donationController.getUserDonations(currentUser.getUserId());
+
+    // Filter donations based on search
+    searchField.textProperty().addListener((obs, oldVal, newVal) -> {
+      donationsBox.getChildren().clear();
+
+      if (userDonations.isEmpty()) {
+        Label noDonations = new Label("No donations yet");
+        noDonations.setStyle("-fx-text-fill: #999;");
+        donationsBox.getChildren().add(noDonations);
+        return;
+      }
+
+      String searchTerm = newVal.toLowerCase().trim();
+      boolean found = false;
+
+      for (Donation donation : userDonations.values()) {
+        Organization org = organizationController.getOrgById(donation.organizationId());
+        String orgName = (org != null) ? org.name() : "Unknown Organization";
+
+        // Filter by search term
+        if (searchTerm.isEmpty() || orgName.toLowerCase().contains(searchTerm)) {
+          donationsBox.getChildren().add(createDonationCard(donation));
+          found = true;
+        }
+      }
+
+      if (!found && !searchTerm.isEmpty()) {
+        Label noResults = new Label("No donations found for \"" + newVal + "\"");
+        noResults.setStyle("-fx-text-fill: #999;");
+        donationsBox.getChildren().add(noResults);
+      }
+    });
 
     if (userDonations.isEmpty()) {
       Label noDonations = new Label("No donations yet");
       noDonations.setStyle("-fx-text-fill: #999;");
       donationsBox.getChildren().add(noDonations);
     } else {
       for (Donation donation : userDonations.values()) {
-        donationsBox.getChildren().add(createDonationCard(donation));  // SRP: delegate to helper
+        donationsBox.getChildren().add(createDonationCard(donation));
       }
     }
 
     scrollPane.setContent(donationsBox);
-    return new VBox(10, title, scrollPane);
+    return new VBox(10, title, searchBox, scrollPane);
   }
 
 
@@ -145,31 +189,34 @@ private Label createCauseChip(Organization org) {
     return chip;
   }
 
-  private HBox createDonationCard(Donation donation) {
+  private BorderPane createDonationCard(Donation donation) {
     Organization org = organizationController.getOrgById(donation.organizationId());
     String orgName = (org != null) ? org.name() : "Unknown Organization";
 
-    HBox card = new HBox(20);
+    // Use BorderPane to fix columns: LEFT | SPACE | RIGHT
+    BorderPane card = new BorderPane();
     card.getStyleClass().add("donation-card");
     card.setPadding(new Insets(12, 15, 12, 15));
-    card.setAlignment(Pos.CENTER_LEFT);
 
+    // LEFT: Organization name
     Text orgText = new Text(orgName);
     orgText.getStyleClass().add("donation-org-name");
-
+    card.setLeft(orgText);
+
+    // RIGHT: Amount and date (stacked vertically)
     VBox details = new VBox(4);
     details.setAlignment(Pos.CENTER_RIGHT);
-    Label amountLabel = 
-    new Label(String.format("%.2f", donation.amount()) + " kr");
+
+    Label amountLabel = new Label(String.format("%.2f", donation.amount()) + " kr");
     amountLabel.getStyleClass().add("donation-amount");
+
     Label dateLabel = new Label(
       new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(donation.date()));
     dateLabel.getStyleClass().add("donation-date");
+
     details.getChildren().addAll(amountLabel, dateLabel);
+    card.setRight(details);
 
-    card.getChildren().addAll(orgText, details);
-    HBox.setHgrow(orgText, Priority.ALWAYS);  // Org name takes available space
-
     return card;
   }
 }
diff --git a/src/main/resources/userpage/userpage.css b/src/main/resources/userpage/userpage.css
@@ -16,8 +16,7 @@
 
 .section-box {
   -fx-background-color: #ddd;
-  -fx-pref-height: 200px;
-  -fx-pref-width: 700px;
+  -fx-pref-height: 150px;
   -fx-background-radius: 6;
 }