From 9081891d8fb79df2c6ff470a2967ff1bd46f86c8 Mon Sep 17 00:00:00 2001
From: Klemek <klemek.dev@proton.me>
Date: Wed, 29 Jul 2026 15:14:15 +0200
Subject: [PATCH] refator: separate cron input

---
 resources/ts/components/CronInput.vue | 84 +++++++++++++++++----------
 resources/ts/components/DateInput.vue | 26 +++++++++
 2 files changed, 78 insertions(+), 32 deletions(-)
 create mode 100644 resources/ts/components/DateInput.vue

diff --git a/resources/ts/components/CronInput.vue b/resources/ts/components/CronInput.vue
index 209b379..7b62a19 100644
--- a/resources/ts/components/CronInput.vue
+++ b/resources/ts/components/CronInput.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, watch } from "vue";
+import { ref, onBeforeMount, watch, defineAsyncComponent } from "vue";
 import { getCron, parseCron, validCron } from "@/lib/recurrence";
 import { CronType } from "@/enums";
+const DateInput = defineAsyncComponent(
+    () => import("@/components/DateInput.vue"),
+);
 
 const DEFAULT_CRON = "0 0 * * *";
 
@@ -11,7 +14,7 @@ const valid = ref<boolean>(true);
 const props = defineProps<{ editMode: boolean }>();
 
 const cronType = ref<CronType>(CronType.MANUAL);
-const cronValue = ref<string>('0');
+const cronValue = ref<string>("0");
 const cronDate = ref<Date>(new Date());
 
 function onCronChanged() {
@@ -23,13 +26,18 @@ function onCronChanged() {
 }
 
 function updateCron() {
-    cron.value = getCron(cronType.value, parseInt(cronValue.value), cronDate.value, rawCron.value);
+    cron.value = getCron(
+        cronType.value,
+        parseInt(cronValue.value),
+        cronDate.value,
+        rawCron.value,
+    );
 }
 
 function onChangeCronType() {
     switch (cronType.value) {
         case CronType.EVERY_DAY:
-            cronValue.value = '0';
+            cronValue.value = "0";
             break;
         case CronType.EVERY_WEEK:
         case CronType.EVERY_MONTH:
@@ -37,7 +45,7 @@ function onChangeCronType() {
         case CronType.EVERY_N_DAYS:
         case CronType.EVERY_N_WEEKS:
         case CronType.EVERY_N_MONTHS:
-            cronValue.value = '1';
+            cronValue.value = "1";
             break;
         case CronType.CUSTOM:
             cron.value ??= DEFAULT_CRON;
@@ -50,8 +58,7 @@ function onChangeCronValue() {
     updateCron();
 }
 
-function onChangeCronDate(event: InputEvent) {
-    cronDate.value = new Date((event.target as HTMLInputElement).value);
+function onChangeCronDate() {
     updateCron();
 }
 
@@ -73,7 +80,11 @@ watch(cron, () => {
 
 <template>
     <div class="flex gap-2 flex-wrap">
-        <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
+        <select
+            v-model="cronType"
+            class="select flex-1"
+            @change="onChangeCronType"
+        >
             <option :value="CronType.MANUAL">
                 {{ $t("cron.type.manual") }}
             </option>
@@ -113,7 +124,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(24).keys())"
-                :key="`h${i+1}`"
+                :key="`h${i + 1}`"
                 :value="i"
             >
                 {{ i.toFixed(0).padStart(2, "0") }}:00
@@ -127,7 +138,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`w${i+1}`"
+                :key="`w${i + 1}`"
                 :value="i + 1"
             >
                 {{ $t(`cron.week.${i.toFixed(0)}`) }}
@@ -139,35 +150,37 @@ watch(cron, () => {
             class="select flex-1"
             @change="onChangeCronValue"
         >
-            <option :value="1">{{ $t('cron.month.first_day') }}</option>
-            <option :value="32">{{ $t('cron.month.last_day') }}</option>
+            <option :value="1">{{ $t("cron.month.first_day") }}</option>
+            <option :value="32">{{ $t("cron.month.last_day") }}</option>
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`d${-(i+1)}`"
+                :key="`d${-(i + 1)}`"
                 :value="-(i + 1)"
             >
-                {{ $t("cron.month.first") }} {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+                {{ $t("cron.month.first") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
             </option>
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`d${-(i+8)}`"
+                :key="`d${-(i + 8)}`"
                 :value="-(i + 8)"
             >
-                {{ $t("cron.month.last") }} {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+                {{ $t("cron.month.last") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
             </option>
             <option
                 v-for="i in Array.from(Array(30).keys())"
-                :key="`d${i+2}`"
+                :key="`d${i + 2}`"
                 :value="i + 2"
             >
                 {{
-                    (i % 10 == 9 && i !== 9)
-                        ? $t("cron.month.st", [i+2])
-                        : (i % 10 === 0 && i !== 10)
-                          ? $t("cron.month.nd", [i+2])
-                          : (i % 10 === 1 && i !== 11)
-                            ? $t("cron.month.rd", [i+2])
-                            : $t("cron.month.th", [i+2])
+                    i % 10 == 9 && i !== 9
+                        ? $t("cron.month.st", [i + 2])
+                        : i % 10 === 0 && i !== 10
+                          ? $t("cron.month.nd", [i + 2])
+                          : i % 10 === 1 && i !== 11
+                            ? $t("cron.month.rd", [i + 2])
+                            : $t("cron.month.th", [i + 2])
                 }}
             </option>
         </select>
@@ -194,23 +207,30 @@ watch(cron, () => {
             @input="onInputRawCron"
         />
         <input
-            v-if="cronType === CronType.EVERY_N_DAYS || cronType === CronType.EVERY_N_WEEKS || cronType === CronType.EVERY_N_MONTHS"
+            v-if="
+                cronType === CronType.EVERY_N_DAYS ||
+                cronType === CronType.EVERY_N_WEEKS ||
+                cronType === CronType.EVERY_N_MONTHS
+            "
             v-model="cronValue"
             type="number"
             min="1"
             step="1"
             class="input font-mono flex-1"
-            @input="onChangeCronValue"
+            @change="onChangeCronValue"
         />
-        <label class="label  flex-1 basis-full">
+        <label class="label flex-1 basis-full">
             {{ $t("cron.rrule_start") }}
-            <input
-                v-if="cronType === CronType.EVERY_N_DAYS || cronType === CronType.EVERY_N_WEEKS || cronType === CronType.EVERY_N_MONTHS"
-                :value="cronDate.toISOString().substring(0, 10)"
+            <date-input
+                v-if="
+                    cronType === CronType.EVERY_N_DAYS ||
+                    cronType === CronType.EVERY_N_WEEKS ||
+                    cronType === CronType.EVERY_N_MONTHS
+                "
+                v-model="cronDate"
                 required
-                type="date"
                 class="input font-mono"
-                @input="onChangeCronDate"
+                @change="onChangeCronDate"
             />
         </label>
     </div>
diff --git a/resources/ts/components/DateInput.vue b/resources/ts/components/DateInput.vue
new file mode 100644
index 0000000..73c3280
--- /dev/null
+++ b/resources/ts/components/DateInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const emit = defineEmits<(e: "input"|"change", value: Date) => void>();
+
+const date = defineModel<Date>({ required: true });
+
+function onInput(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('input', date.value);
+}
+
+function onChange(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('change', date.value);
+}
+</script>
+
+<template>
+    <input
+        :value="date.toISOString().substring(0, 10)"
+        type="date"
+        @input="onInput"
+        @change="onChange"
+    />
+</template>