Add paging functionality on overview page

Author: artingo

README.md

@@ -397,4 +397,85 @@ Follow these steps to implement the bookshop:
 
    ```
 7. The card page should be fully functional, now, and look similar to this:<br/>
-   ![cart page](src/main/resources/screenshots/cart-page.png)
+   ![cart page](src/main/resources/screenshots/cart-page.png)
+
+## 7. Handle pagination on the overview page
+Now, we can see all 209 books from the [CSV file](src/main/resources/books.csv) but these are too many entries at once. To handle this, we introduce a `pagination`, i.e. show only 15 books at once and offer a navigation to the next / previous page.
+
+### Control pagination via request parameter
+1. We want to control the pagination via the URL parameter `page`. So we use a request parameter in our `homePage` method. 
+   ```java
+   @GetMapping(value = {"/index.html"})
+   public String homePage(Model model, @RequestParam(name = "page", required = false) Integer page)
+   ```
+2. We want to memorize the selected page when the user returns from another page, so we store it in the session. If there is a `page` request parameter at the same time, then it should be used. If none of both is present, use a default value. We handle this logic in the `getSessionParam()` method:
+   ```java
+   Integer getSessionParam(HttpSession session, String paramName, Integer paramValue, Integer defaultValue)
+   ```
+3. Next, we create a method that handles the pagination of the articles array: 
+   ```java
+   handlePagination(Model model, Integer page)
+   ```
+### Display 'from', 'to' and total number of articles
+1. We need to calculate the `from` and `to` index to be able to return the proper sublist of articles.   
+   ```java
+   int numOfArticles = shop.getNumOfArticles();
+   int from = Math.max((page - 1) * PAGE_SIZE, 0);
+   int to = Math.min(numOfArticles, from + PAGE_SIZE);
+   List<Book> articles = shop.getArticles().subList(from, to);
+   ```
+2. We add all this attributes to the view model:   
+   ```java
+   model.addAttribute("from", ++from);
+   model.addAttribute("to", to);
+   model.addAttribute("numOfArticles", numOfArticles);
+   model.addAttribute("articles", articles);
+   ```
+3. In [index.html](src/main/resources/templates/index.html), scroll to the `showing-product` section and insert this Mustache code:
+   ```handlebars
+   <div class="showing-product">
+     <p>Showing {{from}}-{{to}} of {{numOfArticles}} results</p>
+   </div>
+   ```
+4. Test it by using different `page` parameters in your browser, e.g. http://localhost:8080/index.html?page=2. It should display the proper from/to values:<br/>
+   ![Proper from-to display](src/main/resources/screenshots/from-to-display.png)
+
+### Create pagination links
+As Mustache doesn't handle logic, we have to implement it in the controller. 
+1. To do so, we will use a Map with the `pageNumber` as key and the current page's `active` state as value. 
+   ```java
+   int pageCount = (numOfArticles / PAGE_SIZE) + 1;
+   Map<Integer, String> pages = new HashMap<>();
+   for(int pageNumber = 1; pageNumber <= pageCount; pageNumber++) {
+     String active = (pageNumber == page) ? "active" : "";
+     pages.put(pageNumber, active);
+   }
+   ```
+2. We also need page values for the `previous` and `next` page links. We add all this attributes to the view model:
+   ```java
+   model.addAttribute("pageCount", pageCount);
+   model.addAttribute("pages", pages.entrySet());
+   model.addAttribute("prevPage", Math.max(page - 1, 1));
+   model.addAttribute("nextPage", Math.min(page + 1, pageCount));
+   ```
+3. To show the pagination links, scroll to the `Page navigation` section in [pagination.html](src/main/resources/templates/partials/pagination.html) and insert this code:
+   ```handlebars
+   <nav class="py-5" aria-label="Page navigation">
+     <ul class="pagination justify-content-center gap-4">
+       <li class="page-item">
+         <a class="page-link" href="?page={{prevPage}}">&lt;</a>
+       </li>
+       {{#pages}}
+         <li class="page-item">
+           <a class="page-link {{value}}" href="?page={{key}}">{{key}}</a>
+         </li>
+       {{/pages}}
+       <li class="page-item">
+         <a class="page-link" href="?page={{nextPage}}">&gt;</a>
+       </li>
+     </ul>
+   </nav>
+   ```
+4. The result should look like this:<br/>
+   ![Pagination screenshot](src/main/resources/screenshots/pagination.png)   
+5. Test the proper pagination by clicking the links!

src/main/java/onlineshop/Shop.java

@@ -22,16 +22,12 @@
 @SpringBootApplication
 public class Shop {
     public static final DecimalFormat df = new DecimalFormat("0.00", DecimalFormatSymbols.getInstance(Locale.US));
-
-    private final static String RESOURCES = "src/main/resources/";
-    private final static String CSV_FILE = "books.csv";
-    private static Logger log = LogManager.getLogger(Shop.class);
+    private final static Logger log = LogManager.getLogger(Shop.class);
     private final static List<Book> books = new ArrayList<>(220);
 
-
     public static void main(String[] args) {
         Shop shop = new Shop();
-        shop.readArticles(CSV_FILE, books);
+        shop.readArticles("src/main/resources/books.csv", books);
         SpringApplication.run(Shop.class, args);
         log.info("Server started on http://localhost:8080");
     }
@@ -51,29 +47,27 @@ public int getNumOfArticles() {
      */
     private void readArticles(String fileName, List<Book> books) {
         try {
-            Reader in = new FileReader(RESOURCES + fileName);
+            Reader in = new FileReader(fileName);
             CSVFormat csvFormat = CSVFormat.EXCEL.withFirstRecordAsHeader().builder()
                     .setDelimiter(';')
                     .build();
             Iterable<CSVRecord> records = csvFormat.parse(in);
 
             for (CSVRecord record : records) {
-                String title = record.get("Title");
-                String author = record.get("Author");
-                String publisher = record.get("Publisher");
-                String genre = record.get("Genre");
-                int pages = Integer.parseInt(record.get("Pages"));
+                String title = record.get("title");
+                String author = record.get("author");
+                String publisher = record.get("publisher");
+                String genre = record.get("genre");
 
                 double price = 0.0;
-                String priceString = record.get("Price");
+                String priceString = record.get("price");
                 if (!priceString.isEmpty()) {
-                    priceString = priceString.replace(',', '.');
                     price = Double.parseDouble(priceString);
                 }
 
-                String image = record.get("Image");
+                String image = record.get("image");
                 if (image.isEmpty()) image = "/images/book-placeholder.png";
-                Book book = new Book(title, author, publisher, genre, pages, price, image);
+                Book book = new Book(title, author, publisher, genre, price, image);
                 books.add(book);
             }
             in.close();
@@ -85,12 +79,13 @@ private void readArticles(String fileName, List<Book> books) {
 
     /**
      * Gets a /book by its article number
+     *
      * @param articleNo {@link Integer}
      * @return existingBook {@link Book}
      */
     public Book getArticleByNumber(int articleNo) {
         for (Book book : books) {
-            if(book.getArticleNo() == articleNo)
+            if (book.getArticleNo() == articleNo)
                 return book;
         }
         return null;

src/main/java/onlineshop/controllers/ShopController.java

@@ -5,20 +5,23 @@
 import onlineshop.Shop;
 import onlineshop.merchandise.Book;
 import onlineshop.merchandise.CartItem;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestParam;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Controller
 public class ShopController {
-    public static final String PAGE_NO = "page";
-    public static final String PAGE_SIZE = "size";
-    public final static String ARTICLES = "articles";
+    private final static Logger log = LogManager.getLogger(ShopController.class);
+    public static final int PAGE_SIZE = 15;
 
     @Autowired
     Shop shop;
@@ -34,43 +37,77 @@ public String root() {
     @GetMapping(value = {"/index.html"})
     public String homePage(Model model,
                            @RequestParam(name = "page", required = false) Integer page,
-                           @RequestParam(name = "size", required = false) Integer size,
                            HttpSession session) {
-        page = getSessionParam(session, PAGE_NO, page, 0);
-        size = getSessionParam(session, PAGE_SIZE, size, 10);
-
-        int from = page * size;
-        int to = from + size;
-        List<Book> articles = shop.getArticles().subList(from, to);
-
-        model.addAttribute(ARTICLES, articles);
-        model.addAttribute("from", from);
-        model.addAttribute("to", to);
-        model.addAttribute("noOfArticles", shop.getNumOfArticles());
+        page = getSessionParam(session, "page", page, 1);
+        handlePagination(model, page);
         getCartItems(model);
         return "index";
     }
 
     @GetMapping(value = {"/{name}.html"})
-    public String htmlMapping(Model model,
-                              @PathVariable(name = "name") String name) {
+    public String htmlMapping(Model model, @PathVariable(name = "name") String name) {
         getCartItems(model);
         return name;
     }
 
+    /**
+     * Loads the cart items from the cart object and stores the corresponding attributes in the view model.
+     * @param model {@link Model}
+     */
     private void getCartItems(Model model) {
         List<CartItem> cartItems = cart.getItems();
         model.addAttribute("cartItems", cartItems);
         model.addAttribute("numOfCartItems", cart.getNumOfItems());
         model.addAttribute("grandTotal", cart.getGrandTotal());
     }
 
-    private Integer getSessionParam(HttpSession session, String paramName, Integer paramValue, Integer defaultValue) {
+    /**
+     * Looks up the requested parameter in  the session. If it doesn't exist, it uses the default value.
+     * @param session {@link jakarta.servlet.http.HttpSession}
+     * @param paramName {@link String}
+     * @param paramValue {@link Integer}
+     * @param defaultValue {@link Integer}
+     * @return sessionValue {@link Integer}
+     */
+    private Integer getSessionParam(HttpSession session,
+                                    String paramName,
+                                    Integer paramValue,
+                                    Integer defaultValue) {
         if (paramValue == null) {
             Integer sessionValue = (Integer) session.getAttribute(paramName);
             paramValue = sessionValue == null ? defaultValue : sessionValue;
         }
         session.setAttribute(paramName, paramValue);
         return paramValue;
     }
+
+    /**
+     * Delivers the articles sublist corresponding to the selected page
+     * @param model {@link Model}
+     * @param page {@link Integer}
+     */
+    private void handlePagination(Model model, Integer page) {
+        int numOfArticles = shop.getNumOfArticles();
+        int from = Math.max((page - 1) * PAGE_SIZE, 0);
+        int to = Math.min(numOfArticles, from + PAGE_SIZE);
+        List<Book> articles = shop.getArticles().subList(from, to);
+
+        model.addAttribute("articles", articles);
+        model.addAttribute("from", ++from);
+        model.addAttribute("to", to);
+        model.addAttribute("numOfArticles", numOfArticles);
+
+        int pageCount = (numOfArticles / PAGE_SIZE) + 1;
+        Map<Integer, String> pages = new HashMap<>();
+        for(int pageNumber = 1; pageNumber <= pageCount; pageNumber++) {
+            String active = (pageNumber == page) ? "active" : "";
+            pages.put(pageNumber, active);
+        }
+
+        model.addAttribute("pageCount", pageCount);
+        model.addAttribute("pages", pages.entrySet());
+        model.addAttribute("prevPage", Math.max(page - 1, 1));
+        model.addAttribute("nextPage", Math.min(page + 1, pageCount));
+    }
+
 }

src/main/java/onlineshop/merchandise/Book.java

@@ -19,11 +19,10 @@ public Book(String title, String author) {
         this.author = author;
     }
 
-    public Book(String title, String author, String publisher, String genre, int pages, double price, String image) {
+    public Book(String title, String author, String publisher, String genre, double price, String image) {
         super("Description will follow...", publisher, price, image);
         this.title = title;
         this.author = author;
-        this.pages = pages;
         this.format = Format.PAPERBACK;
         this.genre = Genre.fromString(genre);
     }