perf: retrieve a range of months at once

Author: javier-godoy

src/main/java/com/flowingcode/addons/ycalendar/DatePickerEx.java

@@ -74,16 +74,26 @@ public void refreshAll() {
   }
 
   @ClientCallable
-  private JsonObject fetchStyles(String yearMonthStr) {
-    YearMonth yearMonth = YearMonth.parse(yearMonthStr);
+  private JsonObject fetchStyles(String minStr, String maxStr) {
+    JsonObject result = Json.createObject();
+    YearMonth min = YearMonth.parse(minStr);
+    YearMonth max = YearMonth.parse(maxStr);
+    for (YearMonth m = min; m.compareTo(max) <= 0; m = m.plusMonths(1)) {
+      String key = m.toString();
+      getStyles(m).ifPresent(styles -> result.put(key, styles));
+    }
+    return result;
+  }
+
+  private Optional<JsonObject> getStyles(YearMonth yearMonth) {
     JsonObject monthStyles = Json.createObject();
     for (int i = 1, n = yearMonth.lengthOfMonth(); i <= n; i++) {
       LocalDate date = yearMonth.atDay(i);
       Optional.ofNullable(classNameGenerator).map(g -> g.apply(date)).ifPresent(className -> {
         monthStyles.put(Integer.toString(date.getDayOfMonth()), className);
       });
     }
-    return monthStyles;
+    return monthStyles.keys().length > 0 ? Optional.of(monthStyles) : Optional.empty();
   }
 
 }

src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js

@@ -47,15 +47,43 @@ export class FcDatePicker extends DatePicker {
         }
     };
 
-    const _getStyle = key => {
-        return this._styles[key] || (this._styles[key] = this.$server.fetchStyles(key));
+    const _getStyle = month => {
+        const tostr = date => date.toISOString().substr(0,7);
+        const add   = (date, delta) => new Date(date.getFullYear(), date.getMonth()+delta, 1);
+        
+        const key = tostr(month);
+        
+        if (!this._styles[key]) {
+            let min = month;
+            let max = month;
+            const N = 50;
+            for (let i=0;i<N;i++) {
+                min=add(min,-1);
+                if(this._styles[tostr(min)]) {min=add(min,+1); break;}
+            }
+            for (let i=0;i<N;i++) {
+                max=add(max,+1);
+                if(this._styles[tostr(max)]) {max=add(max,-1); break;}
+            }
+            
+            const fetched = this.$server.fetchStyles(tostr(min), tostr(max)).catch(err => {
+                console.error('fetchStyles '+tostr(min)+' '+tostr(max)+' failed', err);
+                return {};
+            });
+            for (let m=min;m<=max;m=add(m,1)) {
+                const k = tostr(m);
+                this._styles[k] = new Promise(resolve => {
+                    fetched.then(styles=>resolve(styles[k] || {}));
+                });
+            }
+        }
+        return this._styles[key];
     }
 
     const _updateMonthStyles = function(element) {
         const month = element.month;
-        const key   = month.toISOString().substr(0,7);
         _clearStyles.call(element);
-        _getStyle(key).then(styles=>setTimeout(()=>{
+        _getStyle(month).then(styles=>setTimeout(()=>{
             if (element.month===month) {
                 for (let i in styles) {
                     _setStyleForDay.call(element,i,styles[i]);
@@ -77,7 +105,7 @@ export class FcDatePicker extends DatePicker {
                         setTimeout(()=> _updateMonthStyles(calendar));
                     }
                 });
-                return calendar;
+                return calendar; 
             }
         }
     };