add custom component MonthYearPicker

kontor-spring/src/main/java/de/thpeetz/kontor/comics/views/IssueForm.java

@@ -19,6 +19,7 @@ import com.vaadin.flow.data.binder.*;
 
 import com.vaadin.flow.data.converter.*;
 import de.thpeetz.kontor.comics.data.*;
+import de.thpeetz.kontor.common.views.*;
 import lombok.extern.slf4j.Slf4j;
 
 @Slf4j
@@ -28,7 +29,7 @@ public class IssueForm extends FormLayout {
     ComboBox<Volume> volume = new ComboBox<>("Volume");
     TextField issueNumber = new TextField("Issue number");
     TextField title = new TextField("Full Title");
-    TextField publishedOn = new TextField("Published");
+    MonthYearPicker publishedOn = new MonthYearPicker();
     Checkbox isRead = new Checkbox("Read");
     Checkbox inStock = new Checkbox("In stock");
 
@@ -40,23 +41,8 @@ public class IssueForm extends FormLayout {
 
     public IssueForm(List<Comic> comics) {
         addClassName("issue-form");
-        binder.forField(publishedOn).withConverter(new Converter<String, YearMonth>() {
+        binder.forField(publishedOn).withConverter(new YearMonthConverter(publishedOn)).
-            @Override
+                bind(Issue::getPublishedOn, Issue::setPublishedOn);
-            public Result<YearMonth> convertToModel(String value, ValueContext context) {
-                try {
-                    YearMonth result = YearMonth.parse(value);
-                    return Result.ok(result);
-                } catch (DateTimeParseException e) {
-                    return Result.error("invalid year-month format");
-                }
-            }
-
-            @Override
-            public String convertToPresentation(YearMonth value, ValueContext context) {
-                if (value == null) return "";
-                return value.format(DateTimeFormatter.ofPattern("yyyy-MM"));
-            }
-        }).bind(Issue::getPublishedOn, Issue::setPublishedOn);
         binder.bindInstanceFields(this);
 
         comic.setItems(comics);

kontor-spring/src/main/java/de/thpeetz/kontor/common/views/MonthYearPicker.java

@@ -0,0 +1,95 @@
+package de.thpeetz.kontor.common.views;
+
+import com.vaadin.flow.component.*;
+import com.vaadin.flow.component.combobox.ComboBox;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.shared.Registration;
+import lombok.extern.slf4j.Slf4j;
+
+import java.time.LocalDate;
+import java.time.Month;
+import java.time.YearMonth;
+import java.time.ZoneId;
+import java.time.format.TextStyle;
+import java.util.List;
+import java.util.Locale;
+import java.util.stream.IntStream;
+
+@Route("date-picker-individual-input-fields")
+@Slf4j
+public class MonthYearPicker extends Div implements HasValue<HasValue.ValueChangeEvent<String>, String> {
+
+    private final ComboBox<Integer> yearPicker;
+    private final ComboBox<Month> monthPicker;
+
+    public MonthYearPicker() {
+        LocalDate now = LocalDate.now(ZoneId.systemDefault());
+        List<Integer> selectableYears = IntStream.range(1970, now.getYear()).boxed().toList();
+
+        yearPicker = new ComboBox<>("Jahr", selectableYears);
+        yearPicker.setWidth(6, Unit.EM);
+
+        monthPicker = new ComboBox<>("Monat", Month.values());
+        monthPicker.setItemLabelGenerator(m -> m.getDisplayName(TextStyle.FULL, Locale.getDefault()));
+        monthPicker.setWidth(9, Unit.EM);
+
+        add(new HorizontalLayout(yearPicker, monthPicker));
+    }
+
+    @Override
+    public void setValue(String value) {
+        log.info("MonthYearPicker.setValue({})", value);
+    }
+
+    public void setValue(YearMonth value) {
+        log.info("MonthYearPicker.setValue({})", value.toString());
+    }
+
+    @Override
+    public String getValue() {
+        if (this.getYearMonth() != null) {
+            return this.getYearMonth().toString();
+        }
+        return null;
+    }
+
+    public YearMonth getYearMonth() {
+        if (yearPicker.getValue() != null && monthPicker.getValue() != null) {
+            int year = yearPicker.getValue();
+            int month = monthPicker.getValue().getValue();
+            YearMonth result = YearMonth.of(year, month);
+            log.info("MonthYearPicker.getYearMonth({})", result);
+            return result;
+        } else {
+            log.info("MonthYearPicker.getYearMonth(null)");
+            return null;
+        }
+    }
+
+    @Override
+    public Registration addValueChangeListener(ValueChangeListener<? super ValueChangeEvent<String>> listener) {
+        return null;
+    }
+
+    @Override
+    public void setReadOnly(boolean readOnly) {
+
+    }
+
+    @Override
+    public boolean isReadOnly() {
+        return false;
+    }
+
+    @Override
+    public void setRequiredIndicatorVisible(boolean requiredIndicatorVisible) {
+
+    }
+
+    @Override
+    public boolean isRequiredIndicatorVisible() {
+        return false;
+    }
+}

kontor-spring/src/main/java/de/thpeetz/kontor/common/views/YearMonthConverter.java

@@ -0,0 +1,31 @@
+package de.thpeetz.kontor.common.views;
+
+import com.vaadin.flow.data.binder.Result;
+import com.vaadin.flow.data.binder.ValueContext;
+import com.vaadin.flow.data.converter.Converter;
+
+import java.time.*;
+import java.time.format.*;
+
+public class YearMonthConverter implements Converter<String, YearMonth> {
+    private MonthYearPicker monthYearPicker;
+
+    public YearMonthConverter(MonthYearPicker monthYearPicker) {
+        this.monthYearPicker = monthYearPicker;
+    }
+
+    @Override
+    public Result<YearMonth> convertToModel(String value, ValueContext context) {
+        try {
+            YearMonth result = this.monthYearPicker.getYearMonth();
+            return Result.ok(result);
+        } catch (DateTimeParseException e) {
+            return Result.error("invalid year-month format");
+        }
+    }
+
+    @Override
+    public String convertToPresentation(YearMonth value, ValueContext context) {
+        return monthYearPicker.getValue();
+    }
+}