Merge pull request #178 from liauzhanyi/help

Update help window to show command list
AY2425S1-CS2103-F10-2 · Nov 4, 2024 · f27fa32 · f27fa32
2 parents 1d68778 + e117cff
commit f27fa32
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 32 deletions.
diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
@@ -444,19 +444,19 @@ Priorities: High (must have) - `* * *`, Medium (nice to have) - `* *`, Low (unli
 * 3a. The given specified field is/are empty.
 
   * 3a1. SocialBook shows an error message.
-  
+
     Use case resumes at step 2.
 
 * 3b. The given index is invalid.
 
     * 3b1. SocialBook shows an error message.
 
       Use case resumes at step 2.
-  
+
 * 3c. There is an error in any of the specified fields.
-    
+
   * 3c1. SocialBook shows an error message.
-      
+
     Use case resumes at step 2.
 
 ##### **Use case: Find a contact**
@@ -581,7 +581,7 @@ testers are expected to do more *exploratory* testing.
 
 2. Deleting a person while found persons are being shown
 
-    1. Prerequisites: Find people with names matching a particular keyword using the `find` command. 
+    1. Prerequisites: Find people with names matching a particular keyword using the `find` command.
 
     1. Test case: `delete x`<br> (where x is less than or equal to the number of found persons)
        Expected: Contact x is deleted from the list. Details of the deleted contact shown in the status message. Timestamp in the status bar is updated.
@@ -602,7 +602,7 @@ testers are expected to do more *exploratory* testing.
     1. Test case: `delete x y`<br> (where x,y are greater than the number of listed persons)
        Expected: No person is deleted. Error details shown in the status message. Status bar remains the same.
 
-    1. Test case: `delete 0 1`<br> 
+    1. Test case: `delete 0 1`<br>
        Expected: First contact is deleted from the list. Name of the deleted contact and invalidity of the index 0 is shown in the status message. Timestamp in the status bar is updated.
 
 ### Saving data

diff --git a/docs/UserGuide.md b/docs/UserGuide.md
@@ -71,7 +71,7 @@ SocialBook is a **desktop app for managing contacts, optimized for use via a  Li
 
 ### Viewing help : `help`
 
-Shows a message explaning how to access the help page.
+Shows a table of commands with their respective descriptions and a link to the user guide.
 
 ![help message](images/helpMessage.png)
 
@@ -149,8 +149,8 @@ Finds contacts whose names or/and phone numbers or/and address contain any of th
 
 Format: `find [n/NAMEKEYWORDS] [p/PHONEKEYWORDS] [a/ADDRESSKEYWORDS]`
 
-**NOTE:** At least one field MUST be provided  
-  e.g. `find n/Hans` or `find p/82345678` or `find a/wall street` will work  
+**NOTE:** At least one field MUST be provided
+  e.g. `find n/Hans` or `find p/82345678` or `find a/wall street` will work
   e.g. `find Hans` or `find wall street` or `find` will fail
 * The search is case-insensitive. e.g `hans` will match `Hans` or `wall Street` will match `Wall Street`
 * The order of the keywords does not matter. e.g. `Hans Bo` will match `Bo Hans`
@@ -162,7 +162,7 @@ Format: `find [n/NAMEKEYWORDS] [p/PHONEKEYWORDS] [a/ADDRESSKEYWORDS]`
 Examples:
 * `find n/John` returns `john` and `John Doe`
 * `find n/alex david` returns `Alex Yeoh`, `David Li`<br>
-  ![result for 'find n/alex david'](images/findAlexDavidResult.png) 
+  ![result for 'find n/alex david'](images/findAlexDavidResult.png)
 * `find p/87438807 91031282` returns `Alex Yeoh`, `David Li`
 * `find a/serangoon` returns `David Li`
 * `find n/alex p/87438807 a/geylang` returns `Alex Yeoh`
@@ -184,7 +184,7 @@ Examples:
 
 ### Adding remarks to person : `remark`
 
-Add remarks to an existing person in the address book. 
+Add remarks to an existing person in the address book.
 
 Format: `remark INDEX r/REMARK`
 
@@ -251,7 +251,7 @@ _Details coming soon ..._
 
 ### Phone
 * Phone numbers can only contain 8 numbers, and must begin with a 6, 8, or 9.
-* Spaces in the middle of a phone number are accepted (eg. 9123 4523), as are phone numbers without spaces (eg. 91234523). 
+* Spaces in the middle of a phone number are accepted (eg. 9123 4523), as are phone numbers without spaces (eg. 91234523).
 * Spaces in unusual locations will render the phone number invalid (eg. 912 34523).
 
 --------------------------------------------------------------------------------------------------------------------

diff --git a/docs/images/helpMessage.png b/docs/images/helpMessage.png
diff --git a/src/main/java/seedu/address/ui/HelpWindow.java b/src/main/java/seedu/address/ui/HelpWindow.java
@@ -2,9 +2,15 @@
 
 import java.util.logging.Logger;
 
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.SimpleStringProperty;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
+import javafx.scene.control.TableColumn;
+import javafx.scene.control.TableView;
 import javafx.scene.input.Clipboard;
 import javafx.scene.input.ClipboardContent;
 import javafx.stage.Stage;
@@ -16,16 +22,22 @@
 public class HelpWindow extends UiPart<Stage> {
 
     public static final String USERGUIDE_URL = "https://ay2425s1-cs2103-f10-2.github.io/tp/UserGuide.html";
-    public static final String HELP_MESSAGE = "Refer to the user guide: " + USERGUIDE_URL;
+    public static final String HELP_MESSAGE = "Refer to the user guide for more information: "
+            + USERGUIDE_URL;
 
     private static final Logger logger = LogsCenter.getLogger(HelpWindow.class);
     private static final String FXML = "HelpWindow.fxml";
 
     @FXML
     private Button copyButton;
-
     @FXML
     private Label helpMessage;
+    @FXML
+    private TableView<String[]> commandTable;
+    @FXML
+    private TableColumn<String[], String> commandColumn;
+    @FXML
+    private TableColumn<String[], String> descriptionColumn;
 
     /**
      * Creates a new HelpWindow.
@@ -99,4 +111,43 @@ private void copyUrl() {
         url.putString(USERGUIDE_URL);
         clipboard.setContent(url);
     }
+
+    /**
+     * Initializes the help window.
+     */
+    @FXML
+    public void initialize() {
+        commandColumn.setCellValueFactory(data -> new SimpleStringProperty(data.getValue()[0]));
+        descriptionColumn.setCellValueFactory(data -> new SimpleStringProperty(data.getValue()[1]));
+
+        commandColumn.setMinWidth(100);
+        descriptionColumn.setMinWidth(300);
+        descriptionColumn.setMaxWidth(Double.MAX_VALUE);
+
+        commandColumn.setSortable(false);
+        descriptionColumn.setSortable(false);
+
+        ObservableList<String[]> commandList = FXCollections.observableArrayList(
+                new String[] { "add", "Adds a contact to the list" },
+                new String[] { "clear", "Clears the contact list" },
+                new String[] { "delete", "Deletes contact(s) by index" },
+                new String[] { "remark", "Adds a remark to a contact" },
+                new String[] { "seed", "Seeds the contact list with sample data" },
+                new String[] { "edit", "Edits a contact in the list" },
+                new String[] { "list", "Lists all contacts" },
+                new String[] { "find", "Finds contact(s) by keyword" },
+                new String[] { "sort", "Sorts contacts by specific field" },
+                new String[] { "view", "Views more information regarding a contact" },
+                new String[] { "exit", "Exits the application" });
+
+        commandTable.setItems(commandList);
+        commandTable.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY_FLEX_LAST_COLUMN);
+
+        // Set height of table dynamically
+        commandTable.setFixedCellSize(30);
+        commandTable.prefHeightProperty().bind(
+                Bindings.size(commandTable.getItems()).multiply(commandTable.getFixedCellSize()).add(30));
+
+    }
+
 }
