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

refactor: reduce responsability of individual parts

Browse Source
This commit is contained in:
klemek
2026-07-10 11:24:21 +02:00
parent f4425494f5
commit cb31d4e8af
7 changed files with 156 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/ts/components/CronInput.vue
+46 -87
View File
@@ -1,120 +1,79 @@
<script setup lang="ts">
import { ref, onBeforeMount, watch } from "vue";
import { CronExpressionParser } from 'cron-parser'
import { getCron, parseCron, validCron } from "@/lib/cron";
import { CronType } from "@/enums";
import { DEFAULT_CRON } from "@/constants";
const cron = defineModel<string|null>({ required: true });
const rawCron = ref<string>('0 0 * * *');
const rawCron = ref<string>(DEFAULT_CRON);
const valid = ref<boolean>(true);
const props = defineProps<{editMode: boolean}>();
enum CRON_OPTION {
ONE_TIME = 1,
EVERY_DAY = 2,
EVERY_WEEK = 3,
EVERY_MONTH = 4,
EVERY_YEAR = 5,
SPECIFIC = 6,
}
const cronType = ref<CronType>(CronType.ONE_TIME);
const cronValue = ref<number>(0);
const cronOption = ref<CRON_OPTION>(CRON_OPTION.ONE_TIME);
const cronValue = ref<number>(1);
function updateFromValue() {
let value: RegExpMatchArray | null;
if (cron.value === null) {
cronOption.value = CRON_OPTION.ONE_TIME;
} else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron.value)) !== null) {
cronOption.value = CRON_OPTION.EVERY_DAY;
cronValue.value = parseInt(value[1] ?? '');
} else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron.value)) !== null) {
cronOption.value = CRON_OPTION.EVERY_WEEK;
cronValue.value = parseInt(value[1] ?? '');
} else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron.value)) !== null) {
cronOption.value = CRON_OPTION.EVERY_MONTH;
cronValue.value = parseInt(value[1] ?? '');
} else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron.value)) !== null) {
cronOption.value = CRON_OPTION.EVERY_YEAR;
cronValue.value = parseInt(value[1] ?? '');
} else {
cronOption.value = CRON_OPTION.SPECIFIC;
}
rawCron.value = cron.value ?? '0 0 * * *';
function onCronChanged() {
const data = parseCron(cron.value);
rawCron.value = cron.value ?? DEFAULT_CRON;
cronType.value = data.type;
cronValue.value = data.value;
}
function updateCron() {
switch(cronOption.value) {
case CRON_OPTION.ONE_TIME:
cron.value = null;
break;
case CRON_OPTION.EVERY_DAY:
cron.value = `0 ${cronValue.value.toFixed(0)} * * *`;
break;
case CRON_OPTION.EVERY_WEEK:
cron.value = `0 0 * * ${cronValue.value.toFixed(0)}`;
break;
case CRON_OPTION.EVERY_MONTH:
cron.value = `0 0 ${cronValue.value.toFixed(0)} * *`;
break;
case CRON_OPTION.EVERY_YEAR:
cron.value = `0 0 1 ${cronValue.value.toFixed(0)} *`;
break;
case CRON_OPTION.SPECIFIC:
rawCron.value = cron.value ?? '0 0 * * *';
break;
}
cron.value = getCron(cronType.value, cronValue.value, rawCron.value);
}
function changecronOption() {
switch(cronOption.value) {
case CRON_OPTION.EVERY_DAY:
function onChangeCronType() {
switch(cronType.value) {
case CronType.EVERY_DAY:
cronValue.value = 0;
break;
case CRON_OPTION.EVERY_WEEK:
case CRON_OPTION.EVERY_MONTH:
case CRON_OPTION.EVERY_YEAR:
case CronType.EVERY_WEEK:
case CronType.EVERY_MONTH:
case CronType.EVERY_YEAR:
cronValue.value = 1;
break;
case CRON_OPTION.SPECIFIC:
cron.value ??= '0 0 * * *';
case CronType.SPECIFIC:
cron.value ??= DEFAULT_CRON;
break;
}
updateCron();
}
onBeforeMount(updateFromValue);
function onChangeCronValue() {
updateCron();
}
function onInputRawCron() {
valid.value = validCron(rawCron.value);
if (valid.value) {
updateCron();
}
}
onBeforeMount(onCronChanged);
watch(cron, () => {
if (!props.editMode) {
updateFromValue();
}
});
watch(cronValue, updateCron);
watch(rawCron, () => {
try {
CronExpressionParser.parse(rawCron.value);
valid.value = true;
cron.value = rawCron.value;
} catch {
valid.value = false;
onCronChanged();
}
});
</script>
<template>
<div class="flex gap-2">
<select v-model="cronOption" class="select" @change="changecronOption">
<option :value="CRON_OPTION.ONE_TIME">One time (do not repeat)</option>
<option :value="CRON_OPTION.EVERY_DAY">Every day at</option>
<option :value="CRON_OPTION.EVERY_WEEK">Every week on</option>
<option :value="CRON_OPTION.EVERY_MONTH">Every month on the</option>
<option :value="CRON_OPTION.EVERY_YEAR">Every year on</option>
<option :value="CRON_OPTION.SPECIFIC">Specific</option>
<select v-model="cronType" class="select" @change="onChangeCronType">
<option :value="CronType.ONE_TIME">One time (do not repeat)</option>
<option :value="CronType.EVERY_DAY">Every day at</option>
<option :value="CronType.EVERY_WEEK">Every week on</option>
<option :value="CronType.EVERY_MONTH">Every month on the</option>
<option :value="CronType.EVERY_YEAR">Every year on</option>
<option :value="CronType.SPECIFIC">Specific</option>
</select>
<select v-if="cronOption === CRON_OPTION.EVERY_DAY" v-model="cronValue" class="select">
<select v-if="cronType === CronType.EVERY_DAY" v-model="cronValue" class="select" @change="onChangeCronValue">
<option v-for="i in Array.from(Array(24).keys())" :key="`h${i}`" :value="i">{{ i.toFixed(0).padStart(2, '0') }}:00</option>
</select>
<select v-if="cronOption === CRON_OPTION.EVERY_WEEK" v-model="cronValue" class="select">
<select v-if="cronType === CronType.EVERY_WEEK" v-model="cronValue" class="select" @change="onChangeCronValue">
<option :value="1">Monday</option>
<option :value="2">Tuesday</option>
<option :value="3">Wednesday</option>
@@ -123,10 +82,10 @@ watch(rawCron, () => {
<option :value="6">Saturday</option>
<option :value="7">Sunday</option>
</select>
<select v-if="cronOption === CRON_OPTION.EVERY_MONTH" v-model="cronValue" class="select">
<select v-if="cronType === CronType.EVERY_MONTH" v-model="cronValue" class="select" @change="onChangeCronValue">
<option v-for="i in Array.from(Array(32).keys())" :key="`d${i}`" :value="i">{{i}}{{ i % 10 == 1 ? 'st' : (i % 10 === 2 ? 'nd': (i % 10 === 3 ? 'rd' : 'th')) }}</option>
</select>
<select v-if="cronOption === CRON_OPTION.EVERY_YEAR" v-model="cronValue" class="select">
<select v-if="cronType === CronType.EVERY_YEAR" v-model="cronValue" class="select" @change="onChangeCronValue">
<option :value="1">January</option>
<option :value="2">February</option>
<option :value="3">March</option>
@@ -140,6 +99,6 @@ watch(rawCron, () => {
<option :value="11">November</option>
<option :value="12">December</option>
</select>
<input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" />
<input v-if="cronType === CronType.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" @input="onInputRawCron" />
</div>
</template>