klemek/tout-doux
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

refator: separate cron input

Browse Source
This commit is contained in:
klemek
2026-07-29 15:14:15 +02:00
parent 9b6d43253e
commit 9081891d8f
2 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/ts/components/CronInput.vue
+52 -32
View File
@@ -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>
resources/ts/components/DateInput.vue
+26
View File
@@ -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>