- Developed remove button for clearing watchlist items

AkshathSai · May 9, 2024 · 4e7b7c7 · 4e7b7c7
1 parent 99e32a6
commit 4e7b7c7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/main/java/com/akshathsaipittala/streamspace/web/controllers/WatchListController.java b/src/main/java/com/akshathsaipittala/streamspace/web/controllers/WatchListController.java
@@ -8,10 +8,7 @@
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.*;
 
 import java.sql.Date;
 import java.time.LocalDate;
@@ -50,4 +47,11 @@ public ResponseEntity<String> addToWatchList(@RequestParam("movie-title") String
         return ResponseEntity.ok("<i class=\"bi bi-heart-fill\" style=\"color: #eb5282;\"></i> Added!");
     }
 
+    @HxRequest
+    @DeleteMapping("/{id}")
+    public ResponseEntity<String> deleteFromWatchList(@PathVariable("id") int id) {
+        watchListRepository.deleteById(id);
+        return ResponseEntity.ok("Deleted!");
+    }
+
 }
diff --git a/src/main/resources/templates/watchlistitems.html b/src/main/resources/templates/watchlistitems.html
@@ -1,6 +1,6 @@
 <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
 
-    <div class="col" th:each="item: ${watchlistitems}">
+    <div class="col" th:each="item: ${watchlistitems}" th:id="|list-item-${item.id}|">
 
         <div class="card h-100">
             <a hx:get="@{${item.itemUrl}}"
@@ -10,7 +10,16 @@
                hx-push-url="true">
                 <img loading="lazy" th:src="@{${item.thumbnailUrl}}" th:alt="${item.name}" class="card-img-top">
             </a>
+            <div class="card-footer">
+                <small>
+                    <a th:attr="hx-delete=@{/watchlist/{id}(id=${item.id})},hx-target=|#list-item-${item.id}|"
+                          hx-trigger="click"
+                          hx-swap="delete"
+                          hx-method="delete"><i class="bi bi-trash"></i></a>
+                </small>
+            </div>
         </div>
+
     </div>
 
 </div>