@hakumi-dev/hakumi-components 0.1.17-pre → 0.1.19-pre

package/app/javascript/hakumi_components/controllers/hakumi/date_picker_controller.js

@@ -169,45 +169,19 @@ export default class extends RegistryController {
   initializeTimeFromInput() {
     // Use hidden input for ISO value (24-hour format)
     const currentValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
-    const timePart = currentValue.match(/(\d{2}):(\d{2})(?::(\d{2}))?$/)
+    const timePart = this.extractTimePart(currentValue)
 
     if (timePart) {
-      let hour = parseInt(timePart[1], 10)
-      let period = undefined
-
-      // Convert 24h to 12h if needed
-      if (this.hasPeriodOptionTarget) {
-        if (hour === 0) {
-          hour = 12
-          period = "AM"
-        } else if (hour < 12) {
-          period = "AM"
-        } else if (hour === 12) {
-          period = "PM"
-        } else {
-          hour -= 12
-          period = "PM"
-        }
-      }
-
-      this.selectedTime = {
-        hour: String(hour).padStart(2, "0"),
-        minute: timePart[2],
-        second: timePart[3] || "00"
-      }
-
-      if (period) {
-        this.selectedTime.period = period
-      }
+      this.selectedTime = this.selectedTimeFromTimePart(timePart, this.hasPeriodOptionTarget)
     } else {
-      this.selectedTime = { hour: "00", minute: "00", second: "00" }
+      this.selectedTime = this.defaultSelectedTime()
     }
 
     // Also initialize selectedDate if we have a date in the input
     if (currentValue) {
-      const datePart = currentValue.match(/^(\d{4}-\d{2}-\d{2})/)
+      const datePart = this.extractDatePart(currentValue)
       if (datePart) {
-        this.selectedDate = DateHelper.parseDataDate(datePart[1]).toDate()
+        this.selectedDate = DateHelper.parseDataDate(datePart).toDate()
       }
     }
 
@@ -257,7 +231,7 @@ export default class extends RegistryController {
     const inputValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
 
 
-    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    const calendars = this.calendarElements()
 
     calendars.forEach(calendarEl => {
 
@@ -287,41 +261,60 @@ export default class extends RegistryController {
 
     try {
       switch (picker) {
-        case "quarter": {
-          const match = value.match(/Q(\d) (\d{4})/)
-          if (!match) return null
-          const quarter = parseInt(match[1], 10)
-          const year = parseInt(match[2], 10)
-          const month = (quarter - 1) * 3 + 1
-          return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
-        }
-        case "year": {
-          const year = parseInt(value, 10)
-          if (isNaN(year)) return null
-          return DateHelper.parseDataDate(`${year}-01-01`).toDate()
-        }
-        case "month": {
-          const [year, month] = value.split("-").map(n => parseInt(n, 10))
-          if (isNaN(year) || isNaN(month)) return null
-          return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
-        }
-        case "week": {
-          const parts = value.split("-W")
-          const year = parseInt(parts[0], 10)
-          const week = parseInt(parts[1], 10)
-          if (isNaN(year) || isNaN(week)) return null
-          return DateHelper.getMondayOfISOWeek(year, week).toDate()
-        }
-        default: {
-          const parsed = DateHelper.parseDataDate(value)
-          return parsed.isValid() ? parsed.toDate() : null
-        }
+        case "quarter":
+          return this.parseQuarterInputValue(value)
+        case "year":
+          return this.parseYearInputValue(value)
+        case "month":
+          return this.parseMonthInputValue(value)
+        case "week":
+          return this.parseWeekInputValue(value)
+        default:
+          return this.parseDateInputValue(value)
       }
     } catch (e) {
       return null
     }
   }
 
+  parseQuarterInputValue(value) {
+    const match = value.match(/Q(\d) (\d{4})/)
+    if (!match) return null
+
+    const quarter = parseInt(match[1], 10)
+    const year = parseInt(match[2], 10)
+    const month = (quarter - 1) * 3 + 1
+    return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
+  }
+
+  parseYearInputValue(value) {
+    const year = parseInt(value, 10)
+    if (isNaN(year)) return null
+
+    return DateHelper.parseDataDate(`${year}-01-01`).toDate()
+  }
+
+  parseMonthInputValue(value) {
+    const [year, month] = value.split("-").map(n => parseInt(n, 10))
+    if (isNaN(year) || isNaN(month)) return null
+
+    return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
+  }
+
+  parseWeekInputValue(value) {
+    const parts = value.split("-W")
+    const year = parseInt(parts[0], 10)
+    const week = parseInt(parts[1], 10)
+    if (isNaN(year) || isNaN(week)) return null
+
+    return DateHelper.getMondayOfISOWeek(year, week).toDate()
+  }
+
+  parseDateInputValue(value) {
+    const parsed = DateHelper.parseDataDate(value)
+    return parsed.isValid() ? parsed.toDate() : null
+  }
+
   close() {
     if (!this.isOpen) return
 
@@ -348,7 +341,7 @@ export default class extends RegistryController {
   updateRangeVisuals() {
     if (!this.rangeValue || !this.hasPanelTarget) return
 
-    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    const calendars = this.calendarElements()
 
     calendars.forEach(calendar => {
       const api = calendar.hakumiComponent?.api
@@ -370,7 +363,7 @@ export default class extends RegistryController {
   clearRangeVisuals() {
     if (!this.hasPanelTarget) return
 
-    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    const calendars = this.calendarElements()
     calendars.forEach(calendar => {
       const api = calendar.hakumiComponent?.api
       if (api) api.clearRange()
@@ -380,44 +373,25 @@ export default class extends RegistryController {
   syncRangeCalendars() {
     if (!this.rangeValue || !this.hasPanelTarget) return
 
-    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
-    if (calendars.length !== 2) return
-
-    const startCalendar = calendars[0]
-    const endCalendar = calendars[1]
-
-    const startApi = startCalendar.hakumiComponent?.api
-    const endApi = endCalendar.hakumiComponent?.api
+    const rangeCalendars = this.rangeCalendarElements()
+    if (!rangeCalendars) return
 
+    const [startCalendar, endCalendar] = rangeCalendars
+    const [startApi, endApi] = this.calendarApis(startCalendar, endCalendar)
     if (!startApi || !endApi) return
 
     // Get current month/year from first calendar
     const startDate = startApi.getValue()
-    const startMonth = startDate.getMonth()
-    const startYear = startDate.getFullYear()
-
-    // Calculate next month for second calendar
-    let endMonth = startMonth + 1
-    let endYear = startYear
-
-    if (endMonth > 11) {
-      endMonth = 0
-      endYear += 1
-    }
-
-    // Set second calendar to next month
-    const endDate = new Date(endYear, endMonth, 1)
-    endApi.setValue(endDate, { navigate: true })
+    endApi.setValue(this.monthOffsetDate(startDate, 1), { navigate: true })
   }
 
   setupRangeCalendarListeners() {
     if (!this.rangeValue || !this.hasPanelTarget) return
 
-    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
-    if (calendars.length !== 2) return
+    const rangeCalendars = this.rangeCalendarElements()
+    if (!rangeCalendars) return
 
-    const startCalendar = calendars[0]
-    const endCalendar = calendars[1]
+    const [startCalendar, endCalendar] = rangeCalendars
 
     // Remove previous listeners if they exist
     if (this.boundSyncFromStart) {
@@ -428,68 +402,15 @@ export default class extends RegistryController {
     }
 
     // Create listeners
-    this.boundSyncFromStart = (event) => {
-      const startApi = startCalendar.hakumiComponent?.api
-      const endApi = endCalendar.hakumiComponent?.api
-      if (!startApi || !endApi) return
-
-      const startDate = startApi.getValue()
-      const startMonth = startDate.getMonth()
-      const startYear = startDate.getFullYear()
-
-      // Calculate next month
-      let endMonth = startMonth + 1
-      let endYear = startYear
-
-      if (endMonth > 11) {
-        endMonth = 0
-        endYear += 1
-      }
-
-      const endDate = endApi.getValue()
-      const currentEndMonth = endDate.getMonth()
-      const currentEndYear = endDate.getFullYear()
-
-      // Only sync if second calendar is not already on the correct month
-      if (currentEndMonth !== endMonth || currentEndYear !== endYear) {
-        endApi.setValue(new Date(endYear, endMonth, 1), { navigate: true })
-      }
-    }
-
-    this.boundSyncFromEnd = (event) => {
-      const startApi = startCalendar.hakumiComponent?.api
-      const endApi = endCalendar.hakumiComponent?.api
-      if (!startApi || !endApi) return
-
-      const endDate = endApi.getValue()
-      const endMonth = endDate.getMonth()
-      const endYear = endDate.getFullYear()
-
-      // Calculate previous month
-      let startMonth = endMonth - 1
-      let startYear = endYear
-
-      if (startMonth < 0) {
-        startMonth = 11
-        startYear -= 1
-      }
-
-      const startDate = startApi.getValue()
-      const currentStartMonth = startDate.getMonth()
-      const currentStartYear = startDate.getFullYear()
-
-      // Only sync if first calendar is not already on the correct month
-      if (currentStartMonth !== startMonth || currentStartYear !== startYear) {
-        startApi.setValue(new Date(startYear, startMonth, 1), { navigate: true })
-      }
-    }
+    this.boundSyncFromStart = () => this.syncAdjacentRangeCalendar(startCalendar, endCalendar, 1)
+    this.boundSyncFromEnd = () => this.syncAdjacentRangeCalendar(endCalendar, startCalendar, -1)
 
     // Hover listener
     this.boundHandleHover = (event) => {
       const hoveredDate = event.detail?.date
       if (!hoveredDate) return
 
-      const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+      const calendars = this.calendarElements()
       calendars.forEach(calendar => {
         const api = calendar.hakumiComponent?.api
         if (api) {
@@ -498,13 +419,61 @@ export default class extends RegistryController {
       })
     }
 
-    // Agregar los listeners
+    // Add the listeners
     startCalendar.addEventListener("hakumi--calendar:change", this.boundSyncFromStart)
     endCalendar.addEventListener("hakumi--calendar:change", this.boundSyncFromEnd)
     startCalendar.addEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
     endCalendar.addEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
   }
 
+  calendarElements() {
+    if (!this.hasPanelTarget) return []
+
+    return this.panelTarget.querySelectorAll(".hakumi-calendar")
+  }
+
+  rangeCalendarElements() {
+    const calendars = this.calendarElements()
+    if (calendars.length !== 2) return null
+
+    return [calendars[0], calendars[1]]
+  }
+
+  calendarApis(...calendars) {
+    return calendars.map(calendar => calendar.hakumiComponent?.api)
+  }
+
+  monthOffsetDate(date, offset) {
+    let month = date.getMonth() + offset
+    let year = date.getFullYear()
+
+    if (month > 11) {
+      month = 0
+      year += 1
+    } else if (month < 0) {
+      month = 11
+      year -= 1
+    }
+
+    return new Date(year, month, 1)
+  }
+
+  syncAdjacentRangeCalendar(sourceCalendar, targetCalendar, offset) {
+    const [sourceApi, targetApi] = this.calendarApis(sourceCalendar, targetCalendar)
+    if (!sourceApi || !targetApi) return
+
+    const targetDate = this.monthOffsetDate(sourceApi.getValue(), offset)
+    const currentTargetDate = targetApi.getValue()
+
+    // Only sync if paired calendar is not already on the correct month
+    if (
+      currentTargetDate.getMonth() !== targetDate.getMonth() ||
+      currentTargetDate.getFullYear() !== targetDate.getFullYear()
+    ) {
+      targetApi.setValue(targetDate, { navigate: true })
+    }
+  }
+
   clear(event) {
     if (event) event.stopPropagation()
     if (this.disabledValue) return
@@ -527,6 +496,8 @@ export default class extends RegistryController {
     if (this.disabledValue) return
     if (this.rangeValue && this.hasStartInputTarget) {
       this.startInputTarget.focus()
+    } else if (this.hasDisplayInputTarget) {
+      this.displayInputTarget.focus()
     } else if (this.hasInputTarget) {
       this.inputTarget.focus()
     }
@@ -536,6 +507,8 @@ export default class extends RegistryController {
     if (this.rangeValue) {
       if (this.hasStartInputTarget) this.startInputTarget.blur()
       if (this.hasEndInputTarget) this.endInputTarget.blur()
+    } else if (this.hasDisplayInputTarget) {
+      this.displayInputTarget.blur()
     } else if (this.hasInputTarget) {
       this.inputTarget.blur()
     }
@@ -577,124 +550,96 @@ export default class extends RegistryController {
     if (!(date instanceof Date)) return
     if (this.isDateDisabled(date)) return
 
-    // When show_time is enabled, don't close panel or update input immediately
-    // Store the selected date and wait for OK button
     if (this.showTimeValue) {
-      this.selectedDate = date
-      // Initialize time from current value or defaults
-      if (!this.selectedTime) {
-        const currentValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
-        const timePart = currentValue.match(/(\d{2}):(\d{2})(?::(\d{2}))?$/)
-        if (timePart) {
-          this.selectedTime = {
-            hour: timePart[1],
-            minute: timePart[2],
-            second: timePart[3] || "00"
-          }
-        } else {
-          this.selectedTime = { hour: "00", minute: "00", second: "00" }
-        }
-        this.updateTimeSelection()
-      }
+      this.handleDateTimeDateSelection(date)
       return
     }
 
     const formatted = this.formatDate(date)
 
     if (this.rangeValue) {
-      // New visual range selection logic
-      if (!this.tempRangeStart) {
-        // First selection: set range start
-        this.tempRangeStart = date
-        this.tempRangeEnd = null
-
-        // Update start input
-        if (this.hasStartInputTarget) {
-          this.startInputTarget.value = formatted
-        }
-
-        // Clear end input
-        if (this.hasEndInputTarget) {
-          this.endInputTarget.value = ""
-        }
+      this.handleRangeDateSelection(date, formatted)
+      return  // Early return for ranges
+    }
 
-        // Update visual in both calendars
-        this.updateRangeVisuals()
+    // Code for non-range pickers
+    // Use setValue to update both hidden and display inputs
+    this.setValue(formatted)
+    this.syncCalendarWithInput()
+    this.updateClearVisibility()
+    this.close()
+  }
 
-        this.dispatchChangeEvent({
-          startValue: formatted,
-          endValue: ""
-        })
-      } else if (!this.tempRangeEnd) {
-        // Second selection: set range end
-        const clickedDate = date
+  handleDateTimeDateSelection(date) {
+    // Store the selected date and wait for OK button.
+    this.selectedDate = date
 
-        // If clicked date is before start, restart selection
-        if (clickedDate < this.tempRangeStart) {
-          this.tempRangeStart = clickedDate
-          this.tempRangeEnd = null
+    if (!this.selectedTime) {
+      const currentValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
+      const timePart = this.extractTimePart(currentValue)
+      if (timePart) {
+        this.selectedTime = this.selectedTimeFromTimePart(timePart)
+      } else {
+        this.selectedTime = this.defaultSelectedTime()
+      }
+      this.updateTimeSelection()
+    }
+  }
 
-          if (this.hasStartInputTarget) {
-            this.startInputTarget.value = formatted
-          }
-          if (this.hasEndInputTarget) {
-            this.endInputTarget.value = ""
-          }
+  handleRangeDateSelection(date, formatted) {
+    if (!this.tempRangeStart) {
+      this.startRangeSelection(date, formatted)
+    } else if (!this.tempRangeEnd) {
+      if (date < this.tempRangeStart) {
+        this.restartRangeSelection(date, formatted)
+      } else {
+        this.completeRangeSelection(date, formatted)
+      }
+    } else {
+      this.restartRangeSelection(date, formatted)
+    }
 
-          this.updateRangeVisuals()
+    this.updateClearVisibility()
+  }
 
-          this.dispatchChangeEvent({
-            startValue: formatted,
-            endValue: ""
-          })
-        } else {
-          // Complete the range
-          this.tempRangeEnd = clickedDate
+  startRangeSelection(date, formatted) {
+    this.tempRangeStart = date
+    this.tempRangeEnd = null
 
-          if (this.hasEndInputTarget) {
-            this.endInputTarget.value = formatted
-          }
+    if (this.hasStartInputTarget) {
+      this.startInputTarget.value = formatted
+    }
 
-          this.updateRangeVisuals()
+    if (this.hasEndInputTarget) {
+      this.endInputTarget.value = ""
+    }
 
-          this.dispatchChangeEvent({
-            startValue: this.hasStartInputTarget ? this.startInputTarget.value : "",
-            endValue: formatted
-          })
+    this.updateRangeVisuals()
 
-          this.updateClearVisibility()
+    this.dispatchChangeEvent({
+      startValue: formatted,
+      endValue: ""
+    })
+  }
 
-          // Close picker after completing selection
-          this.close()
-        }
-      } else {
-        // Already have a complete range, restart with new selection
-        this.tempRangeStart = date
-        this.tempRangeEnd = null
+  restartRangeSelection(date, formatted) {
+    this.startRangeSelection(date, formatted)
+  }
 
-        if (this.hasStartInputTarget) {
-          this.startInputTarget.value = formatted
-        }
-        if (this.hasEndInputTarget) {
-          this.endInputTarget.value = ""
-        }
+  completeRangeSelection(date, formatted) {
+    this.tempRangeEnd = date
 
-        this.updateRangeVisuals()
+    if (this.hasEndInputTarget) {
+      this.endInputTarget.value = formatted
+    }
 
-        this.dispatchChangeEvent({
-          startValue: formatted,
-          endValue: ""
-        })
-      }
+    this.updateRangeVisuals()
 
-      this.updateClearVisibility()
-      return  // Early return for ranges
-    }
+    this.dispatchChangeEvent({
+      startValue: this.hasStartInputTarget ? this.startInputTarget.value : "",
+      endValue: formatted
+    })
 
-    // Code for non-range pickers
-    // Use setValue to update both hidden and display inputs
-    this.setValue(formatted)
-    this.syncCalendarWithInput()
     this.updateClearVisibility()
     this.close()
   }
@@ -738,33 +683,98 @@ export default class extends RegistryController {
 
     switch (picker) {
       case "year":
-        return String(date.getFullYear())
+        return this.formatYearValue(date)
 
       case "month":
-        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`
+        return this.formatMonthValue(date)
 
-      case "week": {
-        const week = DateHelper.getISOWeek(date)
-        const weekYear = DateHelper.getISOWeekYear(date)
-        return `${weekYear}-W${String(week).padStart(2, "0")}`
-      }
+      case "week":
+        return this.formatWeekValue(date)
 
-      case "quarter": {
-        const quarter = Math.floor(date.getMonth() / 3) + 1
-        return `Q${quarter} ${date.getFullYear()}`
-      }
+      case "quarter":
+        return this.formatQuarterValue(date)
 
-      default: {
-        const dateStr = DateHelper.formatDataDate(date)
-        if (time && this.showTimeValue) {
-          const timeStr = this.showSecondsValue
-            ? `${time.hour}:${time.minute}:${time.second}`
-            : `${time.hour}:${time.minute}`
-          return `${dateStr} ${timeStr}`
-        }
-        return dateStr
+      default:
+        return this.formatDateValue(date, time)
+    }
+  }
+
+  formatYearValue(date) {
+    return String(date.getFullYear())
+  }
+
+  formatMonthValue(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`
+  }
+
+  formatWeekValue(date) {
+    const week = DateHelper.getISOWeek(date)
+    const weekYear = DateHelper.getISOWeekYear(date)
+    return `${weekYear}-W${String(week).padStart(2, "0")}`
+  }
+
+  formatQuarterValue(date) {
+    const quarter = Math.floor(date.getMonth() / 3) + 1
+    return `Q${quarter} ${date.getFullYear()}`
+  }
+
+  formatDateValue(date, time = null) {
+    const dateStr = DateHelper.formatDataDate(date)
+    if (time && this.showTimeValue) {
+      return `${dateStr} ${this.formatTimeValue(time)}`
+    }
+    return dateStr
+  }
+
+  formatTimeValue(time) {
+    return this.showSecondsValue
+      ? `${time.hour}:${time.minute}:${time.second}`
+      : `${time.hour}:${time.minute}`
+  }
+
+  extractDatePart(value) {
+    const datePart = value.match(/^(\d{4}-\d{2}-\d{2})/)
+    return datePart?.[1] || null
+  }
+
+  extractTimePart(value) {
+    return value.match(/(\d{2}):(\d{2})(?::(\d{2}))?$/)
+  }
+
+  selectedTimeFromTimePart(timePart, convertToPeriod = false) {
+    let hour = parseInt(timePart[1], 10)
+    let period = undefined
+
+    // Convert 24h to 12h if needed
+    if (convertToPeriod) {
+      if (hour === 0) {
+        hour = 12
+        period = "AM"
+      } else if (hour < 12) {
+        period = "AM"
+      } else if (hour === 12) {
+        period = "PM"
+      } else {
+        hour -= 12
+        period = "PM"
       }
     }
+
+    const selectedTime = {
+      hour: String(hour).padStart(2, "0"),
+      minute: timePart[2],
+      second: timePart[3] || "00"
+    }
+
+    if (period) {
+      selectedTime.period = period
+    }
+
+    return selectedTime
+  }
+
+  defaultSelectedTime() {
+    return { hour: "00", minute: "00", second: "00" }
   }
 
   handleClickOutside(event) {
@@ -838,6 +848,7 @@ export default class extends RegistryController {
 
   setNow() {
     const now = new Date()
+    if (this.isDateDisabled(now)) return
 
     // Set both selected date and time
     this.selectedDate = now
@@ -869,6 +880,7 @@ export default class extends RegistryController {
       if (!selectedDateStr) return
       date = DateHelper.parseDataDate(selectedDateStr).toDate()
     }
+    if (this.isDateDisabled(date)) return
 
     // Combine date and time
     const time = this.selectedTime || { hour: "00", minute: "00", second: "00" }