From 76f9370eb564afef7679271cacac44e0564fe6ea Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Wed, 22 Jan 2020 00:53:41 +0100
Subject: [PATCH] Options can be removed from the map

---
 .../java/de/juplo/demo/DemoController.java    |  8 ++++++
 src/main/resources/templates/form.html        | 27 ++++++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/main/java/de/juplo/demo/DemoController.java b/src/main/java/de/juplo/demo/DemoController.java
index c74a6e9..a9391db 100644
--- a/src/main/java/de/juplo/demo/DemoController.java
+++ b/src/main/java/de/juplo/demo/DemoController.java
@@ -47,4 +47,12 @@ public class DemoController
     }
     return display(form);
   }
+
+  @RequestMapping(path = "/", params = "remove")
+  public String remove(@ModelAttribute Form form, @RequestParam String remove)
+  {
+    Boolean value = form.map.remove(remove);
+    log.info("Removed option \"{}\" with value {} from the map", remove, value);
+    return display(form);
+  }
 }
diff --git a/src/main/resources/templates/form.html b/src/main/resources/templates/form.html
index 70841c9..e3b1f90 100644
--- a/src/main/resources/templates/form.html
+++ b/src/main/resources/templates/form.html
@@ -16,17 +16,26 @@
           <div class="card-header">Select / unselect the option and submit the form...</div>
           <div class="card-body">
             <div class="card-text">
-              <div class="form-group">
-                <input type="checkbox" class="form-check-label" th:field="*{option}" />
-                <label class="form-check-label" th:for="${#ids.prev('option')}">Fancy Option To Choose</label>
+              <div class="card my-2">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{option}" />
+                  <label class="form-check-label" th:for="${#ids.prev('option')}">Fancy Option To Choose</label>
+                </div>
               </div>
-              <div class="form-group">
-                <input type="checkbox" class="form-check-label" th:field="*{inner.option}" />
-                <label class="form-check-label" th:for="${#ids.prev('inner.option')}">Another Option (In An Inner Class)</label>
+              <div class="card my-2">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{inner.option}" />
+                  <label class="form-check-label" th:for="${#ids.prev('inner.option')}">Another Option (In An Inner Class)</label>
+                </div>
               </div>
-              <div class="form-group" th:each="key : *{map.keySet()}">
-                <input type="checkbox" class="form-check-label" th:field="*{map[__${key}__]}" />
-                <label class="form-check-label" th:for="|map${key}1|" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>
+              <div class="card my-2" th:each="key : *{map.keySet()}">
+                <div class="card-body p-2">
+                  <input type="checkbox" class="form-check-label" th:field="*{map[__${key}__]}" />
+                  <label class="form-check-label" th:for="|map${key}1|" th:text='|Option "${key}" From The Map|'>Option "KEY" From The Map</label>
+                  <button type="submit" class="close float-right pr-2" name="remove" th:value="${key}">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
               </div>
               <div class="input-group">
                 <span class="input-group-prepend"><span class="input-group-text">New Option</span></span>
-- 
2.20.1