diff --git a/src/main/resources/view/HelpWindow.css b/src/main/resources/view/HelpWindow.css
@@ -17,3 +17,57 @@
 #helpMessageContainer {
     -fx-background-color: derive(#1d1d1d, 20%);
 }
+
+#commandTable {
+    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-text-fill: white;
+    -fx-border-color: gray;
+    -fx-border-width: 1px;
+}
+
+#commandTable .column-header {
+    -fx-background-color: transparent;
+    -fx-border-color: gray;
+    -fx-border-width: 0 1px 1px 0;
+}
+
+#commandTable .column-header .label {
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-padding: 5px;
+}
+
+#commandTable .column-header-background {
+    -fx-background-color: derive(#1d1d1d, 10%);
+}
+
+#commandTable .table-cell {
+    -fx-text-fill: white;
+    -fx-border-color: gray;
+    -fx-border-width: 0 1px 1px 0;
+    -fx-padding: 5px;
+}
+
+#commandTable .table-row-cell {
+    -fx-background-color: derive(#1d1d1d, 20%);
+}
+
+#commandTable .table-row-cell:hover {
+    -fx-background-color: derive(#1d1d1d, 30%);
+}
+
+#commandTable:focused {
+    -fx-background-color: derive(#1d1d1d, 20%);
+}
+
+#commandTable .table-row-cell:selected {
+    -fx-background-color: derive(#1d1d1d, 30%);
+}
+
+#commandTable .scroll-bar:vertical,
+#commandTable .scroll-bar:horizontal {
+    -fx-scale-x: 0;
+    -fx-scale-y: 0;
+    -fx-opacity: 0;
+    -fx-padding: -7;
+}
diff --git a/src/main/resources/view/HelpWindow.fxml b/src/main/resources/view/HelpWindow.fxml
@@ -5,7 +5,10 @@
 <?import javafx.scene.Scene?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TableView?>
