feat: better monthly select

resources/ts/components/CronInput.vue

@@ -11,23 +11,23 @@ const valid = ref<boolean>(true);
 const props = defineProps<{ editMode: boolean }>();
 
 const cronType = ref<CronType>(CronType.MANUAL);
-const cronValue = ref<number>(0);
+const cronValue = ref<string>('0');
 
 function onCronChanged() {
     const data = parseCron(cron.value);
     rawCron.value = cron.value ?? DEFAULT_CRON;
     cronType.value = data.type;
-    cronValue.value = data.value;
+    cronValue.value = data.value.toFixed(0);
 }
 
 function updateCron() {
-    cron.value = getCron(cronType.value, cronValue.value, rawCron.value);
+    cron.value = getCron(cronType.value, parseInt(cronValue.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:
@@ -35,7 +35,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;
@@ -106,7 +106,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(24).keys())"
-                :key="`h${i}`"
+                :key="`h${i+1}`"
                 :value="i"
             >
                 {{ i.toFixed(0).padStart(2, "0") }}:00
@@ -120,7 +120,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`w${i}`"
+                :key="`w${i+1}`"
                 :value="i + 1"
             >
                 {{ $t(`cron.week.${i.toFixed(0)}`) }}
@@ -132,20 +132,35 @@ 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
-                v-for="i in Array.from(Array(31).keys())"
-                :key="`d${i}`"
-                :value="i + 1"
+                v-for="i in Array.from(Array(7).keys())"
+                :key="`d${-(i+1)}`"
+                :value="-(i + 1)"
             >
-                {{ i + 1
-                }}{{
-                    i % 10 == 0
-                        ? $t("cron.month.st")
-                        : i % 10 === 1
-                          ? $t("cron.month.nd")
-                          : i % 10 === 2
-                            ? $t("cron.month.rd")
-                            : $t("cron.month.th")
+                {{ $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)}`"
+                :value="-(i + 8)"
+            >
+                {{ $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}`"
+                :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])
                 }}
             </option>
         </select>