OnChangeAjaxBehavior seems to work

martin-g · Sep 1, 2023 · 602b7ca · 602b7ca
1 parent 68b7bcb
commit 602b7ca
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 39 deletions.
diff --git a/...et/extensions/markup/html/bootstrap/form/tempusdominus/AbstractTempusDominusWithIcon.html b/...et/extensions/markup/html/bootstrap/form/tempusdominus/AbstractTempusDominusWithIcon.html
@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <wicket:panel xmlns:wicket="http://wicket.apache.org">
-    <div wicket:id="datetime" class="input-group date" data-td-target-input="nearest" data-td-target-toggle="nearest">
-        <input type="text" class="form-control" wicket:id="date"/>
-        <span class="input-group-text" wicket:id="iconContainer">
-            <i wicket:id="icon"></i>
-        </span>
-    </div>
+    <input type="text" class="form-control" wicket:id="date"/>
+    <span class="input-group-text" wicket:id="iconContainer">
+        <i wicket:id="icon"></i>
+    </span>
 </wicket:panel>
diff --git a/...et/extensions/markup/html/bootstrap/form/tempusdominus/AbstractTempusDominusWithIcon.java b/...et/extensions/markup/html/bootstrap/form/tempusdominus/AbstractTempusDominusWithIcon.java
@@ -1,6 +1,9 @@
 package de.agilecoders.wicket.extensions.markup.html.bootstrap.form.tempusdominus;
 
 import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesomeSettings;
+
+import java.util.List;
+
 import org.apache.wicket.Application;
 import org.apache.wicket.Component;
 import org.apache.wicket.MarkupContainer;
@@ -9,6 +12,9 @@
 import org.apache.wicket.markup.html.form.FormComponent;
 import org.apache.wicket.markup.html.form.FormComponentPanel;
 import org.apache.wicket.model.IModel;
+import org.apache.wicket.util.convert.ConversionException;
+import org.apache.wicket.util.convert.IConverter;
+import org.apache.wicket.util.string.StringValue;
 
 import de.agilecoders.wicket.core.markup.html.bootstrap.image.Icon;
 import de.agilecoders.wicket.core.markup.html.bootstrap.image.IconType;