+<?import javafx.scene.control.TableColumn?>
 <?import javafx.scene.image.Image?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.stage.Stage?>
 
@@ -19,26 +22,39 @@
         <URL value="@HelpWindow.css" />
       </stylesheets>
 
-      <HBox alignment="CENTER" fx:id="helpMessageContainer">
-        <children>
-          <Label fx:id="helpMessage" text="Label">
-            <HBox.margin>
-              <Insets right="5.0" />
-            </HBox.margin>
-          </Label>
-          <Button fx:id="copyButton" mnemonicParsing="false" onAction="#copyUrl" text="Copy URL">
-            <HBox.margin>
-              <Insets left="5.0" />
-            </HBox.margin>
-          </Button>
-        </children>
-        <opaqueInsets>
-          <Insets bottom="10.0" left="5.0" right="10.0" top="5.0" />
-        </opaqueInsets>
+      <VBox spacing="10" fx:id="helpMessageContainer">
         <padding>
-          <Insets bottom="10.0" left="5.0" right="10.0" top="5.0" />
+          <Insets bottom="5.0" left="5.0" right="5.0" />
         </padding>
-      </HBox>
+
+        <TableView fx:id="commandTable">
+          <columns>
+            <TableColumn fx:id="commandColumn" text="Command" />
+            <TableColumn fx:id="descriptionColumn" text="Description" />
+          </columns>
+          <VBox.margin>
+            <Insets top="10.0" />
+          </VBox.margin>
+        </TableView>
+
+        <HBox alignment="CENTER">
+          <children>
+            <Label fx:id="helpMessage" text="Label">
+              <HBox.margin>
+                <Insets right="5.0" />
+              </HBox.margin>
+            </Label>
+            <Button fx:id="copyButton" mnemonicParsing="false" onAction="#copyUrl" text="Copy URL">
+              <HBox.margin>
+                <Insets left="5.0" />
+              </HBox.margin>
+            </Button>
+          </children>
+          <padding>
+            <Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
+          </padding>
+        </HBox>
+      </VBox>
     </Scene>
   </scene>
 </fx:root>