From 242ac9804388103ca4ea2f5bd06760b4d3601520 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Wed, 18 Nov 2020 19:42:41 +0100
Subject: [PATCH] Component for Bootstrap form group with input of type number

---
 .../components/bootstrap/formGroup.xhtml      | 33 --------
 .../bootstrap/formGroupNumber.xhtml           | 80 +++++++++++++++++++
 .../components/bootstrap/formGroupText.xhtml  | 39 ++++-----
 .../ui/admin/categories/category-form.xhtml   |  9 ++-
 4 files changed, 108 insertions(+), 53 deletions(-)
 delete mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroup.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroup.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroup.xhtml
deleted file mode 100644
index 615f7a3d6..000000000
--- a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroup.xhtml
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
-      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
-      xmlns:f="http://xmlns.jcp.org/jsf/core">
-    <cc:interface shortDescription="A base component for form groups. The control (input) is added by the input facet.">
-        <cc:attribute name="help"
-                      required="true"
-                      shortDescription="A short description of the input field"
-                      type="String" />
-        <cc:attribute name="inputId" 
-                      required="true" 
-                      shortDescription="The ID of the input field."
-                      type="String" />
-        <cc:attribute name="label"
-                      required="true"
-                      shortDescription="The label of the input field."
-                      type="String" />
-
-        <cc:facet name="input" required="true" />
-    </cc:interface>
-    <cc:implementation>
-        <div class="form-group">
-            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
-            <cc:renderFacet name="input" />
-            <small class="form-text text-muted"
-                   id="#{cc.attrs.inputId}-help">
-                #{cc.attrs.help}
-            </small>
-        </div>
-    </cc:implementation>
-</html>
-
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
new file mode 100644
index 000000000..ed31d82a2
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupNumber.xhtml
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
+      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:f="http://xmlns.jcp.org/jsf/core">
+    <cc:interface shortDescription="Component for a form group with a number input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="max"
+                      required="false"
+                      shortDescription="Maximum allowed value."
+                      type="String" />
+        <cc:attribute name="min"
+                      required="false"
+                      shortDescription="Minimum allowed value."
+                      type="String" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server." 
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="step"
+                      required="false"
+                      shortDescription="Stepping interval for the input"
+                      type="String" />
+        <cc:attribute name="value"
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <pre>
+            step = #{cc.attrs.step}
+            step = #{(not empty cc.attrs.step) ? cc.attrs.step : null}
+            step not empty? #{not empty cc.attrs.step}
+        </pre>
+        <div>
+            <div class="form-group">
+                <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+                <!--<cc:renderFacet name="input" />-->
+                <input aria-describedby="#{cc.attrs.inputId}-help"
+                       data-step="#{cc.attrs.step}"
+                       id="#{cc.attrs.inputId}"
+                       max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
+                       min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
+                       name="#{cc.attrs.name}"
+                       placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder : null}"
+                       required="#{cc.attrs.required ? 'required' : null}"
+                       step="#{cc.attrs.step}"
+                       type="number"
+                       value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
+                <small class="form-text text-muted"
+                       id="#{cc.attrs.inputId}-help">
+                    #{cc.attrs.help}
+                </small>
+            </div>
+
+        </div>
+    </cc:implementation>
+</html>
+
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
index 2f0cd4f8c..a25af17ba 100644
--- a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
-      xmlns="http://www.w3.org/1999/xhtml"
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
       xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
       xmlns:cc="http://xmlns.jcp.org/jsf/composite"
       xmlns:f="http://xmlns.jcp.org/jsf/core">
@@ -53,23 +53,24 @@
                       type="String" />
     </cc:interface>
     <cc:implementation>
-        <bootstrap:formGroup help="#{cc.attrs.help}"
-                             inputId="#{cc.attrs.inputId}"
-                             label="#{cc.attrs.label}">
-            <f:facet name="input">
-                <input aria-describedby="#{cc.attrs.inputId}-help"
-                       id="#{cc.attrs.inputId}"
-                       maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
-                       minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
-                       name="#{cc.attrs.name}"
-                       pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
-                       placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
-                       required="#{cc.attrs.required ? 'required' : ''}"
-                       size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
-                       value="#{not empty cc.attrs.value ? cc.attrs.value : ''}"
-                       type="text" />
-            </f:facet>
-        </bootstrap:formGroup>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : null}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   type="text" 
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
     </cc:implementation>
 </html>
 
diff --git a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
index 5322ece0f..846ea9b5d 100644
--- a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
+++ b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/category-form.xhtml
@@ -23,7 +23,14 @@
                     <bootstrap:formGroupText help="test"
                                              inputId="test"
                                              label="Test"
-                                             name="test" />
+                                             name="test"
+                                             value="foobar bar" />
+                    <bootstrap:formGroupNumber help="The price"
+                                               inputId="price"
+                                               label="Price"
+                                               name="price" 
+                                               step="0.01" 
+                                               value="10.0" />
                 </form>
                 <p>ToDo</p>
             </div>