@@ -42,11 +48,10 @@ public AbstractTempusDominusWithIcon(String markupId, TempusDominusConfig config
      */
     public AbstractTempusDominusWithIcon(String markupId, IModel<T> model, TempusDominusConfig config) {
         super(markupId, model);
-        setRenderBodyOnly(true);
         this.config = config;
     }
 
-	private FormComponent<T> getDateInput() {
+    private FormComponent<T> getDateInput() {
         if (dateInput == null) {
             dateInput = newInput("date", config.getFormat());
             dateInput.setModel(getModel());
@@ -56,27 +61,43 @@ private FormComponent<T> getDateInput() {
 
     @Override
     public void convertInput() {
-        setConvertedInput(getDateInput().getConvertedInput());
+        final IConverter<T> converter = getDateInput().getConverter(getType());
+
+        try
+        {
+            T obj = converter.convertToObject(getRawInput(), getLocale());
+            getDateInput().setConvertedInput(obj);
+            setConvertedInput(obj);
+        }
+        catch (ConversionException e)
+        {
+            error(newValidationError(e));
+        }
+    }
+
+    @Override
+    protected List<StringValue> getParameterValues(String inputName) {
+        return super.getParameterValues(inputName + ":date");
     }
 
     @Override
     protected void onInitialize() {
         super.onInitialize();
-        WebMarkupContainer container = new WebMarkupContainer("datetime");
-        container.setOutputMarkupId(true);
-        Component input = getDateInput();
-        final String mainId = "#" + container.getMarkupId();
+        setOutputMarkupId(true);
+        FormComponent<T> input = getDateInput();
+        setType(input.getType());
+        final String mainId = "#" + getMarkupId();
         input.add(AttributeAppender.append("data-td-target", mainId));
         Component iconContainer = newIconContainer("iconContainer")
                 .add(newIcon("icon"))
                 .add(AttributeAppender.append("data-td-target", mainId)
                     , AttributeAppender.append("data-td-toggle", "datetimepicker"));
+        add(AttributeAppender.append("class", "input-group date")
+            , AttributeAppender.append("data-td-target-input", "nearest")
+            , AttributeAppender.append("data-td-target-toggle", "nearest"));
 
-
-        add(container
-                .add(input, iconContainer)
-                .add(new TempusDominusBehavior(config))
-        );
+        add(input, iconContainer);
+        add(new TempusDominusBehavior(config, List.of("change")));
     }
 
     /**

diff --git a/...ers/wicket/extensions/markup/html/bootstrap/form/tempusdominus/TempusDominusBehavior.java b/...ers/wicket/extensions/markup/html/bootstrap/form/tempusdominus/TempusDominusBehavior.java
@@ -1,5 +1,6 @@
 package de.agilecoders.wicket.extensions.markup.html.bootstrap.form.tempusdominus;
 
+import java.util.List;
 import java.util.Locale;
 
 import org.apache.wicket.Component;
@@ -24,14 +25,25 @@ public class TempusDominusBehavior extends BootstrapJavascriptBehavior {
     private static final long serialVersionUID = 1L;
 
     private final TempusDominusConfig config;
+    private final List<String> events;
 
     /**
      * Construct instance
      *
      * @param config config
      */
     public TempusDominusBehavior(TempusDominusConfig config) {
+        this(config, List.of());
+    }
+
+    /**
+     * Construct instance
+     *
+     * @param config config
+     */
+    public TempusDominusBehavior(TempusDominusConfig config, List<String> events) {
         this.config = config;
+        this.events = events;
     }
 
     private void addResourceIfExists(final IHeaderResponse response, String path) {
@@ -61,6 +73,7 @@ public void renderHead(Component component, final IHeaderResponse response) {
             , config
             , config.getLocalization()
             , locale.getLanguage()
+            , String.join(",", events)
             ).build()
         ));
     }

diff --git a/...oders/wicket/extensions/markup/html/bootstrap/form/tempusdominus/TempusDominusConfig.java b/...oders/wicket/extensions/markup/html/bootstrap/form/tempusdominus/TempusDominusConfig.java
@@ -271,6 +271,9 @@ public static <U> String formatDateISO(U date) {
             strDate = ISO_LOCAL_DATE_TIME.format((LocalDateTime)date);
         } else if (date instanceof ZonedDateTime) {
             strDate = ISO_ZONED_DATE_TIME.format((ZonedDateTime)date);
+        } else if (date instanceof String) {
+            // nothing to convert
+            strDate = (String)date;
         }
         return strDate;
     }

diff --git a/...gilecoders/wicket/extensions/markup/html/bootstrap/references/js/wicket.tempus-dominus.js b/...gilecoders/wicket/extensions/markup/html/bootstrap/references/js/wicket.tempus-dominus.js
@@ -1,4 +1,4 @@
-function createTempusDominus(elementId, config, localization, lng) {
+function createTempusDominus(elementId, config, localization, lng, events) {
 	const el = document.getElementById(`${elementId}`);
 	let defLocalization = {};
 	if (tempusDominus.locales) {
@@ -8,11 +8,26 @@ function createTempusDominus(elementId, config, localization, lng) {
 	}
 	config.localization = Object.assign({}, defLocalization, localization);
 	el.datetimepicker = new tempusDominus.TempusDominus(el, config);
+
+	el.tdsubscriptions = {};
+	events.split(',').forEach(evt => {
+		if ('change' === evt) {
+			el.tdsubscriptions.change = el.datetimepicker.subscribe(
+				tempusDominus.Namespace.events.change, (e) => {
+					el.dispatchEvent(new Event('change'));
+				});
+		}
+	});
+
 }
 
 function destroyTempusDominus(elementId) {
 	const el = document.getElementById(`${elementId}`);
 	if (el && el.datetimepicker) {
+		if (el.tdsubscriptions.change) {
+			el.tdsubscriptions.change.unsubscribe();
+			delete el.tdsubscriptions;
+		}
 		el.datetimepicker.dispose();
 		delete el.datetimepicker;
 	}

diff --git a/...ap-samples/src/main/java/de/agilecoders/wicket/samples/pages/TempusDominusPickerPage.java b/...ap-samples/src/main/java/de/agilecoders/wicket/samples/pages/TempusDominusPickerPage.java
@@ -5,14 +5,13 @@
 import java.time.LocalDateTime;
 import java.time.LocalTime;
 import java.time.ZoneId;
-import java.time.ZonedDateTime;
-import java.time.format.DateTimeFormatter;
 import java.util.Date;
 import java.util.List;
 import java.util.Locale;
 
 import org.apache.wicket.Session;
 import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.attributes.AjaxRequestAttributes;
 import org.apache.wicket.ajax.form.OnChangeAjaxBehavior;
 import org.apache.wicket.ajax.markup.html.form.AjaxButton;
 import org.apache.wicket.extensions.markup.html.form.DateTextField;
@@ -21,19 +20,16 @@
 import org.apache.wicket.extensions.markup.html.form.datetime.LocalTimeTextField;
 import org.apache.wicket.markup.head.CssHeaderItem;
 import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.markup.html.form.AbstractTextComponent.ITextFormatProvider;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.form.DropDownChoice;
 import org.apache.wicket.markup.html.form.Form;
 import org.apache.wicket.markup.html.form.FormComponent;
 import org.apache.wicket.markup.html.form.LambdaChoiceRenderer;
-import org.apache.wicket.markup.html.form.TextField;
-import org.apache.wicket.model.IModel;
 import org.apache.wicket.model.Model;
 import org.apache.wicket.request.mapper.parameter.PageParameters;
 import org.apache.wicket.request.resource.CssResourceReference;
+import org.apache.wicket.util.convert.ConversionException;
 import org.apache.wicket.util.convert.IConverter;
-import org.apache.wicket.util.convert.converter.ZonedDateTimeConverter;
 import org.apache.wicket.util.string.Strings;
 import org.wicketstuff.annotation.mount.MountPath;
 
@@ -255,25 +251,22 @@ protected void onInitialize() {
                         .withDayOfWeekDisabled(0)
                         .withDayOfWeekDisabled(6)
                 );
-            final FormComponent<LocalDateTime> iconInput = new AbstractTempusDominusWithIcon<>("icon", Model.of((LocalDateTime)null), iconConfig) {
-                private static final long serialVersionUID = 1L;
+                createBlock(
+                new AbstractTempusDominusWithIcon<>("icon", Model.of((LocalDateTime)null), iconConfig) {
+                    private static final long serialVersionUID = 1L;
 
-                @Override
-                protected FormComponent<LocalDateTime> newInput(String wicketId, String dateFormat) {
-                    FormComponent<LocalDateTime> input = new LocalDateTimeTextField(wicketId, dateFormat);
-                    addStatus(getId(), input);
-                    return input;
-                }
-            };
-            addCode(iconInput.getId(),
+                    @Override
+                    protected FormComponent<LocalDateTime> newInput(String wicketId, String dateFormat) {
+                        return new LocalDateTimeTextField(wicketId, dateFormat);
+                    }
+                },
                 "new TempusDominusConfig()\n" + //
                 "    .withClass(LocalDateTime.class)\n" + //
                 "    .withRestrictions(cfg -> cfg\n" + //
                 "            .withDayOfWeekDisabled(0)\n" + //
                 "            .withDayOfWeekDisabled(6)\n" + //
                 "    );"
             );
-            form.add(iconInput);
         }
         form.add(new AjaxButton("submit") {
             protected void onSubmit(AjaxRequestTarget target) {
@@ -295,8 +288,30 @@ protected void onError(AjaxRequestTarget target) {
     }
 
     private void addStatus(String id, FormComponent<?> input) {
-        Label status = new Label(id + "-status", Model.of(TempusDominusConfig.formatDateISO(input.getModelObject())));
+        final IConverter converter = new IConverter() {
+            public String convertToString(Object value, Locale locale) {
+                return TempusDominusConfig.formatDateISO(value);
+            }
+
+            @Override
+            public Object convertToObject(String value, Locale locale) throws ConversionException {
+                return null;
+            }
+        };
+
+        Label status = new Label(id + "-status", input.getModel()) {
+            @Override
+            public <C> IConverter<C> getConverter(Class<C> type) {
+                return converter;
+            }
+        };
         input.add(new OnChangeAjaxBehavior() {
+            @Override
+            protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
+                super.updateAjaxAttributes(attributes);
+                attributes.setSerializeRecursively(true);
+            }
+
             @Override
             protected void onUpdate(AjaxRequestTarget target) {
                 status.setDefaultModelObject(TempusDominusConfig.formatDateISO(input.getModelObject()));
@@ -310,10 +325,15 @@ private void addCode(String id, String code) {
         form.add(new Code(id + "-java-code", Model.of(code)));
     }
 
-    private void createBlock(FormComponent<?> input, String code, TempusDominusConfig cfg) {
+    private void createBlock(FormComponent<?> input, String code) {
         addStatus(input.getId(), input);
         addCode(input.getId(), code);
-        form.add(input.add(new TempusDominusBehavior(cfg)));
+        form.add(input);
+    }
+
+    private void createBlock(FormComponent<?> input, String code, TempusDominusConfig cfg) {
+        createBlock(input, code);
+        input.add(new TempusDominusBehavior(cfg));
     }
 
     @Override